/* CineTuscia Village | Bootstrap 5.3 + fluid typography (Tailwind + Utopia).
   Base 16px, ratios 1.2 (360px) → 1.25 (1280px). */
:root {
  --ctv-red: #b71c1c;
  --ctv-accent: #e53935;
  --ctv-ink: #1a1a2e;
  --ctv-muted: #6b6b78;
  --ctv-cream: #f8f6f5;
  --ctv-border: rgb(26 26 46 / 10%);
  --ctv-card-bg: rgb(255 255 255 / 80%);
  --ctv-card-radius: 1rem;
  --ctv-shadow: 0 0.9rem 2.8rem rgb(26 26 46 / 6%);
  --ctv-space-fluid: clamp(1.25rem, 0.9rem + 1.55vw, 2.75rem);
  --step--2: clamp(0.6400rem, 0.7157rem + -0.0059vw, 0.6944rem);
  --step--1: clamp(0.8000rem, 0.8464rem + -0.0036vw, 0.8333rem);
  --step-0: clamp(1.0000rem, 1.0000rem + 0.0000vw, 1.0000rem);
  --step-1: clamp(1.2000rem, 1.1804rem + 0.0054vw, 1.2500rem);
  --step-2: clamp(1.4400rem, 1.3921rem + 0.0133vw, 1.5625rem);
  --step-3: clamp(1.7280rem, 1.6399rem + 0.0245vw, 1.9531rem);
  --step-4: clamp(2.0736rem, 1.9297rem + 0.0400vw, 2.4414rem);
  --step-5: clamp(2.4883rem, 2.2678rem + 0.0612vw, 3.0518rem);
  --step-6: clamp(2.9860rem, 2.6617rem + 0.0901vw, 3.8147rem);
  --step-7: clamp(3.5832rem, 3.1194rem + 0.1288vw, 4.7684rem);
}

html { background: var(--ctv-cream); }
body {
  font: 500 16px/1.6 Montserrat, Arial, sans-serif;
  color: var(--ctv-ink);
  background: var(--ctv-cream);
  -webkit-font-smoothing: antialiased;
}
/* Consistent type tokens for future headings and components. */
h1 { font-size: var(--step-7); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-4); }
h4 { font-size: var(--step-3); }
h5 { font-size: var(--step-2); }
h6 { font-size: var(--step-1); }

a {
  color: var(--ctv-red);
  text-decoration: none;
}

a:hover {
  color: var(--ctv-accent);
}

a:focus-visible {
  outline: .1875rem solid var(--ctv-accent);
  outline-offset: .25rem;
}

img {
  max-width: 100%;
  height: auto;
}

a img {
  display: block;
}

a:hover img {
  opacity: .85;
}

.festival-area a {
  display: inline-block;
}

.site-shell { isolation: isolate; }
.site-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgb(247 245 244 / 94%), rgb(250 248 247 / 84%)), url('../images/ctv_sala.jpg') center / cover no-repeat;
}
.site-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 90% 45%, rgb(229 57 53 / 7%), transparent 45%);
  pointer-events: none;
}
.site-header, footer { border-color: var(--ctv-border) !important; }
.brand { width: clamp(16rem, 40vw, 27.5rem); height: auto; }
.hero { padding-block: var(--ctv-space-fluid); }
#hero-title { line-height: 1.1; letter-spacing: -0.055em; font-weight: 800 !important; }
#hero-title span { color: var(--ctv-red); }
.intro { font-size: var(--step-0); line-height: 1.8; color: #555465; }
.divider-red { width: 3rem; height: .25rem; background: var(--ctv-accent); border-radius: 100vmax; }
.action-card {
  min-height: 14rem;
  color: var(--ctv-ink);
  background: var(--ctv-card-bg);
  border: .0625rem solid rgb(255 255 255 / 95%);
  box-shadow: var(--ctv-shadow);
  backdrop-filter: blur(1.125rem);
  -webkit-backdrop-filter: blur(1.125rem);
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.action-card:hover, .action-card:focus-visible {
  color: var(--ctv-ink);
  background: rgb(255 255 255 / 96%);
  border-color: rgb(183 28 28 / 23%);
  box-shadow: 0 1.25rem 2.6rem rgb(26 26 46 / 12%);
  transform: translateY(-.3rem);
}
.action-icon { width: 4.25rem; height: 4.25rem; background: rgb(183 28 28 / 8%); color: var(--ctv-red); }
.action-icon i { font-size: 1.85em; line-height: 1; }
.action-title { font-size: var(--step-1); line-height: 1.3; letter-spacing: -.025em; }
.action-sub { font-size: var(--step--1); line-height: 1.6; color: var(--ctv-muted); }
.secondary-link {
  color: #565461;
  font-size: var(--step--1);
  border-bottom: .0625rem solid rgb(86 84 97 / 25%);
  padding-bottom: .2em;
  transition: color .2s ease, border-color .2s ease;
}
.secondary-link:hover { color: var(--ctv-red); border-color: currentColor; }
.festival-logo { max-width: 5.5rem; max-height: 3.5rem; object-fit: contain; }
.footer-top { color: #565461; font-size: var(--step--2); }
.footer-top strong { color: var(--ctv-ink); }
.footer-bottom { color: #85818b; font-size: .7em; }
:focus-visible { outline: .18rem solid var(--ctv-accent); outline-offset: .25rem; }
@media (max-width: 767.98px) {
  .action-card { min-height: 11rem; }
  .action-icon { width: 3.5rem; height: 3.5rem; }
  .action-icon i { font-size: 1.55em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}