/* Round 18e (24.10): the three films at the top of Acasă, redesigned. Radu: „sa se vada genial din prima … mai hero … butoanele mai
   geniale … awward winning pentru desktop si mobile”. Real footage only. Loaded last on the two homepages; every rule is scoped to
   .opening-cinema.hero-films, so no other page changes.
   Desktop: a tall triptych straight on the page (no orange box); the panel under the pointer opens wider, the 360° tour takes the
   stage while it runs. Phone and tablet: one tall card at a time with the next one peeking at the edge, a segmented switcher,
   story-style progress. Buttons: one family of crisp, solid controls (no blur), white on hover. */
body .new-home-hero .hero-films.hero-films.opening-cinema {
  --hf-ink: #1e1e1e; --hf-cream: #f5f2ea; --hf-orange: #d33f18; --hf-radius: 20px; --hf-ease: cubic-bezier(.22, .8, .16, 1);
  width: 100%; max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; color: var(--hf-ink);
}
body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage { counter-reset: hf; }
body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage > figure { counter-increment: hf; container-type: inline-size; }
body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage .album-frame {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: auto; width: 100%; max-width: none;
  border-radius: var(--hf-radius); background: #141413;
  box-shadow: 0 34px 60px -40px rgba(32, 22, 14, .6), 0 0 0 1px rgba(30, 30, 30, .07);
}
/* Photo and film always fill the card; the frame decides the shape. */
body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage .album-frame > :is(img, video) {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%;
}
body .new-home-hero .hero-films.hero-films.opening-cinema #hero-film-production .album-frame > :is(img, video) { object-position: 58% 50%; }

/* Caption: index, title in the display face, a small tag. */
body .new-home-hero .hero-films.hero-films.opening-cinema .film-caption {
  inset: auto 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 120px 24px 24px; color: #fff; font: inherit;
  background: linear-gradient(to top, rgba(12, 11, 10, .74), rgba(12, 11, 10, .34) 46%, rgba(12, 11, 10, 0));
}
body .new-home-hero .hero-films.hero-films.opening-cinema .film-caption::before {
  content: counter(hf, decimal-leading-zero); font: 600 .75rem/1 var(--body); letter-spacing: .2em; color: rgba(255, 255, 255, .78);
}
body .new-home-hero .hero-films.hero-films.opening-cinema .film-caption > span {
  /* Scales with the card (narrow while another card is open), never breaks inside a word. */
  max-width: 100%; font: 400 clamp(.9375rem, 7.4cqi, 2.25rem)/.98 var(--display); text-transform: uppercase;
  letter-spacing: -.005em; overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
body .new-home-hero .hero-films.hero-films.opening-cinema .film-caption > small {
  margin: 0; padding: 7px 11px 6px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  font: 600 .6875rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #fff; white-space: nowrap;
}

/* One family of controls: solid, crisp, a white ring; white with ink on hover and focus. */
body .new-home-hero .hero-films.hero-films.opening-cinema :is(.video-toggle, .film-expand) {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); background: rgba(14, 14, 13, .44);
  color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .45s var(--hf-ease);
}
body .new-home-hero .hero-films.hero-films.opening-cinema .video-toggle { top: 16px; right: 16px; }
body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage .film-expand { right: 18px; bottom: 20px; }
body .new-home-hero .hero-films.hero-films.opening-cinema .film-expand svg { width: 20px; height: 20px; }
body .new-home-hero .hero-films.hero-films.opening-cinema :is(.video-toggle:hover, .video-toggle:focus-visible, .film-open:hover .film-expand, .film-open:focus-visible .film-expand) {
  background: #fff; color: var(--hf-ink); border-color: #fff; transform: scale(1.07);
}
body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage .film-open { border-radius: var(--hf-radius); }
body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage .film-open:focus-visible { outline: 3px solid #fff; outline-offset: -7px; }

/* The 360° card: Zi/Seară as one segmented pill, an orange orb with a slow orbit. */
body .new-home-hero .hero-films.hero-films.opening-cinema .hero-vt .hero-vt-modes {
  top: 16px; left: 16px; gap: 2px; padding: 4px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 999px;
  background: rgba(14, 14, 13, .5); box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .6);
}
body .new-home-hero .hero-films.hero-films.opening-cinema .hero-vt .hero-vt-modes button {
  min-height: 36px; padding: 6px 13px; gap: 7px; border: 0; border-radius: 999px; background: transparent; color: #fff;
  font: 600 .8125rem/1 var(--body); transition: background-color .25s ease, color .25s ease;
}
body .new-home-hero .hero-films.hero-films.opening-cinema .hero-vt .hero-vt-modes button:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .16); }
body .new-home-hero .hero-films.hero-films.opening-cinema .hero-vt .hero-vt-modes button[aria-pressed="true"] { background: var(--hf-cream); color: var(--hf-ink); }
body .new-home-hero .hero-films.hero-films.opening-cinema .hero-vt .hero-vt-play {
  width: 96px; height: 96px; border: 0; background: var(--hf-orange); color: #fff; font: 700 1.3125rem/1 var(--body); letter-spacing: 0;
  box-shadow: 0 24px 46px -18px rgba(0, 0, 0, .75); transition: transform .5s var(--hf-ease), background-color .25s ease;
}
body .new-home-hero .hero-films.hero-films.opening-cinema .hero-vt .hero-vt-play::before,
body .new-home-hero .hero-films.hero-films.opening-cinema .hero-vt .hero-vt-play::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
body .new-home-hero .hero-films.hero-films.opening-cinema .hero-vt .hero-vt-play::before {
  inset: -11px; border: 1.5px solid rgba(255, 255, 255, .9); border-right-color: transparent; border-bottom-color: rgba(255, 255, 255, .22);
}
body .new-home-hero .hero-films.hero-films.opening-cinema .hero-vt .hero-vt-play::after { inset: -23px; border: 1px solid rgba(255, 255, 255, .26); }
body .new-home-hero .hero-films.hero-films.opening-cinema .hero-vt .film-open:is(:hover, :focus-visible) .hero-vt-play {
  transform: translate(-50%, -50%) scale(1.07); background: #e4471b;
}
body .new-home-hero .hero-films.hero-films.opening-cinema .hero-vt .film-caption > small { margin-right: 0; }
@media (prefers-reduced-motion: no-preference) {
  body .new-home-hero .hero-films.hero-films.opening-cinema .hero-vt .hero-vt-play::before { animation: hf-orbit 7s linear infinite; }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage .album-frame > :is(img, video) { transition: transform 1.6s var(--hf-ease); }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage > figure:hover .album-frame > :is(img, video) { transform: scale(1.035); }
}
@keyframes hf-orbit { to { transform: rotate(1turn); } }

