/* The Festive Edit hero (home page, inc/festive-hero.php): the old .hero with the festive content on the picture.
   Layout as the mock "Facebook post - 8 (2).png" (the first layout, brought back 10.11.2026 evening): ONE
   left-aligned column over the plain satin left side of the 1920x640 picture — the small white eyebrow with a
   square gold bullet, the big letter-spaced upright serif title THE FESTIVE EDIT, the serif lead, two white sans
   lines, the gold button pushed to the bottom (margin-top: auto) with the italic gold gift line under it. A line
   whose field is emptied is hidden.
   Desktop: the band is 1/3 of the width (the picture's 3:1), 640px at most, under the fixed header; the picture is
   pinned to the right edge, so on wider screens only its plain satin left side is cropped — the women and the
   products on the right are never cut (user, 10.11.2026: "пусть слева подрежется, главное чтобы справа картинка
   не резалась"). Sizes in vw so the copy scales with the band (title capped at 43px and lead at 32px — user 10.11.2026; at 1920px: eyebrow 15px,
   text 18px, button 17px / 60px tall, gift 20px). The copy must never reach the first woman's neck (mock
   "Facebook post - 8 (3)", user 10.11.2026): the title ends at ~41% of the width, the lead at ~30%, the text at
   ~26% — measured in Chrome at 1920/1440/1100px.
   Gold = var(--Pure-gold) (style.css). Title: GFS Didot (user, 10.11.2026; self-hosted in fonts/gfs-didot, the
   Google Fonts woff2 subsets, SIL OFL); lead and gift line: Libre Baskerville; eyebrow, text, button: Roboto. */
@font-face {
  font-family: 'GFS Didot';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/gfs-didot/GFSDidot-Regular-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'GFS Didot';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/gfs-didot/GFSDidot-Regular-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
.hero.hero--festive {
  --fh-cream: #fbf3e6;
  --fh-wine: #3a0a0f;
  --fh-gold: var(--Pure-gold, linear-gradient(90deg, #968368, #e1ca9a 52%, #968368));
  display: flex;
  align-items: stretch;
  height: auto;
  min-height: min(33.34vw, 640px); /* the picture's 3:1 up to 1920px; grows with the copy on tablets */
  margin: var(--fh-top, 118px) 0 0; /* the fixed header's bottom, set by the script in inc/festive-hero.php */
  padding: 0;
  color: var(--fh-cream);
  background: var(--fh-wine);
}
.hero--festive .hero__media {
  position: absolute;
  inset: 0;
  top: 0 !important;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.hero--festive .hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  padding: 2.2vw 4.7% 3.2vw;
}
.hero--festive .hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65em;
  margin: 0.3vw 0 4.6vw;
  font-family: Roboto, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 0.8vw, 16px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fff;
}
.hero--festive .hero__bullet { flex: none; width: 0.65em; height: 0.65em; background: #d8c3a2; }
.hero--festive .hero__copy { max-width: 46vw; }
.hero--festive .hero__title {
  margin: 0 0 1.8vw;
  font-family: 'GFS Didot', 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3.25vw, 43px);
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fh-cream);
  text-shadow: none;
  max-width: none;
}
.hero--festive .hero__gift {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: var(--fh-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #d8c3a2;
}
.hero--festive .hero__subtitle {
  margin: 0 0 0.9vw;
  font-family: 'GFS Didot', 'Libre Baskerville', Georgia, serif; /* the mock's lead is the title's Didot, narrower than Baskerville: it ends before the woman's neck (~31% of the width) */
  font-style: normal;
  font-weight: 400;
  font-size: clamp(15px, 1.8vw, 32px);
  line-height: 1.25;
  max-width: none;
  color: var(--fh-cream);
}
.hero--festive .hero__text {
  max-width: 25vw; /* never under the woman's neck (~31% of the width); the picture keeps its ratio, so the neck is always there */
  margin: 0;
  font-family: Roboto, system-ui, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(12px, 0.92vw, 18px);
  line-height: 1.45;
  color: #fff;
}
.hero--festive .hero__actions { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 0.8vw; margin-top: auto; padding-top: 1.8vw; /* the gap to the text when the band is at its minimum (tablets) */ }
.hero.hero--festive .hero__actions .hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17.2vw;
  max-width: none !important;
  padding: 0.95vw 2vw;
  border: none !important;
  border-radius: 0;
  background: var(--fh-gold), #e3cfa6 !important; /* --Pure-gold is 90% opaque: a solid base keeps it light on the wine */
  color: #2b1a10 !important;
  font-family: Roboto, system-ui, sans-serif;
  font-size: clamp(11px, 0.9vw, 17px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: opacity .15s ease;
}
.hero.hero--festive .hero__actions .hero__btn:hover { opacity: .88; }
.hero--festive .hero__gift { margin: 0 0 0 0.6vw; font-size: clamp(12px, 1.05vw, 20px); line-height: 1.2; text-align: left; }

@media screen and (max-width: 1145px) {
  .hero.hero--festive { margin-top: var(--fh-top, 108px); }
}

/* Arabic (dir=rtl): the column stays over the plain satin on the LEFT of the picture (flex-end = left in rtl) — the
   women and the products are on the right at every language; the text inside reads right-to-left as usual. */
[dir="rtl"] .hero--festive .hero__inner,
[dir="rtl"] .hero--festive .hero__actions { align-items: flex-end; }
[dir="rtl"] .hero--festive .hero__copy { text-align: right; }

/* Phones (≤728px): the designer's 728x440 picture is the band (the women and the products from ~45% of the width),
   the same column over its dark left part — never under the picture: the copy is 50% wide, the title on two
   lines. The band is at least 728:440 and grows when the copy is taller; sizes in vw with readable minimums
   (at 390px: eyebrow 9px, title 22px, lead 14px, text 10px, button 10px). */
@media screen and (max-width: 728px) {
  .hero.hero--festive { height: auto; min-height: 60.5vw; margin-top: var(--fh-top, 82px); } /* 728:440; grows with the copy (no aspect-ratio: with an explicit min-height it would clip the gift line) */
  .hero--festive .hero__inner { padding: 3vw 4.5% 3.5vw; }
  .hero--festive .hero__eyebrow { margin: 0.5vw 0 2.6vw; font-size: max(9px, 2.3vw); }
  .hero--festive .hero__copy { max-width: 50%; }
  .hero--festive .hero__title { margin-bottom: 1.2vw; font-size: 5.6vw; line-height: 1.08; letter-spacing: 0.07em; }
  .hero--festive .hero__subtitle { margin-bottom: 1.4vw; font-size: max(13px, 3.6vw); }
  .hero--festive .hero__text { max-width: none; font-size: max(10px, 2.7vw); line-height: 1.35; }
  .hero--festive .hero__actions { gap: 1.3vw; margin-top: 3vw; }
  .hero.hero--festive .hero__actions .hero__btn { min-width: 0; padding: 2.3vw 4vw; font-size: max(10px, 2.7vw); }
  .hero--festive .hero__gift { margin-left: 0; font-size: max(10px, 2.8vw); }
}