/* Funkce svatebního webu — Soft Modern redesign (Figma 852:198).
   The feature list is a FLUID STAGE: a faithful absolute composition sized in %
   of the 1620px design width, fonts in cqw, scaling as one unit (capped 1620px).
   Below 1180px it flips to a clean stacked flow. Scoped to body.bs-redesign
   .bs-funkce so it outranks the theme + redesign.css element rules. Tokens from
   redesign.css; assets in redesign/funkce/. */

body.bs-redesign .bs-funkce{ background:var(--bs-cream); overflow-x:hidden; }
body.bs-redesign .bs-funkce *{ box-sizing:border-box; }

/* ===================== STAGE (desktop ≥1181px) ===================== */
body.bs-redesign .bs-funkce .bs-fk-stage{
  position:relative; width:min(100%,1620px); margin:0 auto;
  aspect-ratio:1620 / 3990; container-type:inline-size; background:var(--bs-cream);
}
body.bs-redesign .bs-funkce .bs-fk-flowers{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(funkce/funkce-flowers.png) repeat-y top center; background-size:100% auto; opacity:.85;
}
body.bs-redesign .bs-funkce .bs-fk-el{
  position:absolute; left:var(--l); top:var(--t); width:var(--w); z-index:1; margin:0;
}
/* text sits ABOVE the artwork so overlaps stay readable (as layered in Figma) */
body.bs-redesign .bs-funkce .bs-fk-t{ z-index:2; }
body.bs-redesign .bs-funkce .bs-fk-i,
body.bs-redesign .bs-funkce .bs-fk-motif{ z-index:1; }

/* hero */
body.bs-redesign .bs-funkce .bs-fk-h1,
body.bs-redesign .bs-funkce .bs-fk-h2{
  font-family:var(--bs-display); font-weight:400; color:var(--bs-ink);
  line-height:1; letter-spacing:.005em; font-size:3.95cqw; display:block;
  white-space:nowrap; /* one line each (as in Figma) so the swoosh keeps its gap */
}
body.bs-redesign .bs-funkce .bs-fk-sw img{ width:100%; height:auto; display:block; opacity:.92; }

/* feature text */
body.bs-redesign .bs-funkce .bs-fk-t .bs-fk-h{
  font-family:var(--bs-serif); font-weight:600; color:var(--bs-ink);
  font-size:2.22cqw; line-height:1.14; margin:0 0 .55em;
}
body.bs-redesign .bs-funkce .bs-fk-t .bs-fk-p{
  font-family:var(--bs-serif); font-weight:400; color:var(--bs-ink);
  font-size:1.235cqw; line-height:1.46; margin:0;
}
body.bs-redesign .bs-funkce .bs-fk-t--left{ text-align:left; }
body.bs-redesign .bs-funkce .bs-fk-t--right{ text-align:right; }

/* illustrations + decorative text motifs.
   Each illustration is bounded to its Figma box (--h) and object-fit:contain, so
   it renders at its intended footprint and can never balloon over the text. */
