/* Kaligraf Design — Responsive Breakpoints
   Mobile-first approach. Breakpoints override layout.css defaults.
   Depends on: design-system.css, layout.css
   Source: spec/phase-2/00-design-foundation.md §2

   Breakpoints:
     Mobile:    < 768px
     Tablet:    768px – 1024px
     Desktop:   1025px – 1439px
     Wide:      1440px+
*/

/* ══════════════════════════════════════════════════════════
   TABLET  (768px – 1024px)
   8-column grid, 20px gutter, 32px outer margin
   ══════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {

  .container {
    padding-left: var(--grid-outer-margin-tablet);
    padding-right: var(--grid-outer-margin-tablet);
  }

  .grid {
    grid-template-columns: repeat(8, 1fr);
    gap: var(--grid-gutter-tablet);
  }

  /* Tablet column span classes */
  .col-tablet-1  { grid-column: span 1; }
  .col-tablet-2  { grid-column: span 2; }
  .col-tablet-3  { grid-column: span 3; }
  .col-tablet-4  { grid-column: span 4; }
  .col-tablet-5  { grid-column: span 5; }
  .col-tablet-6  { grid-column: span 6; }
  .col-tablet-7  { grid-column: span 7; }
  .col-tablet-8  { grid-column: span 8; }  /* full-width */

  /* Default: most columns go full-width on tablet unless overridden */
  .col-1, .col-2, .col-3, .col-4  { grid-column: span 4; }
  .col-5, .col-6, .col-7, .col-8  { grid-column: span 8; }
  .col-9, .col-10, .col-11, .col-12 { grid-column: span 8; }

  /* Section padding — tablet uses mobile values */
  .section-sm {
    padding-top: var(--section-pad-sm-mobile);
    padding-bottom: var(--section-pad-sm-mobile);
  }
  .section-md {
    padding-top: var(--section-pad-md-mobile);
    padding-bottom: var(--section-pad-md-mobile);
  }
  .section-lg {
    padding-top: var(--section-pad-lg-mobile);
    padding-bottom: var(--section-pad-lg-mobile);
  }

  /* Component gap — tablet */
  .gap-sm { gap: var(--component-gap-sm-mobile); }
  .gap-md { gap: var(--component-gap-md-mobile); }
  .gap-lg { gap: var(--component-gap-lg-mobile); }

  /* Margin — component gap */
  .mt-gap-sm  { margin-top: var(--component-gap-sm-mobile); }
  .mt-gap-md  { margin-top: var(--component-gap-md-mobile); }
  .mt-gap-lg  { margin-top: var(--component-gap-lg-mobile); }
  .mb-gap-sm  { margin-bottom: var(--component-gap-sm-mobile); }
  .mb-gap-md  { margin-bottom: var(--component-gap-md-mobile); }
  .mb-gap-lg  { margin-bottom: var(--component-gap-lg-mobile); }

  /* 21:9 cinematic → 4:3 editorial on tablet */
  .ar-cinematic { aspect-ratio: 4 / 3; }

  /* 9:16 vertical container — expands on tablet */
  .ar-vertical,
  .letterbox-vertical { max-width: min(90vw, 400px); }

  /* Nav — tablet */
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }

  /* Nav inner padding — overrides components.css max-width:1024px rule (uses mobile 20px) */
  .nav__inner {
    padding-left: var(--grid-outer-margin-tablet) !important;
    padding-right: var(--grid-outer-margin-tablet) !important;
  }

  /* Hero content — tablet outer margin */
  .hero__content {
    padding: 0 var(--grid-outer-margin-tablet) var(--component-gap-md-mobile);
  }

  /* Visibility utilities */
  .desktop-only { display: none !important; }
  .mobile-only  { display: none !important; }

  /* Centered copy columns: grid-column: 3/11, 3/10, 2/12 become full-width at tablet.
     !important overrides the inline style attribute.
     Class-based selectors (.studio-statement) guard against JS style re-serialization
     breaking the [style*=] substring match. */
  .grid > [style*="grid-column: 3 / 11"],
  .grid > [style*="grid-column: 3 / 10"],
  .grid > [style*="grid-column: 2 / 12"],
  .grid > .studio-statement {
    grid-column: 1 / -1 !important;
  }

  /* Footer padding */
  .footer {
    padding-top: var(--section-pad-sm-mobile);
    padding-bottom: var(--section-pad-sm-mobile);
  }

  .footer__inner {
    padding-left: var(--grid-outer-margin-tablet);
    padding-right: var(--grid-outer-margin-tablet);
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE  (< 768px)
   4-column grid, 16px gutter, 20px outer margin
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .container {
    padding-left: var(--grid-outer-margin-mobile);
    padding-right: var(--grid-outer-margin-mobile);
    max-width: 100%;
  }

  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gutter-mobile);
  }

  /* All col-* classes collapse to full 4 columns on mobile */
  .col-1, .col-2, .col-3, .col-4,
  .col-5, .col-6, .col-7, .col-8,
  .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 4;
  }

  /* Inline grid-column spans (centered copy columns) also go full-width on mobile.
     Without this, e.g. the studio statement's `grid-column: 3 / 10` stays a narrow,
     right-offset column on the 4-col grid and wraps one word per line.
     Class-based selectors (.studio-statement) guard against JS style re-serialization
     breaking the [style*=] substring match. */
  .grid > [style*="grid-column: 3 / 11"],
  .grid > [style*="grid-column: 3 / 10"],
  .grid > [style*="grid-column: 2 / 12"],
  .grid > .studio-statement {
    grid-column: 1 / -1 !important;
  }

  /* Mobile column overrides for 2-up layouts */
  .col-mobile-2 { grid-column: span 2; }

  /* Section padding — mobile */
  .section-sm {
    padding-top: var(--section-pad-sm-mobile);
    padding-bottom: var(--section-pad-sm-mobile);
  }
  .section-md {
    padding-top: var(--section-pad-md-mobile);
    padding-bottom: var(--section-pad-md-mobile);
  }
  .section-lg {
    padding-top: var(--section-pad-lg-mobile);
    padding-bottom: var(--section-pad-lg-mobile);
  }

  /* Component gap — mobile */
  .gap-sm { gap: var(--component-gap-sm-mobile); }
  .gap-md { gap: var(--component-gap-md-mobile); }
  .gap-lg { gap: var(--component-gap-lg-mobile); }

  /* Margin — component gap */
  .mt-gap-sm  { margin-top: var(--component-gap-sm-mobile); }
  .mt-gap-md  { margin-top: var(--component-gap-md-mobile); }
  .mt-gap-lg  { margin-top: var(--component-gap-lg-mobile); }
  .mb-gap-sm  { margin-bottom: var(--component-gap-sm-mobile); }
  .mb-gap-md  { margin-bottom: var(--component-gap-md-mobile); }
  .mb-gap-lg  { margin-bottom: var(--component-gap-lg-mobile); }

  /* 21:9 → 4:3 on mobile */
  .ar-cinematic { aspect-ratio: 4 / 3; }

  /* 9:16 vertical — expands on mobile */
  .ar-vertical,
  .letterbox-vertical { max-width: min(90vw, 400px); }

  /* Nav — mobile */
  .nav { height: var(--nav-height-mobile); }
  .nav__inner {
    padding-left: var(--grid-outer-margin-mobile);
    padding-right: var(--grid-outer-margin-mobile);
  }
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }

  /* No parallax on mobile — background-attachment: fixed is also forbidden */
  * { background-attachment: scroll !important; }

  /* Bleed on mobile: still 100vw but account for smaller outer margin */
  .bleed {
    margin-left: calc(-1 * var(--grid-outer-margin-mobile));
    margin-right: calc(-1 * var(--grid-outer-margin-mobile));
    width: 100vw;
  }

  /* Pull quote — reduced indent on mobile */
  .pull-quote {
    padding-left: var(--component-gap-sm-mobile);
  }

  /* Footer */
  .footer {
    padding-top: var(--section-pad-sm-mobile);
    padding-bottom: var(--section-pad-sm-mobile);
  }

  .footer__inner {
    padding-left: var(--grid-outer-margin-mobile);
    padding-right: var(--grid-outer-margin-mobile);
  }

  .footer__legal {
    flex-direction: column;
    gap: var(--component-gap-sm-mobile);
  }

  /* Buttons — maintain min-width on mobile (PL CTAs may run long) */
  .btn {
    min-width: 0;
    width: 100%;
    justify-content: center;
  }

  /* Hero — mobile text spacing */
  .hero__content {
    padding: 0 var(--grid-outer-margin-mobile) var(--component-gap-md-mobile);
  }

  /* Inline video — full width on mobile */
  .video-inline {
    max-width: 100%;
  }

  /* Hide desktop-only elements */
  .desktop-only { display: none !important; }

  /* Custom grids — single column on mobile */
  .section-work__grid,
  .tile-grid,
  .section-disciplines__grid {
    grid-template-columns: 1fr;
  }

  .work-tile--primary,
  .work-tile--secondary,
  .work-tile--tertiary,
  .work-tile--hero,
  .work-tile--sm,
  .work-tile--mid,
  .discipline-card--large,
  .discipline-card--small {
    grid-column: 1 / -1;
  }
}

/* ══════════════════════════════════════════════════════════
   DESKTOP (1025px+) — explicit overrides if needed
   ══════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
  /* Mobile-only elements hidden on desktop */
  .mobile-only { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   WIDE (1440px+)
   Max-content-width (1280px) is now active. The max() formula
   in layout.css / components.css handles outer margins at all
   viewport widths — no padding override needed here.
   Outer margin at 1440px = 80px; at 1600px = 160px; etc.
   ══════════════════════════════════════════════════════════ */

@media (min-width: 1440px) {

  /* Visibility utilities */
  .wide-only        { display: block !important; }
  .wide-only-flex   { display: flex  !important; }
  .hide-wide        { display: none  !important; }

  /* Trust band: allow wider spacing between wordmarks at wide */
  .trust-band__logos {
    gap: var(--component-gap-lg);
  }

}