/* ==========================================================================
   Just Name IT, ny design: Home (F-0083, F-0081 round 7 hero A on white)
   --------------------------------------------------------------------------
   Loaded on the front page only, after the parent's pages/home.css
   (inc/home.php). Only today's markup and classes: no template or pattern
   is copied. The server puts the rendered group where today's motif was
   (.ny-art--home, at the start of the hero's aside) and each service card's
   form where its flat icon was (.service-shape.ny-icon).

   The hero: the text on the left, the keywords inline under the buttons, the
   group low on the right, standing on the hero's bottom; the top right stays
   free. Both columns become `display: contents`, so their children are items
   of one grid and the keywords can sit under the buttons without moving
   anything in the markup: the reading and focus order stay today's. The
   season greeting (F-0037's element and style) sits in the free top right
   corner, and under the keywords below 80em (Director 2026-10-26, F-0081
   History); in the markup it stays right after the buttons.

   Every selector names a Home section (check_design.py, page stylesheets).
   No new colour: the hero is the page's own white, as today, or on beta
   the light blue or deep blue token (see "Hero colours on beta").
   ========================================================================== */

/* ---------- Hero ---------- */
.section-hero-home .section-hero-home__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: start;
}

.section-hero-home .section-hero-home__grid > .section-hero-home__text,
.section-hero-home .section-hero-home__grid > .section-hero-home__aside {
	display: contents;
}

/* The keywords: a label and a wrapping line, under the buttons. */
.section-hero-home .section-hero-home__aside > .section-hero-home__aside-title {
	max-width: 32rem;
	margin-block: var(--space-60) var(--space-20);
	padding-block-start: var(--space-40);
	border-top: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.section-hero-home .section-hero-home__aside > .keywords {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10) var(--space-50);
	max-width: 32rem;
	font-size: var(--fs-base);
}

.section-hero-home .section-hero-home__aside > .keywords > li {
	padding: 0;
	border: 0;
}

/* The greeting: under the keywords below 80em. */
.section-hero-home .section-hero-home__grid .section-hero-home__text > .greeting {
	order: 1;
}

/* The group: decoration (alt=""), last on a narrow screen. */
.section-hero-home .section-hero-home__aside > .ny-art--home {
	order: 2;
	justify-self: center;
	width: min(100%, 40rem);
	margin-block-start: var(--space-60);
	pointer-events: none;
}

.section-hero-home .ny-art--home .ny-form,
.section-hero-home .ny-art--home img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 80em) {

	/* The section keeps Home's shared spacing (F-0080, composition check). */
	.section.section-hero-home {
		overflow-x: clip;
	}

	.section-hero-home .section-hero-home__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--space-60);
	}

	.section-hero-home .section-hero-home__text > *,
	.section-hero-home .section-hero-home__aside > :not(.ny-art--home) {
		grid-column: 1 / span 7;
	}

	/* The greeting in the free top right corner, F-0037's look unchanged. */
	.section-hero-home .section-hero-home__grid .section-hero-home__text > .greeting {
		order: 0;
		grid-column: 9 / -1;
		grid-row: 1 / span 2;
		align-self: start;
		justify-self: end;
		margin-block-start: 0;
	}

	/* Beside the text, out into the right margin, standing on the hero's
	   bottom (round 7); the top right corner stays free. */
	.section-hero-home .section-hero-home__aside > .ny-art--home {
		order: 0;
		grid-column: 8 / -1;
		grid-row: 1 / span 8;
		align-self: end;
		justify-self: start;
		width: calc(100% + 17rem);
		max-width: none;
		margin-block: 0;
		margin-inline-start: -10rem; /* token-exempt: the group reaches in under the text column, as round 7 */
	}
}

/* ---------- The hero in deep blue (Director 2026-10-28: "vi kommer köra med den mörkblå") ---------- */

/* Only the hero changes, with the theme's own tokens and its pairs for blue
   surfaces (sections.css, is-style-primary). The white hero and the light
   blue one are in the tag design-switch-final (docs/architecture/design-archive.md). */
.section-hero-home {
	background: var(--color-primary);
	color: var(--color-inverse);
}

.section-hero-home h1,
.section-hero-home .eyebrow,
.section-hero-home .lead,
.section-hero-home .keywords {
	color: var(--color-inverse);
}

