/* PRODUCT DETAIL TEMPLATE — loaded after shared.css.

   One artboard (Figma 678:2405, "ORWAK 3110 bálázógép", 1440×6528), 46 pages.
   Everything here that is not genuinely one-off is written to be promoted into
   shared.css the moment a second product page exists: .prodhero, .prow--field,
   .pspecs and .prel are all template-level, not page-level.

   What this file does NOT redefine, because shared.css already has it:
     .split (+ --flip, --field, __media--pending)   the five feature rows
     .machine / .machine__rail / __img / __cat      the related-product card
     .benefits__grid / __item / __icon / __label    the four-up benefit row
     .cnav / .cnav__btn / .cnav--dark               the 34px carousel circles
     .cta-strip                                     the mid-page orange strip
     .hcontact and its whole subtree                the closing contact block

   SECTION RHYTHM. Every gap on this artboard is exactly 78px, top to bottom —
   not the 112px --section-y the built pages use. 78px is already a token,
   --row-y (the artboards' row rhythm), so this page honours the artboard and
   uses --row-y for EVERY section boundary rather than mixing the two. The
   overrides that do that are scoped to .page-product so nothing leaks. */

/* ============================================================ PRODUCT HERO
   Figma 678:2406. A full-bleed 1440×850 photo, copy low-left, two pills. This
   is NOT .phero: there is no 924×428 dark panel and no 571px photo band on the
   artboard. It is the near-twin of .home-hero — same 80/123 title, same 20/25
   sub, same 46px pill with an 18px circular arrow — differing only in height
   (850 vs 774), the scrim, the missing side strip, and the second button.
   When product page #2 lands, factor a common base out of the two. */
.prodhero{
  position: relative;
  height: 850px;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-2);
  color: #fff;
}
/* No margin-top: the nav is fixed and translucent, and the artboard runs the
   photograph up underneath it. */

.prodhero__img{
  position: absolute; left: 0; right: 0; top: 0;
  /* 118% of the section, anchored top, so the bottom ~15% of the export is
     cropped away. It has to be: the design's own orange pill (678:2407) is a
     CHILD of the hero frame, so the /v1/images render baked a fake button into
     the JPG exactly where the real CTA sits. Top-anchoring also means that at
     any viewport the bottom of the source is the part that gets cut. */
  height: 118%;
  background: url('../img/pages/orwak-3110-01.jpg') center top / cover no-repeat;
}
/* The artboard's scrim is a flat #000 at 40% over the whole frame. That is not
   enough: a 40% wash takes a blown highlight (255) only to #999999, where the
   20px sub at the designed 70% white measures 2.16:1 — and even solid white
   measures 2.85:1, against a 4.5:1 floor. A bottom-anchored gradient reaching
   ~0.74 under the copy band puts a blown highlight at ~#434343, where solid
   white is ~9.5:1, so the copy clears AA whatever the photograph does — and
   the top of the frame stays open so the crop still reads. */
.prodhero__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(0,0,0,.26) 0%,
              rgba(0,0,0,.30) 38%,
              rgba(0,0,0,.58) 72%,
              rgba(0,0,0,.74) 100%);
}

.prodhero__copy{
  position: absolute; left: 0; right: 0; bottom: 52px;
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--pad-x);
}
.prodhero__title{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  /* 80px at 1440, as designed; scales down rather than overflowing. */
  font-size: clamp(2.25rem, 0.95rem + 4.6vw, 5rem);
  line-height: 1.54;            /* the designed 123/80 — well clear of the
                                   --lh-display floor, so ó and é are safe */
  letter-spacing: 0;
  /* Designed at 70% white. Held at 94% instead: see the scrim note — 70% is
     the single biggest contrast risk on the artboard. */
  color: rgba(255,255,255,.94);
  text-wrap: balance;
}
.prodhero__sub{
  margin: 14px 0 0;
  max-width: 640px;
  font: 500 20px/25px var(--font-display);
  letter-spacing: .2px;
  /* Solid white. 20px/500 is NOT large text, so it needs the full 4.5:1. */
  color: #fff;
  text-wrap: pretty;
}
.prodhero__actions{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 23px;
  margin-top: 33px;
}
.prodhero__pill{
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  min-width: 193px; height: 46px; padding: 0 22px;
  border: 0; border-radius: var(--r-full);
  /* Designed #DF5129, built --primary-ink: this pill carries a 16px white
     label, which is 3.93:1 on #DF5129 and 5.13:1 on #C2421C. */
  background: var(--primary-ink); color: #fff;
  font: 400 var(--t-body)/1 var(--font-sans);
  letter-spacing: .2px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out);
}
.prodhero__pill:hover{ background: var(--primary-700); }
.prodhero__pill:active{ background: var(--primary-800); }
.prodhero__pill-arrow{
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.85);
}
.prodhero__pill-arrow svg{ width: 12px; height: 12px; }

