/* ==========================================================================
   Sablona 1 — visual foundation (base + hero + Snoubenci/AboutUs)
   Design source: Figma FGaz5ALtOwvazvJ8L9yQv9 (see _shots/figma-sablony/sablona_1)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted fonts (latin + latin-ext for Czech diacritics)
   Playfair Display 400 · Lora 400/500/700 · Ibarra Real Nova 600
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/playfair-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/playfair-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/lora-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/lora-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/lora-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/lora-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/lora-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/lora-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Ibarra Real Nova'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibarra-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ibarra Real Nova'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibarra-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --font-cta: 'Ibarra Real Nova', Georgia, serif;

  --c-text-mauve: #745861;
  --c-ink: #1A0A04;
  --c-cta: #44514C;
  --c-sage: #C2D0BB;
  --c-sage-dark: #A7B3A1;
  --c-story-card: #E3BCB3;
  --c-blush: #FBEEEA;
  --c-cream: #FFFCF5;
  --c-cream-2: #FFF9F6;
  --c-hero-fallback: #D79894;
  --c-wood-brown: #624835;   /* warm brown plank tone (matches new flooring wood-tile.jpg avg) */
  --c-white: #ffffff;

  --tpl-uri: '';
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--c-text-mauve);
  line-height: 1.6;
  background-color: var(--c-cream);
  background-image: url('../img/paper.png');
  background-repeat: repeat;
}
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: var(--c-text-mauve); }

/* --------------------------------------------------------------------------
   Surface utilities
   -------------------------------------------------------------------------- */
.bs-paper {
  background-color: var(--c-cream);
  background-image: url('../img/paper.png');
  background-repeat: repeat;
}
.bs-wood {
  background-color: var(--c-wood-brown);
  background-image: url('../img/wood-tile.jpg');
  background-repeat: repeat-y;      /* vertically-seamless mirror tile */
  background-size: 100% auto;
  background-position: top center;
}

/* CTA button — Figma: Ibarra SemiBold 18px, #44514C fill, radius 20px, soft drop */
.bs-btn {
  display: inline-block;
  font-family: var(--font-cta);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--c-white);
  background: var(--c-cta);
  border: none;
  border-radius: 20px;
  padding: 13px 30px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 5px rgba(0,0,0,.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bs-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 10px rgba(0,0,0,.45);
}

/* ==========================================================================
   HERO   (built to _ref_top.png @1620: hero bottom y=843 -> 52vw;
           names center y=296 = 35%; nav logo x=126, links -> x=1438)
   ========================================================================== */
.bs-hero {
  position: relative;
  height: 52vw;
  min-height: 560px;
  max-height: 900px;
  color: var(--c-white);
  isolation: isolate;
}
.bs-hero__media {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: -2;
  background: var(--c-hero-fallback);
}
.bs-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.bs-hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.28); z-index: -1; }

.bs-hero__bar {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 26px clamp(24px, 7.8%, 130px);
}
.bs-hero__logo {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--c-white);
  white-space: nowrap;
}
.bs-hero__logo-amp { font-style: italic; margin: 0 .18em; }

.bs-nav { flex: 1 1 auto; min-width: 0; }
.bs-nav__ul {
  display: flex;
  flex-wrap: wrap;                  /* wrap rather than overflow → never forces page h-scroll on narrow desktops */
  justify-content: flex-start;      /* items grouped with even gaps, not stretched edge-to-edge */
  align-items: center;
  gap: clamp(12px, 1.7vw, 44px) clamp(14px, 1.8vw, 44px);
  width: auto;
}
.bs-nav__ul a {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.05vw, 17px);   /* shrink on narrower desktops so 12 items fit */
  color: var(--c-white);
  white-space: nowrap;
}
.bs-nav__ul a:hover { opacity: .8; }

/* hamburger (mobile only) */
.bs-nav__toggle, .bs-nav__burger { display: none; }

.bs-hero__center {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 20px;
  text-align: center;
}
.bs-hero__names {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 96px;
  line-height: 1.05;
  color: var(--c-white);
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.bs-hero__amp { font-style: italic; margin: 0 .16em; }
.bs-hero__date {
  font-family: var(--font-display);
  font-size: 24px;
  margin-top: 14px;
  color: var(--c-white);
  text-shadow: 0 2px 14px rgba(0,0,0,.25);
}

/* --------------------------------------------------------------------------
   Countdown — sits inside .bs-hero__center under the date. Not a Figma element
   (the board has no clock); styled to read as part of the hero lockup, so it
   borrows the hero's white + Playfair and stays deliberately quiet.
   -------------------------------------------------------------------------- */
.bs-countdown {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 3.4vw, 58px);
  margin-top: clamp(18px, 2.2vw, 34px);
}
.bs-countdown__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.2em;
}
.bs-countdown__num {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 42px);
  line-height: 1.1;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 14px rgba(0,0,0,.25);
}
.bs-countdown__label {
  font-family: var(--font-body);
  font-size: clamp(11px, .82vw, 14px);
  letter-spacing: .14em;
  text-transform: lowercase;
  color: rgba(255,255,255,.82);
  margin-top: 4px;
  text-shadow: 0 1px 10px rgba(0,0,0,.3);
}

@media (max-width: 820px) {
  .bs-countdown { gap: 14px; margin-top: 16px; }
  .bs-countdown__label { letter-spacing: .08em; }
}

/* ==========================================================================
   SNOUBENCI / AboutUs
   (oval 648x372 straddling boundary top y~776; cards 406 wide, group 982,
    gap 170; branch ~1500 wide @ opacity .32 behind)
   ========================================================================== */
body { overflow-x: clip; }          /* wide botanical branch must not add page h-scroll */

.bs-snoubenci {
  position: relative;
  padding-bottom: 90px;
  /* no overflow clip here (would cut the oval's hero overlap) and none on the people row
     (would crop the wide branch) — h-scroll is handled by body{overflow-x:clip} above. */
}

/* oval intro card straddling the hero/paper boundary — single crisp black outline */
.bs-snoubenci__oval {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  width: min(648px, 90%);
  height: 372px;
  top: -150px;                      /* overlap up into the hero — position-based, NOT negative-margin
                                       collapse (which Firefox/Safari render differently from Chrome) */
  margin: 0 auto -150px;            /* pull the following cards up to close the flow gap */
  background: var(--c-white);
  border: 1.5px solid var(--c-ink);
  border-radius: 50%;
  isolation: isolate;               /* keep the oval on its own layer, always above the hero */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 96px;
  box-shadow: 0 8px 30px rgba(26,10,4,.10);
}
/* second (inner) outline — the design's double border */
.bs-snoubenci__oval::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px solid var(--c-ink);
  border-radius: 50%;
  pointer-events: none;
}

.bs-snoubenci__heading {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--c-text-mauve);
  margin-bottom: 14px;
}
.bs-snoubenci__intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-text-mauve);
  max-width: 30em;
}
.bs-snoubenci__intro p { margin: 0; }

/* couple cards with a large botanical branch sweeping behind + between them */
.bs-snoubenci__people {
  position: relative;
  max-width: min(982px, 92%);       /* never wider than viewport → always centers (no left-align in the 820–982 zone) */
  margin: 90px auto 0;              /* clears the oval, which now overlaps up into the hero */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.bs-snoubenci__vine {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1300px, 96vw);         /* vw-capped → can't exceed the viewport → no h-scroll, no clip needed */
  z-index: 0;
  pointer-events: none;
}
.bs-snoubenci__vine img { width: 100%; height: auto; opacity: .32; }

/* white polaroid card: 407x649 (ratio). photo 376x461 inset 15px (3.7%),
   gap, then mauve-outlined nameplate 376x145 at photo width. */
.bs-person {
  position: relative;
  z-index: 1;
  width: 41.35%;                    /* 406 / 982 */
  background: var(--c-white);
  padding: 15px;                    /* photo white margin — FIXED px (% was of parent, ~36px, too large) */
  box-shadow: 0 12px 30px rgba(26,10,4,.14);
}
.bs-person__photo { line-height: 0; }
.bs-person__photo img {
  width: 100%;
  aspect-ratio: 376 / 461;
  object-fit: cover;
}
.bs-person__plate {
  margin-top: 14px;                 /* gap between photo and nameplate */
  background: var(--c-white);
  border: 1.5px solid var(--c-text-mauve);
  text-align: center;
  padding: 30px 12px 34px;
}
.bs-person__name {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--c-text-mauve);
  line-height: 1.05;
}
.bs-person__role {
  font-family: var(--font-body);
  font-size: 32px;
  color: var(--c-text-mauve);
  margin-top: 6px;
}


/* bio text under each fiance card — not on the board (see templates/AboutUs.php),
   sized to sit quietly under the name plate rather than compete with it */
.bs-person__about {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text-mauve);
  text-align: center;
  margin-top: 16px;
  max-width: 406px;                 /* matches the card width from the board */
}
.bs-person__about p { margin: 0 0 .6em; }
.bs-person__about p:last-child { margin-bottom: 0; }

/* YouTube/Vimeo embed — also not on the board; centred under the pair */
.bs-snoubenci__video {
  position: relative;
  z-index: 2;
  width: min(900px, 90%);
  margin: clamp(34px, 4vw, 64px) auto 0;
  aspect-ratio: 16 / 9;
  box-shadow: 0 14px 30px rgba(50,34,26,.22);
}
/* getEmbedHtml() returns a YouTube FACADE: a <style> block, a <script> block and an
   absolutely-positioned .bs-ytfacade div. A blanket `> *` rule here is a trap — it gives
   the <style>/<script> elements a box and their source text renders on the page. Target
   only the real children. */
