/* ==========================================================================
   Just Name IT theme: Home (F-0010)
   --------------------------------------------------------------------------
   Loaded on the front page only (inc/assets.php, PAGE_STYLES), and in the
   editor together with every other page stylesheet. So every selector names
   one of Home's own sections (.section-hero-home, .section-services--home,
   .section-customers, .section-latest-news, .section-about); check_design.py
   fails on any other (F-0011 review S2).

   Ported from design/system/components.css (.hero, .motif, .keywords,
   .customers, .tagline, .jobs) and proposal C's Home (.split, .about__lead).
   Every animation and transition is inside the Motion block at the end, and
   the hero's entrance also needs JavaScript (the `js` class on <html>): with
   "reduce motion" or without JavaScript the hero is static (AC2).
   ========================================================================== */

/* ---------- Hero (.hero): text, and the aside with the motif and keywords ---------- */
.section.section-hero-home {
	padding-block: var(--space-70) var(--space-80);
}
.section-hero-home .section-hero-home__grid {
	gap: var(--space-70);
	align-items: flex-end;
	margin-block: 0;
}
.section-hero-home .section-hero-home__text > * {
	margin-block: 0;
}
.section-hero-home .section-hero-home__text > h1 {
	margin-block-end: var(--space-50);
}
.section-hero-home .section-hero-home__text .eyebrow {
	margin-block-end: var(--space-40);
}
.section-hero-home h1 {
	max-width: 15ch;
	margin-block: 0 var(--space-50);
	font-size: var(--fs-display);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-display);
	line-height: var(--line-height-display);
	color: var(--color-primary);
	overflow-wrap: break-word;
}
.section-hero-home .section-hero-home__text .lead {
	max-width: 38ch;
	font-size: var(--fs-medium);
}
.section-hero-home .section-hero-home__text .wp-block-buttons {
	margin-block-start: var(--space-60);
}

/* The seasonal greeting (F-0037, components.css .greeting): one line of the
   editor's plain text, printed by the server directly after the buttons
   (inc/seasons.php), never a heading, link or band. The same in every
   season. This specificity beats `.section-hero-home__text > *`. */
.section-hero-home .section-hero-home__text .greeting {
	max-width: 40ch;
	margin-block-start: var(--space-60);
	padding-inline-start: var(--space-40);
	border-inline-start: 2px solid var(--color-primary);
	color: var(--color-primary);
	font-size: var(--fs-base);
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.section-hero-home .section-hero-home__aside {
	display: flex;
	flex-direction: column;
}
.section-hero-home .section-hero-home__aside > * {
	margin-block: 0;
}
/* The motif is decoration from the server (inc/home.php), aria-hidden. */
.section-hero-home .motif {
	align-self: flex-start;
	width: 9rem;
	height: auto;
	margin-block-end: var(--space-60);
	overflow: visible;
}
/* The outline (.motif__line) is in sections.css, shared with the page head. */
.section-hero-home .section-hero-home__aside-title {
	padding-block-start: var(--space-40);
	border-top: 2px solid var(--color-primary);
	font-size: var(--fs-small);
	color: var(--color-muted);
}
.section-hero-home .section-hero-home__aside .section-hero-home__aside-title {
	margin-block-end: var(--space-30);
}
/* A static list: nothing rotates (AC2). The marker is the official symbol. */
.section-hero-home .keywords {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fs-medium);
	letter-spacing: -0.01em;
}
.section-hero-home .keywords > li {
	margin: 0;
	padding-block: var(--space-20);
	border-bottom: 1px solid var(--color-border);
}
.section-hero-home .keywords > li::before {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.6em;
	margin-right: 0.6em;
	background: url("../../images/symbol-blue.svg") no-repeat center / contain;
}
@media (min-width: 48em) {
	.section-hero-home .motif { width: 12rem; }
}
@media (min-width: 64em) {
	.section.section-hero-home { padding-block: var(--space-80) var(--space-100); }
	.section-hero-home .section-hero-home__grid { gap: var(--space-90); }
	/* 7fr 4fr, as the design system's .hero__grid. The selectors outweigh
	   core's equal-width columns rule. */
	.section-hero-home .section-hero-home__grid > .wp-block-column.section-hero-home__text { flex: 7 1 0; }
	.section-hero-home .section-hero-home__grid > .wp-block-column.section-hero-home__aside { flex: 4 1 0; }
	.section-hero-home .motif { align-self: flex-end; width: 14rem; }
}

/* ---------- Service cards on Home: the head with a link, "Läs mer" ---------- */
.section.section-services--home { padding-block: var(--space-70); }
.section-services--home .services { margin-block-start: 0; }
/* "Läs mer" is only a visual cue (hem.md): the card's one link is its title,
   stretched over the card. The "/ ''" keeps the text out of the accessibility tree. */
.section-services--home .service::after {
	content: "Läs mer →";
	content: "Läs mer →" / "";
	display: block;
	margin-block-start: var(--space-30);
	font-size: var(--fs-small);
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
}