/* Below the films: the line in the display face, the three paths as pills. */
body .new-home-hero .hero-films.hero-films.opening-cinema .cinema-caption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  width: 100%; max-width: none; margin: 0; padding: 26px 0 0; border: 0;
}
body .new-home-hero .hero-films.hero-films.opening-cinema .cinema-caption p {
  margin: 0; color: var(--hf-ink); font: 400 clamp(1rem, 1.45vw, 1.375rem)/1.1 var(--display); text-transform: uppercase;
}
body .new-home-hero .hero-films.hero-films.opening-cinema .selective-home-paths { display: flex; flex-wrap: wrap; gap: 10px; }
body .new-home-hero .hero-films.hero-films.opening-cinema .selective-home-paths a {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 7px 0 20px; border: 1px solid rgba(30, 30, 30, .22);
  border-radius: 999px; background: transparent; color: var(--hf-ink); text-decoration: none; font: 600 .875rem/1 var(--body);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
body .new-home-hero .hero-films.hero-films.opening-cinema .selective-home-paths a .studio-action-icon {
  display: grid; place-items: center; width: 34px; height: 34px; margin: 0; border-radius: 50%; background: var(--hf-ink); color: #fff;
  transition: background-color .25s ease, transform .45s var(--hf-ease);
}
body .new-home-hero .hero-films.hero-films.opening-cinema .selective-home-paths a .studio-action-icon svg { width: 16px; height: 16px; }
body .new-home-hero .hero-films.hero-films.opening-cinema .selective-home-paths a:is(:hover, :focus-visible) { background: var(--hf-ink); border-color: var(--hf-ink); color: var(--hf-cream); }
body .new-home-hero .hero-films.hero-films.opening-cinema .selective-home-paths a:is(:hover, :focus-visible) .studio-action-icon { background: var(--hf-orange); transform: translateY(2px); }
body .new-home-hero .hero-films.hero-films.opening-cinema .selective-home-paths a:focus-visible { outline: 3px solid var(--hf-orange); outline-offset: 3px; }

/* ---------- Desktop: the triptych ---------- */
@media (min-width: 960px) {
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage {
    display: flex; gap: 14px; width: 100%; max-width: none; height: clamp(540px, 68vh, 720px); margin: 0; padding: 0; background: none;
  }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage > figure {
    flex: 1 1 0; min-width: 0; height: 100%; margin: 0; place-self: stretch; transition: flex-grow .85s var(--hf-ease);
  }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage > figure > .album-frame { height: 100%; }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage:hover > figure { flex-grow: .8; }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage > figure:hover { flex-grow: 1.8; }
  /* While the tour runs in its card, the card takes the stage. */
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage:has(.vt-playing) > figure { flex-grow: .62; }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage:has(.vt-playing) > figure.vt-playing { flex-grow: 2.3; }
}
@media (min-width: 960px) and (prefers-reduced-motion: reduce) {
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage > figure { transition: none; }
}

/* ---------- Phone and tablet: one tall card at a time, the next one peeking ---------- */
@media (max-width: 959px) {
  /* The page margin, in pixels (scroll-padding resolves % against the strip itself): 20px on phones, 4vw from 768px. */
  body .new-home-hero .hero-films.hero-films.opening-cinema { --hf-gutter: 20px; --hf-card-w: min(78vw, 400px); --hf-card-h: min(calc(var(--hf-card-w) * 1.66), 78svh); --hf-radius: 18px; }
  body .new-home-hero .hero-films.hero-films.opening-cinema .hero-media-switcher {
    display: flex; gap: 4px; width: 100%; margin: 0 0 16px; padding: 5px; border: 0; border-radius: 999px; background: rgba(30, 30, 30, .07);
  }
  body .new-home-hero .hero-films.hero-films.opening-cinema .hero-media-switcher button {
    flex: 1 1 0; min-width: 0; max-width: none; min-height: 44px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent;
    color: var(--hf-ink); font: 600 .875rem/1 var(--body); transition: background-color .3s ease, color .3s ease;
  }
  body .new-home-hero .hero-films.hero-films.opening-cinema .hero-media-switcher button[aria-pressed="true"] { background: var(--hf-ink); color: var(--hf-cream); }
  body .new-home-hero .hero-films.hero-films.opening-cinema .hero-media-switcher button:focus-visible { outline: 3px solid var(--hf-orange); outline-offset: 2px; }
  /* The strip bleeds to the screen edges; scroll-padding keeps each card on the page margin. */
  @media (min-width: 768px) { body .new-home-hero .hero-films.hero-films.opening-cinema { --hf-gutter: 4vw; } }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage {
    width: auto; max-width: none; height: auto; margin: 0 calc(var(--hf-gutter) * -1); padding: 6px var(--hf-gutter) 34px; gap: 12px; background: none; border-radius: 0;
    scroll-padding-inline: var(--hf-gutter);
  }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage[data-film-swipe] {
    width: auto; max-width: none; margin: 0 calc(var(--hf-gutter) * -1); padding: 6px var(--hf-gutter) 34px; gap: 12px; border-radius: 0; scroll-padding-inline: var(--hf-gutter);
  }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage > figure,
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage[data-film-swipe] > [data-film-panel] {
    flex: 0 0 var(--hf-card-w); width: var(--hf-card-w); height: auto; margin: 0; display: block;
  }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage .album-frame,
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage .album-production .album-frame {
    width: 100%; max-width: none; height: var(--hf-card-h); aspect-ratio: auto;
    transition: filter .5s ease, transform .6s var(--hf-ease);
  }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage[data-film-swipe] > [aria-hidden="true"] .album-frame { filter: brightness(.62); transform: scale(.95); }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-swipe-meta:not([hidden]) { padding: 0; color: var(--hf-ink); }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-swipe-hint { color: rgba(30, 30, 30, .72); font: 500 .8125rem/1.3 var(--body); }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-swipe-dots { gap: 6px; }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-swipe-dots i { width: 22px; height: 4px; border: 0; border-radius: 4px; background: rgba(30, 30, 30, .18); }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-swipe-dots i.is-current { width: 40px; background: var(--hf-orange); }
  body .new-home-hero .hero-films.hero-films.opening-cinema [data-film-position] { color: var(--hf-ink); font: 600 .8125rem/1 var(--body); }
  body .new-home-hero .hero-films.hero-films.opening-cinema .cinema-caption { padding-top: 22px; }
  body .new-home-hero .hero-films.hero-films.opening-cinema .cinema-caption p { font-size: 1rem; }
  body .new-home-hero .hero-films.hero-films.opening-cinema .cinema-caption .selective-home-paths a { display: inline-flex; min-height: 44px; padding: 0 5px 0 15px; gap: 10px; font-size: .8125rem; }
  body .new-home-hero .hero-films.hero-films.opening-cinema .cinema-caption .selective-home-paths a .studio-action-icon { width: 32px; height: 32px; }
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-caption { padding: 110px 20px 20px; }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  body .new-home-hero .hero-films.hero-films.opening-cinema .film-stage .album-frame { transition: none; }
}