.bs-snoubenci__video > style,
.bs-snoubenci__video > script { display: none; }
.bs-snoubenci__video iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 820px) {
  .bs-person__about { font-size: 14px; margin-top: 12px; }
}
/* keep any not-yet-built sections from looking broken */
.section-stub .container { max-width: 1120px; margin: 0 auto; padding: 60px 40px; }

/* ==========================================================================
   RESPONSIVE  (~390px reference _ref_mobile_top.png:
                hamburger right, oval straddles, cards STAY 2-column, faint branch)
   ========================================================================== */
@media (max-width: 820px) {
  .bs-hero { height: min(185vw, 760px); min-height: 0; max-height: none; }
  .bs-hero__bar { padding: 18px 20px; gap: 0; }
  .bs-hero__logo { display: none; }
  .bs-nav { flex: 1 1 auto; display: flex; justify-content: flex-end; }

  .bs-nav__burger {
    display: block;
    margin-left: auto;
    width: 42px; height: 30px;
    position: relative;
    cursor: pointer;
  }
  .bs-nav__burger span {
    position: absolute; left: 4px; right: 4px; height: 3px;
    background: var(--c-white); border-radius: 3px;
  }
  .bs-nav__burger span:nth-child(1) { top: 3px; }
  .bs-nav__burger span:nth-child(2) { top: 13px; }
  .bs-nav__burger span:nth-child(3) { top: 23px; }

  .bs-nav__ul {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    width: 100%;
    margin-top: 16px;
  }
  .bs-nav__toggle:checked ~ .bs-nav__ul { display: flex; }
  .bs-nav__ul a { font-size: 18px; }

  .bs-hero__center { top: 30%; padding: 0 16px; }
  .bs-hero__names { font-size: clamp(34px, 10.5vw, 46px); line-height: 1.06; }
  .bs-hero__date { font-size: 15px; margin-top: 8px; }

  .bs-snoubenci__oval {
    width: min(344px, 94%);
    height: auto;                   /* override desktop's fixed 372px → aspect-ratio drives the ellipse */
    aspect-ratio: 344 / 222;        /* clean wide ellipse */
    border-radius: 50%;
    top: -18vw;                     /* position-based overlap (engine-consistent) */
    margin: 0 auto -18vw;
    padding: 18px 34px;
  }
  .bs-snoubenci__heading { font-size: 23px; margin-bottom: 6px; }
  .bs-snoubenci__intro { font-size: 11px; line-height: 1.45; max-width: 250px; }

  .bs-snoubenci__people {
    max-width: min(560px, 90%);     /* scales with the viewport, stays centered */
    margin: 26px auto 0;
    padding: 0 14px;
    /* stays a 2-column row — this is the mobile design */
  }
  .bs-snoubenci__vine { width: min(520px, 96vw); }   /* vw-capped, stays behind, no h-scroll */
  .bs-person { width: 47%; padding: 8px; box-shadow: 0 8px 18px rgba(26,10,4,.14); }
  .bs-person__plate { margin-top: 8px; padding: 12px 6px 14px; }
  .bs-person__name { font-size: 22px; }
  .bs-person__role { font-size: 12px; margin-top: 2px; }
}

/* ==========================================================================
   STORY  (cesta_zivotem — Figma 644:228, over the paper surface)
   Header band 1161x240 (white + inner 2px #856d75 inset 13px);
   title Playfair 48 / intro Lora 20; timeline = alternating photo/text rows,
   cards 507x338 (3:2) with #e3bcb3 backing + white 3px rounded-20 inner frame
   inset 5% (=25/17px), faint kytka_1 botanicals behind.
   ========================================================================== */
.bs-story {
  position: relative;
  padding: 70px 0 90px;
  overflow: hidden;                 /* botanicals bleed but never add page scroll */
  isolation: isolate;
}

.bs-story__inner {
  position: relative;
  z-index: 1;
  max-width: min(1161px, 92%);
  margin: 0 auto;
}

/* header band — white rect + inner mauve-grey outline */
.bs-story__band {
  position: relative;
  background: var(--c-white);
  min-height: 240px;
  padding: 34px clamp(24px, 3.2vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 8px 26px rgba(26,10,4,.08);
}
.bs-story__band::after {
  content: "";
  position: absolute;
  inset: 13px;                      /* Figma cesta_obdelnik_tah offset */
  border: 2px solid #856d75;
  pointer-events: none;
}
.bs-story__heading {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  color: var(--c-text-mauve);
  margin-bottom: 22px;
}
.bs-story__intro {
  position: relative;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--c-text-mauve);
  max-width: 1114px;
}
.bs-story__intro p { margin: 0; }

/* timeline — two-column alternating rows, cards at native 507px */
.bs-story__timeline {
  list-style: none;                 /* it's an <ol> — drop markers + UA left padding */
  padding: 0;
  max-width: min(1030px, 100%);
  margin: clamp(32px, 4vw, 48px) auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 9vw, 128px);
}
.bs-story__row {
  position: relative;               /* anchor for this item's botanical */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  align-items: start;
}
.bs-story__row--photo-left  .bs-story__card { grid-column: 1; grid-row: 1; }
.bs-story__row--photo-left  .bs-story__text { grid-column: 2; grid-row: 1; text-align: right; }
.bs-story__row--photo-right .bs-story__text { grid-column: 1; grid-row: 1; text-align: left; }
.bs-story__row--photo-right .bs-story__card { grid-column: 2; grid-row: 1; }

/* faint botanical — one per timeline item, opposite the photo, behind the text.
   Rotation is set per item inline (--rot); .bs-story overflow:hidden clips the
   bleed so it never adds page scroll. */
.bs-story__card,
.bs-story__text { position: relative; z-index: 1; }
.bs-story__flower {
  position: absolute;
  z-index: 0;
  top: 50%;
  width: clamp(380px, 34vw, 560px);   /* card-sized, like the design's big hibiscus */
  height: auto;
  opacity: .48;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
}
.bs-story__text { position: relative; z-index: 1; }              /* text sits OVER the flower */
.bs-story__row--photo-left  .bs-story__flower { left: 75%; }     /* centered in the right (text) column */
.bs-story__row--photo-right .bs-story__flower { left: 25%; }     /* centered in the left (text) column */

/* photo card: dusty-rose backing + inset white rounded frame */
.bs-story__card {
  position: relative;
  width: 100%;
  aspect-ratio: 507 / 338;
  background: var(--c-story-card);
  overflow: hidden;
  margin: 0;
}
.bs-story__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The card is 3:2 landscape but a PORTRAIT upload (e.g. the 800x1200 cat) only
     keeps the middle 44% of its height under a centred cover-crop, which decapitates
     the subject. Bias upward, same rule and reason as .bs-people__avatar img. Has no
     effect on landscape sources, where cover crops horizontally instead. */
  object-position: center 28%;
}
.bs-story__frame {
  position: absolute;
  inset: 5%;                        /* = 25px / 17px on a 507x338 card */
  border: 3px solid var(--c-white);
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(26,10,4,.20);
  pointer-events: none;
}

/* paired text block */
.bs-story__event-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 29.429px);
  line-height: 1.15;
  color: var(--c-text-mauve);
  margin: 0;
}
.bs-story__event-date {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.2;
  color: var(--c-text-mauve);
  margin: 4px 0 0;
}
.bs-story__event-desc {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.4;
  color: var(--c-text-mauve);
  margin-top: 14px;
}
.bs-story__event-desc p { margin: 0 0 .4em; }
.bs-story__event-desc p:last-child { margin-bottom: 0; }

/* ---- Story mobile: single-column stacked polaroids ---- */
@media (max-width: 820px) {
  .bs-story { padding: 44px 0 60px; }
  .bs-story__band { min-height: 0; padding: 22px 22px; }
  .bs-story__band::after { inset: 8px; }
  .bs-story__heading { font-size: clamp(22px, 6vw, 26px); margin-bottom: 12px; }
  .bs-story__intro { font-size: clamp(12px, 3.4vw, 14px); line-height: 1.45; }

  .bs-story__timeline {
    max-width: min(440px, 92%);
    gap: 40px;
    margin-top: 34px;
  }
  .bs-story__row { grid-template-columns: 1fr; row-gap: 16px; }
  .bs-story__row .bs-story__card { grid-column: 1; grid-row: 1; }
  .bs-story__row .bs-story__text { grid-column: 1; grid-row: 2; text-align: center; }

  .bs-story__event-title { font-size: 24px; }
  .bs-story__event-date  { font-size: 19px; }
  .bs-story__event-desc  { font-size: 16px; margin-top: 10px; }

  .bs-story__flower { width: clamp(240px, 62vw, 380px); opacity: .42; left: 50%; }
  .bs-story__row--photo-left  .bs-story__flower { left: 50%; }
  .bs-story__row--photo-right .bs-story__flower { left: 50%; }
}

/* ==========================================================================
   WOOD BAND — one continuous plank surface behind consecutive wood sections
   (index.php wraps them). The texture runs underneath uninterrupted; the paper
   tears into it at the band's top edge and back out at the bottom.
   ========================================================================== */
.bs-wood-band {
  position: relative;
  background-color: var(--c-wood-brown);
  background-image: url('../img/wood-tile.jpg');
  background-repeat: repeat-y;
  background-size: 100% auto;        /* one continuous run, no per-section reset */
  background-position: top center;
}
/* sections + dividers inside the band are transparent so the plank runs through */
.bs-wood-band > section,
.bs-wood-band > .bs-divider { background-color: transparent; background-image: none; }
.bs-wood-band .bs-wood       { background-color: transparent; background-image: none; }