/* ---------- Customer logos (.customers) ---------- */
/* Inlined SVGs with fill="currentColor": muted ink at rest, brand blue on
   hover and focus. Equal optical area per logo: height = sqrt(area / --ar).
   A customer without a logo file shows its name in the same box. */
.section.section-customers { padding-block: var(--space-70); }
.section-customers .customers {
	--logo-area: 20;
	--logo-max-h: 3.5rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-50) var(--space-40);
	list-style: none;
	margin: 0;
	padding: 0;
}
.section-customers .customers > li {
	display: flex;
	margin: 0;
}
.section-customers .customers > li > a,
.section-customers .customers > li > span {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5rem;
	padding: var(--space-30);
	border-radius: var(--radius-m);
	color: var(--color-muted);
	text-align: center;
	text-decoration: none;
}
.section-customers .customers > li > a:hover,
.section-customers .customers > li > a:focus-visible {
	color: var(--color-primary);
}
.section-customers .customers svg {
	display: block;
	width: auto;
	max-width: 100%;
	height: min(var(--logo-max-h), calc(sqrt(var(--logo-area) / var(--ar, 4)) * 1rem));
}
.section-customers .customers__name {
	font-size: var(--fs-medium);
	font-weight: var(--font-weight-semibold);
	line-height: 1.2;
	overflow-wrap: anywhere;
}
@media (min-width: 40em) {
	.section-customers .customers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
	.section-customers .customers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 80em) {
	.section-customers .customers { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-60) var(--space-50); }
}

/* ---------- Latest news ---------- */
/* The news-cards block inside is a section with its own padding and
   container; the group adds none. Without items both render nothing. */
.section.section-latest-news { padding-block: 0; }

/* ---------- Om oss and the jobs card (proposal C .split) ---------- */
.section-about .section-about__grid {
	gap: var(--space-70);
	align-items: flex-start;
	margin-block: 0;
}
.section-about .section-about__text > * { margin-block: 0; }
.section-about .section-about__text > * + * { margin-block-start: var(--space-40); }
.section-about .section-about__text > .eyebrow { margin-block-end: var(--space-40); }
.section-about .section-about__text > .eyebrow + * { margin-block-start: 0; }
/* The profile's own words and casing, once on Home (Q8). */
.section-about .tagline {
	font-size: var(--fs-xx-large);
	font-weight: var(--font-weight-regular);
	line-height: 1;
	letter-spacing: -0.03em;
	text-wrap: balance;
	color: var(--color-primary);
}
.section-about .section-about__text > .tagline { margin-block-end: var(--space-50); }
.section-about .section-about__text > .tagline + * { margin-block-start: 0; }
.section-about .section-about__text .lead {
	max-width: none;
	font-size: var(--fs-large);
	font-weight: var(--font-weight-regular);
	line-height: 1.4;
	letter-spacing: -0.015em;
}
/* The jobs card: Home's one complement surface. */
.section-about .jobs {
	padding: var(--space-60);
	border-radius: var(--radius-leaf-l);
	background: var(--color-yellow);
	color: var(--color-contrast);
}
.section-about .jobs > * { margin-block: 0; }
.section-about .jobs > * + * { margin-block-start: var(--space-40); }
.section-about .jobs .eyebrow,
.section-about .jobs h3 { color: var(--color-primary); }
.section-about .jobs .eyebrow + * { margin-block-start: 0; }
.section-about .jobs__count {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--fs-small);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-primary);
}
.section-about .jobs__count::before {
	content: "";
	width: 0.75em;
	height: 0.75em;
	background: var(--color-primary);
}
.section-about .jobs .jobs__title { margin-block-start: var(--space-30); }
.section-about .jobs .wp-block-buttons { margin-block-start: var(--space-50); }
@media (min-width: 64em) {
	.section-about .section-about__grid { gap: var(--space-90); }
	.section-about .section-about__grid > .wp-block-column.section-about__text { flex: 3 1 0; }
	.section-about .section-about__grid > .wp-block-column.section-about__jobs { flex: 2 1 0; }
	.section-about .jobs { padding: var(--space-70) var(--space-60); }
}

/* ---------- Motion (F-0005 AC6) ---------- */
/* The entrance runs once (about 1.4 s, no loop), only with JavaScript and
   without "reduce motion": the motif's lines draw (the shared rule in
   sections.css, "Motif entrance") and the green marker sweeps in. The content is complete if it never runs. */
@media (prefers-reduced-motion: no-preference) {
	.section-customers .customers > li > a {
		transition: color var(--duration-fast) ease-out;
	}
	.js .section-hero-home h1 mark.highlight {
		animation: jni-home-sweep 0.9s var(--ease-out) 0.3s both;
	}
	@keyframes jni-home-sweep {
		from { background-size: 0 0.3em; }
		to { background-size: 100% 0.3em; }
	}
}