/* ================================================================
   BANO STUDIOS — HOME PAGE CSS (D03)
   Home-specific styles extracted verbatim from
   Website Resources/BANO STUDIOS/d03-site/index.html lines 12–257
   Loaded via $pageCSSFile = 'home-d03.css' by index-d03.php.
   Sits alongside the base tokens/chrome from assets/css/d03-theme.css.
   ================================================================ */

/* HOME specific */
.d03-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  border-bottom: 2px solid var(--d03-ink);
}
.d03-hero-left {
  padding: clamp(32px,5vw,72px) clamp(20px,5vw,56px);
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  min-height: clamp(520px, 82vh, 880px);
}
.d03-hero-meta {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  flex-wrap: wrap; gap: 8px;
}
.d03-hero-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; letter-spacing: -0.05em; line-height: 0.88;
  /* Max size tuned so long accent words (e.g. "Entertainment") fit on one line
     inside the 2fr hero-left column without mid-word breaks. */
  font-size: clamp(44px, 10vw, 128px);
  margin: 0;
}
@media (max-width: 600px) {
  .d03-hero-headline {
    font-size: clamp(40px, 11vw, 60px);
    overflow-wrap: break-word; /* mobile safety net only */
  }
}
.d03-hero-underline {
  text-decoration: underline;
  text-decoration-thickness: 8px;
  text-underline-offset: 14px;
  text-decoration-color: var(--d03-ink);
}
.d03-hero-foot {
  display: flex; justify-content: space-between;
  align-items: flex-end; flex-wrap: wrap; gap: 24px;
}
.d03-hero-right {
  background: var(--d03-red);
  color: #fff;
  padding: clamp(28px,4vw,48px);
  display: flex; flex-direction: column;
  justify-content: space-between; gap: 32px;
  border-left: 2px solid var(--d03-ink);
  min-height: clamp(400px, 60vh, 880px);
}
.d03-hero-slides { display: contents; }
.d03-slide-indicator {
  display: flex; gap: 8px;
}
.d03-slide-dot {
  width: 36px; height: 3px;
  background: #ffffff44;
  border: none; cursor: pointer;
  transition: background .15s;
  padding: 0;
}
.d03-slide-dot.active { background: #fff; }

/* WCAG AA contrast fix: white text on brand red #e63946 has 4.16:1 ratio
   (below 4.5 required for normal text). Bumping small text to 14px + 700
   weight qualifies as "Large Bold" which only requires 3:1 contrast. */
/* Use a slightly darker red (#cf2c39) for the hero panel ONLY, where small
   white text would otherwise fail WCAG AA contrast against the brighter
   brand red. Visually near-identical, contrast 4.86:1 vs 4.16:1. */
.d03-hero-right { background: #cf2c39; }

@media (max-width: 900px) {
  .d03-hero { grid-template-columns: 1fr; }
  .d03-hero-right { border-left: none; border-top: 2px solid var(--d03-ink); min-height: 440px; }
}
@media (max-width: 600px) {
  .d03-hero-left {
    min-height: auto;
    justify-content: flex-start;
    gap: 32px;
  }
}

/* Services strip (4 col) */
.d03-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 2px solid var(--d03-ink);
}
.d03-services-grid > div {
  padding: clamp(28px,3.5vw,48px);
  min-height: 360px;
  display: flex; flex-direction: column;
  justify-content: space-between; gap: 24px;
  border-right: 2px solid var(--d03-ink);
}
.d03-services-grid > div:last-child { border-right: none; }
/* Hover-invert only on devices that actually have hover (desktop). Touch screens skip it. */
@media (hover: hover) {
  .d03-services-grid > div:hover { background: var(--d03-ink); color: var(--d03-paper); }
  .d03-services-grid > div:hover .d03-red { color: var(--d03-red); }
}

@media (max-width: 900px) {
  .d03-services-grid { grid-template-columns: 1fr 1fr; }
  .d03-services-grid > div { border-right: none; border-bottom: 2px solid var(--d03-ink); }
  .d03-services-grid > div:nth-child(2n) { border-right: none; }
  .d03-services-grid > div:nth-child(odd) { border-right: 2px solid var(--d03-ink); }
}
@media (max-width: 600px) {
  .d03-services-grid { grid-template-columns: 1fr; }
  .d03-services-grid > div, .d03-services-grid > div:nth-child(odd) {
    border-right: none; border-bottom: 2px solid var(--d03-ink);
    min-height: auto;          /* drop the 360px so cards hug their content */
    justify-content: flex-start;
    gap: 16px;
  }
}

/* Films grid */
.d03-films4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.d03-films3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 900px) {
  .d03-films4 { grid-template-columns: 1fr 1fr; }
  .d03-films3 { grid-template-columns: 1fr; }
}
.d03-film-card { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.d03-film-img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border: 2px solid var(--d03-ink);
}
.d03-film-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transition: filter .8s ease, transform .7s ease;
}
/* Color-on-scroll-into-view (works on touch + desktop) */
.d03-film-card.is-visible .d03-film-img-wrap img,
.d03-film-img-wrap.is-visible img {
  filter: grayscale(0);
}
/* Desktop keeps the hover-zoom on top of the in-view color */
@media (hover: hover) {
  .d03-film-card:hover .d03-film-img-wrap img {
    transform: scale(1.04);
  }
}
.d03-film-meta {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-top: 12px; gap: 8px;
}
.d03-film-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.d03-film-genre { font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.6; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.1em; }

