/* ------------------------------------------------------------------
   Dalafisk – category row
   ------------------------------------------------------------------
   Ported from HTMLdesigns/ (#kategorier: .katrad + .scen + .kategorier).

   Two halves of one grid: the kitchen-counter scene with its clickable
   plates on the left, the category tiles on the right. They share a grid,
   which is why this is a single section rather than two.

   The scene replaces the older custom-plates section. Its four images are
   the same theme assets that section used (wall, counter, decor, knives);
   the wall and counter come in as CSS custom properties set inline by the
   section, so this file stays a plain .css and can be cached.

   Design class names mapped to the theme's vocabulary:
     katrad         -> dalafisk-category-row__grid
     scen           -> dalafisk-category-row__scene
     scen__dekor    -> dalafisk-category-row__decor
     scen__knivar   -> dalafisk-category-row__knives
     scen__bank     -> dalafisk-category-row__counter
     tallrikar      -> dalafisk-category-row__plates
     tallrik        -> dalafisk-category-row__plate
     kategorier     -> dalafisk-category-row__tiles
     kategori       -> dalafisk-category-row__tile
     kategori__pill -> dalafisk-category-row__tile-label
   ------------------------------------------------------------------ */

/* The row runs to the window edge on the left, so the section's own inline
   padding is dropped and the header carries it instead. */
.dalafisk-category-row {
	padding-inline: 0;
}
.dalafisk-category-row .dalafisk-section__header {
	padding-inline: max(24px, calc((100% - var(--dalafisk-max-width)) / 2));
}

.dalafisk-category-row__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: clamp(16px, 2vw, 28px);
	padding-left: 20px;
	padding-right: max(24px, calc((100% - var(--dalafisk-max-width)) / 2));
}
/* Tiles without the plate scene — the recipe index's "Handla råvaran direkt".
   The tiles take the whole row and sit on the normal gutter rather than the
   20px the scene needs to bleed into. */
.dalafisk-category-row__grid--tiles-only {
	grid-template-columns: 1fr;
	padding-left: max(24px, calc((100% - var(--dalafisk-max-width)) / 2));
}

/* ---------- the scene ---------- */
.dalafisk-category-row__scene {
	position: relative;
	height: clamp(390px, 30vw, 450px);
	overflow: hidden;
	border-radius: 20px;
	background: var(--dalafisk-scene-wall) center / auto 100% repeat;
	background-color: var(--dalafisk-category-row-scene-bg, var(--dalafisk-card-bg));
}

.dalafisk-category-row__decor,
.dalafisk-category-row__knives {
	position: absolute;
	top: 0;
	height: auto;
	pointer-events: none;
}
.dalafisk-category-row__decor {
	left: clamp(-26px, .6vw, 16px);
	width: clamp(180px, 16.5vw, 252px);
}
.dalafisk-category-row__knives {
	right: clamp(-26px, .8vw, 20px);
	width: clamp(132px, 12vw, 180px);
}

.dalafisk-category-row__counter {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(108px, 10.35vw, 150px);
	background: var(--dalafisk-scene-counter) center bottom / 2px 100% repeat-x;
}

/* The row itself slides so the hovered category's plate lands in the middle of
   the scene — the design's `transform: translateX(var(--forskjut))` on
   `.tallrikar`, driven from the tile hover in dalafisk-category-row.js. Without
   it, hovering a tile only lifted a plate that could be anywhere in the row (or
   off the right edge), which is the "hover = byt till rätt kategori" note.

   A transform on the container, not a scroll: the scene clips, the plates must
   not run past its edges, and the design's overshoot easing is not something
   smooth scrolling can express. */
.dalafisk-category-row__plates {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: clamp(6px, 1.2vw, 18px);
	padding: 14px 14px clamp(24px, 3vw, 43px);
	transform: translateX(var(--dalafisk-plates-shift, 0px));
	transition: transform .72s cubic-bezier(.32, 1.28, .44, 1);
}
@media (prefers-reduced-motion: reduce) {
	.dalafisk-category-row__plates {
		transition: none;
	}
}