.section-hero-home .section-hero-home__aside > .section-hero-home__aside-title {
	border-top-color: color-mix(in srgb, var(--color-inverse) 32%, transparent);
	color: var(--color-inverse-muted);
}

.section-hero-home .keywords > li::before {
	background-image: url(../../../../justnameit/assets/images/symbol-white.svg);
}

/* The season greeting, F-0037's look in white. */
.section-hero-home .section-hero-home__grid .section-hero-home__text > .greeting {
	border-inline-start-color: var(--color-inverse);
	color: var(--color-inverse);
}

/* "bara fungerar" (the highlight) in green text, with no bar and no sweep
   (Director 2026-10-27, round 9 v2): the green bar behind white text is
   1.69:1 where it crosses the letters, green on primary is 6.92:1. White
   and light blue kept the bar and its sweep. */
.section-hero-home h1 mark.highlight {
	background: none;
	color: var(--color-green);
}

/* The parent's sweep runs only in this block (pages/home.css); this rule
   has the same weight and loads later, so it switches the sweep off. */
@media (prefers-reduced-motion: no-preference) {

	.section-hero-home h1 mark.highlight {
		animation: none;
	}
}

/* The buttons as on any blue section: white with blue text, and a white
   outline. */
.section-hero-home .wp-block-button:not(.is-style-secondary) .wp-block-button__link {
	border-color: var(--color-base);
	background: var(--color-base);
	color: var(--color-primary);
}

.section-hero-home .wp-block-button:not(.is-style-secondary) .wp-block-button__link:hover {
	border-color: var(--color-primary-soft);
	background: var(--color-primary-soft);
	color: var(--color-primary);
}

.section-hero-home .wp-block-button.is-style-secondary .wp-block-button__link {
	border-color: var(--color-base);
	color: var(--color-base);
}

.section-hero-home .wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background: var(--color-primary-strong);
	color: var(--color-base);
}

.section-hero-home :focus-visible {
	outline-color: var(--color-focus-inverse);
}

/* ---------- Våra tjänster: the rendered form in the icon's place ---------- */

/* Today's icon box (3rem square, sections.css) made larger twice by 20 percent,
   4.3rem (Director 2026-10-28, "ikonerna kan vara lite större", then "add
   another 20%"). The render carries its shadow to the right, so
   it is sized by height and runs out of the box to the right, with nothing
   behind it. */
.section-services--home .service > .service-shape.ny-icon {
	width: 4.3rem;
	height: 4.3rem;
}

.section-services--home .service-shape.ny-icon .ny-form {
	display: block;
	height: 100%;
}

.section-services--home .service-shape.ny-icon img {
	display: block;
	width: auto;
	max-width: none;
	height: 100%;
}

/* ---------- Senaste nytt: a lead story and five items (round 7) ---------- */

.section-latest-news .card-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.section-latest-news .card-grid > li:first-child {
	margin-block-end: var(--space-70);
}

/* The lead story: today's card, larger, its image 16:9. */
.section-latest-news .card-grid > li:first-child .card__media {
	border-radius: var(--radius-leaf-l);
}

.section-latest-news .card-grid > li:first-child .card__title {
	font-size: var(--fs-x-large);
	font-weight: var(--font-weight-regular);
}

/* The listed items: a 16:9 thumbnail, the label and date, the title. */
.section-latest-news .card-grid > li:nth-child(2) {
	border-top: 2px solid var(--color-primary);
}

.section-latest-news .card-grid > li:not(:first-child) {
	padding-block: var(--space-40);
	border-bottom: 1px solid var(--color-border);
}

.section-latest-news .card-grid > li:not(:first-child) .card {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: var(--space-10) var(--space-40);
	align-items: start;
}

.section-latest-news .card-grid > li:not(:first-child) .card__media {
	grid-column: 1;
	grid-row: 1 / span 2;
	background-size: 1.25rem auto;
}