/* torn deckle where paper meets the wood band */
.bs-wood-band__tear {
  display: block;
  height: clamp(52px, 6vw, 84px);
  background: url('../img/torn-paper.svg') top center / 100% 100% no-repeat;
}
.bs-wood-band__tear--bottom { transform: scaleY(-1); }

/* ==========================================================================
   SECTION DIVIDER (oddelovac — Figma 644:220): centre swirl + hairlines
   ========================================================================== */
.bs-divider {
  display: flex;
  align-items: center;
  gap: clamp(14px, 4vw, 44px);
  width: 100%;
  padding: clamp(26px, 5vw, 52px) 0;
  overflow: hidden;                 /* never contributes horizontal page scroll */
}
.bs-divider__line {
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
}
.bs-divider--paper .bs-divider__line { background: rgba(116, 88, 97, .35); }  /* mauve hairline on paper */
.bs-divider--wood  .bs-divider__line { background: rgba(255, 255, 255, .45); } /* light hairline on wood */
.bs-divider__motif {
  flex: 0 0 auto;
  width: clamp(120px, 15vw, 199px);
  height: auto;
  opacity: .5;
  filter: drop-shadow(0 2px 1px rgba(46, 32, 22, .3));
}
.bs-divider--wood .bs-divider__motif { opacity: .62; }

/* ==========================================================================
   GALLERY (galerie — Figma 610:300)  polaroids scattered on the wood band
   ========================================================================== */
.bs-gallery {
  position: relative;
  padding: clamp(48px, 6vw, 96px) 0 clamp(56px, 7vw, 104px);
  overflow: hidden;
  isolation: isolate;
}
.bs-gallery__inner {
  position: relative;
  z-index: 1;
  max-width: min(1180px, 92%);
  margin: 0 auto;
}

/* header cluster: title polaroid + CTA */
.bs-gallery__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 34px);
}
.bs-gallery__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  color: var(--c-text-mauve);
  margin: 0 0 12px;
  text-align: center;
}
.bs-gallery__intro {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.55;
  color: var(--c-text-mauve);
  text-align: center;
}
.bs-gallery__intro p { margin: 0; }

/* ---- polaroid component (shared by title card + photos) ---- */
.bs-polaroid {
  position: relative;
  display: block;
  background: var(--c-white);
  padding: 14px 14px 0;
  box-shadow:
    7px 9px 0 rgba(26,10,4,.28),      /* dark offset backing card */
    0 6px 18px rgba(0,0,0,.34);       /* soft ambient */
}
.bs-polaroid--photo { text-decoration: none; }
.bs-polaroid__frame {
  display: block;
  overflow: hidden;
}
.bs-polaroid__photo {
  display: block;
  width: 100%;
  aspect-ratio: 352 / 236;
  object-fit: cover;
}
/* embossed swirl caption strip below the photo/body.
   The board specifies hard-light, but the asset is grey line art (mean luminance 121,
   69% of its ink LIGHTER than mid-grey) and the polaroid it sits on is pure white:
   hard-light SCREENS everything above 50% grey, so screen(#fff, light-grey) = #fff
   and two thirds of the ornament is erased - it read as white-on-white. multiply
   keeps the dark strokes and lets the light ones fall away against the card, which
   is the light-grey swirl the Figma render actually shows. */
.bs-polaroid__swirl {
  display: block;
  height: 30px;
  margin-top: 8px;
  background: url('../img/embossedswirl.png') center / auto 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: .55;
}
.bs-polaroid--title {
  max-width: 340px;
  padding: 22px 26px 0;
}
.bs-polaroid--title .bs-polaroid__body { text-align: center; }

/* aligned 3-up polaroid grid */
.bs-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(32px, 4.5vw, 64px);
  justify-items: center;
}
.bs-gallery__grid .bs-polaroid { width: 100%; max-width: 360px; }

/* youtube */
.bs-gallery__video { margin-top: clamp(32px, 4.5vw, 64px); }
.bs-gallery__video-frame {
  position: relative;               /* contain the absolutely-positioned YT facade */
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--c-white);
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.34);
}
.bs-gallery__video-frame iframe { width: 100%; height: 100%; display: block; border: 0; }

@media (max-width: 820px) {
  .bs-gallery__grid { grid-template-columns: 1fr; }
  .bs-gallery__grid .bs-polaroid { max-width: min(320px, 82vw); }
}

/* ---- lightbox ---- */
.bs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(26,10,4,.86);
  padding: 4vmin;
}
.bs-lightbox.is-open { display: flex; }
.bs-lightbox__img {
  max-width: 94vw;
  max-height: 90vh;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  background: var(--c-white);
  padding: 10px;
}
.bs-lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.14);
  color: var(--c-white);
  border: none;
  font-size: 34px;
  line-height: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  cursor: pointer;
}
.bs-lightbox__btn:hover { background: rgba(255,255,255,.28); }
.bs-lightbox__prev { left: 3vmin; }
.bs-lightbox__next { right: 3vmin; }
.bs-lightbox__close { top: 3vmin; right: 3vmin; transform: none; width: 46px; height: 46px; font-size: 26px; }
@media (max-width: 620px) {
  .bs-lightbox__btn { width: 44px; height: 44px; font-size: 26px; }
}

/* ==========================================================================
   PROGRAM (program — Figma 607:226)  cream card on the wood band
   ========================================================================== */
.bs-program {
  --c-program-mauve: #7D626A;         /* distinct mauve for this section */
  padding: clamp(40px, 6vw, 96px) 0;
  display: flex;
  justify-content: center;
}
.bs-program__card {
  position: relative;
  width: min(540px, 90%);
  background: var(--c-cream);          /* #FFFCF5 warm cream */
  padding: clamp(26px, 3.4vw, 42px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.bs-program__inner {
  border: 2.25px solid var(--c-sage);  /* #C2D0BB sage */
  padding: clamp(26px, 3.6vw, 44px) clamp(20px, 3vw, 36px);
}

/* sage map-pin straddling the card's top-left border */
.bs-program__pin {
  position: absolute;
  top: -16px;
  left: clamp(20px, 4vw, 40px);
  width: clamp(34px, 4vw, 44px);
  height: auto;
  z-index: 3;
}

/* flower + leaf cluster overhanging the top-right corner */
.bs-program__botanical {
  position: absolute;
  top: clamp(-46px, -4vw, -30px);
  right: clamp(-24px, -2vw, -10px);
  width: clamp(120px, 15vw, 180px);
  z-index: 3;
  pointer-events: none;
}
.bs-program__botanical img { position: absolute; top: 0; right: 0; display: block; }
.bs-program__flower { width: 78%; right: 0; }
.bs-program__leaf   { width: 92%; right: 8%; top: 22%; transform: rotate(-18deg); opacity: .95; }

.bs-program__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  color: var(--c-program-mauve);
  margin: 0 0 14px;
}
.bs-program__intro {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.55;
  color: var(--c-program-mauve);
  margin-bottom: clamp(20px, 3vw, 30px);
}
.bs-program__intro p { margin: 0 0 .5em; }
.bs-program__intro p:last-child { margin-bottom: 0; }

.bs-program__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 26px);
}
.bs-program__row-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.25;
  color: var(--c-program-mauve);
  margin: 0 0 3px;
}
.bs-program__row-time {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.35;
  color: var(--c-program-mauve);
  margin: 0;
}
/* Dish variants inside a course note read as lines, not bullet points. */
.bs-program__row-note ul,
.bs-program__row-note ol { list-style: none; margin: .15em 0 0; padding: 0; }
.bs-program__row-note li { margin: 0 0 .28em; }
.bs-program__row-note li:last-child { margin-bottom: 0; }

.bs-program__row-note {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.25vw, 14.5px);
  line-height: 1.45;
  color: var(--c-program-mauve);
  opacity: .82;
  margin-top: 4px;
}
.bs-program__row-note p { margin: 0; }

@media (max-width: 820px) {
  .bs-program__card { width: min(460px, 92%); }
}

/* ==========================================================================
   PEOPLE (duleziti_lide — Figma 610:301)  avatars inside a double-ellipse frame
   ========================================================================== */
.bs-people {
  padding: clamp(30px, 5vw, 72px) 0;
  display: flex;
  justify-content: center;
}
.bs-people__ellipse {
  position: relative;
  /* Figma `duleziti_lide_elipsa` is 1230 wide inside the 1620 frame = 76%, i.e. ~1100
     at a 1440 viewport. It was 1280 here — an oval scaled for 8 avatars, so the
     4-person row sat marooned with empty lobes either side.
     1200, not the literal 1100: our intro wraps to 2 lines where Figma's fits on one,
     which pushes the role labels down into the narrowing part of the curve. Measured
     worst-corner fit against the ellipse equation (1.000 = touching the outline):
       1100 -> roles 1.025 (OUTSIDE)   1150 -> 0.983   1200 -> 0.945   1280 -> 0.894
     1150 passes only by 1.7% and a customer with a 3-line intro would breach it.
     Widened again to 1240 + more vertical padding on review: at 1200 the outer role
     labels (druzicka / maminka) still crowded the inner edge. 1240x669 puts them at
     0.877, comfortably clear, and is still well short of the 1280 eight-avatar box. */
  width: min(1240px, 96%);
  /* An ellipse only fits content within its inscribed rectangle (~70% of the box),
     so the padding is deliberately generous — it keeps the outer names clear of the
     curved edge. Wider box + more padding than a rectangle would need. */
  padding: clamp(56px, 7vw, 100px) clamp(60px, 7vw, 100px);
  /* Plain CSS ellipse: border-radius:50% turns the box into an ellipse, so the
     cream fill and BOTH frame rings (border + ::after) are the exact same shape
     with uniform stroke. No stretched-SVG distortion (fill vs border drift). */
  border-radius: 50%;
  background: #fffcf5;
  border: 2.5px solid #2a1a12;
  text-align: center;
}
/* ROOMY variant — <=4 people, but at least one has a per-person note. The notes add
   3-4 lines under each role and push the OUTER columns into the narrowing curve.
   Measured worst-corner fit (same method as the note above, 1440 viewport):
     1240 (base) -> 0.988  BORDERLINE     1400 -> 0.851     1520 -> 0.826 (frame caps ~1411)
   1400 is the pick: it clears the 0.877 the plain 4-avatar layout sits at, without
   pushing the oval to the viewport edges the way 1520 does. */