.dalafisk-category-row__plate {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: none;
	width: clamp(132px, 15.6vw, 228px);
	border-radius: 16px;
}
.dalafisk-category-row__plate img {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: bottom center;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.dalafisk-category-row__plate:hover img {
	transform: translateY(-10px) scale(1.045);
}
/* Raised when its matching tile is hovered, so the two halves read as linked. */
.dalafisk-category-row__plate[data-dalafisk-active] img {
	transform: translateY(-12px) scale(1.09);
}
.dalafisk-category-row__plate:focus-visible {
	outline-offset: 6px;
	border-radius: 16px;
}

/* Plates slide in from the right, one after another, once the section is
   scrolled into view. Gated on .dalafisk-motion like every other reveal, so
   without JS they are simply in place. */
.dalafisk-motion .dalafisk-category-row__plate {
	transform: translateX(calc(100vw + 40px));
	transition: transform .85s cubic-bezier(.22, 1, .36, 1);
}
.dalafisk-motion .dalafisk-category-row[data-dalafisk-inview] .dalafisk-category-row__plate {
	transform: none;
}
.dalafisk-category-row__plate:nth-child(1) { transition-delay: .50s; }
.dalafisk-category-row__plate:nth-child(2) { transition-delay: .66s; }
.dalafisk-category-row__plate:nth-child(3) { transition-delay: .82s; }
.dalafisk-category-row__plate:nth-child(4) { transition-delay: .98s; }
.dalafisk-category-row__plate:nth-child(5) { transition-delay: 1.14s; }
.dalafisk-category-row__plate:nth-child(n+6) { transition-delay: 1.30s; }

/* ---------- the tiles ---------- */
/* Six columns over two rows: the first two tiles span three columns each
   (two on top), the rest span two (three underneath). */
.dalafisk-category-row__tiles {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: clamp(10px, 1.1vw, 16px);
}
.dalafisk-category-row__tiles > :nth-child(-n+2) {
	grid-column: span 3;
}
.dalafisk-category-row__tiles > :nth-child(n+3) {
	grid-column: span 2;
}

.dalafisk-category-row__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border-radius: 18px;
	background: var(--dalafisk-category-row-tile-bg, var(--dalafisk-white));
	border: 1.5px solid var(--dalafisk-category-row-tile-text, var(--dalafisk-ink));
	transition: background .4s cubic-bezier(.22, .61, .36, 1), color .4s cubic-bezier(.22, .61, .36, 1);
}
.dalafisk-category-row__tile-label {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(8px, .9vw, 13px);
	font-weight: 500;
	font-size: clamp(14px, 1.25vw, 18px);
	color: var(--dalafisk-category-row-tile-text, var(--dalafisk-ink));
	text-align: center;
	transition: color .4s cubic-bezier(.22, .61, .36, 1);
}
.dalafisk-category-row__tile-label svg {
	width: clamp(26px, 2.6vw, 38px);
	height: clamp(26px, 2.6vw, 38px);
	transition: color .4s cubic-bezier(.22, .61, .36, 1);
}
/* The barred fish is drawn in a 48x32 box, so at the shared square size its
   stroke comes out half as thick as the other tiles'. The design widens it and
   WIDTH ONLY — `.kategori__pill svg[data-icon="fish-barred"] { width:
   clamp(39px,3.9vw,57px) }` — leaving the height on the shared clamp so the
   icon box is the same height as every other tile's.

   Overriding the height too made the Fisk tile's box 57x57 for a 1.5:1 glyph:
   the fish rendered 57x38 centred in it, with ~9.5px of empty space above and
   below, which pushed the label down and is the "inte samma spacing mellan ikon
   och text som de andra kategorier" note. The tiles-only variant further down
   keeps its explicit 84x56 / 62x41, which is what the collection design sets. */
.dalafisk-category-row__tile-label .dalafisk-icon--brand-fish-barred {
	width: clamp(39px, 3.9vw, 57px);
}
.dalafisk-category-row__tile:hover {
	background: var(--dalafisk-category-row-tile-hover-bg, var(--dalafisk-ink));
	color: var(--dalafisk-category-row-tile-hover-text, var(--dalafisk-white));
}
.dalafisk-category-row__tile:hover .dalafisk-category-row__tile-label {
	color: var(--dalafisk-category-row-tile-hover-text, var(--dalafisk-white));
}

