/* ==========================================================================
   PIZZALOVERS · front page sections
   Hero, oven picker, calculator preview, dough scroll-story, section
   backgrounds and gear list. Card components live in base.css.
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--c-char-0); }
.hero-media{ position:relative; aspect-ratio:4/5; }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:64% 50%; }
.hero-media canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-grade{ position:absolute; inset:0; background:
  linear-gradient(to top, rgba(11,10,9,1) 0%, rgba(11,10,9,.72) 22%, rgba(11,10,9,0) 55%),
  linear-gradient(to bottom, rgba(11,10,9,.55) 0%, rgba(11,10,9,0) 30%); }
.hero-copy{ position:relative; z-index:2; margin-top:-22vh; padding-bottom:var(--s-8); }
.hero .lab{ margin-bottom:var(--s-4); color:var(--c-fire-hot); }
.hero h1{ font-size:var(--t-3xl); font-weight:500; letter-spacing:-.045em; line-height:.92; max-width:11ch; font-variation-settings:"opsz" 96; }
.hero h1 em{ font-style:normal; color:var(--c-fire-hot); }
.hero-sub{ margin-top:var(--s-5); font-size:var(--t-md); color:var(--fg-2); max-width:40ch; }
.hero-act{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }
.hero-meta{ margin:var(--s-7) 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4) var(--s-6); max-width:560px; }
.hero-meta div{ border-top:1px solid var(--line); padding-top:var(--s-3); }
.hero-meta dd{ margin:0; }
.hero-meta .num{ font-size:var(--t-lg); color:var(--fg); display:block; }
.hero-meta .lab{ margin:0; color:var(--fg-3); }
@media (min-width:900px){
  .hero{ min-height:min(92vh,880px); display:grid; }
  .hero-media{ position:absolute; inset:0; aspect-ratio:auto; }
  .hero-grade{ background:
    linear-gradient(90deg, rgba(11,10,9,.94) 0%, rgba(11,10,9,.78) 30%, rgba(11,10,9,.25) 58%, rgba(11,10,9,0) 78%),
    linear-gradient(to top, rgba(11,10,9,.9) 0%, rgba(11,10,9,0) 32%); }
  .hero-copy{ margin-top:0; align-self:end; padding-block:var(--s-9) var(--s-8); }
  .hero-meta{ grid-template-columns:repeat(4,1fr); max-width:760px; }
}

/* ---- "Vad bakar du i?" -------------------------------------------------- */
.ovens{ background:var(--bg-2); border-block:1px solid var(--line); }
.oven-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.oven{
  background:var(--bg-2); padding:var(--s-5) var(--s-4) var(--s-4); text-align:left; display:flex; flex-direction:column; gap:var(--s-3); min-height:168px;
  transition:background var(--d-base);
  position:relative;
}
.oven:hover{ background:var(--bg-3); }
.oven[aria-pressed="true"]{ background:var(--bg-3); box-shadow:inset 0 0 0 1px var(--accent-hot); }
.oven[aria-pressed="true"] .oven-temp{ color:var(--accent-hot); }
.oven svg{ width:40px; height:40px; color:var(--fg-2); }
.oven h3{ font-size:var(--t-md); font-weight:500; }
.oven-temp{ margin-top:auto; font-size:var(--t-xs); color:var(--fg-3); }
.oven-out{ margin-top:var(--s-5); padding:var(--s-5); border:1px solid var(--line-strong); border-radius:var(--r-2); display:grid; gap:var(--s-4); }
.oven-out h3{ font-size:var(--t-lg); font-weight:500; }
.oven-out p{ color:var(--fg-2); max-width:60ch; }
.oven-out .lab{ color:var(--accent-hot); }
.oven-links{ display:flex; flex-wrap:wrap; gap:var(--s-3); }
@media (min-width:760px){ .oven-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .oven-grid{ grid-template-columns:repeat(6,1fr); } .oven-out{ grid-template-columns:1.2fr 1fr; align-items:center; } }

