/* ==========================================================================
   Drink Stop — Brand Page
   Responsive Breakpoints
   ========================================================================== */

/*
   Breakpoint ranges:
   1200px+  — Full desktop (16-column grid)
   900–1199 — Tablet landscape (12-column grid, smaller nav)
   768–899  — Tablet portrait (keep desktop bg, 4 cols)
   767↓     — Mobile (mobile bg, 3-col grid, slide-in nav)
   430↓     — Small mobile
   350↓     — Tiny mobile (2-col grid)
*/


/* ==========================================================================
   BREAKPOINT 1: 1199px and below — tablet landscape / small desktop
   ========================================================================== */

@media (max-width: 1199px) {

  /* ── Header ──────────────────────────────────────────────────────── */

  .site-header {
    grid-template-columns: 130px minmax(0, 1fr) auto;
    gap: 24px;
    padding-left: 28px;
    padding-right: 28px;
  }

  .desktop-navigation {
    gap: 28px;
  }

  .header-order-button {
    min-width: 185px;
    padding: 0 22px;
    font-size: 16px;
  }

  /* ── Hero ────────────────────────────────────────────────────────── */

  .brand-hero-content {
    width: min(560px, 48vw);
  }

  .brand-hero h1 {
    font-size: clamp(66px, 7vw, 96px);
  }

  /* ── Drinks — scale down on smaller screens */

  .hero-drinks {
    width: 320px;
    height: 340px;
  }

  .drink-hero {
    width: 130px;
  }

  .drink-left,
  .drink-right {
    width: 105px;
  }

  /* ── Logo grid — 12 columns (6 cards per row) ──────────────────── */

  .partner-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .partner-card {
    grid-column: span 2;
  }

  .partner-card:last-child {
    grid-column: 6 / span 2;
  }
}


/* ==========================================================================
   BREAKPOINT 2: 899px and below — tablet portrait
   ========================================================================== */

@media (max-width: 899px) {

  .site-header {
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 16px;
  }

  .desktop-navigation {
    gap: 18px;
  }

  .desktop-navigation a {
    font-size: 14px;
  }

  .header-order-button {
    min-width: 160px;
    padding: 0 18px;
    font-size: 14px;
    min-height: 50px;
  }

  .order-arrow {
    font-size: 19px;
  }

  /* ── Hero ────────────────────────────────────────────────────────── */

  .brand-hero-content {
    width: min(500px, 52vw);
  }

  .brand-hero h1 {
    font-size: clamp(58px, 7.5vw, 82px);
  }

  .headline-underline {
    height: 14px;
    border-top-width: 5px;
  }

  .brand-introduction {
    font-size: 18px;
  }

  /* ── Drinks — smaller still on tablet */

  .hero-drinks {
    width: 260px;
    height: 280px;
  }

  .drink-hero {
    width: 110px;
  }

  .drink-left,
  .drink-right {
    width: 90px;
  }

  .drink-left {
    transform: translateX(0) rotate(-6deg) translateY(15px);
  }

  .drink-right {
    transform: translateX(0) rotate(5deg) translateY(25px);
  }

  /* ── Logo grid — 8 columns (4 cards per row) ───────────────────── */

  .partner-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .partner-card {
    grid-column: span 2;
  }

  .partner-card:last-child {
    grid-column: 4 / span 2;
  }
}


/* ==========================================================================
   BREAKPOINT 3: 767px and below — MOBILE
   ========================================================================== */

