/*
 * Oppskriftskortet.
 *
 * Markupen bor i `inc/recipe-card.php` — en delt funksjon, ikke en blokk — fordi fire blokker i spec
 * 0061 viser det samme kortet. Stilen bor derfor her og ikke i én blokks `style.scss`: et kort som er
 * ustilt i den andre blokka ser ut som en ødelagt side og ikke som en glemt import.
 *
 * ADR-0003: ingen media queries. Hver strukturell bryter spør **kortets egen bredde** gjennom
 * `@container ft-card`, aldri vindusbredden — det er det som gjør at samme DOM kan stå i et
 * 4-kolonners rutenett, i en 2-opp mobilrad og i en «relatert»-rulle. En manglende `container-type`
 * feiler stille: kortet rendres da på sin bredeste form. Erklæringen står først i fila, og
 * `tests/php/` sveiper for den.
 *
 * En `@container`-betingelse kan **ikke** lese en egendefinert variabel — `max-width: var(...)`
 * matcher aldri, i noen nettleser. Verdiene under er derfor gjentatt som literaler, og
 * `settings.custom.kort` publiserer de samme tallene for JS og dokumentasjon. Holdes de ikke i takt,
 * lyver tokenet.
 *
 * Bare `var(--wp--preset--*)` og `var(--wp--custom--*)`. Hver rå px er en optisk verdi med en
 * kommentar som sier hvorfor.
 */

.ft-kort {
	container-type: inline-size;
	container-name: ft-card;

	position: relative;
	overflow: hidden;
	height: 100%;
	background: var(--wp--preset--color--hvit);
	border-radius: var(--wp--custom--radius--kant);
	box-shadow: var(--wp--custom--skygge--kort);
	transition:
		transform var(--wp--custom--overgang--myk),
		box-shadow var(--wp--custom--overgang--myk);
}

.ft-kort:hover {
	/* 4px: et lite dytt oppover, en optisk detalj og ikke et avstandssteg. */
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--skygge--heving);
}

/*
 * Hele kortet er én lenke. Interaktive kontroller inne i et kort må ligge *utenfor* denne — en
 * knapp inne i en `<a>` er ugyldig markup — og det er grunnen til at hjertet (#91) er et søsken
 * av lenka og ikke et barn.
 */
.ft-kort__lenke {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.ft-kort__bilde {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.ft-kort__bilde img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--overgang--myk);
}

.ft-kort:hover .ft-kort__bilde img {
	transform: scale(1.05);
}

.ft-kort__kropp {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxxs);
	padding: var(--wp--preset--spacing--s);
}

/*
 * Etiketten straddler bildekanten. Begge verdiene er optiske: den negative toppen er halve pillens
 * høyde, og høyre-avstanden linjerer den med kroppens egen innerkant.
 */
.ft-kort__etikett {
	position: absolute;
	top: -12px;
	right: 16px;
}

.ft-merke {
	display: inline-flex;
	align-items: center;
	height: 1.75em;
	padding: 0 0.85em;
	border-radius: var(--wp--custom--radius--pille);

	/*
	 * Lys blå på nær-svart, transkribert fra prototypens `.tag` (html-prototype/oppskrifter.html) —
	 * ikke gul eller mørk: `--beige`/`lys-blaa` er nøyaktig samme heksverdi som prototypens `.tag`,
	 * og nær-svart tekst på den bakgrunnen måler godt over AA.
	 */
	background: var(--wp--preset--color--lys-blaa);
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--kicker);
	line-height: 1;
	white-space: nowrap;
}

/*
 * To klasser, ikke én: kjernens egen h3-regel er `:root :where(h3)` med spesifisitet som én klasse,
 * så med bare `.ft-kort__tittel` ville vinneren hengt på rekkefølgen stilarkene lastes i — og den
 * rekkefølgen er ikke den samme på fronten som i redigereren. Samme grep som `.ft-ingredienser`.
 */
.ft-kort .ft-kort__tittel {
	margin: 0;
	font-family: var(--wp--preset--font-family--brod);
	/*
	 * 1.125rem: tittel-m sitt flytende gulv, ikke taket. Prototypens `.recipe-card__title` er en
	 * flat 18px uansett vindusbredde, og kortets egen typografi følger allerede kortets *bredde*
	 * gjennom @container-bryterne under — å la denne verdien i tillegg vokse med *vinduet* opp mot
	 * tittel-ms 20px-tak var det som gjorde tittelen synlig større enn prototypen i et bredt vindu.
	 */
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--tekst);
	/* Kortet klipper det som stikker ut, og et norsk sammensatt ord er bredere enn kolonnen. */
	overflow-wrap: anywhere;
}

.ft-kort__lenke:hover .ft-kort__tittel {
	color: var(--wp--preset--color--gul);
}

.ft-kort__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xxs);
	margin-top: auto;
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	color: var(--wp--preset--color--tekst-svak);
}