/* ---- Calculator preview ------------------------------------------------ */
.calc{ background:var(--bg); }
.calc-in{ display:grid; gap:var(--s-6); }
.calc-panel{ border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--bg-2); overflow:hidden; }
.calc-controls{ padding:var(--s-5); display:grid; gap:var(--s-5); }
.ctl{ display:grid; gap:var(--s-2); }
.ctl-hd{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-3); }
.ctl-hd label{ font-family:var(--f-display); font-weight:500; font-size:var(--t-sm); color:var(--fg-2); }
.ctl-val{ display:inline-flex; align-items:baseline; gap:.15rem; }
.ctl-val input{
  width:4.2ch; background:transparent; border:0; border-bottom:1px solid var(--line-strong);
  font-family:var(--f-mono); font-size:var(--t-lg); font-weight:500; color:var(--fg); text-align:right; padding:0 .1rem;
  -moz-appearance:textfield;
}
.ctl-val input::-webkit-outer-spin-button,.ctl-val input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ctl-val input:focus{ border-color:var(--accent-hot); }
.ctl-val span{ font-family:var(--f-mono); font-size:var(--t-sm); color:var(--fg-3); }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; margin:0; }
input[type=range]::-webkit-slider-runnable-track{ height:2px; background:var(--line-strong); }
input[type=range]::-moz-range-track{ height:2px; background:var(--line-strong); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; margin-top:-13px; border-radius:50%; background:var(--bg-2); border:2px solid var(--accent-hot); transition:transform var(--d-fast); }
input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--bg-2); border:2px solid var(--accent-hot); }
input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.12); }
input[type=range]:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; }
input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-hot) 35%, transparent); }
.seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border:1px solid var(--line-strong); border-radius:var(--r-2); overflow:hidden; }
.seg button{ min-height:44px; font-family:var(--f-display); font-weight:500; font-size:var(--t-sm); color:var(--fg-2); border-right:1px solid var(--line); }
.seg button:last-child{ border-right:0; }
.seg button[aria-pressed="true"]{ background:var(--fg); color:var(--bg); }
.calc-out{ padding:var(--s-5); border-top:1px solid var(--line-strong); background:var(--bg-3); }
.calc-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s-4); }
.calc-total .num{ font-size:var(--t-xl); color:var(--fg); }
.ing{ display:grid; grid-template-columns:1fr auto auto; gap:var(--s-2) var(--s-4); font-size:var(--t-sm); }
.ing > *{ padding:.55rem 0; border-top:1px solid var(--line); }
.ing .name{ font-family:var(--f-display); font-weight:500; }
.ing .g{ text-align:right; color:var(--fg); }
.ing .pct{ text-align:right; color:var(--fg-3); font-size:var(--t-xs); align-self:center; }
.ing .yeast .g{ color:var(--accent-hot); }
.calc-note{ margin-top:var(--s-4); font-size:var(--t-xs); color:var(--fg-3); font-family:var(--f-mono); line-height:1.5; }
.calc-note b{ color:var(--c-basil); font-weight:500; }
.calc-note b.amber{ color:var(--c-amber); }
.calc-cta{ display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; margin-top:var(--s-5); }
.calc-copy h2{ font-size:var(--t-2xl); font-weight:500; letter-spacing:-.035em; line-height:var(--lh-tight); }
.calc-copy p{ margin-top:var(--s-4); color:var(--fg-2); max-width:46ch; font-size:var(--t-md); }
.calc-list{ margin:var(--s-6) 0 0; padding:0; list-style:none; display:grid; gap:var(--s-3); }
.calc-list li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-3); align-items:baseline; color:var(--fg-2); font-size:var(--t-sm); padding-top:var(--s-3); border-top:1px solid var(--line); }
.calc-list .lab{ color:var(--accent-hot); }
@media (min-width:980px){ .calc-in{ grid-template-columns:5fr 7fr; gap:var(--s-8); align-items:start; } .calc-copy{ position:sticky; top:96px; } }
@media (min-width:1200px){ .calc-panel{ display:grid; grid-template-columns:1fr 1fr; } .calc-out{ border-top:0; border-left:1px solid var(--line-strong); } }

