/* ==========================================================================
   BRANDHAUS GROUP — Responsive
   Desktop-first refinements down to mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large laptops
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .bento {
    grid-auto-rows: clamp(170px, 26vw, 260px);
  }
}

/* --------------------------------------------------------------------------
   Tablets landscape
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .divisions {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
  }

  .division-card {
    min-height: 420px;
  }

  .grid-3,
  .grid-4,
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .masonry {
    columns: 2;
  }

  .row-nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Tablets portrait / large phones — mobile nav drawer
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 210;
    flex-direction: column;
    justify-content: center;
    gap: 2.2rem;
    background: rgba(5, 5, 5, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease-out), visibility 0.5s;
  }

  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
  }

  .nav-links a:not(.btn) {
    font-size: 1.35rem;
    letter-spacing: 0.24em;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.35s;
  }

  .nav-links.is-open a:not(.btn) {
    opacity: 1;
    transform: none;
  }

  .nav-links.is-open a:nth-child(1) { transition-delay: 0.1s; }
  .nav-links.is-open a:nth-child(2) { transition-delay: 0.16s; }
  .nav-links.is-open a:nth-child(3) { transition-delay: 0.22s; }
  .nav-links.is-open a:nth-child(4) { transition-delay: 0.28s; }
  .nav-links.is-open a:nth-child(5) { transition-delay: 0.34s; }
  .nav-links.is-open a:nth-child(6) { transition-delay: 0.4s; }

  .nav-links .btn {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease-out) 0.46s, transform 0.5s var(--ease-out) 0.46s, color 0.45s, border-color 0.45s;
  }

  .nav-links.is-open .btn {
    opacity: 1;
    transform: none;
  }

  body.nav-locked {
    overflow: hidden;
  }

  .grid-2,
  .case {
    grid-template-columns: 1fr;
  }

  .group-facts {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .group-facts li + li {
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding-top: 2rem;
  }

  .case--flip .case-media {
    order: 0;
  }

  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(160px, 30vw, 240px);
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.6rem;
  }

  .stat + .stat::before {
    display: none;
  }

  .hero-meta {
    display: none;
  }

  .billboard {
    min-height: 480px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  :root {
    --nav-h: 72px;
  }

  .nav-brand img {
    width: 40px;
    height: 40px;
  }

  .nav-brand-word {
    font-size: 0.9rem;
  }

  .hero h1 {
    font-size: clamp(2.5rem, 11vw, 3.4rem);
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .scroll-cue {
    display: none;
  }

  .grid-3,
  .grid-4,
  .values-grid {
    grid-template-columns: 1fr;
  }

  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .bento-item--w2 {
    grid-column: span 1;
  }

  .bento-item--h2 {
    grid-row: span 2;
  }

  .masonry {
    columns: 1;
  }

  .poster-card {
    height: clamp(300px, 96vw, 400px);
  }

  .carousel-slide {
    aspect-ratio: 4 / 4.6;
  }

  #process-reel,
  .carousel--compact {
    max-width: 100%;
  }

  .footer-core {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-word {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }

  .footer-nav {
    column-gap: 1.5rem;
    row-gap: 0.9rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .cine-band {
    min-height: 70vh;
  }

  .billboard-body {
    max-width: 100%;
  }

  .lightbox-caption {
    bottom: -2.2rem;
    font-size: 0.8rem;
  }
}

/* --------------------------------------------------------------------------
   Small phones
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .stats {
    grid-template-columns: 1fr;
  }

  .poster-card {
    height: 300px;
  }
}

/* --------------------------------------------------------------------------
   Tall / short viewports
   -------------------------------------------------------------------------- */
@media (max-height: 560px) {
  .hero {
    min-height: 120svh;
  }
}