/* ---------- Dark accent panels ----------
   Homepage keeps its normal light palette everywhere; a handful of
   "statement" moments (reassurance block, memory section, closing footer)
   get a dark panel treatment, echoing houseofhoney.com's alternating
   light/dark sections instead of recoloring the whole page. Background is
   the site's own --ink (#111111) so it reads as "the heading colour,
   inverted" rather than an unrelated new hue.

   .dark-panel is applied directly to the existing <section> (alongside
   its normal classes, e.g. class="closing-footer wrap dark-panel") rather
   than wrapping the content in a new div. That's deliberate: every
   spacing rule for that section (150px top rhythm, title padding-bottom,
   etc.) already exists in style.css and applies correctly as long as
   nothing sits between the section and its content — wrapping it would
   mean re-deriving all of that by hand and risking it drifting from how
   every light section on the page is spaced. Only the background needs
   its own full-bleed layer, added via ::before so it doesn't touch the
   box model (padding/margins) at all. */

body { overflow-x: clip; }

.dark-panel {
  position: relative;
  /* establishes its own stacking context so ::before's z-index:-1 below
     is guaranteed to stay behind this section's own text (as intended)
     and can't end up behind unrelated content elsewhere on the page */
  z-index: 0;
  --paper: #111111;
  --ink: #F5F3EF;
  --ink-heading: rgba(245,243,239,0.8);
  --ink-subheading: #F5F3EF;
  --ink-body: rgba(245,243,239,0.85);
  --line: rgba(245,243,239,0.14);
  color: var(--ink);
}
.dark-panel::before {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -1;
  /* full-bleed breakout: bg spans the whole viewport width regardless of
     the page's own 1400px .wrap / body side-padding, same technique this
     codebase already uses for .hc-eyebrow */
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  background: var(--paper);
}

/* ---------- Entry transition (light section → dark panel) ----------
   Every gap between sections on this site is owned entirely by the
   section that follows (its own top padding — the one before it never
   adds bottom padding). Split 110px light / 40px dark — same split used
   for the exit transition below, so the dark panel reads as an equal
   amount of "black" above its heading and below its content. */
.dark-panel::before { top: 110px; }
@media (max-width:900px){ .dark-panel::before { top: 54px; } }

/* o-mne.html only: #why-label (heading) flows straight into
   .why-me-layout (cards + photo) with no light gap between them — one
   panel, not two — so .why-me-layout's own fill starts flush at the top
   instead of splitting like every other entry transition. */
.why-me-layout.dark-panel::before { top: 0; }

/* homepage: "Jak focení probíhá" (#sluzby) + its three steps continue the same dark
   panel as .memory-section right above them — one long panel, not three separate
   ones — so both get a flush entry instead of the usual light-gap-above treatment. */
#sluzby.dark-panel::before,
.steps-section.dark-panel::before { top: 0; }

/* homepage only, desktop only: .proof-block breaks the "previous section owns no
   bottom padding" rule above on purpose (style.css, @media min-width:901px) — its photo
   caption is position:absolute so the section's own flow height ends at the photo, not
   the caption below it; without 40px of its own padding-bottom the next section's dark
   fill would start right under the photo, clipping into the caption. That extra 40px
   stacks on top of this entry transition's usual 110px, reading as a visibly bigger gap
   than every other light→dark transition on the page. Trimmed back out here instead, so
   the two together land on the same 150px total every other transition uses. */
@media (min-width:901px){
  .proof-block + .reassure-section.dark-panel::before { top: 70px; }
}

/* ---------- Exit transition (dark panel → light section) ----------
   Same total gap as the entry transition (150px desktop / 90px mobile),
   now split 64px dark / 86px light desktop (48px/42px mobile) — more dark
   than the entry's 40px, since the exit was reading as abruptly cut off
   next to the entry's own 40px dark fill PLUS the photo/content right
   above it carrying extra visual weight. Each panel extends its own dark
   fill (via padding-bottom, which ::before's bottom:0 automatically
   follows) into the gap that follows it, and the light section after it
   has its own top padding trimmed to match. Targeted by id/class rather
   than edited in style.css because .section-label is a shared rule used
   by sections elsewhere too. .closing-footer needs none of this — it's
   the last thing on the page, nothing to exit into. */
.reassure-section.dark-panel,
.steps-section.dark-panel { padding-bottom: 64px; }
#work { padding-top: 86px; }
.steps-section.dark-panel + .section-label { padding-top: 86px; }
@media (max-width:900px){
  .reassure-section.dark-panel,
  .steps-section.dark-panel { padding-bottom: 48px; }
  #work { padding-top: 42px; }
  .steps-section.dark-panel + .section-label { padding-top: 42px; }
}

/* o-mne.html only: same idea — .why-me-layout exits into the closing CTA
   right after it (the last section on that page). Targeted via the adjacent-
   sibling selector (rather than .closing:not(.dark-panel), which used to also
   catch every OTHER page's .closing — kontakt.html, cenik.html — shrinking
   their entry gap too, since none of them have a dark-panel before .closing
   either) so only the .closing that directly follows this dark panel gets
   the shorter transition. */
#why-label { padding-bottom: 0; }
.why-me-layout.dark-panel { padding: 40px 0; }
.why-me-layout.dark-panel + .closing { padding-top: 110px; }
@media (max-width:900px){
  .why-me-layout.dark-panel { padding: 36px 0; }
  .why-me-layout.dark-panel + .closing { padding-top: 54px; }
}