.bs-people__ellipse.bs-people__ellipse--roomy {
  width: min(1400px, 97%);
  padding: clamp(64px, 8vw, 120px) clamp(70px, 8vw, 120px);
}
/* CARD variant — used automatically when there are too many people for the oval
   (an ellipse only fits ~70% of its box, so 5+ people spill out the bottom
   corners; see People.php). A rounded rectangle holds any number cleanly. */
.bs-people__ellipse.bs-people__ellipse--card {
  border-radius: 46px;
  width: min(1120px, 94%);
  padding: clamp(40px, 5vw, 72px) clamp(40px, 5vw, 84px);
}
/* double class → outranks the base ::after so the inner ring is a rounded rect too */
.bs-people__ellipse.bs-people__ellipse--card::after { inset: 10px; border-radius: 36px; }

.bs-people__ellipse::after {           /* inner ring of the double line */
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px solid #2a1a12;
  border-radius: 50%;
  pointer-events: none;
}
.bs-people__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
  color: var(--c-text-mauve);
  margin: 0 0 10px;
}
.bs-people__intro {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--c-text-mauve);
  max-width: 640px;
  margin: 0 auto clamp(20px, 3vw, 34px);
}
.bs-people__intro p { margin: 0; }

.bs-people__groups {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 3.7vw, 53px);
  flex-wrap: nowrap;                 /* bride pair | groom pair stay on one row */
}
.bs-people__group { display: flex; flex-direction: column; align-items: center; }
.bs-people__group-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--c-text-mauve);
  margin: 0 0 clamp(14px, 2vw, 22px);
}
.bs-people__row {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 3.7vw, 53px);
  flex-wrap: wrap;
}
.bs-people__person {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(116px, 13vw, 180px);
}
.bs-people__avatar {
  width: clamp(116px, 13vw, 180px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-blush);
  box-shadow: 0 4px 12px rgba(26,10,4,.18);
}
/* Portraits put the face in the upper third, so a CENTRED cover-crop cuts heads off
   (worst on the tallest sources). Bias the crop upward. WordPress has no per-image
   focal point, so this is a global rule: it fixes vertical cropping for every photo,
   and a source that is off-centre HORIZONTALLY still needs a better crop at upload. */
.bs-people__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.bs-people__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 24px);
  line-height: 1.2;
  color: var(--c-text-mauve);
  margin-top: clamp(10px, 1.4vw, 16px);
}
.bs-people__role {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.3;
  color: var(--c-text-mauve);
  opacity: .82;
  margin-top: 2px;
}
/* Per-person note under the role. The avatar column is deliberately narrow, so a
   full sentence wraps hard; keep this small and muted so it reads as a caption and
   does not compete with the name. Widening only the cards that HAVE a note would
   make the row ragged, so the column width is left alone. */
.bs-people__bio {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.4;
  color: var(--c-text-mauve);
  opacity: .72;
  margin-top: 6px;
  text-wrap: pretty;
}
.bs-people__bio p { margin: 0; }
.bs-people__bio p + p { margin-top: .4em; }

@media (max-width: 820px) {
  .bs-people__ellipse {
    /* an ellipse frame around stacked groups gets awkward on phones — drop to a soft rounded card */
    background: #fffcf5;
    border-radius: 40px;
    border: none;
    padding: clamp(34px, 7vw, 48px) clamp(20px, 6vw, 40px);
  }
  .bs-people__ellipse::after { display: none; }
  .bs-people__groups { flex-wrap: wrap; gap: 30px; }
}

/* ==========================================================================
   LOCATION (dulezita_mista — Figma 557:680, sablona_1)  an OPEN BOOK built from
   the real Figma vector shapes. Layers (bottom→top): book-back.png (green cover +
   shadow + spodni_stranky page-stack) as the book bg → the two maps sit in the page
   cut-outs → book-pages.png (white curved pages, transparent cut-outs) frames them →
   heading + venue text. Absolute composition scaled with cqw off the 1100.92×666.82
   Figma frame. Sits on the wood band (book = the content object).
   ========================================================================== */
.bs-location { padding: clamp(24px, 4vw, 60px) 0 clamp(30px, 5vw, 74px); }
.bs-location__inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(12px, 2.5vw, 30px); }

.bs-location__book {
  position: relative; container-type: inline-size;
  aspect-ratio: 1259 / 719;
  margin: 0 auto clamp(26px, 4vw, 50px);
  background: url('../img/book-back.png') center / 100% 100% no-repeat;
}
.bs-location__pages-overlay {                      /* white curved pages, cut-outs transparent */
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url('../img/book-pages.png') center / 100% 100% no-repeat;
}