.section-latest-news .card-grid > li:not(:first-child) .meta {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

.section-latest-news .card-grid > li:not(:first-child) .card__title {
	grid-column: 2;
	grid-row: 2;
	font-size: var(--fs-base);
}

.section-latest-news .card-grid > li:not(:first-child) .card__excerpt,
.section-latest-news .card-grid > li:not(:first-child) .card__more {
	display: none;
}

@media (min-width: 30em) {

	.section-latest-news .card-grid > li:not(:first-child) .card {
		grid-template-columns: 7.5rem minmax(0, 1fr);
	}
}

@media (min-width: 64em) {

	.section-latest-news .card-grid {
		grid-template-columns: 7fr 5fr;
		column-gap: var(--space-80);
		align-items: start;
	}

	.section-latest-news .card-grid > li:first-child {
		grid-column: 1;
		grid-row: 1 / span 5;
		margin-block-end: 0;
	}

	.section-latest-news .card-grid > li:not(:first-child) {
		grid-column: 2;
	}

	.section-latest-news .card-grid > li:not(:first-child) .card {
		grid-template-columns: 9rem minmax(0, 1fr);
	}
}

/* ---------- Om oss: still life, text, jobs card, photo (round 7) ---------- */

.section-about .section-about__grid.section-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-60);
	align-items: center;
}

.section-about .section-about__grid > * {
	min-width: 0;
	margin: 0;
}

.section-about .ny-about-art,
.section-about .ny-about-photo {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius-leaf-l);
}

/* The studio behind the still life: light blue, darker at the floor. */
.section-about .ny-about-art {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	--ny-wall: var(--color-primary-soft);
	--ny-seam: color-mix(in srgb, var(--ny-wall) 94%, var(--color-primary));
	--ny-floor: color-mix(in srgb, var(--ny-wall) 90%, var(--color-primary));
	padding: var(--space-50);
	background: linear-gradient(to bottom, var(--ny-wall) 0, var(--ny-seam) 60%, var(--ny-wall) 61%, var(--ny-floor) 100%);
}

.section-about .ny-about-art .ny-form {
	display: block;
	width: 100%;
}

.section-about .ny-about-photo .ny-photo {
	display: block;
	height: 100%;
}

.section-about .ny-about-art img {
	display: block;
	width: 100%;
	height: auto;
}

.section-about .ny-about-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.section-about .section-about__jobs .jobs {
	height: 100%;
}

@media (min-width: 56em) {

	.section-about .section-about__grid.section-about__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--space-80) var(--space-90);
	}

	.section-about .ny-about-art {
		grid-column: 1 / span 7;
		grid-row: 1;
	}

	.section-about .section-about__text {
		grid-column: 8 / -1;
		grid-row: 1;
	}

	.section-about .section-about__jobs {
		grid-column: 1 / span 5;
		grid-row: 2;
		align-self: stretch;
	}

	.section-about .ny-about-photo {
		grid-column: 6 / -1;
		grid-row: 2;
	}

	.section-about .section-about__jobs .jobs {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* Eleven column gaps of --space-90 are wider than the content below 80em (a sideways scroll
   from 56em to about 68em, found by header-fit.spec.ts in F-0094); a smaller gap until there. */
@media (min-width: 56em) and (max-width: 79.99em) {

	.section-about .section-about__grid.section-about__grid {
		column-gap: var(--space-50);
	}
}

/* ---------- More air at Home's start (Director 2026-10-26) ----------
   Only the start of Home gets more air: after the hero and on both sides of
   Några av våra kunder (hero, Vårt erbjudande, Kunder, Senaste nytt), each
   side one spacing step up from today's. Everything else keeps today's
   spacing. Senaste nytt is the light grey band (F-0080), so Kunder's bottom
   and its top are a band's sides: --space-90, from 64em --space-100. The
   composition check holds Home to these sides (composition.spec.ts,
   NY_AIR). */
.section.section-hero-home {
	padding-block-end: var(--space-90);
}

.section.section-services--home,
.section.section-customers {
	padding-block: var(--space-80);
}

.section.section-customers:has(+ .section-latest-news) {
	padding-block-end: var(--space-90);
}

.section-latest-news .news-cards.section {
	padding-block-start: var(--space-90);
}

@media (min-width: 64em) {

	.section.section-hero-home,
	.section.section-customers:has(+ .section-latest-news) {
		padding-block-end: var(--space-100);
	}

	.section-latest-news .news-cards.section {
		padding-block-start: var(--space-100);
	}
}

/* Några av våra kunder: the logos a little larger (Director 2026-10-29: "kan
   vi öka storleken på loggorna för våra kunder något. de var större förut").
   Each logo keeps the same optical area as the others; the area goes from 20
   to 28 (about 18 % taller) and the cap from 3.5rem to 4.25rem. */
.section-customers .customers {
	--logo-area: 28;
	--logo-max-h: 4.25rem;
}