/* ==========================================================================
   helhojd.css - startsidan i fullhöjdssektioner. Skapad 2026-09-29.

   Beslut (Peter 2026-09-29): varje sektion på STARTSIDAN fyller minst
   skärmhöjden, och man scrollar en sektion i taget. Gäller bara startsidan,
   alltså det som ligger under <main class="home">. Övriga sidor är oförändrade.

   Avvikelse från tidigare regel: pages.css (Hero) säger att öppningen aldrig
   låses till skärmhöjden. På startsidan gäller nu det nya beslutet. Syftet med
   den gamla regeln, att erbjudandet ska synas ovanför vikningen, består: hero
   har bara fått mer luft, innehållet ligger kvar mitt i skärmen.

   Snap:
   - proximity, inte mandatory. Scenen "The blade" (blade.css) är ungefär 2,5
     skärmhöjder hög och ska scrolla fritt inuti. Med mandatory skulle
     webbläsaren dra tillbaka scrollen till närmaste sektionsstart.
   - snap-punkter finns bara vid sektionsstarterna.
   - sektioner som är högre än skärmen (vanligt på mobil) scrollar som vanligt.
   ========================================================================== */

/* Sidhuvudet är sticky och upptar plats överst. --hh är dess höjd. */
html:has(.home) {
  --hh: calc(var(--header-h) + var(--border-w));
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--hh);
}
@media (min-width: 900px) {
  html:has(.home) { --hh: calc(var(--header-h-lg) + var(--border-w)); }
}

/* Alla sektioner: minst skärmhöjd under sidhuvudet, innehållet centrerat. */
.home .hero,
.home .section {
  min-height: calc(100vh - var(--hh));
  min-height: calc(100svh - var(--hh));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home .hero,
.home .section,
.home .blade {
  scroll-snap-align: start;
}

/* Selected Knives: tre kort, alla stående 4:5 (Peter 2026-10-10), oavsett om originalbilden är
   stående eller liggande. Liggande bilder beskärs av object-fit: cover (från pages.css).
   Förut en fast höjd på 20svh (2026-09-29) så att sex kort skulle rymmas ovanför vikningen på
   1366x768; med 4:5 följer höjden bredden, och sektionen får scrolla om den inte ryms. Under
   768px är korten en kolumn. */
.home .home-knives { padding-block: var(--space-5); }
.home .knives-row .card__img {
  aspect-ratio: 4 / 5;
  height: auto;
}