/* maps sit BEHIND the pages overlay → the page cut-out frames them */
.bs-location__map { position: absolute; z-index: 1; overflow: hidden; }
.bs-location__map--1 { left: 10.55%; top: 19.8%; width: 34.7%; height: 41.1%; }
.bs-location__map--2 { left: 55.98%; top: 20.4%; width: 35.3%; height: 44.6%; }
.bs-location__map img, .bs-location__mapcanvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-location__mapcanvas { background: #e7ece3; }

/* text on top of the pages */
.bs-location__heading {
  /* now positioned by .bs-location__lead, which also carries the intro */
  font-family: var(--font-display); font-weight: 600; color: var(--c-text-mauve);
  font-size: 3.81cqw; line-height: 1.08; margin: 0;
}
/* Title + intro as ONE block on the left page, so the intro sits under the title the
   way it does on every other template. Absolutely placed where the bare heading used
   to be; the heading itself goes back into flow inside it. */
.bs-location__lead { position: absolute; z-index: 3; left: 10.78%; top: 11.1%; width: 40%; }
/* DYNAMIC CUT-OUT: stretch ONLY the white page band above the map.
   Scaling the whole box grows every band proportionally - most of the extra height
   lands under the venue text where it is useless, and the top gains little. Instead
   both book layers are drawn with border-image sliced at 16%/17%, so the top slice
   (curved page edge + title area) and the bottom slice (map window downwards) keep
   their natural height and ONLY the 1% sliver between them stretches.
   That sliver is safe: measured on the alpha channel, book-pages.png is a single
   constant opaque span x 5.44%..96.03% for every row from y=12% to y=21%, and
   book-back.png is likewise constant from y=14%. Flat white page - nothing to distort.
   Because the stretch is INSERTED above the window, the maps/labels must move down by
   the same absolute delta (they are % of a now-taller box), otherwise they slide out
   of their windows. delta = 5cqw:
     natural 57.11cqw -> box 62.11cqw = aspect-ratio 1259/782
     slices  top 9.14cqw (16% of natural)  bottom 47.40cqw (83%)  middle absorbs 5.57cqw */
.bs-location__book--intro {
  aspect-ratio: 1259 / 782;
  background: none;
}
.bs-location__book--intro::before,
.bs-location__book--intro .bs-location__pages-overlay {
  content: "";
  position: absolute; inset: 0;
  background: none;
  border-style: solid; border-color: transparent; border-width: 0;
  border-image-slice: 16% 0 83% 0 fill;
  border-image-repeat: stretch;
  border-image-width: 9.14cqw 0 47.40cqw 0;
}
.bs-location__book--intro::before {
  z-index: 0; pointer-events: none;
  border-image-source: url('../img/book-back.png');
}
.bs-location__book--intro .bs-location__pages-overlay {
  border-image-source: url('../img/book-pages.png');
}
/* maps + labels shift down by the inserted 5cqw (recomputed as % of the taller box) */
.bs-location__book--intro .bs-location__map--1 { top: 26.26%; height: 37.79%; }
.bs-location__book--intro .bs-location__map--2 { top: 26.81%; height: 41.01%; }
.bs-location__book--intro .bs-location__text   { top: 63.04%; }
.bs-location__lead--intro { top: 10.21%; }
.bs-location__lead--intro .bs-location__heading { font-size: 3.81cqw; }
.bs-location__intro {
  font-family: var(--font-display); font-weight: 400; color: var(--c-text-mauve);
  font-size: 1.05cqw; line-height: 1.45; text-align: left; margin-top: .5cqw;
}
.bs-location__intro p { margin: 0; }
.bs-location__intro p + p { margin-top: .5em; }

/* WHY THE INTRO IS NOT UNDER THE TITLE.
   Two attempts, both measured and rejected:
   1. Grow the book to open space. book-pages.png is an overlay whose transparent
      cut-outs are registered to the artwork, so stretching the box slides those
      windows proportionally while the absolutely-placed maps move by a fixed offset.
      They desynchronise and the overlay's page edge lands as a grey band across each
      map (confirmed by fading the overlay to 25%).
   2. Fit both into the existing band. The white page starts at 11.1% - exactly where
      the title already sat - and the map cut-out starts at 19.8%, so the budget is
      ~56px at a 1440 viewport. The title alone is ~46px. Lifting the block to 6% put
      the title off the page onto the book's curved edge.
   The artwork owns that space; opening it needs the book re-exported taller with the
   cut-outs repositioned, which is a design task. Until then the intro takes the
   mirrored free band at the top of the RIGHT page (see .bs-location__intro). */
.bs-location__text { position: absolute; z-index: 3; top: 59.8%; width: 34%; }
.bs-location__text--left  { left: 10.78%; text-align: left; }
.bs-location__text--right { right: 9.16%; text-align: right; }
.bs-location__label {
  font-family: var(--font-display); font-weight: 400; color: var(--c-text-mauve);
  font-size: 2.22cqw; line-height: 1.1; margin: 0 0 .3cqw;
}
.bs-location__name {
  font-family: var(--font-body); color: var(--c-text-mauve);
  font-size: 1.59cqw; line-height: 1.15; margin: 0 0 .6cqw;
}
.bs-location__addr {
  font-family: var(--font-body); color: var(--c-text-mauve);
  font-size: 1.27cqw; display: inline-flex; align-items: center; gap: .6cqw; margin: 0 0 .5cqw;
}
.bs-location__text--right .bs-location__addr { flex-direction: row-reverse; }
.bs-location__pin { width: 1.3cqw; height: auto; flex: 0 0 auto; }
.bs-location__desc { font-family: var(--font-body); color: var(--c-text-mauve); font-size: 1.11cqw; line-height: 1.4; }

@media (max-width: 820px) {
  /* the two-page spread doesn't work on phones: drop the book graphic, stack cards */
  .bs-location__book {
    aspect-ratio: auto; container-type: normal; background: none;
    display: flex; flex-direction: column; gap: 22px;
    background: linear-gradient(160deg, #505c57, #3a4440 72%);
    border-radius: 14px; padding: 16px 16px 30px; filter: drop-shadow(0 20px 34px rgba(0,0,0,.4));
  }
  .bs-location__pages-overlay { display: none; }
  /* The desktop --intro treatment (sliced border-image on ::before + the overlay, plus a
     fixed aspect-ratio) must NOT survive here: the spread collapses to a stacked flex
     column, so the sliced cover art renders as grey bands behind the heading and between
     the cards. Note the specificity trap - `.bs-location__book--intro .bs-location__pages-overlay`
     is TWO classes and beats the single-class display:none above, so it has to be
     re-hidden explicitly rather than relying on source order. */
  .bs-location__book--intro { aspect-ratio: auto; background: linear-gradient(160deg, #505c57, #3a4440 72%); }
  .bs-location__book--intro::before { display: none; }
  .bs-location__book--intro .bs-location__pages-overlay { display: none; }
  .bs-location__book--intro .bs-location__map--1,
  .bs-location__book--intro .bs-location__map--2 { top: auto; height: auto; }
  .bs-location__book--intro .bs-location__text { top: auto; }
  .bs-location__lead { position: static; width: auto; order: 0; }
  .bs-location__heading { position: static; width: auto; font-size: 30px; color: var(--c-cream); margin: 4px 4px 0; }
  /* the spread collapses to a single column here, so the intro drops back into flow
     under the title and takes the same cream-on-wood treatment */
  .bs-location__intro { position: static; width: auto; font-size: 14px; color: var(--c-cream);
    text-align: left; margin: 6px 4px 2px; order: 0; }
  /* map + its text are ONE card: the map is the top half (no bottom padding, top corners
     only) and the text is the bottom half. The book is a flex column with gap:22px, which
     split them - so the map showed 4 rounded corners while the text kept only its bottom 2,
     reading as sharp-top / rounded-bottom. Cancel the gap on the text so they meet. */
  .bs-location__map { position: relative; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important; aspect-ratio: 3/2;
    border-radius: 6px 6px 0 0;
    background: #fffcf8; padding: 8px 8px 0; }
  .bs-location__map--1 { order: 1; } .bs-location__text--left { order: 2; }
  .bs-location__map--2 { order: 3; } .bs-location__text--right { order: 4; }
  .bs-location__text { position: static; width: auto; background: #fffcf8;
    border-radius: 0 0 6px 6px; padding: 8px 12px 14px; text-align: left !important;
    margin-top: -22px; }
  .bs-location__text--right .bs-location__addr { flex-direction: row; }
  .bs-location__label { font-size: 22px; } .bs-location__name { font-size: 16px; }
  .bs-location__addr { font-size: 14px; } .bs-location__desc { font-size: 14px; }
  .bs-location__pin { width: 14px; }
}

/* ============================================================
   Gifts (Dary) — Figma 644:264. On the wood band.
   Geometry MEASURED off the board render: the section box is 1620x1013 and
   every child is a percentage of it (see templates/Gifts.php for the numbers).
   The composition is the CLOSED state; the registry opens out of the envelope.
   ============================================================ */
/* overflow-x:clip for the same reason as .bs-rsvp: the fanned .bs-gifts__sheet is
   translated/rotated out of the stage by --fan-x, which pushed the document ~9px wider
   than the viewport at 768. Clipping one axis leaves vertical bleed intact. */
.bs-gifts { padding: clamp(40px, 5vw, 80px) 16px clamp(40px, 5vw, 86px); overflow-x: clip; }

.bs-gifts__stage {
  position: relative; width: 100%; max-width: 1620px; margin: 0 auto;
  aspect-ratio: 1615 / 925; container-type: inline-size;   /* the dary frame as Figma renders it */
}

/* --- left: the ornate frame holding the message ---
   All of this is the designer's own geometry, read out of Figma (node 607:154):
   frame art 655.802x392.047 (ratio 1.673 — it must NOT be stretched, which is what made
   the copy look wrong), cream plane inset 35.4/35.1 within it, heading Playfair SemiBold
   48px at 20.49% down the frame, message Lora 20px at 41.72%. Type is expressed in cqw so
   it scales with the stage exactly as the board does. --- */
.bs-gifts__panel {
  position: absolute; left: 5.89%; top: 24.98%; width: 39.98%;
  aspect-ratio: 655.802 / 392.047;      /* never stretch the frame art */
  z-index: 2;
}
/* Figma z-order: the cream plane (dary_ramecek_plocha) sits BEHIND the ornate frame,
   and the frame is drawn over it with mix-blend-hard-light. Painting the frame as the
   panel's background and the cream on top of it hides the ornament almost entirely. */
.bs-gifts__panel::before {
  /* dary_ramecek_plocha is NOT a rectangle — every corner is bitten off (concave).
     Drawing a plain box left the corners poking out past the ornate border, so the
     designer's own SVG is used as the shape (preserveAspectRatio="none", so a
     100% 100% background stretches it to the frame exactly). */
  content: ''; position: absolute; z-index: 0;
  inset: 8.95% 7.87% 7.57% 5.40%;
  background: url(../img/dary-frame-plocha.svg) center / 100% 100% no-repeat;
}
.bs-gifts__panel::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: url(../img/dary-frame.png) center / 100% 100% no-repeat;
  mix-blend-mode: hard-light;
}
.bs-gifts__panel-inner { position: absolute; inset: 0; z-index: 1; }

.bs-gifts__heading {
  position: absolute; left: 8%; right: 10%; top: 20.49%;
  font-family: var(--font-display); font-weight: 600; color: var(--c-text-mauve);
  font-size: 2.963cqw;                  /* 48px against the 1620 design width */
  line-height: 1.1; text-align: center; margin: 0;
}
.bs-gifts__text {
  position: absolute; left: 11%; right: 13.5%; top: 41.72%;   /* inside the cream (5.40..92.13%) */
  font-family: var(--font-body); color: var(--c-text-mauve);
  font-size: 1.235cqw;                  /* 20px against the 1620 design width */
  line-height: 1.42; text-align: center;
}
.bs-gifts__text p { margin: 0; }

/* --- right: the envelope assembly (obalka 552:630). ---
   The obalka group carries an 18.04° rotation in Figma, so every layer's SCREEN angle is
   its node-local angle + 18.04 — this is what every earlier by-eye pass missed. Each photo
   is TWO layers: a white sheet (297.609x341.258 portrait; slot 3 a torn-paper vector) and a
   photo pane (260.55x190.938 landscape) at its OWN angle (pane 3 is twisted 8.6° off its
   sheet). The front face is the designer's own export env-front.png (shadow baked in), the
   heart renders rotated 18.04°.
   All numbers below were FITTED against the live node render (1615x925, == the stored ref):
   panes by cross-correlation (NCC .92-.98), sheets/heart from the rigid +18.04° model
   (<1px residual on pane deltas), envelope layers by occlusion-masked search (~.02 err):
       env-back.png (846x887) at (688,37) · env-front.png (700x427) at (673,498) [unmasked fit err 0.0012 — razor lock]
       pane centres (1030.5,206.5)@-3.15° (1385.5,288.5)@44.57° (1098.5,490.5)@8.62°
       sheet centres (1033.1,263.6)@-3.15° (1347.1,326.9)@45.08° (1103.1,530.1)@0°
       heart centre (1033.4,712.3)@18.04°, 112.8 wide.
   The trigger IS the env-back box, so all inner % are env-back-PNG coordinates. */
.bs-gifts__trigger {
  position: absolute; left: 42.60%; top: 4.00%; width: 52.38%; aspect-ratio: 846 / 887;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  z-index: 1; -webkit-tap-highlight-color: transparent;
}
.bs-gifts__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.bs-gifts__env { position: absolute; inset: 0; transition: transform .28s ease; }
.bs-gifts__envelope { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.bs-gifts__envfront {
  position: absolute; left: -1.77%; top: 51.98%; width: 82.75%; height: auto;
  z-index: 5; pointer-events: none;
}
.bs-gifts__heart {
  position: absolute; left: 40.83%; top: 76.14%; width: 13.33%; height: auto;
  transform: translate(-50%, -50%) rotate(18.04deg);
  z-index: 6; mix-blend-mode: overlay; pointer-events: none;
}

/* one fotka = sheet + pane moving as a unit; the wrapper spans the whole env box so the
   children's % coordinates stay env-relative. --spin inherits into both children. */
.bs-gifts__fotka {
  position: absolute; inset: 0; pointer-events: none;
  transition: transform .32s ease;
}
.bs-gifts__fotka--1 { z-index: 2; }
.bs-gifts__fotka--2 { z-index: 3; }
.bs-gifts__fotka--3 { z-index: 4;
  /* STATIC MOUTH WINDOW. The envelope's side "flaps" are not separate layers — the whole
     mouth silhouette (right wall, bottom, left wall) is what has to hide the card, and the
     designer's dary-fotka3-plocha.svg already encoded exactly that outline. It was baked
     into the SHEET though, so the cut travelled with the card and never un-cut when it slid
     out. These points are that same path mapped back into env-box % (svg canvas 342.78x367.107
     placed at --sx 49.07 / --sy 56.38 / --sw 40.52), applied to the WRAPPER instead: the
     window stays put, the card moves inside it, so lifting the card reveals a whole
     rectangle. Both wall lines are extended outward so a fully-lifted card is never clipped. */
  clip-path: polygon(-20% -20%, 120% -20%, 120% 42.91%, 61.26% 68.0%, 42.06% 76.2%,
    39.31% 75.3%, 29.71% 59.8%, -20% -20.46%);
}

.bs-gifts__sheet {
  position: absolute; left: var(--sx); top: var(--sy); width: var(--sw);
  aspect-ratio: 297.609 / 341.258;
  transform: translate(calc(-50% + var(--fan-x, 0px)), calc(-50% + var(--fan-y, 0px)))
             rotate(calc(var(--srot) + var(--spin, 0deg)));
  background: #fff;
  box-shadow: 1px 2px 5px rgba(0,0,0,.5);
  transition: transform .32s ease, box-shadow .32s ease;
}
/* Slot 3 used to be the designer's PRE-CUT silhouette (dary-fotka3-plocha.svg), whose
   outline traced the envelope fold. That fought the static clip-path on .bs-gifts__fotka--3
   which does the same job properly: two different cut lines disagreeing showed as a
   notched edge, and the card read as a trimmed cut-out laid ON the envelope rather than
   tucked INSIDE it - worst on hover, when it slides and exposes the mismatch. Slot 3 now
   uses the same plain white sheet as slots 1 and 2 and is occluded by the clip alone. */
.bs-gifts__snap {
  position: absolute; left: var(--px); top: var(--py); width: var(--pw);
  aspect-ratio: 260.55 / 190.938;
  transform: translate(calc(-50% + var(--fan-x, 0px)), calc(-50% + var(--fan-y, 0px)))
             rotate(calc(var(--prot) + var(--spin, 0deg)));
  background: transparent center top / contain no-repeat;
  transition: transform .32s ease;
}
.bs-gifts__fotka--1 { --sx: 40.80%; --sy: 25.55%; --sw: 35.18%; --srot: -3.15deg;
                      --px: 40.49%; --py: 19.11%; --pw: 30.80%; --prot: -3.15deg; }
.bs-gifts__fotka--2 { --sx: 77.92%; --sy: 32.69%; --sw: 35.18%; --srot: 45.08deg;
                      --px: 82.46%; --py: 28.36%; --pw: 30.80%; --prot: 44.57deg; }
/* --sw was 40.52% when this slot drew the SVG, whose canvas carried ~4% of shadow
   padding on each axis AND a flatter 342.78:367.107 aspect. The plain sheet is
   297.609:341.258, i.e. ~7% taller per unit width, so reusing 40.52% pushed the card
   past the envelope mouth and onto the side wall (which lives in env-back at z-index 1,
   below the cards, so it renders OVER it). 36.4% reproduces the old white footprint. */
.bs-gifts__fotka--3 { --sx: 49.07%; --sy: 56.38%; --sw: 36.4%; --srot: 0deg;
                      --px: 48.53%; --py: 51.13%; --pw: 30.80%; --prot: 8.62deg; }

/* Affordance: the whole assembly lifts a little under the pointer, and the photos fan out.
   It opens nothing — that is a click — it just says "this is clickable". */
.bs-gifts__trigger:hover .bs-gifts__env,
.bs-gifts__trigger:focus-visible .bs-gifts__env { transform: translateY(-0.9%); }

.bs-gifts__trigger:hover .bs-gifts__fotka--1 { transform: translate(-1%, -2.5%);  --spin: -2deg; }
.bs-gifts__trigger:hover .bs-gifts__fotka--2 { transform: translate(1.5%, -2.5%); --spin: 2.5deg; }
.bs-gifts__trigger:hover .bs-gifts__fotka--3 { --fan-x: -3px; --fan-y: -11px; --spin: -1deg; }
.bs-gifts__trigger:hover .bs-gifts__sheet { box-shadow: 0 1.5cqw 2.4cqw rgba(50,34,26,.44); }

/* open state — hover on a pointer device, or the class the button toggles */
.bs-gifts__trigger:focus-visible .bs-gifts__envelope,
.bs-gifts.is-open .bs-gifts__envelope,
.bs-gifts.is-open .bs-gifts__envfront {
  transform: translateY(1.2%);
  filter: drop-shadow(0 1.8cqw 2.8cqw rgba(60,40,30,.42));
}
/* the three lift and fan, so it reads as the envelope being opened */
.bs-gifts.is-open .bs-gifts__fotka--1 { transform: translate(-3%, -6%);   --spin: -6deg; }
.bs-gifts.is-open .bs-gifts__fotka--2 { transform: translate(4%, -5%);    --spin: 4deg; }
.bs-gifts.is-open .bs-gifts__fotka--3 { --fan-x: -17px; --fan-y: -49px; --spin: -4deg; }
.bs-gifts.is-open .bs-gifts__sheet { box-shadow: 0 1.5cqw 2.4cqw rgba(50,34,26,.44); }

.bs-gifts__trigger:focus-visible { outline: 2px solid var(--c-cream); outline-offset: -6px; }

/* --- the registry, revealed ---
   CLICK ONLY. Hover was intrusive and, because the list opened below a section that is
   taller than the viewport, it also opened off-screen. It is now a centred overlay so the
   gifts are readable and selectable wherever you are on the page. --- */
.bs-gifts__reveal {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(26, 10, 4, .62);
  opacity: 0; visibility: hidden;
  transition: opacity .24s ease, visibility 0s .24s;
}
.bs-gifts.is-open .bs-gifts__reveal {
  opacity: 1; visibility: visible;
  transition: opacity .24s ease, visibility 0s;
}

.bs-gifts__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  width: 100%; max-width: 1120px; max-height: 86vh; overflow-y: auto;
  margin: 0; padding: 14px; list-style: none;
  scrollbar-width: none;                 /* the bar appearing on hover looked broken */
  -ms-overflow-style: none;
  transform: scale(.96);
  transition: transform .24s ease;
}
.bs-gifts.is-open .bs-gifts__list { transform: scale(1); }
.bs-gifts__list::-webkit-scrollbar { width: 0; height: 0; }

.bs-gift {
  display: flex; flex-direction: column;
  background: #fffdf9; padding: 13px 13px 18px;
  box-shadow: 0 12px 24px rgba(50,34,26,.34);
  overflow: hidden;
}
.bs-gift__photo { display: block; line-height: 0; }
.bs-gift__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.bs-gift__body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 14px 6px 0; text-align: center;
}
.bs-gift__name {
  font-family: var(--font-display); font-size: clamp(19px, 1.35vw, 24px);
  line-height: 1.2; color: var(--c-text-mauve);
}
.bs-gift__name a { text-decoration: none; }
.bs-gift__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bs-gift__desc {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  color: var(--c-text-mauve); margin-top: 7px;
}
.bs-gift__desc p { margin: 0 0 .5em; }
.bs-gift__desc p:last-child { margin-bottom: 0; }
.bs-gift__price { font-family: var(--font-body); font-size: 15.5px; color: var(--c-text-mauve); margin-top: 9px; }

.bs-gift__field { margin-top: 12px; text-align: left; }
.bs-gift__field label {
  display: block; font-family: var(--font-body); font-size: 12.5px;
  color: rgba(116,88,97,.8); margin-bottom: 3px;
}
.bs-gift__email {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--c-text-mauve);
  background: transparent; border: none; border-bottom: 1px solid rgba(116,88,97,.45); padding: 5px 2px;
}
.bs-gift__email:focus { outline: none; border-bottom-color: var(--c-cta); }

.bs-gift__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
  margin-top: auto; padding-top: 16px;
}
.bs-gift__actions .bs-btn { font-size: 14.5px; padding: 9px 20px; }

.bs-btn--ghost {
  background: transparent; color: var(--c-cta); box-shadow: inset 0 0 0 1.5px var(--c-cta);
}
.bs-btn--ghost:hover { background: rgba(68,81,76,.07); box-shadow: inset 0 0 0 1.5px var(--c-cta); }
.bs-btn--reserved { background: var(--c-sage-dark); cursor: default; box-shadow: none; }
.bs-btn--reserved:hover { transform: none; box-shadow: none; }

/* the reservation script appends this itself; give it a home in our palette */
#gift-message {
  font-family: var(--font-body); font-size: 14px; padding: 8px 12px; border-radius: 6px;
  background: var(--c-cream); color: var(--c-text-mauve);
}
#gift-message.alert-success { box-shadow: inset 0 0 0 1.5px var(--c-sage-dark); }
#gift-message.alert-danger  { box-shadow: inset 0 0 0 1.5px #b4736f; }

