/* ==========================================================================
   8. Responsive  (spec 10)
   Two breakpoints only: 1024 tablet, 767 mobile. The reference carried six
   more from plugin defaults; they were incidental and are not reproduced.
   ========================================================================== */

/* --- Tablet: <= 1024px ---------------------------------------------------- */
@media (max-width:1024px){

  :root{
    --wg-fs-post-title:34px;
    --wg-card-lg:26px;   --wg-card-lg-lh:30px;
    --wg-gap:20px;
  }

  .wg-lead{
    grid-template-columns:260px minmax(0,1fr);
  }
  .wg-card--rail .wg-thumb{ flex-basis:120px; width:120px; }

  .wg-grid--4{ grid-template-columns:repeat(2,1fr); }

  .wg-footer__grid{
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  }
  .wg-footer__col--brand{
    grid-column:1 / -1;
    text-align:left;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.15);
  }
}

/* --- Mobile: <= 767px ----------------------------------------------------- */
@media (max-width:767px){

  :root{
    --wg-fs-post-title:30px;
    --wg-fs-section:22px;
    --wg-fs-body:17px;
    --wg-section-pad:20px;
    --wg-rule-weight:8px;
  }

  /* Masthead stacks; search goes full width */
  .wg-masthead__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding-block:16px;
    min-height:0;
  }
  .wg-masthead__search{ width:100%; }
  .wg-search{ width:100%; }
  .wg-search__input{ width:100%; flex:1 1 auto; }
  .wg-wordmark{ font-size:32px; }

  /* Nav collapses behind the toggle */
  .wg-navbar__inner{
    flex-direction:column;
    align-items:stretch;
    min-height:0;
  }
  .wg-navtoggle{ display:flex; }

  .wg-nav{
    display:none;
    padding-bottom:10px;
  }
  .wg-nav.is-open{ display:block; }

  .wg-nav__list{
    flex-direction:column;
    align-items:stretch;
  }
  .wg-nav__list a{
    padding:12px 0;
    border-bottom:1px solid var(--wg-rule);
  }
  .wg-nav__list > li:first-child a{ padding-left:0; }
  .wg-nav__list > li:last-child a{ border-bottom:0; }

  /* Everything stacks; thumbnails go full width at 2:1 */
  .wg-lead{
    grid-template-columns:1fr;
    gap:36px;
  }
  .wg-grid--3,
  .wg-grid--4{ grid-template-columns:1fr; gap:var(--wg-gap-row); }

  .wg-card--rail,
  .wg-card--row,
  .wg-card--square{
    flex-direction:column;
    gap:10px;
  }
  .wg-card--rail .wg-thumb,
  .wg-card--row .wg-thumb,
  .wg-card--square .wg-thumb{
    flex-basis:auto;
    width:100%;
  }
  .wg-thumb--rail,
  .wg-thumb--row,
  .wg-thumb--strip,
  .wg-thumb--square{ padding-bottom:50%; }

  .wg-card--rail{
    padding-bottom:20px;
    margin-bottom:20px;
  }

  /* Card titles compress to two steps on mobile */
  .wg-card__title--xs,
  .wg-card__title--sm{ font-size:18px; line-height:21.6px; }
  .wg-card__title--md,
  .wg-card__title--lg{ font-size:22px; line-height:26.4px; }

  /* Single post */
  .wg-byline__img{ width:44px; height:44px; }
  .wg-authorbox{ flex-direction:column; gap:14px; }
  .wg-authorbox__img{ width:80px; height:80px; }
  .wg-prose ul,
  .wg-prose ol{ padding-left:22px; }
  .wg-prose h2,
  .wg-prose h3{ margin-bottom:20px; }

  /* Footer */
  .wg-footer__grid{ grid-template-columns:1fr; gap:28px; }
  .wg-footer__links--browse{ columns:2; }
  .wg-follow{ flex-wrap:wrap; }
}

/* --- Small phones --------------------------------------------------------- */
@media (max-width:400px){
  .wg-footer__links--browse{ columns:1; }
  .wg-wordmark{ font-size:28px; }
}

/* --- Motion / print ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

@media print{
  .wg-header,.wg-footer,.wg-share,.wg-block--related{ display:none !important; }
  body{ color:#000; }
  .wg-prose a{ text-decoration:underline; }
}