/* NAHC v8.12.19 | Mobile and tablet layout QA refinement.
   Intentional scope: responsive spacing, alignment, image framing and touch targets.
   Existing imagery, motion, textures, wording and desktop presentation are retained. */

/* At tablet widths, give the event mark a stable left column and group
   the Media Release link with the date at the right instead of placing the
   link as an isolated third row below the mark. */
@media (min-width:641px) and (max-width:850px) {
  .site-header .site-header-inner {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) max-content;
    grid-template-rows:auto auto;
    grid-template-areas:"brand navigation" "brand date";
    align-content:center;
    align-items:center;
    column-gap:clamp(14px,2.6vw,26px);
    row-gap:3px;
    min-height:144px !important;
  }
  .site-header .brand {
    grid-area:brand;
    flex:none;
    width:min(100%,430px);
    max-width:430px;
    min-width:0;
    margin:0;
  }
  .site-header .site-nav {
    grid-area:navigation;
    display:flex;
    flex:none;
    justify-content:flex-end;
    width:auto;
    min-width:0;
    margin:0;
    gap:0;
  }
  .site-header .site-nav a {
    font-size:clamp(16px,2vw,18px);
    min-height:44px;
    padding:9px 2px;
  }
  .site-header .site-header-date {
    grid-area:date;
    display:block;
    justify-self:end;
    text-align:right;
    white-space:nowrap;
    margin:0;
    padding:0;
    line-height:1.3;
  }
}

/* The 851px breakpoint previously squeezed the heritage introduction into
   a very narrow column. Keep the archival narrative above its photos on
   portrait and smaller landscape tablets; retain the existing photo pair. */
@media (min-width:851px) and (max-width:1050px) {
  .site-header .brand {
    flex-basis:clamp(310px,34vw,350px) !important;
  }
  .heritage .heritage-inner {
    grid-template-columns:minmax(0,1fr) !important;
    column-gap:0;
    row-gap:0;
  }
  .heritage .heritage-heading {
    max-width:800px;
    margin-bottom:clamp(32px,4.5vw,46px) !important;
  }
  .heritage .heritage-heading h2 { max-width:770px; }
  .heritage .heritage-intro { max-width:700px; }
  .heritage .heritage-images {
    width:100%;
    gap:clamp(16px,2.4vw,24px);
  }
  .heritage .heritage-photo img {
    height:clamp(280px,35vw,350px) !important;
  }
  .heritage .heritage-story {
    margin-top:clamp(65px,7.5vw,80px) !important;
  }
}

/* Stacked photos become overly shallow on larger portrait phones and
   small tablets; allow their height to respond to the available width. */
@media (min-width:480px) and (max-width:700px) {
  .heritage .heritage-photo img {
    height:clamp(240px,50vw,320px) !important;
  }
}

@media (max-width:640px) {
  /* A comfortable tap target without creating a third header row. */
  .site-header .site-nav a {
    min-height:44px !important;
    padding-block:10px !important;
  }
  /* Allow the user to tap the private preview link without precision. */
  .footer-bottom a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  /* More consistent breathing room between the photo captions and quote. */
  .heritage .heritage-story {
    margin-top:clamp(60px,12vw,77px) !important;
  }
}

/* The 320–370px breakpoint previously added an extra 90px of almost
   empty hero height; shorten it without cropping the headline or skater. */
@media (max-width:370px) {
  .hero,.hero-inner { min-height:1030px !important; }
  .hero-inner {
    padding-top:280px !important;
    padding-bottom:105px !important;
  }
}