/* ============================================================================
   Verity Gulf - every media query, grouped by breakpoint, largest first.

   Layout rules live here rather than beside their components on purpose: when
   a grid stops working at one width the fix is almost always a trade with a
   neighbouring grid at the same width, and that trade is only visible if they
   are written together.

   Breakpoints: 1600 / 1440 / 1200 / 992 / 768 / 576 / 480.
   ========================================================================= */

/* ============================================================ >= 1600 */

@media (min-width: 1600px) {
  .card-grid--xxl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================ <= 1439 */

@media (max-width: 1439.98px) {
  .hero-grid { grid-template-columns: 300px minmax(0, 1fr) 320px; }
}

/* ============================================================ <= 1199 */

@media (max-width: 1199.98px) {
  /* The trending rail drops below the hero and becomes a two-up list. */
  .hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .hero-grid__trending {
    grid-column: 1 / -1;
  }

  .hero-grid__trending .trending-rail__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s-6);
  }

  /* With two columns the divider between rows would run across the gap. */
  .hero-grid__trending .card--row + .card--row { border-block-start: 0; }
  .hero-grid__trending .card--row { border-block-end: var(--hairline) solid var(--line-soft); }

  /* The article sidebar moves under the body. */
  .grid--article { grid-template-columns: minmax(0, 1fr); }
  .grid--article .sidebar--sticky { position: static; }
  .sidebar--article-below { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }

  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-grid .toc { position: static; }

  .masthead .search-field { inline-size: 240px; }
}

/* ============================================================ <= 991 */

@media (max-width: 991.98px) {
  /*
   * The desktop header collapses to a single 60px bar. The ticker survives
   * because breaking news is the point of the site; everything else in the
   * top strips moves into the drawer.
   */
  .utility-bar,
  .masthead,
  .topics { display: none; }

  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    min-block-size: 60px;
    background: var(--bg-surface);
    border-block-end: var(--hairline) solid var(--line);
  }

  .section-nav__inner { justify-content: flex-start; overflow: visible; }

  /* The section nav becomes a scroll-snap chip strip. */
  .section-nav {
    --section-nav-h: 46px;
  }

  .section-nav__inner {
    gap: var(--s-5);
    min-block-size: var(--section-nav-h);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }

  .section-nav__inner::-webkit-scrollbar { display: none; }
  .nav__link { scroll-snap-align: start; }

  .ticker { block-size: 36px; margin-inline: calc(var(--gutter) * -1); border-radius: 0; }

  /* Hero: media first, then the story, then the rail as a snap rail. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid__media { order: -1; }

  .widget-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widget-row > .widget--weather { grid-column: 1 / -1; }

  .lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-grid__poll { grid-column: 1 / -1; }

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

  .triple-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .grid--listing { grid-template-columns: minmax(0, 1fr); }
  .grid--listing .sidebar--sticky { position: static; }

  .app-band { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .phones { min-block-size: 320px; }
  .phone--back { display: none; }
  .phone--front { transform: rotate(0) translateX(0); inline-size: 220px; }

  .video-hub { grid-template-columns: minmax(0, 1fr); }
  .video-playlist { max-block-size: none; }

  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-card { position: static; }

  .newsletter-hero { grid-template-columns: minmax(0, 1fr); }
  .package-row { grid-template-columns: minmax(0, 1fr); }
  .package--featured { order: -1; }

  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .sitemap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mega__inner { grid-template-columns: minmax(0, 1fr); }
  .mega__cards { display: none; }

  .controls-row { position: static; }
}

/* Above the mobile breakpoint the mobile bar and burger do not exist. */
@media (min-width: 992px) {
  .mobile-bar { display: none; }
  .burger { display: none; }
}

/* ============================================================ <= 767 */

@media (max-width: 767.98px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }

  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature__media { order: -1; }

  .triple-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .promo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .prevnext { grid-template-columns: minmax(0, 1fr); }
  .prevnext__tile--next { text-align: start; }

  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preference-grid { grid-template-columns: minmax(0, 1fr); }

  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__bottom { justify-content: center; text-align: center; }

  .sidebar--article-below { grid-template-columns: minmax(0, 1fr); }

  .author-card { flex-direction: column; }

  .comment__replies { margin-inline-start: var(--s-5); }

  .article-media--bleed { margin-inline: 0; }

  .newsletter-form { flex-direction: column; }
  .newsletter-form .input { max-inline-size: none; }
}

