/* ============================================================
   MOBILE.CSS — phone & tablet overrides only
   Activates ≤1024px (tablet) and ≤768px (phone).
   Desktop ≥1025px is untouched.
   ============================================================ */

/* TABLET (≤1024px) */
@media (max-width: 1024px) {

  /* Article layout: drop sidebar below content */
  .article-layout {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    padding: 56px 32px !important;
  }
  .article-sidebar {
    position: static !important;
    top: auto !important;
  }

  /* Featured card: stack image over content */
  .featured-card {
    grid-template-columns: 1fr !important;
  }
  .featured-image {
    min-height: 280px !important;
  }

  /* Footer: 2-col grid */
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }

  /* Contract series 4-up → 2-up */
  section.grid-section > .grid-inner > div[style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Article hero a bit shorter */
  .article-hero {
    height: 460px !important;
  }
}

/* PHONE (≤768px) */
@media (max-width: 768px) {

  html { font-size: 15px; }

  /* ---------- NAV ---------- */
  nav {
    height: 60px !important;
    padding: 0 18px !important;
  }
  .nav-logo {
    font-size: 1.05rem !important;
    gap: 8px !important;
  }
  .nav-headshot,
  nav img[alt="Tess McCoy"] {
    width: 30px !important;
    height: 30px !important;
  }
  /* Hide horizontal nav links on phone — keep CTA */
  .nav-links {
    display: none !important;
  }
  .nav-cta {
    font-size: 0.7rem !important;
    padding: 7px 14px !important;
    letter-spacing: 0.05em !important;
  }

  /* ---------- HEROES & PAGE HEADERS ---------- */
  .article-hero {
    height: auto !important;
    min-height: 380px !important;
  }
  .article-hero h1 {
    font-size: 2rem !important;
    line-height: 1.18 !important;
    max-width: 100% !important;
  }
  .hero-content {
    padding: 36px 22px !important;
  }
  .hero-meta {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .hero-meta-item {
    font-size: 0.7rem !important;
  }
  .hero-badge {
    top: 18px !important;
    right: 18px !important;
    padding: 10px 14px !important;
  }
  .hero-badge-num {
    font-size: 1.4rem !important;
  }

  .page-header,
  .page-header-inner {
    padding: 60px 22px 40px !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .page-header h1 {
    font-size: 2.2rem !important;
    line-height: 1.15 !important;
  }
  .page-header-sub {
    font-size: 0.95rem !important;
  }

  /* ---------- HERO (homepage) ---------- */
  .hero,
  .hero-inner {
    padding: 80px 22px 60px !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* ---------- ABOUT (homepage) ---------- */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .about-photo-wrap {
    display: flex !important;
    justify-content: center !important;
    max-width: 220px !important;
    margin: 0 auto !important;
  }
  .about-photo {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
  }
  .about-badge {
    bottom: -16px !important;
    right: -10px !important;
    padding: 14px 18px !important;
  }
  .hero h1 {
    font-size: 2.4rem !important;
    line-height: 1.1 !important;
  }
  .hero-sub {
    font-size: 1rem !important;
  }
  .hero-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-cta-row > * {
    width: 100% !important;
    text-align: center !important;
  }

  /* ---------- ARTICLE BODY ---------- */
  .article-layout {
    padding: 44px 20px !important;
    gap: 36px !important;
  }
  .article-body p {
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }
  .article-body h2 {
    font-size: 1.55rem !important;
    margin: 1.8em 0 0.6em !important;
  }
  .article-body .drop-cap::first-letter {
    font-size: 3.2rem !important;
  }
  .article-body blockquote {
    padding: 16px 20px !important;
    margin: 1.8em 0 !important;
  }
  .article-body blockquote p {
    font-size: 1.1rem !important;
  }
  .pullquote {
    padding: 24px 22px !important;
    margin: 1.8em 0 !important;
  }
  .pullquote p {
    font-size: 1.15rem !important;
  }
  .callout-card,
  .question-card {
    padding: 22px 20px !important;
  }
  .callout-num {
    font-size: 2rem !important;
  }
  .question-text {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
  }

  /* Tables overflow horizontally instead of crushing */
  .data-table-wrap {
    margin: 1.6em -20px !important;
    padding: 0 20px !important;
  }
  .data-table {
    font-size: 0.8rem !important;
    min-width: 520px !important;
  }
  .data-table th,
  .data-table td {
    padding: 8px 10px !important;
  }

  /* Stat grid: 1 col on phone */
  .stat-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .stat-box {
    padding: 16px 18px !important;
  }
  .stat-box-num {
    font-size: 2rem !important;
  }

  /* Action steps: tighter */
  .action-step {
    padding: 16px 18px !important;
    grid-template-columns: 36px 1fr !important;
    gap: 12px !important;
  }
  .action-step-num {
    font-size: 1.35rem !important;
  }

  /* ---------- SIDEBAR ---------- */
  .article-sidebar {
    gap: 18px !important;
  }
  .sidebar-author,
  .sidebar-newsletter,
  .sidebar-more {
    padding: 22px !important;
  }

  /* ---------- ARTICLE END / BIO ---------- */
  .article-end {
    padding: 0 20px 60px !important;
  }
  .author-bio-block {
    flex-direction: column !important;
    text-align: left !important;
    padding: 24px !important;
    gap: 18px !important;
  }
  .bio-headshot {
    width: 64px !important;
    height: 64px !important;
  }
  .bio-name {
    font-size: 1.15rem !important;
  }

  /* Continue Reading: stack */
  .next-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---------- FEATURED ARTICLE CARD ---------- */
  .featured-wrap {
    padding: 28px 20px !important;
  }
  .featured-card {
    grid-template-columns: 1fr !important;
  }
  .featured-image {
    min-height: 220px !important;
  }
  .featured-content {
    padding: 28px 24px !important;
  }
  .featured-content h2 {
    font-size: 1.6rem !important;
    line-height: 1.18 !important;
  }
  .featured-excerpt {
    font-size: 0.92rem !important;
  }
  .featured-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* ---------- ARTICLE GRID ---------- */
  .grid-section {
    padding: 40px 20px 56px !important;
  }
  .articles-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .card-image {
    min-height: 180px !important;
  }
  .card-body {
    padding: 22px !important;
  }
  .card-body h3 {
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
  }
  .card-excerpt {
    font-size: 0.88rem !important;
  }

  /* Contract Series 4-up → 1 col */
  section.grid-section > .grid-inner > div[style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Histamine wide card → stack */
  .article-card[href="article-histamine.html"] > div[style*="grid-template-columns:260px"] {
    grid-template-columns: 1fr !important;
  }
  .article-card[href="article-histamine.html"] > div > div:first-child {
    min-height: 140px !important;
  }

  /* ---------- NEWSLETTER ---------- */
  .newsletter,
  .newsletter-band,
  .newsletter-band-inner {
    padding: 48px 22px !important;
  }
  .newsletter h2,
  .nl-title {
    font-size: 1.7rem !important;
    line-height: 1.2 !important;
  }
  .newsletter-form,
  .nl-form {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .newsletter-input,
  .nl-input,
  .newsletter-btn,
  .nl-btn {
    width: 100% !important;
  }

  /* ---------- FOOTER ---------- */
  footer {
    padding: 44px 22px 28px !important;
  }
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-brand {
    grid-column: auto;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-top: 32px !important;
  }

  /* ---------- HOMEPAGE SECTIONS (about/services/calculator/contact) ---------- */
  section[id="about"],
  section[id="services"],
  section[id="calculator"],
  section[id="contact"] {
    padding: 60px 22px !important;
  }
  section[id] h2 {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
  }
  section[id] p {
    font-size: 0.95rem !important;
  }

  /* Any 2/3/4-col grid inside a section → single column on phone */
  section[id] [style*="grid-template-columns:repeat(2"],
  section[id] [style*="grid-template-columns:repeat(3"],
  section[id] [style*="grid-template-columns:repeat(4"],
  section[id] [style*="grid-template-columns: repeat(2"],
  section[id] [style*="grid-template-columns: repeat(3"],
  section[id] [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Catch any 2-col layouts using "1fr 1fr" inline */
  section[id] [style*="grid-template-columns:1fr 1fr"],
  section[id] [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* SMALL PHONE (≤400px) — extra trims */
@media (max-width: 400px) {
  .nav-cta {
    display: none !important;
  }
  .article-hero h1 {
    font-size: 1.7rem !important;
  }
  .hero h1 {
    font-size: 2rem !important;
  }
  .featured-content h2 {
    font-size: 1.4rem !important;
  }
}

/* PREVENT HORIZONTAL OVERFLOW everywhere */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden !important;
  }
  img, video, iframe {
    max-width: 100% !important;
    height: auto;
  }
}