.ft-kort__meta-punkt {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.ft-kort__ikon {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: var(--wp--preset--color--gul);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ─────────────────────────  HJERTET (#91)  ─────────────────────────────────
   Lagreknappen, ADR-0004 punkt 4: én favorittrelasjon, tegnet som hjerte og
   ingenting annet.

   **Skjult til modulen vet hvem leseren er.** Serveren tegner hjertet for hver
   leser (punkt 2 — den samme byte-strømmen skal kunne caches offentlig), og
   `lesertilstand.js` setter `data-ft-leser` på `<html>` først når den vet.
   Standarden er derfor «borte»: en utlogget leser ser aldri en knapp den ikke
   kan bruke, og ingen ser et hjerte som forsvinner igjen.
   ───────────────────────────────────────────────────────────────────────── */

.ft-kort__hjerte {
	display: none;
	position: absolute;
	z-index: var(--wp--custom--lag--flate);
	/* 12px: knappens avstand fra kortkanten, optisk — speiler prototypens `.recipe-card__fav`, som
	   sitter i samme hjørne som etiketten på motsatt kant av bildet. */
	top: 12px;
	right: 12px;
	align-items: center;
	justify-content: center;
	/* 36px: en trykkflate, ikke et mål på skalaen. Litt mindre enn pin-ens 40px, som står på et bilde i full bredde. */
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform var(--wp--custom--overgang--rask) ease;
}

[data-ft-leser="innlogget"] .ft-kort__hjerte {
	display: inline-flex;
}

.ft-kort__hjerte:hover,
.ft-kort__hjerte:focus-visible {
	transform: scale(1.08);
}

.ft-kort__hjerteikon {
	/* 20px: glyfen inne i den 36px trykkflaten, transkribert fra prototypens 24px i en 32px flate. */
	width: 20px;
	height: 20px;
	fill: none;
	/*
	 * Hvit strek med skyggekast, ikke mørk strek på en hvit sirkel: prototypens `.recipe-card__fav`
	 * har ingen bakgrunnsflate, bare `filter: drop-shadow(...)` for å holde ikonet lesbart mot et
	 * bilde i alle valører. En sirkel bak hjertet er nettopp den knappe-stilen dette punktet fjerner.
	 */
	stroke: var(--wp--preset--color--hvit);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.45));
	transition: fill var(--wp--custom--overgang--rask) ease, stroke var(--wp--custom--overgang--rask) ease;
}

/*
 * Lagret: hjertet fylles. Det er hele tilbakemeldingen, og den trenger ikke mer — `aria-pressed`
 * sier det samme for den som ikke ser fargen.
 */
.ft-kort__hjerte[aria-pressed="true"] .ft-kort__hjerteikon {
	fill: var(--wp--preset--color--roed);
	stroke: var(--wp--preset--color--roed);
}

/*
 * Den offentlige lagretellingen (ADR-0004 punkt 3), og den er **ikke** hjertet over: eget merke,
 * ingen trykkflate, ingen hover. ADRen sier rett ut at prototypens forhåndsfylte gule hjerte i en
 * `<a>` er noe folk kommer til å trykke på.
 */
.ft-kort__lagretegn {
	width: 1em;
	height: 1em;
	fill: var(--wp--preset--color--tekst-svak);
	stroke: none;
	opacity: 0.7;
}

/*
 * De to strukturelle bryterne. Den bredeste formen er standarden over; hver betingelse under
 * strammer inn etter hvert som kortets *egen* boks blir smalere. 20em gjentar
 * --wp--custom--kort--smal og er den som gjør jobben; 9em er upublisert med vilje (ADR-0003) og
 * ligger under hver slot i designet, så den finnes bare for at et kort noen slipper i en sidespalte
 * ikke skal falle fra hverandre.
 *
 * Målt på kompilert markup: kortets font-size er den flytende `brodtekst`, så em-ene under er
 * ~317px ved 1440 og ~311px ved 390. Arkivet gir 4 kolonner à 260px (16,4em) ved 1440 og 2 à 162px
 * (10,8em) ved 390 — begge over 9em, altså med stjerner og antall.
 */

/* Under 20em — 2-opp-rutenettet og arkivets egen kolonnebredde. «pers»-ordet går,
   raden leser «4 🍴», og innerpaddingen trekkes inn ett steg. */
@container ft-card (max-width: 20em) {
	.ft-kort__meta-etikett {
		display: none;
	}

	.ft-kort__kropp {
		padding: var(--wp--preset--spacing--xs);
	}

	.ft-kort__etikett {
		/* 12px: følger paddingsteget over. */
		right: 12px;
	}
}

/* Under 9em — under hver slot i designet. Vurderingen går, tiden blir. */
@container ft-card (max-width: 9em) {
	.ft-kort__meta-antall,
	.ft-kort__meta-punkt--vurdering {
		display: none;
	}

	.ft-kort .ft-kort__tittel {
		font-size: var(--wp--preset--font-size--tittel-s);
	}
}

/* En leser som har bedt om mindre bevegelse, får kortet uten heving og uten bildezoom. */
@media (prefers-reduced-motion: reduce) {
	.ft-kort,
	.ft-kort__bilde img {
		transition: none;
	}

	.ft-kort:hover {
		transform: none;
	}

	.ft-kort:hover .ft-kort__bilde img {
		transform: none;
	}
}