/* ============================================================ <= 575 */

@media (max-width: 575.98px) {
  .card-grid,
  .card-grid--2,
  .card-grid--4 { grid-template-columns: minmax(0, 1fr); }

  /*
   * The byline runs to two lines on a phone, and a wrapped run puts a
   * separator at the start of the second one - CSS cannot know which item
   * that will be, and it varies with the length of the location and the
   * reporter's name. So the dots come out and the items are spaced instead,
   * which is how the card meta rows already read.
   */
  .article-byline__by,
  .article-byline__meta { gap: 2px 14px; }

  .article-byline__desk::before,
  .article-byline__meta > * + *::before { content: none; }

  /* Beside two lines the portrait sits best in the middle; beside the three
     or four this width produces it belongs against the name. */
  .article-byline { align-items: flex-start; }
  .article-byline__portrait { align-self: flex-start; }

  /*
   * Two of the section rails become horizontal snap rails rather than long
   * stacks - a phone reading a news front page should not scroll past nine
   * full-width cards to reach the next section.
   */
  .card-grid--snap {
    display: flex;
    gap: var(--grid-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }

  .card-grid--snap::-webkit-scrollbar { display: none; }
  .card-grid--snap > * { flex: none; inline-size: min(78vw, 300px); scroll-snap-align: start; }

  .promo-row {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }

  .promo-row::-webkit-scrollbar { display: none; }
  .promo-row > * { flex: none; inline-size: min(80vw, 300px); scroll-snap-align: start; }

  .widget-row { grid-template-columns: minmax(0, 1fr); }
  .widget-row > .widget--weather { order: -1; }

  .lead-grid { grid-template-columns: minmax(0, 1fr); }

  .hero-grid__trending .trending-rail__list { grid-template-columns: minmax(0, 1fr); }

  .card--hero .card__body { padding: var(--s-4); }

  .about-stats { grid-template-columns: minmax(0, 1fr); }
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .sitemap-grid { grid-template-columns: minmax(0, 1fr); }

  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }

  .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .search-band__field { flex-direction: column; }

  .toast { inset-inline: var(--s-4); inset-inline-end: var(--s-4); text-align: center; }

  .engagement { gap: var(--s-2); padding-block: var(--s-3); }
  .engagement__group { gap: var(--s-4); }

}

/* ============================================================ <= 479 */

@media (max-width: 479.98px) {
  .card--row .media { inline-size: 64px; block-size: 64px; }
  .avatar--88 { --avatar-size: 64px; }
  .avatar--120 { --avatar-size: 88px; }
}

/* ============================================================ TOUCH */

/*
 * Coarse pointers get bigger targets. This is a pointer query, not a width
 * one: a touchscreen laptop needs the same 44px as a phone.
 */
@media (pointer: coarse) {
  .btn--icon,
  .theme-toggle,
  .chip__remove { min-inline-size: 44px; min-block-size: 44px; }

  .chip { block-size: 38px; }
}

/* ============================================================ ZOOM */

/*
 * At 200% browser zoom the viewport reports roughly half its width, so the
 * layout has already collapsed by the rules above. What is left is to make
 * sure nothing that was given a fixed height clips its own text.
 */
@media (max-width: 991.98px) {
  .btn,
  .chip,
  .pagination__item,
  .live-badge { block-size: auto; padding-block: 8px; }
}

/* ============================================================ LOGO CAPS

   The uploaded logo's ceiling comes down with the viewport. The masthead
   collapses to a 60px bar under 992px, so a 46px logo would fill it. */

@media (max-width: 991.98px) {
  .logo { block-size: 30px; }
  .logo--img,
  picture:has(> .logo--img) { max-block-size: 38px; max-inline-size: 170px; }
}

@media (max-width: 575.98px) {
  .logo { block-size: 26px; }
  .logo--img,
  picture:has(> .logo--img) { max-block-size: 32px; max-inline-size: 140px; }
}