@media (prefers-reduced-motion: reduce) {
  .bs-gifts__env, .bs-gifts__envelope, .bs-gifts__envfront,
  .bs-gifts__fotka, .bs-gifts__sheet, .bs-gifts__snap { transition: none; }
}

/* Hand off at 1400, not at a phone width. The board is a 1620 design and its ornate
   frame is only 31.7% of the stage: below ~1400 the frame art is too small to hold the
   couple's message at a readable size, and forcing a font floor spills the copy past the
   frame's opening. Everything under 1400 gets the stacked layout instead, which carries
   fixed 15px/32px type and reads properly. */
@media (max-width: 1400px) {
  /* The board's composition cannot hold portrait: message card on top, envelope below.
     Everything inside the trigger stays percentage-based, so the envelope and its photos
     just need the trigger to keep its desktop aspect (56%x82% of a 1620/1013 stage). */
  .bs-gifts__stage {
    aspect-ratio: auto; container-type: normal;
    display: flex; flex-direction: column; align-items: center; gap: 26px; max-width: 460px;
  }
  .bs-gifts__panel {
    position: relative; left: auto; top: auto; width: 100%; aspect-ratio: auto;
  }
  .bs-gifts__panel::before,
  .bs-gifts__panel::after { display: none; }
  .bs-gifts__panel-inner {
    position: static; inset: auto; padding: 28px 24px;
    background: var(--c-cream); border-radius: 3px;
    box-shadow: 0 0 0 2px #6f8a80, 0 0 0 5px var(--c-cream), 0 0 0 6px #6f8a80;
  }
  .bs-gifts__heading { position: static; font-size: 32px; }
  .bs-gifts__text    { position: static; font-size: 15px; margin-top: 10px; }
  .bs-gifts__trigger {
    position: relative; left: auto; top: auto; width: 100%; height: auto;
    aspect-ratio: 846 / 887; display: block;   /* == the env-back box, so the same envelope percentages resolve identically */
  }
  .bs-gifts__list { grid-template-columns: 1fr; max-width: 460px; }
}

