/* =========================================================
   news article — per-section mobile rules.
   Loaded after responsive.css.
   ========================================================= */

@media (max-width: 1279px){

  /* The article head is type only; the full viewport responsive.css
     gives every .hero would be empty black above the headline. */
  /* `body .hero` to match the specificity of responsive.css:100, which is
     a later-loaded (0,1,1); a bare `.hero` loses even with !important. */
  body .hero{
    min-height: 0 !important;
    padding-top: 13rem !important;
    padding-bottom: 2rem !important;
    gap: 1.6rem;
    align-items: flex-start;
  }

  /* Centring is a desktop composition: at phone width the trail wraps to
     three ragged lines and the title loses its left edge. The headline
     crumb goes with it — it is the page you are already on, and at this
     width it costs three lines to say so. */
  .crumbs--c{ justify-content: flex-start; gap: .8rem; }
  .crumbs--c .crumbs__l--here{ display: none; }
  .art__title{
    text-align: left !important;
    font-size: 4.6rem !important;
    line-height: 1.05 !important;
  }
  .art__meta{ justify-content: flex-start; }
  .art__cat{ font-size: 1.2rem !important; }
  .art__date{ font-size: 1.2rem !important; }

  /* ---------- body ---------- */

  .art__lead-img{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1248 / 601;
  }

  .art__body{ width: 100% !important; }
  .art__body .art__lead{
    font-size: 2.1rem !important;
    line-height: 1.45 !important;
  }
  .art__body p:not(.art__lead){ line-height: 2.6rem !important; }

  .art__share{ flex-wrap: wrap; height: auto !important; padding: 1.6rem !important; }

  .other__h2{ font-size: 5.6rem !important; line-height: 1 !important; }
  .other{
    display: flex !important;
    flex-direction: column;
    gap: .8rem;
    width: 100% !important;
  }

  .nwc{
    display: grid !important;
    grid-template-columns: 9rem 1fr;
    column-gap: 2rem;
    align-items: center;
    padding: 1.8rem 1.8rem 1.8rem 0;
  }
  .nwc__img{ width: 9rem !important; height: 14rem !important; align-self: stretch; }
  .nwc__meta{ grid-column: 2; margin-bottom: .8rem; }
  .nwc__h{
    grid-column: 2;
    width: auto !important;
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 767px){

  .art__title{ font-size: 3.4rem !important; }
  .other__h2{ font-size: 4.4rem !important; }

  .nwc{ grid-template-columns: 7.6rem 1fr; column-gap: 1.4rem; }
  .nwc__img{ width: 7.6rem !important; height: 12rem !important; }
  .nwc__h{ font-size: 1.6rem !important; }
}