/* ---- Degskolan — scroll-story ------------------------------------------- */
.story{ background:var(--bg-2); border-block:1px solid var(--line); }
.story-in{ display:grid; gap:var(--s-6); }
.story-stage{ position:sticky; top:64px; aspect-ratio:4/3; max-height:46vh; background:var(--c-char-0); border:1px solid var(--line-strong); border-radius:var(--r-2); overflow:hidden; display:grid; }
.story-stage svg{ width:100%; height:100%; grid-area:1/1; }
.scene-photos{ grid-area:1/1; position:relative; width:100%; height:100%; }
.scene-photos img.scene{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.story-readout{ grid-area:1/1; align-self:start; justify-self:start; margin:var(--s-4); display:grid; gap:.2rem; pointer-events:none; }
.story-readout .num{ font-size:var(--t-md); color:var(--fg); }
.story-progress{ grid-area:1/1; align-self:end; margin:var(--s-4); height:2px; background:var(--line-strong); position:relative; }
.story-progress i{ position:absolute; left:0; top:0; bottom:0; width:calc(var(--p,0)*100%); background:var(--accent-hot); transition:width var(--d-base) var(--ease-out); }
.story-steps{ display:grid; gap:0; }
.step{ padding:clamp(var(--s-7),12vh,var(--s-9)) 0; border-top:1px solid var(--line); opacity:.45; transition:opacity var(--d-base); }
.step.is-active{ opacity:1; }
.step:first-child{ border-top:0; }
.step .lab{ display:flex; gap:var(--s-3); margin-bottom:var(--s-3); }
.step h3{ font-size:var(--t-xl); font-weight:500; letter-spacing:-.03em; max-width:16ch; }
.step p{ margin-top:var(--s-3); color:var(--fg-2); max-width:44ch; }
.step .warn{ margin-top:var(--s-3); display:grid; grid-template-columns:auto 1fr; gap:var(--s-3); font-size:var(--t-sm); color:var(--fg-2); padding:var(--s-3) var(--s-4); border-left:2px solid var(--c-fire); }
.step .warn .lab{ margin:0; color:var(--c-fire); }
@media (min-width:900px){ .story-in{ grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:start; } .story-stage{ top:96px; aspect-ratio:1/1; max-height:calc(100vh - 120px); } .story-steps{ padding-block:6vh 20vh; } }

/* Scenes in the story photos: stacked on top of each other and cross-faded */
.scene{ opacity:0; transition:opacity var(--d-story) var(--ease-in-out); transform-origin:center; }
.story-stage[data-stage="1"] .sc-1,
.story-stage[data-stage="2"] .sc-2,
.story-stage[data-stage="3"] .sc-3,
.story-stage[data-stage="4"] .sc-4,
.story-stage[data-stage="5"] .sc-5,
.story-stage[data-stage="6"] .sc-6,
.story-stage[data-stage="7"] .sc-7,
.story-stage[data-stage="8"] .sc-8{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .scene{ transition:none } }

/* ---- Section surfaces on the front page ------------------------------------ */
.tested{ background:var(--bg); }
.guides{ background:var(--bg-2); border-block:1px solid var(--line); }
.recipes{ background:var(--bg); }
.fix{ background:var(--bg-2); border-block:1px solid var(--line); }

/* ---- Gear ------------------------------------------------------------------- */
.gear{ background:var(--bg); }
.gear-in{ display:grid; gap:var(--s-6); }
.gear-img{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-1); }
.gear-img img{ width:100%; height:100%; object-fit:cover; }
.gear-list{ display:grid; }
.gear-item{ padding:var(--s-4) 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:var(--s-4); align-items:center; }
.gear-item h3{ font-size:var(--t-md); font-weight:500; }
.gear-item p{ color:var(--fg-2); font-size:var(--t-sm); margin-top:.2rem; }
.gear-item .lab{ white-space:nowrap; }
.gear-item:hover h3{ color:var(--accent-hot); }
@media (min-width:900px){ .gear-in{ grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:center; } }