/* Responsive layer of the approved design (desktop first, max-width queries). */
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* below 1440: burger navigation, slider controls */
@media (max-width: 1439px) {
  .site-nav, .header-divider { display: none; }
  .burger { display: flex; }
  .slider-controls { display: flex; }
  .section-head .btn-slider-hidden { display: none; }
}

/* below 1040: stacked footer, 2-up article row */
@media (max-width: 1039px) {
  .article-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-grid {
    grid-template-columns: 1fr;
    background-image: none;
  }
  .footer-left {
    border-bottom: 1px solid var(--cream-22);
    padding-bottom: clamp(28px, 3.4vw, 44px);
  }
  .footer-nav { column-gap: clamp(56px, 9vw, 96px); }
  .footer-col {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 3vw, 38px);
    padding-left: 0;
  }
  .footer-social {
    justify-self: start;
    width: 100%;
    border-top: 1px solid var(--cream-22);
    padding-top: clamp(24px, 3vw, 36px);
  }
  .footer-social-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(16px, 2.4vw, 28px);
  }
}

/* below 1200: media kit masonry drops a column */
@media (max-width: 1199px) {
  .media-masonry { columns: 2; }
}

/* below 980: contact page stacks */
@media (max-width: 979px) {
  .contact-cols {
    grid-template-columns: minmax(0, 1fr);
    column-gap: clamp(30px, 4vw, 84px);
  }
  .contact-form { border-left: none; padding-left: 0; }
}

/* below 900: hero stacks, portrait becomes background */
@media (max-width: 899px) {
  .hero-media {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  .hero-img { width: 100%; margin-left: 0; }
  .hero-text {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-height: calc(100svh - var(--header-h));
    justify-content: flex-start;
    padding-top: clamp(28px, 6vh, 64px);
    padding-bottom: 30px;
    background:
      linear-gradient(180deg, rgba(233, 226, 212, 0.92) 0%, rgba(233, 226, 212, 0.74) 26%,
        rgba(233, 226, 212, 0.4) 46%, rgba(233, 226, 212, 0.12) 64%, rgba(233, 226, 212, 0) 78%),
      linear-gradient(95deg, rgba(233, 226, 212, 0.62) 0%, rgba(233, 226, 212, 0.12) 28%,
        rgba(233, 226, 212, 0) 44%);
  }
  .hero-title { max-width: min(100%, 26ch); }
  .hero-lede { max-width: min(100%, 44ch); }
  .hero-card { margin-top: auto; }
}

/* below 700: hero card moves below the hero (see js/main.js heroCard) */
@media (max-width: 699px) {
  .hero-img { width: 60%; height: 60%; }
  .hero-text {
    padding-top: clamp(0px, 1vh, 14px);
    padding-bottom: 0;
  }
  .hero-card-slot .hero-card {
    margin-top: clamp(28px, 7vw, 44px);
    max-width: none;
  }
}

/* below 1100: articles listing drops to 2 columns */
@media (max-width: 1099px) {
  .article-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* below 700: filter chips become a horizontal scroller, bleeding the gutter */
@media (max-width: 699px) {
  .filter-wrap { margin: 0 calc(-1 * var(--gutter)); }
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 var(--gutter) 2px;
    touch-action: pan-x pan-y;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .breadcrumb-collapse { display: none; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .media-masonry { columns: 1; }
}

/* below 620: single-column footer, tighter card grid */
@media (max-width: 619px) {
  .article-grid-row { gap: clamp(14px, 4vw, 22px); }
  .article-list-grid { gap: clamp(18px, 4vw, 26px) clamp(14px, 4vw, 22px); }

  .footer-grid { text-align: center; justify-items: center; }
  .footer-left { align-items: center; width: 100%; }
  .footer-nav {
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    justify-items: center;
  }
  .footer-col { justify-items: center; text-align: center; }
  .footer-contact-inner { align-items: center; }
  .footer-form { align-items: center; }
  .footer-social { justify-self: center; }
  .footer-social-nav { justify-content: center; }
  .footer-credits { justify-content: center; text-align: center; }
  .footer-credits-copy,
  .footer-credits-made,
  .footer-legal { flex: 1 1 100%; text-align: center; }
}

/* 620–1039: footer contact splits into two columns */
@media (min-width: 620px) and (max-width: 1039px) {
  .footer-contact-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 56px);
    align-items: start;
  }
  .footer-form {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

/* bio hero stacks below 900 (the portrait keeps its 4:5 ratio) */
@media (max-width: 899px) {
  .bio-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: clamp(20px, 2.4vw, 40px);
  }
  .bio-hero-lede { max-width: 46ch; }
  .bio-hero-portrait { justify-self: stretch; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* WordPress admin bar is 46px tall below 783px */
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
}