/* NAHC 2027 v8.12.20: small-screen alignment and clean text wrapping.
   Preserves copy, photography, animations, section shapes, tablet and desktop styling. */
@media (max-width:850px) {
  /* The venue and publishing organization are semantic units: keep their
     names together when the browser needs to wrap a line. */
  .countdown-static .countdown-venue,
  .announcement-published .announcement-publisher {
    display:inline-block;
    white-space:nowrap;
  }
  .countdown-static,
  .announcement-published,
  .hero-intro,
  .announcement-description,
  .heritage-intro {
    text-wrap:pretty;
  }
  .announcement h2,
  .heritage h2,
  .countdown-intro h2 { text-wrap:balance; }
}

/* On tablet/desktop, all four timer units belong in a single row.
   This corrects the inherited three-column grid that pushed seconds
   onto an unintended second row with a stranded vertical divider. */
@media (min-width:641px) {
  .countdown-numbers {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:0 !important;
    align-items:center !important;
  }
  .countdown-item {
    border-left:1px solid rgba(233,247,253,.36) !important;
    padding:0 clamp(5px,.9vw,16px) !important;
    align-items:center;
    text-align:center;
  }
  .countdown-item:first-child { border-left:0 !important; }
  .countdown-label {
    white-space:nowrap;
    font-size:clamp(12px,1.15vw,15px);
  }
}

@media (max-width:640px) {
  /* One prominent, centred navigation action underneath the event logo. */
  .site-header .site-header-inner {
    justify-content:center !important;
  }
  .site-header .brand {
    margin-inline:auto !important;
  }
  .site-header .site-nav {
    width:100% !important;
    flex:0 0 100% !important;
    margin:8px auto 0 !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center;
  }
  .site-header .site-nav a {
    min-height:44px;
    justify-content:center;
    text-align:center;
    padding-inline:12px !important;
  }

  /* Mobile countdown: four equally balanced values, without the broken
     vertical dividers that fell beside the wrong cells in a 2x2 layout. */
  .countdown-area { width:100%; }
  .countdown-numbers {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:clamp(16px,5vw,30px) !important;
    row-gap:clamp(26px,6vw,38px) !important;
    align-items:start !important;
    justify-items:stretch !important;
  }
  .countdown-item,
  .countdown-item:first-child {
    border:0 !important;
    padding:0 !important;
    margin:0 !important;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    min-width:0;
  }
  .countdown-value {
    font-size:clamp(46px,12vw,66px) !important;
    line-height:1.02;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.045em;
  }
  .countdown-label {
    padding-top:9px !important;
    font-size:clamp(14px,3.35vw,16px) !important;
    line-height:1.35;
    letter-spacing:.025em;
  }

  /* Keep wrapped media-release metadata aligned after the emblem. */
  .announcement-published {
    position:relative;
    padding-left:43px !important;
    line-height:1.55;
  }
  .announcement-published::before {
    position:absolute !important;
    left:0;
    top:0;
    margin:0 !important;
    vertical-align:baseline;
  }

  /* Centre the two-line footer meta block in the mobile layout. */
  .site-footer .footer-bottom {
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:8px !important;
  }
  .site-footer .footer-bottom p { text-align:center !important; }
  .site-footer .footer-bottom a {
    justify-content:center;
    text-align:center;
    min-height:44px;
  }
}