body.bs-redesign .bs-funkce .bs-fk-i{ height:var(--h); }
body.bs-redesign .bs-funkce .bs-fk-i img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
body.bs-redesign .bs-funkce .bs-fk-motif{ line-height:1; }
body.bs-redesign .bs-funkce .bs-fk-motif--fonts{ display:flex; gap:.12em; align-items:baseline; }
body.bs-redesign .bs-funkce .bs-fk-motif--fonts span{ font-family:var(--bs-display); font-size:3.95cqw; line-height:1; }
body.bs-redesign .bs-funkce .bs-fk-motif--fonts span:nth-child(1){ color:var(--bs-ink); }
body.bs-redesign .bs-funkce .bs-fk-motif--fonts span:nth-child(2){ color:var(--bs-wine); font-style:italic; }
body.bs-redesign .bs-funkce .bs-fk-motif--fonts span:nth-child(3){ color:#4a2b24; }
body.bs-redesign .bs-funkce .bs-fk-motif--fonts span:nth-child(4){ color:#641237; font-style:italic; }
body.bs-redesign .bs-funkce .bs-fk-motif--domena{
  font-family:var(--bs-display); color:var(--bs-wine); font-size:2.72cqw; line-height:1.05;
}

/* ===================== CTA band (flow) ===================== */
body.bs-redesign .bs-funkce .bs-fk-cta{ position:relative; background:var(--bs-cream); }
body.bs-redesign .bs-funkce .bs-fk-cta__inner{
  max-width:1160px; margin:0 auto; padding:22px 26px 74px;
  display:flex; align-items:center; gap:34px; flex-wrap:wrap;
}
body.bs-redesign .bs-funkce .bs-fk-cta__copy{ flex:1 1 520px; }
body.bs-redesign .bs-funkce .bs-fk-cta__lead{
  font-family:var(--bs-serif); font-weight:400; font-size:22px; line-height:1.42;
  color:var(--bs-ink); margin:0 0 12px; max-width:800px;
}
body.bs-redesign .bs-funkce .bs-fk-cta__sub{
  font-family:var(--bs-serif); font-size:19px; color:rgba(44,3,21,.5); margin:0;
}
body.bs-redesign .bs-funkce .bs-fk-cta__sub strong{ color:var(--bs-wine); font-weight:600; }
body.bs-redesign .bs-funkce .bs-fk-cta__btn{ flex:0 0 auto; }

/* ===================== STACK fallback (≤1180px) =====================
   Small laptops, tablets, phones: the stage would shrink text below comfort,
   so the composition flips to a single readable column. Elements were emitted in
   reading order (each illustration right after its feature), so static flow reads
   top-to-bottom. */
@media (max-width:1180px){
  /* Dedicated phone layout (Figma 852:400 "Landingpage-phone"): the zig-zag and
     floral frame are kept, just linearised. Elements go position:relative (so
     z-index still layers text over art) and flow top-to-bottom; text alternates
     L/R and each illustration offsets to a side (ms-l / ms-r / ms-c). */
  body.bs-redesign .bs-funkce .bs-fk-stage{
    aspect-ratio:auto; height:auto; container-type:normal;
    max-width:480px; padding:8px 22px 30px;
  }
  /* mobile floral frame — its own narrow (380px) asset */
  body.bs-redesign .bs-funkce .bs-fk-flowers{
    display:block; background-image:url(funkce/funkce-flowers-mobile.png);
    background-size:100% auto; background-repeat:repeat-y; background-position:top center; opacity:.85;
  }
  body.bs-redesign .bs-funkce .bs-fk-el{
    position:relative; z-index:1; left:auto; top:auto;
    width:auto !important; height:auto !important; margin:0;
  }
  body.bs-redesign .bs-funkce .bs-fk-i img{ height:auto; }

  /* hero: title left, subtitle right, small swoosh between (as on the phone board) */
  body.bs-redesign .bs-funkce .bs-fk-h1{ font-size:clamp(26px,8vw,34px); text-align:left; margin:18px 0 0; white-space:normal; }
  body.bs-redesign .bs-funkce .bs-fk-sw{ display:block; width:52%; max-width:180px; margin:2px 0 2px auto; opacity:.9; }
  body.bs-redesign .bs-funkce .bs-fk-h2{ font-size:clamp(24px,7vw,32px); text-align:right; margin:0 0 6px auto; max-width:72%; white-space:normal; }

  /* feature text — Figma phone board: LEFT features hug left, RIGHT features are
     CENTRED (not right-aligned). Readable rem sizes matched to the board. */
  body.bs-redesign .bs-funkce .bs-fk-t{ margin:22px 0 4px; max-width:90%; }
  body.bs-redesign .bs-funkce .bs-fk-t--left{ text-align:left; margin-right:auto; }
  body.bs-redesign .bs-funkce .bs-fk-t--right{ text-align:right; margin-left:auto; }
  body.bs-redesign .bs-funkce .bs-fk-t .bs-fk-h{ font-size:19px; margin-bottom:6px; }
  body.bs-redesign .bs-funkce .bs-fk-t .bs-fk-p{ font-size:13.5px; line-height:1.5; }

  /* illustrations: offset to a side (ms-l / ms-r) or centred (ms-c) */
  body.bs-redesign .bs-funkce .bs-fk-i{ width:54% !important; margin:6px 0 18px; }
  body.bs-redesign .bs-funkce .bs-fk-i.ms-l{ margin-right:auto; }
  body.bs-redesign .bs-funkce .bs-fk-i.ms-r{ margin-left:auto; }
  body.bs-redesign .bs-funkce .bs-fk-i.ms-c{ width:74% !important; margin-left:auto; margin-right:auto; }

  /* decorative motifs: aligned via text-align / justify (no fixed width) */
  body.bs-redesign .bs-funkce .bs-fk-motif{ margin:10px 0 18px; }
  body.bs-redesign .bs-funkce .bs-fk-motif.ms-l{ text-align:left; justify-content:flex-start; }
  body.bs-redesign .bs-funkce .bs-fk-motif.ms-r{ text-align:right; justify-content:flex-end; }
  body.bs-redesign .bs-funkce .bs-fk-motif.ms-c{ text-align:center; justify-content:center; }
  body.bs-redesign .bs-funkce .bs-fk-motif--fonts span{ font-size:40px; }
  body.bs-redesign .bs-funkce .bs-fk-motif--domena{ font-size:27px; }

  /* CTA */
  body.bs-redesign .bs-funkce .bs-fk-cta__inner{ padding:6px 20px 44px; }
  body.bs-redesign .bs-funkce .bs-fk-cta__lead{ font-size:20px; }
  body.bs-redesign .bs-funkce .bs-fk-cta__btn{ flex:1 1 100%; }
  body.bs-redesign .bs-funkce .bs-fk-cta__btn .btn{ width:100%; }
}