@media (min-width: 760px) and (max-width: 1400px) {
  .bs-gifts__stage { max-width: 720px; gap: 34px; }
  .bs-gifts__panel-inner { padding: 34px 40px; }
  .bs-gifts__heading { font-size: 38px; }
  .bs-gifts__text { font-size: 16px; }
  .bs-gifts__list { max-width: 720px; }
}

/* ============================================================
   Info (Doplňující informace) — Figma 587:186. On the paper surface.
   A single ornate-framed card (reuses the Dary frame), centred text.
   ============================================================ */
.bs-info { padding: clamp(40px, 6vw, 110px) 16px; }
.bs-info__frame {
  position: relative; width: 100%; max-width: 940px; margin: 0 auto;
  /* aspect-ratio is a FLOOR, not a fixed size: this box holds the couple's free-form
     notes, so it has to grow. Padding is the frame art's own inner clear area, measured
     off gift-frame.png (1024x613; clear area x 101..899, y 105..518) and expressed as a
     share of WIDTH, which is what percentage padding resolves against:
     top 105/1024, right 125/1024, bottom 95/1024, left 101/1024.
     Without it long text simply crossed the ornate border - reported 2026-08-23, a
     drinks-menu-length Info section put the heading above the frame and the last
     paragraph below it. */
  aspect-ratio: 1024 / 613; container-type: inline-size;
  background: url(../img/gift-frame.png) center / 100% 100% no-repeat;
  display: grid; place-items: center;
}
.bs-info__inner {
  /* The inset lives HERE, not on the frame: cqw resolves against the container's CONTENT
     box, so padding the frame shrinks every cqw font by the same fraction (~22% - caught
     in review). Padding the grid item instead keeps the container width intact while still
     forcing the frame taller as the text grows, so long copy pushes the border out rather
     than crossing it. 18% each side reproduces the original 64% text column exactly;
     10.25%/9.28% are gift-frame.png's own top/bottom clear area (105px and 95px of its
     1024px width). */
  width: 100%; box-sizing: border-box;
  padding: 10.25% 18% 9.28%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 2.2cqw;
}
.bs-info__heading {
  font-family: var(--font-display); font-weight: 600; color: var(--c-text-mauve);
  font-size: 4.6cqw; line-height: 1.05; margin: 0;
}
.bs-info__text {
  font-family: var(--font-body); color: var(--c-text-mauve);
  font-size: 1.95cqw; line-height: 1.5;
}
.bs-info__text p { margin: 0 0 .5em; }
.bs-info__text p:last-child { margin-bottom: 0; }

@media (max-width: 820px) {
  /* the wide ornate graphic can't hold portrait text: swap for a cream card
     with the sage double-border, same treatment as the Dary panel on mobile. */
  .bs-info__frame { aspect-ratio: auto; container-type: normal; background: none;
    max-width: 460px; padding: 34px 28px; border-radius: 3px;
    box-shadow: 0 0 0 2px #6f8a80, 0 0 0 5px var(--c-cream), 0 0 0 6px #6f8a80;
    background-color: var(--c-cream); }
  .bs-info__inner { width: 100%; gap: 14px; }
  .bs-info__heading { font-size: 30px; }
  .bs-info__text { font-size: 15px; }
}

/* ============================================================
   Dress code — Figma 644:276. On the paper surface.
   Botanical branch behind · dress + suit illustrations · translucent
   card with heading, note and the couple's colour palette.
   ============================================================ */