/* A sticky "curtain" cover effect (closing CTA riding up over the video
   banner before it) was tried here and reverted — it relied on
   position:sticky interacting correctly with the full-bleed breakout
   above, which turned out to render differently in Safari (this site's
   actual usage) than in the Chrome-based tool used to build it: the dark
   background stopped reaching full width, and the section after it
   overlapped instead of following normally. Not worth re-attempting
   without a way to verify directly in Safari.

   The CTA/"Google recenze"/review-carousel trio were also tried as a
   merged dark block (like .why-me-layout on o-mne.html still is) and
   reverted back to the site's normal light palette — only the footer
   stayed dark. */

/* ---------- Hero curtain reveal ----------
   proof-block rides up and covers the hero as you scroll past it, instead
   of just following it in the page's normal rhythm. Hero is position:sticky
   (pinned at the top); proof-block is normal flow, scrolling up over it on a
   higher stacking layer.

   Whether proof-block fully covers hero before hero is done being relevant
   depends entirely on proof-block's own height vs hero's: hero stays pinned
   for exactly (margin-top + proof-block's height) of scrolling, regardless
   of hero's OWN height — so if proof-block is shorter than hero, hero
   un-pins while proof-block's top still hasn't reached the viewport top,
   leaving hero peeking through above it.

   A previous attempt tried making proof-block ALSO position:sticky, on the
   theory that it would "lock" at the top the moment it got there. That
   doesn't work here: sticky only has room to hold an element in place for
   as long as its CONTAINER has space left after it, and proof-block is the
   last child of .hero-curtain-stack — there's nothing left in the container
   once it arrives, so it never actually gets to stick; it behaves exactly
   like position:relative, overshooting straight through 0 with no dwell
   time. The actual fix is a min-height on proof-block, guaranteeing it's
   always at least as tall as hero actually is.

   That height can't be known in CSS alone — hero's own height depends on
   .hc-split's min(820px, 70vh) plus whatever the lead text wraps to, so any
   fixed px guess is either too small on some screens (gap reopens) or too
   big on others (empty tail below the content). script.js measures hero's
   rendered height on load/resize and writes it to --hero-h; proof-block's
   min-height just reads that, so the two are ALWAYS exactly equal — not
   "probably close enough," actually equal, so neither a peek-through gap
   nor a dead space in proof-block's own box is possible.

   Hero does NOT have its own min-height (e.g. 100vh) forcing it to fill the
   screen — that was tried, specifically to close a *different* gap (bare
   page background below hero's photos, before proof-block had scrolled up
   far enough to reach it, on any screen taller than hero's own content).
   It backfired: it inflated hero's rendered height without inflating
   proof-block to match (proof-block was deliberately kept at hero's
   NATURAL content height, to avoid ITS OWN dead-space problem) — so the
   two heights that this whole mechanism depends on being equal quietly
   stopped being equal again, reopening the peek-through gap. .hc-split's
   own height cap (style.css) was raised instead (620px → min(820px,70vh)),
   which closes most of that same gap at its real source — hero's content
   not filling the screen — without needing hero's box to be artificially
   taller than its content.

   This differs from the failed Safari attempt noted below in one deliberate
   way: there, the SAME element was both sticky AND doing the 100vw
   full-bleed breakout. Here the full-bleed breakout lives on proof-block,
   which isn't sticky. Still verify directly in Safari before shipping. */
.hero-curtain-stack { position: relative; }
/* Mobile only now — on desktop this whole curtain-reveal mechanism (hero pinned via
   sticky, proof-block riding up to cover it) was dropped per direct instruction: it was
   the source of every proof-block height/gap issue this file's comments above document
   (min-height tied to hero's own height, content centered/end-aligned inside that forced
   box, entry-transition compensation for the leftover padding, …). Simpler to just not
   have hero pinned at all on desktop — hero and proof-block sit in normal flow, one after
   the other, with a plain section-gap between them (below). Mobile keeps the original
   curtain-reveal exactly as it was. */
@media (max-width:900px){
  /* top matches the fixed <header>'s own height (style.css, body's padding-top) — hero
     docks flush under the header once pinned, instead of its top sliver sitting behind it. */
  .hero-curtain-stack .hero-collage { position: sticky; top: var(--header-h, 72px); z-index: 1; }
  /* margin-top: was 70px, protecting the hero's old secondary "Prohlédnout galerii" link
     from being covered on the very first scroll tick — that link doesn't exist in the hero
     anymore, so trimmed down to just a small breathing buffer.
     min-height matches hero's own rendered height exactly (JS-measured, see below) so
     proof-block can never be shorter than the hero it needs to fully cover. */
  .hero-curtain-stack .proof-block {
    position: relative;
    z-index: 2;
    background: var(--paper);
    margin-top: 24px;
    min-height: var(--hero-h, 700px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .hero-curtain-stack .proof-block::before {
    content: "";
    position: absolute;
    top: 0;
    /* -30px, not 0 — the hero bento tiles' own box-shadow (.orbit-tile-inner, style.css)
       paints past their box's bottom edge, which sits right at hero's own bottom edge.
       This layer is what covers hero during the curtain-reveal scroll (see above), so a
       flush bottom:0 here left that shadow's last ~20px poking out beneath proof-block,
       into the next section's own transparent entry-transition gap — reading as a stray,
       unexplained shadow with no visible source. Overshooting past proof-block's own box
       absorbs it; same --paper fill either way, so it's invisible everywhere else. */
    bottom: -30px;
    z-index: -1;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    background: var(--paper);
  }
}
/* Desktop: plain stacked flow, same section-gap rhythm (150px) the rest of the page uses
   between major sections — overrides style.css's own smaller .proof-block top padding
   (var(--space-7), 56px) just for this one transition. */
@media (min-width:901px){
  .hero-curtain-stack .proof-block { padding-top: 150px; }
}