/* Smile & Stay – hero background video (22 Oct 2026, v3)
   Video is made in the hero's own shape (1920x670, 2.87:1 = 34.85vw), so it fits the box without cropping.
   Captions and logo sit on the right; the headline sits on the left.
   Reduced-motion / Data Saver: a script in index.html pauses it on the poster frame. */
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 85% 50%;
  pointer-events: none;
}
/* light extra tint so the headline on the left stays crisp */
.hero-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(0, 10, 22, .28) 0%, rgba(0, 10, 22, .10) 40%, rgba(0, 10, 22, 0) 58%);
}
.hero::before, .hero::after { z-index: 1; }
.hero .container { z-index: 2; }

/* Hero shows only the headline, kicker and intro text, left and vertically centred. */
.hero .hero-tag,
.hero .hero-proof,
.hero .ctas,
.hero .hero-fn,
.hero .hero-visual,
.hero .fd-howband,
.hero .fd-howwrap { display: none !important; }

@media (min-width: 761px) {
  .hero.hero-sm {
    height: clamp(420px, 34.85vw, 760px);
    padding: 0;
    display: flex; align-items: center;
  }
  .hero.hero-sm > .container { width: 100%; }
  .hero .hero-copy { max-width: 46%; }
  .hero .hero-copy h1 { margin-top: 0; }
}
@media (max-width: 760px) {
  .hero.hero-sm { padding: 48px 0 72px; }
  .hero-video { object-position: 60% 50%; } /* keeps the video’s own caption (right ~30%) out of the phone crop */
  .hero-tint { background: linear-gradient(180deg, rgba(0, 10, 22, .50), rgba(0, 10, 22, .30)); }
}

/* 24 Oct 2026 – hero layers
   - the slanted light panel (.hero::after, the diagonal line) stays
   - hexagons (.hero::before) only on the left, cut off along that diagonal; the video on the right is left clear
   - a soft blue layer behind the words on the left, fading out smoothly before the video's caption */
.hero.hero-sm { --hh: clamp(420px, 34.85vw, 760px); }
@media (min-width: 1001px) { .hero.hero-sm { --hh: max(527px, clamp(420px, 34.85vw, 760px)); } }
@media (max-width: 760px) { .hero.hero-sm { --hh: 700px; } }
/* the panel's right edge runs from 45% + H×0.1625 at the top to 45% − H×0.1625 at the bottom (skewX −18°, height 160%) */
.hero.hero-sm::before {
  opacity: .2;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 30%, rgba(0,0,0,.45) 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 30%, rgba(0,0,0,.45) 100%);
  clip-path: polygon(0 0, calc(45% + var(--hh) * .1625) 0, calc(45% - var(--hh) * .1625) 100%, 0 100%);
}
.hero-tint { background: linear-gradient(100deg, rgba(5, 38, 78, .60) 0%, rgba(5, 38, 78, .46) 24%, rgba(5, 38, 78, .24) 40%, rgba(5, 38, 78, .08) 52%, rgba(5, 38, 78, 0) 62%); }
@media (max-width: 760px) { .hero-tint { background: linear-gradient(180deg, rgba(5, 38, 78, .68), rgba(5, 38, 78, .5)); } }

/* Tablets (761–1200px): keep the video's right edge in view so its "Your smile. Your choice." line isn't cut off,
   and wrap the partner badges into a tidy grid instead of squeezing five into one row */
@media (min-width: 761px) and (max-width: 1200px) {
  .hero-video { object-position: 100% 50%; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  body .hero-strip .mk-f, body .hero .mk .mk-f { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; width: 100% !important; overflow: visible; }
  body .hero-strip .mk-f li, body .hero .mk .mk-f li { min-width: 0; padding: 0; border: 0; }
}
/* iPad portrait: the badges wrap to two rows and sit where the video's own "Your smile. Your choice." line is –
   a navy band at the bottom keeps the badges readable and hides that line behind them */
@media (min-width: 761px) and (max-width: 1000px) {
  .hero.hero-sm .hero-tint { background: linear-gradient(0deg, #05223a 0, #05223a 138px, rgba(5, 34, 58, 0) 210px), linear-gradient(100deg, rgba(5, 38, 78, .60) 0%, rgba(5, 38, 78, .46) 24%, rgba(5, 38, 78, .24) 40%, rgba(5, 38, 78, .08) 52%, rgba(5, 38, 78, 0) 62%); }
}

/* Phones (8 Nov 2026): no video – a still of the terrace shot (her smile, Budapest behind) and less text.
   The video's own caption is cleaned out of the still; index.html removes the <video> on phones so it never downloads. */
@media (max-width: 760px) {
  .hero.hero-sm { background: var(--blue-900) url("../img/heroes/home-smile-m.webp") 56% 100% / max(160%, 600px) auto no-repeat; }
  .hero.hero-sm .hero-video { display: none; }
  .hero.hero-sm .hero-tint { background: linear-gradient(180deg, var(--blue-900) 0%, rgba(35, 54, 88, .78) 22%, rgba(5, 38, 78, .38) 48%, rgba(5, 38, 78, .5) 70%, rgba(5, 38, 78, .85) 100%); }
  .hero .mk .mk-p { display: none; }
  .hero .mk .mk-k br { display: none; }               /* one flowing line: "Hungary & Turkey – even after…" */                 /* the two-line intro: the kicker says it */
  .hero .mk .mk-f small { display: none; }           /* partner badges: icon + label only */
  .hero .mk .mk-f a { align-items: center; }
}
/* Phones (8 Nov 2026, b): headline and kicker at the top, the two buttons at the bottom of the photo;
   no partner badges and no extra Free quotes button (the header has Quotes) */
@media (max-width: 760px) {
  body .hero.hero-sm.mk-hero { display: flex; min-height: min(640px, calc(100svh - 150px)) !important; padding: 40px 0 32px !important; }
  .hero.hero-sm > .container { display: flex; flex-direction: column; width: 100%; }
  .hero.hero-sm .hero-copy.mk { display: flex; flex-direction: column; flex: 1; }
  .hero .mk .mk-f, .hero .hero-cta-top, .hero.hero-sm .hero-visual { display: none !important; }
  .hero .mk .mk-cta { margin-top: auto; padding-top: 32px; }
}