/* Shared alignment, typography and film framing across the website. */
:root {
  --content-width: 1380px;
  --pad: max(24px, calc((100vw - var(--content-width)) / 2));
}

.site-header {
  height: 92px;
  gap: clamp(18px, 2.3vw, 38px);
  padding-inline: max(28px, calc((100vw - var(--content-width)) / 2));
  background: linear-gradient(180deg, #100c13e8, #100c1360);
}
.site-header.scrolled { height: 80px; }
.brand { gap: 11px; }
.brand > span { min-width: 0; }
.brand strong { font-size: 16px; line-height: 1.6; }
.brand small {
  font-size: 9px;
  line-height: 1.65;
  letter-spacing: .015em;
  color: #d6b986;
  margin-top: 2px;
}
.desktop-nav { gap: clamp(18px, 2.2vw, 34px); }
.desktop-nav a { font-size: 12px; }
.header-actions { gap: 18px; }
.language-switch button { min-height: 34px; min-width: 37px; }

.section-heading,
.day-tabs,
.day-stage,
.feature-rail,
.films-grid,
.footer-top,
.footer-bottom {
  max-width: var(--content-width);
  margin-inline: auto;
}
.section-heading { gap: 8%; margin-bottom: 44px; }
.section-heading h2 { font-size: clamp(37px, 4.2vw, 59px); }
html:lang(ta) .section-heading h2 { font-size: clamp(27px, 2.8vw, 41px); }
.section-intro { font-size: 13px; }
.family-copy h2 { font-size: clamp(37px, 3.8vw, 55px); }
html:lang(ta) .family-copy h2 { font-size: clamp(27px, 2.8vw, 40px); }
.family-copy > p:not(.eyebrow) { color: #75656b; }

.films-section { padding-block: clamp(65px, 7vw, 105px); }
.films-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(18px, 2.1vw, 30px);
}
.films-grid .film-card,
.films-grid .film-card:not(:first-child),
.films-grid .film-card:last-child {
  grid-column: auto;
  margin-top: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.films-grid .film-art,
.films-grid .film-card:not(:first-child) .film-art {
  width: 100%;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
  border: 1px solid #d5b68828;
  border-radius: 12px;
  background: #261a24;
  isolation: isolate;
}
.film-art::before {
  content: '';
  position: absolute;
  inset: -12%;
  z-index: -1;
  background-image: var(--film-backdrop);
  background-size: cover;
  background-position: center;
  filter: blur(24px) brightness(.33) saturate(.65);
}
.film-card[data-film='day'] { --film-backdrop: url('assets/film-day-poster.webp'); }
.film-card[data-film='family'] { --film-backdrop: url('assets/film-family-poster.webp'); }
.film-card[data-film='teaser'] { --film-backdrop: url('assets/film-teaser-poster.webp'); }
.films-grid .film-poster,
.films-grid .film-main .film-poster,
.films-grid .portrait-film .film-poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: brightness(.89);
  transform-origin: center;
}
.film-art::after { background: linear-gradient(0deg, #0f0b164d, transparent 42%); }
.films-grid .film-card:hover .film-poster { transform: scale(1.025); filter: brightness(1); }
.film-play {
  width: 52px;
  height: 52px;
  border-color: #fff9;
  background: #130c1840;
  box-shadow: 0 4px 24px #0003;
}
.film-number { display: none; }
.film-duration {
  bottom: 13px;
  right: 13px;
  padding: 3px 7px;
  color: #fbefdf;
  background: #100c13b3;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.7;
}
.film-info {
  flex: 1;
  min-height: 100px;
  padding: 22px 30px 18px 0;
  border-bottom: 1px solid #d5b68824;
}
.film-info h3 { font-size: 16px; line-height: 1.65; margin: 0 0 7px; }
html:lang(ta) .film-info h3 { font-size: 15px; }
.film-info > span:not(:last-child) { display: block; font-size: 11px; line-height: 1.8; color: #b5a6b0; }
.film-info > span:last-child { top: 22px; right: 1px; font-size: 20px; }

.launch-section { padding-block: clamp(72px, 8vw, 112px); }
.launch-lockup { margin-bottom: 24px; }
.launch-section h2 { font-size: clamp(38px, 4.2vw, 61px); max-width: 1000px; }
html:lang(ta) .launch-section h2 { font-size: clamp(25px, 2.9vw, 40px); line-height: 1.8; }
.launch-tagline { color: #c4b4c0; }
.store-badge { border-radius: 10px; }

footer { padding: 42px var(--pad) 24px; border-top-color: #d4ae742e; }
.footer-top { padding-bottom: 30px; gap: 28px; }
.footer-top > img { width: 290px; max-width: 35%; height: auto; }
.footer-top p { max-width: 410px; font-size: 12px; line-height: 1.9; color: #ac9ca8; }
.back-top { white-space: nowrap; }
.footer-bottom {
  min-height: 61px;
  padding-top: 19px;
  gap: 24px;
  color: #b09eab;
  border-top-color: #d4ae7424;
}
.footer-bottom > span:first-child {
  font-size: 10px;
  letter-spacing: .02em;
  line-height: 1.9;
}
.footer-bottom > span:nth-child(2) { font-size: 10px; line-height: 1.9; }
.footer-bottom .motion-toggle { flex-shrink: 0; font-size: 10px; }

@media (min-width: 1500px) {
  :root { --pad: max(64px, calc((100vw - var(--content-width)) / 2)); }
}
@media (max-width: 1120px) {
  .site-header { gap: 20px; }
  .brand strong { font-size: 14px; }
  .brand small { font-size: 8px; }
  .desktop-nav { gap: 18px; }
  .desktop-nav a { font-size: 11px; }
  .header-actions { gap: 14px; }
  .film-info h3, html:lang(ta) .film-info h3 { font-size: 14px; }
}
@media (max-width: 800px) {
  .site-header, .site-header.scrolled { height: 78px; padding-inline: var(--pad); }
  .brand { gap: 9px; }
  .brand strong { font-size: 14px; }
  .brand small { font-size: 8px; }
  .section-heading { gap: 23px; margin-bottom: 34px; }
  .films-grid { grid-template-columns: 1fr; gap: 30px; max-width: 600px; }
  .film-info { min-height: 88px; padding-top: 18px; }
  .film-info > span:last-child { top: 18px; }
  .film-info h3, html:lang(ta) .film-info h3 { font-size: 16px; }
  .footer-top { gap: 24px; }
  .footer-top > img { width: 280px; max-width: 70%; }
  .footer-top p { margin: 0; font-size: 11px; max-width: none; }
  .footer-bottom { flex-wrap: wrap; gap: 10px 18px; }
  .footer-bottom > span:first-child { max-width: none; font-size: 10px; }
  .footer-bottom > span:nth-child(2) { display: none; }
}
@media (max-width: 480px) {
  :root { --pad: 21px; }
  .site-header { gap: 10px; }
  .brand strong { font-size: 12px; }
  .brand small { font-size: 6.8px; letter-spacing: 0; }
  .brand img { width: 32px; height: 32px; }
  .header-actions { gap: 10px; }
  .language-switch button { min-width: 29px; min-height: 30px; padding-inline: 6px; }
  .film-info h3, html:lang(ta) .film-info h3 { font-size: 14px; }
  .film-info > span:not(:last-child) { font-size: 10px; }
  .footer-top > img { width: 250px; }
  .footer-bottom > span:first-child { width: 100%; font-size: 9px; }
  .footer-bottom .motion-toggle { margin-left: 0; font-size: 10px; }
  .launch-section h2 { font-size: 37px; }
  html:lang(ta) .launch-section h2 { font-size: 25px; }
  .hero-scene-footer { width: calc(100% - 32px); }
  .hero-scenes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; }
  .hero-scenes button { min-width: 0; font-size: 10px; padding-inline: 5px; }
  .hero-scenes .scene-replay { width: 100%; }
  .hero-copy { margin-top: 415px; }
  .family-section { grid-template-columns: minmax(0,1fr); }
  .family-copy, .family-photo, .audience-row > * { min-width: 0; }
  .audience-row { grid-template-columns: minmax(0,.9fr) minmax(0,2fr); overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  :root { --pad: 16px; }
  .site-header { gap: 6px; }
  .brand { gap: 6px; }
  .brand strong { font-size: 10.5px; }
  .brand small { font-size: 6px; }
  .brand img { width: 28px; height: 28px; }
  .header-actions { gap: 8px; }
}