/* ==========================================================================
   [TAG: RESPONSIVE]
   ========================================================================== */

/* -----------------------------------------------------------
   [TAG: TABLET - max-width 1024px]
   ----------------------------------------------------------- */
@media (max-width: 1024px) {

  :root {
    --page-margin: 40px;
    --grid-columns: 12;
    --grid-gap: 20px;
    --section-pt: 100px;
    --section-pb: 100px;
  }

  .col-4  { grid-column: 1 / span 8; }
  .col-6  { grid-column: 1 / span 10; }
  .col-8,
  .col-12 { grid-column: 1 / span 12; }

  #capabilities { row-gap: var(--space-m); }
  #capabilities .col-6-right { grid-column: 1 / span 12; }

  .footer-identity-block { grid-column: 1 / span 3; }
  .footer-hours-block { grid-column: 4 / span 3; }
  .footer-contact-block { grid-column: 7 / span 3; }
  .footer-location-block { grid-column: 10 / span 3; }
  .footer-hours-block,
  .footer-contact-block,
  .footer-location-block { margin-top: var(--space-m); }

  #work-header .work-filters {
    grid-column: 1 / span 12;
    margin-top: var(--space-s);
  }

  #projects-grid .project-card {
    grid-column: 1 / span 12 !important;
    grid-row: span 1 !important;
  }

  .case-title { grid-column: 1 / span 12; margin-bottom: var(--space-m); }
  .case-meta-item:nth-child(2) { grid-column: 1 / span 4; }
  .case-meta-item:nth-child(3) { grid-column: 5 / span 4; }
  .case-meta-item:nth-child(4) { grid-column: 9 / span 4; }
  .case-text-label { grid-column: 1 / span 12; }
  .case-text-body { grid-column: 1 / span 12; }

  /* About */
  #about-intro .display-h1,
  #about-intro .body-text { grid-column: 1 / span 12; }

  #team { row-gap: var(--space-s); }
  .team-label { grid-column: 1 / span 12; margin-bottom: 0; }
  .team-intro { grid-column: 1 / span 12; }
  .team-grid { grid-column: 1 / span 12; grid-template-columns: repeat(2, 1fr); }

  #press { row-gap: var(--space-s); }
  .press-label { grid-column: 1 / span 12; margin-bottom: 0; }
  .press-list { grid-column: 1 / span 12; }

  /* Contact */
  #contact-hero .display-h1 { grid-column: 1 / span 12; }
  #contact-info { row-gap: var(--space-s); }
  .contact-info-label { grid-column: 1 / span 12; margin-top: 0; }
  .contact-info-details { grid-column: 1 / span 12; margin-top: 0; }
  #visit { row-gap: var(--space-s); }
  .visit-label { grid-column: 1 / span 12; margin-bottom: 0; }
  .visit-details { grid-column: 1 / span 12; }

  /* Production */
  .production-spec-label,
  .production-spec-value { font-size: var(--fs-label); }

  #production-note { row-gap: var(--space-s); }
  .production-note-label { grid-column: 1 / span 12; margin-bottom: 0; }
  .production-note-text { grid-column: 1 / span 12; }
}

/* -----------------------------------------------------------
   [TAG: MOBILE - max-width 768px]
   ----------------------------------------------------------- */
@media (max-width: 768px) {

  :root {
    --page-margin: 30px;
    --grid-columns: 12;
    --grid-gap: 16px;
    --section-pt: calc(var(--nav-height) - var(--space-s) + var(--space-xs));
    --section-pb: var(--space-l);
  }

  .col-4,
  .col-6  { grid-column: 1 / span 10; }
  .col-8,
  .col-12 { grid-column: 1 / span 12; }

  .logo-grid {
    grid-template-columns: repeat(4, 1fr);
    row-gap: var(--space-s);
    column-gap: var(--space-xs);
  }
  .logo-item { height: 60px; padding: 5px; }

  .mission-media-wrapper { height: 37.5vh; }

  #footer { row-gap: var(--space-s); }
  .footer-identity-block { grid-column: 1 / span 12; margin-top: 0; }
  .footer-hours-block { grid-column: 1 / span 9; margin-top: var(--space-m); }
  .footer-contact-block,
  .footer-location-block { grid-column: 1 / span 9; margin-top: 0; }

  #work-header .work-filters {
    grid-column: 1 / span 12;
    margin-top: var(--space-s);
  }

  .filter-row {
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
    gap: 0;
  }

  .filter-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-current);
    padding: var(--space-s) 0;
    pointer-events: auto;
    white-space: normal;
  }

  .filter-label::after {
    content: '+';
    font-size: var(--fs-icon);
    font-weight: var(--fw-light);
    transition: transform var(--time-base) var(--ease-smooth);
    flex-shrink: 0;
  }

  .filter-row.is-open .filter-label::after { transform: rotate(45deg); }

  .filter-options {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--time-slow) var(--ease-smooth);
    justify-content: flex-start;
    padding-bottom: 0;
  }

  .filter-row.is-open .filter-options { padding-bottom: var(--space-s); }

  .capabilities-list {
    max-height: 420px;
    overflow-y: scroll;
    -webkit-mask-image: linear-gradient(to bottom, var(--off-black) 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--off-black) 60%, transparent 100%);
  }

  #projects-grid {
    grid-auto-rows: auto;
  }

  #projects-grid .project-card {
    grid-column: 1 / span 12 !important;
    grid-row: span 1 !important;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .card-media { height: 100%; }

  #case-hero { height: 70vh; }
  .case-title { font-size: clamp(24px, 6vw, 40px); }
  .case-meta-item:nth-child(2) { grid-column: 1 / span 12; }
  .case-meta-item:nth-child(3) { grid-column: 1 / span 12; }
  .case-meta-item:nth-child(4) { grid-column: 1 / span 12; }
  #case-info { row-gap: var(--space-s); padding-bottom: var(--space-s); }
  #case-blocks { padding-top: var(--space-s); }

  .block-single { height: 56.25vw; }
  .block-double { height: 56.25vw; }

  #next-project { height: 70vh; }
  .next-project-content { flex-direction: column; align-items: flex-start; gap: var(--space-s); }

  /* About */
  #team { row-gap: var(--space-s); }
  #press { row-gap: var(--space-s); }
  .marquee-item { font-size: var(--fs-label); padding: 0 var(--space-s); }
  .team-grid { grid-template-columns: 1fr; }
  .team-card-description { font-size: var(--fs-body); }
  .team-card.is-active .team-card-overlay { transform: translateY(0); }

  .press-item {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: var(--space-s) 0;
  }
  .press-year { text-align: left; }

  /* Contact */
  #contact-info { row-gap: var(--space-s); }
  #visit { row-gap: var(--space-s); }
  .visit-gallery-track { height: 240px; }
  .visit-gallery-item--landscape { height: 200px; }
  .visit-gallery-item--portrait { height: 240px; }
  .visit-gallery-item--square { height: 210px; }

  /* Production */
  .production-grid { column-count: 2; }

  #production-note { row-gap: var(--space-s); }

  .production-item-panel-inner {
    padding: var(--space-xs);
    gap: 4px;
  }

  .production-spec-label,
  .production-spec-value { font-size: var(--fs-micro); }

  .production-spec-row { padding-top: 4px; }
}

/* Note: .production-item.is-active .production-item-mask is defined
   globally in style.css (not hover-gated), so tap-to-toggle works
   correctly on mobile without additional media query overrides. */