.bs-dress { padding: clamp(30px, 4vw, 70px) 16px; overflow: hidden; }
.bs-dress__stage {
  position: relative; width: 100%; max-width: 1440px; margin: 0 auto;
  aspect-ratio: 1617 / 947; container-type: inline-size;
}
.bs-dress__branch { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.bs-dress__branch img {
  position: absolute; left: 50%; top: 50%; width: 92%; height: auto;
  transform: translate(-50%, -50%) rotate(-81deg) scaleY(-1); opacity: .55;
}
.bs-dress__illu { position: absolute; height: auto; z-index: 1;
  filter: drop-shadow(0 1.2cqw 1.6cqw rgba(60,40,40,.18)); }
.bs-dress__illu--dress { left: 10.5%; top: 18.4%; width: 21.8%; }
.bs-dress__illu--suit  { left: 31.5%; top: 17.6%; width: 22%; }

.bs-dress__card {
  position: absolute; left: 57.4%; top: 14.5%; width: 37.9%; height: 71.6%; z-index: 2;
  background: rgba(255,255,255,.8); box-shadow: 0 1.2cqw 3cqw rgba(80,60,55,.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 3cqw 3.4cqw; gap: 1.6cqw;
}
.bs-dress__heading {
  font-family: var(--font-display); font-weight: 600; color: var(--c-text-mauve);
  font-size: 3.4cqw; line-height: 1; margin: 0;
}
.bs-dress__text {
  font-family: var(--font-body); color: var(--c-text-mauve);
  font-size: 1.32cqw; line-height: 1.5;
}
.bs-dress__text p { margin: 0 0 .4em; }
.bs-dress__text p:last-child { margin-bottom: 0; }
.bs-dress__palette { display: flex; margin-top: .6cqw; }
.bs-dress__swatch { width: 4.2cqw; height: 3.5cqw; }

@media (max-width: 820px) {
  /* stack: illustrations side by side on top, card below */
  .bs-dress__stage { aspect-ratio: auto; container-type: normal;
    display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 460px; }
  .bs-dress__branch img { width: 150%; opacity: .4; }
  .bs-dress__illu { position: relative; left: auto !important; top: auto !important;
    filter: drop-shadow(0 8px 12px rgba(60,40,40,.18)); }
  .bs-dress__illu--dress { width: 38%; align-self: flex-start; margin-left: 7%; }
  .bs-dress__illu--suit { width: 40%; margin-top: -56%; align-self: flex-end; margin-right: 7%; }
  .bs-dress__card { position: relative; left: auto; top: auto; width: 100%; height: auto;
    padding: 26px 22px; gap: 12px; }
  .bs-dress__heading { font-size: 30px; }
  .bs-dress__text { font-size: 15px; }
  .bs-dress__swatch { width: 42px; height: 34px; }
}

/* ============================================================
   GuestList / RSVP (Potvrzení účasti) — Figma 644:279. Paper surface.
   Pinned white card · heading + swirl + intro · restyled attendee form.
   ============================================================ */
/* overflow-x:clip, NOT overflow:hidden on the card. The bloom is deliberately hung
   outside the card's right edge (right:-4.5%, -9% under 820px) and the card must stay
   unclipped so the pins keep breaking over its top edge - but nothing was clipping
   HORIZONTALLY either, so the bloom widened the document and the whole page scrolled
   sideways: 390px viewport -> scrollWidth 406 (card 358 + 16 page padding + 32 bleed).
   `clip` on one axis leaves the other visible and creates no scroll container, so the
   pins still hang above the card while the sideways scroll goes away. */
.bs-rsvp { padding: clamp(46px, 6vw, 96px) 16px; overflow-x: clip; }
.bs-rsvp__card {
  position: relative; width: 100%; max-width: 1200px; margin: 0 auto;
  background: var(--c-white); box-shadow: 0 4px 8px rgba(0,0,0,.14);
  padding: clamp(34px, 5vw, 74px) clamp(22px, 6vw, 118px) clamp(40px, 5vw, 78px);
  /* NO overflow:hidden — the board draws the pins on the card's top edge and the
     bloom breaking out of the bottom-right corner; clipping cropped both. */
}
.bs-rsvp__pin { position: absolute; top: -22px; width: 44px; height: auto; z-index: 3; }
.bs-rsvp__pin--l { left: 2.2%; } .bs-rsvp__pin--r { right: 2.2%; }
.bs-rsvp__heading {
  font-family: var(--font-display); font-weight: 600; color: var(--c-text-mauve);
  font-size: clamp(30px, 4.4vw, 48px); text-align: center; margin: 0;
}
.bs-rsvp__swirl { display: block; width: min(680px, 78%); margin: 6px auto 0; opacity: .32; }
.bs-rsvp__intro {
  font-family: var(--font-body); color: var(--c-text-mauve); text-align: center;
  max-width: 820px; margin: 4px auto clamp(22px, 3vw, 40px); line-height: 1.5;
}

/* --- the attendee form, restyled from the Nette output --- */
.bs-rsvp__form { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.bs-rsvp__row { margin: 0 0 20px; }
.bs-rsvp__row:has(.bs-rsvp__option) > label:first-child { margin-bottom: 14px; }

/* the board lays the three choice groups side by side; other rows span full width */
.bs-rsvp__form form { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(20px, 3vw, 48px); }
.bs-rsvp__form form > * { grid-column: 1 / -1; }
.bs-rsvp__form .bs-rsvp__row:has(input[type=checkbox]),
.bs-rsvp__form .bs-rsvp__row:has(input[type=radio]) { grid-column: auto / span 1; }
.bs-rsvp__form label {
  display: block; font-family: var(--font-body); font-weight: 700;
  color: var(--c-text-mauve); font-size: 16px; margin: 0 0 6px;
}
.bs-rsvp__input, .bs-rsvp__textarea {
  width: 100%; font-family: var(--font-body); font-size: 17px; color: var(--c-text-mauve);
  background: transparent; border: none; border-bottom: 1.8px solid var(--c-text-mauve);
  border-radius: 0; padding: 6px 2px;
}
.bs-rsvp__textarea { border: 1.8px solid rgba(116,88,97,.5); border-radius: 4px; min-height: 96px; resize: vertical; }
.bs-rsvp__input:focus, .bs-rsvp__textarea:focus { outline: none; border-color: var(--c-cta); }
.bs-rsvp__option { margin: 10px 0; }
/* the item label wraps input + text, so IT is the flex container (the option div has
   a single child and a gap there does nothing). Scoped under __form to outrank the
   generic `.bs-rsvp__form label { display:block }`. */
.bs-rsvp__form .bs-rsvp__option-label { display: flex; align-items: center; gap: 12px; }
.bs-rsvp__form input[type=checkbox], .bs-rsvp__form input[type=radio] {
  width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto;
  accent-color: var(--c-text-mauve); cursor: pointer;
}
.bs-rsvp__option-label { font-weight: 400 !important; margin: 0 !important; cursor: pointer; }
.bs-rsvp__help { display: block; font-size: 14px; opacity: .8; margin-top: 4px; }
.bs-rsvp__error, .bs-rsvp .text-danger { color: #b3423b; font-size: 14px; }
.bs-rsvp__submit { display: block; margin: clamp(20px, 3vw, 36px) auto 0; min-width: 240px; text-align: center; }

.bs-rsvp__floral {
  position: absolute; right: -4.5%; bottom: -9%; width: clamp(220px, 34%, 430px);
  z-index: 1; pointer-events: none;
}

@media (max-width: 820px) {
  .bs-rsvp__pin { width: 34px; top: -16px; }
  .bs-rsvp__form form { display: block; }
  .bs-rsvp__floral { width: 56%; opacity: .95; right: -9%; bottom: -55px; }
  .bs-rsvp__form { padding-bottom: 60px; }
}

/* ============================================================
   Guestbook (Kniha návštěv) — Figma 610:259. Paper surface.
   Pinned notebook-page card · heading + flourish + intro · ruled-paper form.
   ============================================================ */
.bs-guestbook { padding: clamp(46px, 6vw, 96px) 16px clamp(200px, 22vw, 330px); }
/* deep bottom padding = the board's own cream apron under the card — and the room
   the overhanging bloom needs so it never lands on the footer's dark band */
.bs-guestbook__card {
  position: relative; width: 100%; max-width: 840px; margin: 0 auto;
  background: var(--c-white); border-radius: 10px; box-shadow: 0 5px 12px rgba(0,0,0,.13);
  padding: clamp(34px, 5vw, 66px) clamp(24px, 6vw, 76px) clamp(40px, 5vw, 70px);
  /* NO overflow:hidden — the board draws the flower breaking out of the card's
     bottom-left corner and the pins sitting on its top edge. Clipping the card
     cropped both back inside it. */
}
.bs-guestbook__pin { position: absolute; top: 14px; width: 42px; height: auto; z-index: 3; }
.bs-guestbook__pin--l { left: 5%; } .bs-guestbook__pin--r { right: 5%; }
.bs-guestbook__heading {
  font-family: var(--font-display); font-weight: 600; color: var(--c-text-mauve);
  font-size: clamp(30px, 4.2vw, 48px); text-align: center; margin: 0;
}
.bs-guestbook__flourish { display: block; width: 150px; margin: 8px auto 0; opacity: .55; }
.bs-guestbook__intro {
  font-family: var(--font-body); color: var(--c-text-mauve); text-align: center;
  max-width: 520px; margin: 6px auto clamp(22px, 3vw, 34px); line-height: 1.5; font-size: 16px;
}

.bs-guestbook__form { position: relative; z-index: 2; }
.bs-guestbook__field { display: flex; align-items: flex-end; gap: 14px; margin: 0 0 26px; }
.bs-guestbook__field label { padding-bottom: 5px; }
.bs-guestbook__field label {
  flex: 0 0 auto; min-width: 150px; font-family: var(--font-body);
  color: var(--c-text-mauve); font-size: 16px;
}
.bs-guestbook__line {
  flex: 1 1 auto; font-family: var(--font-body); font-size: 17px; color: var(--c-text-mauve);
  background: transparent; border: none; border-bottom: 1.5px solid rgba(116,88,97,.75);
  border-radius: 0; padding: 4px 2px;
}
.bs-guestbook__line:focus { outline: none; border-color: var(--c-cta); }
.bs-guestbook__msg > label {
  display: block; font-family: var(--font-body); color: var(--c-text-mauve);
  font-size: 16px; margin: 0 0 8px;
}
/* message area drawn as ruled notebook paper — line-height matches the rule period */
.bs-guestbook__ruled {
  width: 100%; font-family: var(--font-body); font-size: 17px; color: var(--c-text-mauve);
  line-height: 40px; padding: 0 2px; border: none; border-radius: 0; resize: vertical;
  background-color: transparent;
  background-image: repeating-linear-gradient(to bottom,
     transparent 0, transparent 39px, rgba(116,88,97,.55) 39px, rgba(116,88,97,.55) 40px);
  background-attachment: local;
}
.bs-guestbook__ruled { position: relative; z-index: 2; }
.bs-guestbook__ruled:focus { outline: none; }
.bs-guestbook__alert:not(:empty) { margin: 16px 0 0; }
.bs-guestbook__submit { display: block; margin: clamp(22px, 3vw, 34px) auto 0; min-width: 240px; text-align: center; }

/* Measured off the board: the bloom is ~77% of the card's width and overhangs the
   bottom-left corner. It sits BELOW the message text (z-index) so a long message
   stays readable — the board only ever shows the empty state. */
.bs-guestbook__floral {
  /* the bloom fills only 82% of its canvas (16.6% transparent lead-in on the left),
     so the box is bigger than the visible flower. Sized so the VISIBLE bloom matches
     the board: ~740px wide, centred on the card's bottom-left corner. */
  position: absolute; left: -50%; bottom: -260px; width: 96%;
  z-index: 1; pointer-events: none;
}

@media (max-width: 820px) {
  .bs-guestbook__pin { width: 32px; top: -14px; }
  .bs-guestbook__field { flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 18px; }
  .bs-guestbook__field label { min-width: 0; }
  .bs-guestbook__floral { width: 60%; left: -15%; bottom: -70px; opacity: .95; }
}

/* ==========================================================================
   FOOTER — Figma 644:292 (owner call 2026-08-19: use the board's colors).
   Same shared-strings contract as every theme (getFooterText/getFooterCopyright);
   two full-bleed bands: dark sage with the names + date, lighter sage strip
   with the product line. Colors sampled off the board: #44514C (== --c-cta)
   and #727C78.
   ========================================================================== */
#footer { text-align: center; }
#footer > div:first-child {
  background: var(--c-cta);
  padding: clamp(40px, 5vw, 72px) 20px clamp(34px, 4vw, 58px);
}
#footer h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 66px);
  line-height: 1.15;
  font-weight: 400;
  color: #fff;
  margin: 0;
}
#footer > div:first-child p {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 22px);
  color: rgba(255,255,255,.92);
  margin: 14px 0 0;
}
#footer > div + div {
  background: #727C78;
  padding: 16px 20px 18px;
}
#footer > div + div p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.92);
  margin: 0;
}
#footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,.5);
}
#footer a:hover { color: #fff; text-decoration-color: currentColor; }

/* Couple's opt-in: drop the dress/suit artwork on phones. The illustrations cost ~330px
   of an 810px section at 390px wide; hiding them keeps the heading, the note and the
   palette. Default is OFF - the class is only emitted when the couple ticks the box. */
@media (max-width: 820px) {
  .bs-dress--no-mobile-art .bs-dress__illu,
  .bs-dress--no-mobile-art .bs-dress__branch { display: none; }
}