.d03-film-landscape {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 2px solid var(--d03-ink);
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
}
.d03-film-landscape img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transition: filter .8s ease, transform .7s ease;
}
.d03-film-landscape.is-visible img { filter: grayscale(0); }
@media (hover: hover) {
  .d03-film-landscape:hover img { transform: scale(1.03); }
}
.d03-film-landscape-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent 60%);
  color: var(--d03-paper);
}

/* Stats */
.d03-home-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 2px solid var(--d03-ink);
  background: var(--d03-ink); color: var(--d03-paper);
}
.d03-home-stats > div {
  padding: clamp(28px,3.5vw,48px);
  border-right: 1px solid #ffffff22;
}
.d03-home-stats > div:last-child { border-right: none; }
@media (max-width: 900px) {
  .d03-home-stats { grid-template-columns: 1fr 1fr; }
  .d03-home-stats > div { border-right: none; border-bottom: 1px solid #ffffff22; }
  .d03-home-stats > div:nth-child(odd) { border-right: 1px solid #ffffff22; }
}

/* Packages */
.d03-pkgs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 2px solid var(--d03-ink);
}
.d03-pkgs > div {
  padding: clamp(24px,2.5vw,32px);
  border-right: 2px solid var(--d03-ink);
  display: flex; flex-direction: column; gap: 18px;
}
.d03-pkgs > div:last-child { border-right: none; }
@media (max-width: 900px) {
  .d03-pkgs { grid-template-columns: 1fr 1fr; }
  .d03-pkgs > div { border-right: none; border-bottom: 2px solid var(--d03-ink); }
  .d03-pkgs > div:nth-child(odd) { border-right: 2px solid var(--d03-ink); }
  .d03-pkgs > div:nth-last-child(1), .d03-pkgs > div:nth-last-child(2) { border-bottom: none; }
}
@media (max-width: 600px) {
  .d03-pkgs { grid-template-columns: 1fr; }
  .d03-pkgs > div, .d03-pkgs > div:nth-child(odd) {
    border-right: none; border-bottom: 2px solid var(--d03-ink);
  }
  .d03-pkgs > div:last-child { border-bottom: none; }
}

/* Events — 3 columns (Bootcamp / Competition / Festival) */
.d03-events {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 2px solid var(--d03-ink);
}
.d03-events > div {
  padding: clamp(28px,4vw,60px);
  display: flex; flex-direction: column;
  justify-content: space-between; gap: 28px;
  min-height: 440px;
  border-right: 2px solid var(--d03-ink);
}
.d03-events > div:last-child { border-right: none; }
.d03-events > .red { background: var(--d03-red); color: #fff; }
.d03-events > .ink { background: var(--d03-ink); color: var(--d03-paper); }
@media (max-width: 900px) {
  .d03-events { grid-template-columns: 1fr; }
  .d03-events > div { border-right: none; border-bottom: 2px solid var(--d03-ink); }
  .d03-events > div:last-child { border-bottom: none; }
}

/* Testimonials */
.d03-tests {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 2px solid var(--d03-ink);
}
.d03-tests > div {
  padding: clamp(28px,3.5vw,48px);
  border-right: 2px solid var(--d03-ink);
  min-height: 340px;
  display: flex; flex-direction: column;
  justify-content: space-between; gap: 24px;
}
.d03-tests > div:last-child { border-right: none; }
@media (max-width: 900px) {
  .d03-tests { grid-template-columns: 1fr; }
  .d03-tests > div { border-right: none; border-bottom: 2px solid var(--d03-ink); }
  .d03-tests > div:last-child { border-bottom: none; }
}

/* Newsletter / CTA */
.d03-news-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: flex-end;
}
@media (max-width: 900px) {
  .d03-news-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Equipment list */
.d03-equip-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.d03-equip-list > div {
  display: flex; justify-content: space-between;
  border-bottom: 1px solid #0a0a0a22;
  padding-bottom: 8px;
}

/* ================================================================
   SCROLL-TRIGGERED ANIMATIONS
   Each [data-animate] element starts hidden + offset; gets .is-visible
   added by IntersectionObserver when it scrolls into view. Once-only.
   ================================================================ */

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1),
              transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
[data-animate="slide-left"]  { transform: translateX(-32px); }
[data-animate="slide-right"] { transform: translateX(32px); }

[data-animate].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Stagger delays */
[data-animate-delay="1"] { transition-delay: 80ms; }
[data-animate-delay="2"] { transition-delay: 160ms; }
[data-animate-delay="3"] { transition-delay: 240ms; }
[data-animate-delay="4"] { transition-delay: 320ms; }
[data-animate-delay="5"] { transition-delay: 400ms; }
[data-animate-delay="6"] { transition-delay: 480ms; }
[data-animate-delay="7"] { transition-delay: 560ms; }
[data-animate-delay="8"] { transition-delay: 640ms; }

/* Tabular numerals on stat counters so digits don't shift width while animating */
[data-counter] { font-variant-numeric: tabular-nums; }

/* Equipment-list row stagger uses a smaller step */
.d03-equip-list > div[data-animate] {
  transition: opacity .5s cubic-bezier(.2,.8,.2,1),
              transform .5s cubic-bezier(.2,.8,.2,1);
}
.d03-equip-list > div[data-animate-delay="1"]  { transition-delay: 40ms; }
.d03-equip-list > div[data-animate-delay="2"]  { transition-delay: 80ms; }
.d03-equip-list > div[data-animate-delay="3"]  { transition-delay: 120ms; }
.d03-equip-list > div[data-animate-delay="4"]  { transition-delay: 160ms; }
.d03-equip-list > div[data-animate-delay="5"]  { transition-delay: 200ms; }
.d03-equip-list > div[data-animate-delay="6"]  { transition-delay: 240ms; }
.d03-equip-list > div[data-animate-delay="7"]  { transition-delay: 280ms; }
.d03-equip-list > div[data-animate-delay="8"]  { transition-delay: 320ms; }
.d03-equip-list > div[data-animate-delay="9"]  { transition-delay: 360ms; }
.d03-equip-list > div[data-animate-delay="10"] { transition-delay: 400ms; }
.d03-equip-list > div[data-animate-delay="11"] { transition-delay: 440ms; }
.d03-equip-list > div[data-animate-delay="12"] { transition-delay: 480ms; }

/* ================================================================
   REDUCED-MOTION FALLBACK
   Users who set prefers-reduced-motion at the OS level get NO animations.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate].is-visible,
  [data-animate="slide-left"],
  [data-animate="slide-right"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .d03-film-img-wrap img,
  .d03-film-landscape img {
    filter: grayscale(0);
    transition: none;
  }
  .d03-marquee {
    animation: none;
  }
}