.prodhero__pill--white{ background: var(--surface); color: var(--ink); }
.prodhero__pill--white:hover{ background: var(--bg-2); color: var(--ink); }
.prodhero__pill-pdf{ width: 13px; height: 16px; color: var(--primary-text); }
/* The datasheet does not exist yet — see the TODO in the markup. A disabled
   button is honest and, unlike a dead link, is not a keyboard trap. */
.prodhero__pill:disabled{
  background: var(--surface); color: var(--ink-3);   /* 4.68:1 on white */
  cursor: not-allowed;
}
.prodhero__pill:disabled .prodhero__pill-pdf{ color: var(--ink-3); }

@media (max-width: 1180px){
  .prodhero{ height: 640px; }
}
@media (max-width: 720px){
  .prodhero{ height: 560px; }
  .prodhero__copy{ bottom: 36px; }
  .prodhero__sub{ font-size: 18px; line-height: 26px; }
  .prodhero__actions{ gap: var(--sp-3); }
  .prodhero__pill{ min-width: 0; flex: 1 1 190px; }
}

/* ============================================================ SECTION RHYTHM
   The artboard's constant 78px, applied once so the page never mixes it with
   --section-y. --row-y is exactly that value at 1440 and degrades to 48px on
   a phone. */
.page-product .split,
.page-product .pspecs,
.page-product .cta-strip,
.page-product .prel,
.page-product .pband,
.page-product .hcontact{ margin-top: var(--row-y); }

/* ============================================================ FEATURE ROWS
   Four of the five are the plain shared .split. The two orange ones need one
   geometry modifier, which is where the artboard contradicts itself: section 3
   hangs the image 149px ABOVE the band and stops 83px short of its bottom,
   while section 6 starts it 137px INSIDE the band and hangs 203px past the
   bottom. They cannot both be right. Section 6's arrangement is canonical —
   it is also what .sust does on the homepage — so both rows are built that
   way, and the artboard's --field-bottom of 203px is eased to 168px so that
   the copy column cannot outgrow the band when Mulish's wider metrics add a
   line at the narrow end of the desktop range.

   NAMING: the spec calls this component .prow; shared.css generalised it to
   .split. `.prow--field` is therefore a modifier applied ALONGSIDE
   .split--field, not a block of its own — the markup is
   `class="split split--field prow--field"`. It keeps the spec's vocabulary so
   the promotion into shared.css is a copy, not a rename. */
.prow--field{
  --field-top: 0px;
  --field-bottom: 168px;
  padding-bottom: 0;
}
.prow--field .split__inner{
  /* 733 / 392 with a 25px gutter — not the 625/500 of the light rows. */
  grid-template-columns: 733fr 392fr;
  gap: 25px;
  align-items: start;
}
.prow--field .split__media{
  aspect-ratio: 733 / 412;
  margin-top: 137px;      /* the image starts this far inside the band */
}
.prow--field .split__body{
  margin-top: 28px;       /* the copy starts this far inside the band */
}
@media (max-width: 1180px){
  .prow--field .split__inner{ grid-template-columns: 1fr; }
  .prow--field .split__media,
  .prow--field .split__body{ margin-top: 0; }
  .prow--field{ padding-block: var(--sp-6); }
}

/* ---- the shared grey band under the last feature row and the benefits ----
   Figma 678:2443 is one 1440×920 #EFEEEE field spanning both sections, so they
   live in one wrapper and there is no gap between them. */
.pband{
  background: var(--bg-2);
  padding-bottom: var(--row-y);
}
.page-product .pband .split{ margin-top: 0; }

/* ============================================================ BENEFITS
   The shared .benefits grid at four columns, with the artboard's 88px icons
   and 18/700 labels. The block is 838px wide and left-aligned in a 1272px
   container — the right half of the band is deliberately empty on the
   artboard; see openQuestions before "fixing" it. */
.pbenefits{ padding-top: var(--row-y); }
.pbenefits__title{
  margin: 0 0 50px;
  font: 500 var(--t-h1)/var(--lh-display) var(--font-display);
  letter-spacing: .2px;
  color: var(--ink);
}
/* The Figma line-height here is 28px on 50px type (0.56). Copying it would
   clip the acutes on á and é outright — hence the --lh-display floor above. */
.pbenefits__grid{
  --benefits-cols: 4;
  max-width: 840px;
  margin: 0; padding: 0;
  list-style: none;
  gap: var(--sp-5);
}
.pbenefits .benefits__icon{ width: 88px; height: 88px; }
.pbenefits .benefits__label{
  font: 700 var(--t-body-lg)/1.28 var(--font-sans);
  letter-spacing: .2px;
  /* Two lines for every label, whichever way each one wraps: in Mulish
     "Költségcsökkenés" is likely to take two lines where Effra took one, and
     all four labels top-align in the design. */
  min-height: 2.56em;
  /* "Idő- és munka-/erőmegtakarítás" carries the designer's break at an
     existing hyphen; nothing else on this label may hyphenate. */
  hyphens: none;
}
@media (max-width: 980px){
  .pbenefits__grid{ max-width: none; }
}