@media (max-width: 767px) {

  /* ── Background switch to mobile artwork ────────────────────────── */

  .brand-page-main {
    min-height: calc(100vh - var(--header-height-mobile));

    background-image: url("../assets/backgrounds/brand-page-mobile.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }

  /* ── Mobile header ──────────────────────────────────────────────── */

  .site-header {
    min-height: var(--header-height-mobile);
    padding: 13px 18px;

    display: grid;
    grid-template-columns: 48px 1fr auto auto;
    gap: 12px;
    align-items: center;
  }

  .desktop-navigation {
    display: none;
  }

  .mobile-menu-button {
    width: 48px;
    height: 48px;
    padding: 8px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;

    cursor: pointer;
  }

  .mobile-menu-button span {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--black);
    display: block;
  }

  .site-logo {
    width: 106px;
    justify-self: center;
  }

  .header-order-button {
    min-width: 0;
    min-height: 54px;
    padding: 0 19px;
    gap: 9px;
    font-size: 15px;
  }

  .order-arrow {
    font-size: 18px;
  }

  /* ── Mobile hero ────────────────────────────────────────────────── */

  .brand-hero {
    width: 100%;
    min-height: auto;

    padding: 70px 30px 10px;
  }

  .brand-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
  }

  .brand-hero-content {
    width: min(100%, 520px);
    margin-top: 25px;
  }

  .eyebrow-label {
    margin-bottom: 28px;
    padding: 10px 24px;
    font-size: 19px;
  }

  .brand-hero h1 {
    max-width: 470px;
    font-size: clamp(42px, 10vw, 64px);
    line-height: 0.92;
  }

  .headline-underline {
    width: 92%;
    max-width: 430px;
    margin: 18px 0 22px;
    border-top-width: 5px;
  }

  .brand-introduction {
    display: none;
  }

  .hero-drinks {
    display: none;
  }

  .drink-hero {
    width: 100px;
  }

  .drink-left,
  .drink-right {
    width: 80px;
  }

  /* ── Partner section ────────────────────────────────────────────── */

  .partner-section {
    width: 100%;
    padding: 20px 18px 60px;
  }

  .partner-section-heading {
    margin: 0 auto 24px;
    padding: 10px 23px;
    font-size: 19px;
    text-align: center;
  }

  .partner-marquee-mobile {
    gap: 8px;

    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black 28px,
      black calc(100% - 28px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black 28px,
      black calc(100% - 28px),
      transparent 100%
    );
  }

  /* Mobile slide-in navigation now lives in css/mobile-menu.css (.ds-menu),
     shared across every page. */
}


/* ==========================================================================
   BREAKPOINT 4: 430px and below — small mobile
   ========================================================================== */

@media (max-width: 430px) {

  .brand-hero {
    min-height: auto;
    padding: 50px 20px 10px;
  }

  .brand-hero h1 {
    font-size: clamp(54px, 15.5vw, 75px);
  }

  .brand-introduction {
    width: 76%;
    font-size: 17px;
  }

  /* ── Smaller drinks */

  .hero-drinks {
    width: 200px;
    height: 140px;
  }

  .drink-hero {
    width: 80px;
  }

  .drink-left,
  .drink-right {
    width: 65px;
  }

  .drink-left {
    transform: translateX(0) rotate(-6deg) translateY(10px);
  }

  .drink-right {
    transform: translateX(0) rotate(5deg) translateY(15px);
  }

  .partner-section {
    padding-left: 10px;
    padding-right: 10px;
  }

  .marquee-row .partner-card {
    width: 90px;
    height: 60px;
    padding: 6px;
  }
}


/* ==========================================================================
   BREAKPOINT 5: 370px and below — tiny mobile
   ========================================================================== */

@media (max-width: 370px) {

  .header-order-button .order-arrow {
    display: none;
  }

  .header-order-button {
    padding: 0 17px;
  }

  .marquee-row .partner-card {
    width: 80px;
    height: 55px;
    padding: 4px;
  }
}


/* ==========================================================================
   BREAKPOINT 6: 350px and below — absolute minimum
   ========================================================================== */

@media (max-width: 350px) {

  .marquee-row .partner-card {
    width: 70px;
    height: 50px;
    padding: 4px;
  }

  .brand-hero {
    min-height: auto;
    padding: 40px 14px 10px;
  }

  .eyebrow-label {
    font-size: 16px;
    padding: 8px 18px;
  }

  .brand-hero h1 {
    font-size: clamp(44px, 14vw, 60px);
  }

  .brand-introduction {
    width: 90%;
    font-size: 15px;
  }

  /* ── Minimum-size drinks */

  .hero-drinks {
    width: 150px;
    height: 110px;
  }

  .drink-hero {
    width: 60px;
  }

  .drink-left,
  .drink-right {
    width: 50px;
  }

  .drink-left {
    transform: translateX(0) rotate(-5deg) translateY(8px);
  }

  .drink-right {
    transform: translateX(0) rotate(4deg) translateY(12px);
  }
}