/* ---------- scroll reveal ---------- */
.dalafisk-motion .dalafisk-category-row[data-dalafisk-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.dalafisk-motion .dalafisk-category-row[data-dalafisk-inview] {
	opacity: 1;
	transform: none;
}

@media (max-width: 920px) {
	.dalafisk-category-row__grid {
		grid-template-columns: 1fr;
		gap: 22px;
		padding-right: 20px;
	}
	.dalafisk-category-row__scene {
		height: clamp(292px, 34vw, 340px);
	}
	.dalafisk-category-row__decor {
		left: clamp(-24px, 1.5vw, 40px);
		width: clamp(168px, 21vw, 296px);
	}
	.dalafisk-category-row__knives {
		right: clamp(-30px, 2vw, 52px);
		width: clamp(124px, 15vw, 212px);
	}
	.dalafisk-category-row__counter {
		height: clamp(80px, 8.6vw, 108px);
	}
	/* Narrow: the plates become a scroller instead of a fixed row. */
	.dalafisk-category-row__plates {
		gap: 10px;
		overflow-x: auto;
		scrollbar-width: none;
		scroll-padding-inline: 20px;
		padding-inline: 20px;
		scroll-snap-type: x mandatory;
	}
	.dalafisk-category-row__plates::-webkit-scrollbar {
		display: none;
	}
	.dalafisk-category-row__plate {
		width: min(56vw, 232px);
		scroll-snap-align: center;
	}
	/* Sliding in and scroll-snapping at once fights the user's finger. */
	.dalafisk-motion .dalafisk-category-row__plate {
		transform: none;
	}
	.dalafisk-category-row__tiles {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		gap: 12px;
	}
	.dalafisk-category-row__tiles > :nth-child(n) {
		grid-column: auto;
	}
	.dalafisk-category-row__tiles > :last-child {
		grid-column: span 2;
	}
	.dalafisk-category-row__tile {
		min-height: 126px;
	}
}

@media (max-width: 640px) {
	.dalafisk-category-row .dalafisk-section__header {
		padding-inline: 20px;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 10px;
	}
	.dalafisk-category-row .dalafisk-section__header-text {
		flex: 1 1 100%;
	}
	.dalafisk-category-row__tiles {
		gap: 10px;
	}
	.dalafisk-category-row__tile {
		min-height: 112px;
		border-radius: 16px;
	}
}

/* ==================================================================
   Tiles-only — the recipe index's "Handla råvaran direkt"
   ==================================================================
   The rules above lay the tiles out for the LANDING PAGE, where five of them
   sit in a narrow column beside the plate scene: a six-column grid whose first
   two children span three columns and the rest two, giving 2 on top and 3
   underneath. That shape is only right for five.

   The recipe index has SIX tiles and no scene, so the sixth fell through to a
   third row on its own — two wide, three, then one orphan.

   The design has this as its own component, `.kategorier` on
   dalafisk-receptsamling.html, and it is a plain 3 x 2 grid of much bigger
   cards — not the landing page's tile strip at all:
       .kategorier { grid-template-columns: repeat(3, 1fr); gap: 20px }
       .kategori   { height: 250px; padding: 16px; border-radius: 20px }
       .kategori__pill { font-size: 24px; gap: 14px }   svg 46px
       <= 920: grid-template-columns: 1fr 1fr
       <= 640: gap 10px; height 150px; padding 10px; radius 16px;
               pill 17px/gap 10; svg 34px

   Scoped to `--tiles-only` so the landing page keeps its own treatment. Every
   selector here is (0,2,0) or better against the (0,1,0)/(0,2,0) rules above,
   and the file order puts it last, so it wins on both counts.

   `min-height` rather than the design's `height`: identical at these labels —
   the rows measure exactly 250 — but a longer category name grows the card
   instead of spilling out of it. */
.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tiles {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto;
	gap: 20px;
}

/* Undo the 3/2 column spans — every card is one cell here. */
.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tiles > :nth-child(n) {
	grid-column: auto;
}

/* The landing page (2026-09-22): the plate scene was switched off — its five
   `plate` blocks are `disabled` in templates/index.json, not deleted, so the
   scene can come back from the editor — and the tiles now carry the row alone.
   Three equal columns leave a row of five as 3 + 2 with a hole. What the page
   had with the scene — two wide tiles over three narrower ones on a six-column
   grid, the spans at the top of this file — is kept, just across the whole
   width. Keyed to the count the section prints in `data-tiles`, so the recipe
   index's six-tile row keeps its plain 3 x 2. Below 1068px the 2-col rule in
   the 920px block takes over. */
@media (min-width: 1068px) {
	.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tiles[data-tiles="5"] {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	/* (0,4,0): beats the `:nth-child(n) { grid-column: auto }` reset above. */
	.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tiles[data-tiles="5"] > :nth-child(-n+2) {
		grid-column: span 3;
	}
	.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tiles[data-tiles="5"] > :nth-child(n+3) {
		grid-column: span 2;
	}
}
/* On phones a fifth tile alone in the left column left a hole on the right;
   the landing page used to square the grid by stretching the last tile, and
   with exactly five it still does. (0,4,0) beats the `:last-child { auto }`
   reset in the 920px block below. */
@media (max-width: 920px) {
	.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tiles[data-tiles="5"] > :last-child {
		grid-column: 1 / -1;
	}
}

.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tile {
	min-height: 250px;
	padding: 16px;
	border-radius: 20px;
}

.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tile-label {
	font-size: 24px;
	gap: 14px;
}

.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tile-label svg {
	width: 46px;
	height: 46px;
}

.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tile-label .dalafisk-icon--brand-fish-barred {
	width: 84px;
	height: 56px;
}

@media (max-width: 920px) {
	.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tiles {
		grid-template-columns: 1fr 1fr;
	}
	/* The landing page stretches its LAST tile across both columns to square off
	   a row of five. Six needs no such trick, and spanning here left a full-width
	   card under a tidy 2-up grid. */
	.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tiles > :last-child {
		grid-column: auto;
	}
}

@media (max-width: 640px) {
	.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tiles {
		gap: 10px;
	}
	.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tile {
		min-height: 150px;
		padding: 10px;
		border-radius: 16px;
	}
	.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tile-label {
		font-size: 17px;
		gap: 10px;
	}
	.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tile-label svg {
		width: 34px;
		height: 34px;
	}
	.dalafisk-category-row__grid--tiles-only .dalafisk-category-row__tile-label .dalafisk-icon--brand-fish-barred {
		width: 62px;
		height: 41px;
	}
}