/* ============================================================ TECHNICAL DATA
   Two 505-wide columns, 39px row pitch, one 1px vertical rule between them,
   no horizontal rules and no zebra. Label and value differ only by weight —
   500 against 400 — and that is the entire visual system for these tables.

   Real <dl> semantics, because the vertical rule is decoration and must not be
   the only thing that says "two tables". In WordPress this becomes an ACF
   repeater; the row markup is deliberately flat enough to loop. */
.pspecs__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 146px;
}
.pspecs__col + .pspecs__col{ position: relative; }
.pspecs__col + .pspecs__col::before{
  content: "";
  position: absolute; left: -73px; top: 8px; bottom: 0;
  width: var(--bw-hair);
  background: var(--primary);          /* decorative only — 3.52:1 */
}
.pspecs__head{
  margin: 0 0 var(--sp-1);
  /* Two-line box on both columns so the two tables' rows stay level, which is
     how the artboard has it even though only column B's heading wraps. */
  min-height: 2.24em;
  font: 500 var(--t-h1)/var(--lh-display) var(--font-display);
  letter-spacing: .2px;
  color: var(--ink);
}
.pspecs__list{ margin: 0; display: grid; gap: 15px; }   /* 24 + 15 = 39 pitch */
.pspecs__row{
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
}
.pspecs__row dt{
  font: 500 var(--t-body-lg)/1.34 var(--font-sans);
  letter-spacing: .2px;
  color: var(--ink);
}
.pspecs__row dd{
  margin: 0;
  font: 400 var(--t-body-lg)/1.34 var(--font-sans);
  letter-spacing: .2px;
  color: var(--ink);
}
@media (max-width: 980px){
  .pspecs__inner{ grid-template-columns: 1fr; gap: var(--sp-7); }
  .pspecs__col + .pspecs__col::before{ display: none; }
  .pspecs__head{ min-height: 0; margin-bottom: var(--sp-5); }
}
@media (max-width: 480px){
  /* The pair stays on one line as long as it fits; below this the value drops
     under its label rather than colliding with it. */
  .pspecs__row{ grid-template-columns: 1fr; gap: 2px; }
  .pspecs__list{ gap: var(--sp-4); }
}

/* ============================================================ CTA STRIP
   Shared .cta-strip, tuned to the artboard's 89px band and 24px/400 title.
   White display type on --primary is 3.93:1, which clears the 3:1 large-text
   bar — this is the one place --primary is correct under white text and it is
   deliberately NOT switched to --primary-ink. */
.pcta{ padding: 0 var(--pad-x); }
.pcta .cta-strip__inner{
  min-height: 89px;
  padding-block: var(--sp-4);
  gap: var(--sp-6);
}
.pcta .cta-strip__title{
  font: 400 var(--t-h4)/var(--lh-head) var(--font-display);
  text-wrap: balance;
}
@media (max-width: 720px){
  .pcta .cta-strip__inner{ flex-direction: column; align-items: flex-start; }
  .pcta .split__more{ width: 100%; }
}

/* ============================================================ RELATED PRODUCTS
   .machine cards, unchanged, on a scroll-snap track that runs off the right
   edge of the viewport. The clipped card is the artboard's own overflow cue
   (Frame 104 clips at 1440 with the fifth card half shown), and scroll-snap
   means the track still swipes with the JS removed. No auto-advance. */
.prel__title{
  margin: 0 0 var(--sp-6);
  font: 500 var(--t-h1)/var(--lh-display) var(--font-display);
  letter-spacing: .2px;
  color: var(--ink);
}
.prel__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 225px;      /* 30px rail gutter + 195px photo, as drawn */
  gap: 75px;                     /* 300px pitch, as drawn */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;       /* the motion floor in shared.css disables
                                    this under prefers-reduced-motion */
  /* Align the first card with the container's text column, then let the track
     bleed to the right edge. 100% is the section width, so the scrollbar can
     never push the page into a horizontal scroll the way 100vw would. */
  padding-inline: max(var(--pad-x), calc((100% - var(--container)) / 2 + var(--pad-x))) var(--pad-x);
  scroll-padding-inline-start: max(var(--pad-x), calc((100% - var(--container)) / 2 + var(--pad-x)));
  padding-block: 6px;            /* room for a focus ring on a card */
  scrollbar-width: none;
}
.prel__track::-webkit-scrollbar{ display: none; }
.prel__track > .machine{ scroll-snap-align: start; }
.prel__nav{ margin-top: 33px; justify-content: center; }

/* ============================================================ SMALL FIXES
   Local for now; both belong in shared.css — see sharedGaps. */
/* shared.css styles .mnav__link.is-active but not the drawer's disclosure
   buttons, so "Termékeink" could not be marked current in the drawer. */
.mnav__trigger.is-active{ color: var(--primary-2); }