/* ==========================================================================
   ESH'S TRUCK DRIVING SCHOOL — pages.css
   Page-specific overrides only. Anything reused on more than one page
   belongs in components.css instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HOME
   -------------------------------------------------------------------------- */

/* The hero headline is the LCP element. It is capped so the three lines
   break where they are written to break rather than reflowing at awkward
   widths, and the cap loosens as the viewport grows. */
.hero__title { max-width: 13ch; }
@media (min-width: 48em) { .hero__title { max-width: 15ch; } }
@media (min-width: 80em) { .hero__title { max-width: 17ch; } }

/* Below 640px the hero plate carries four cells in two rows; give it a
   little more breathing room from the buttons above it. */
.hero__plate { margin-block-start: var(--space-md); }
@media (min-width: 48em) { .hero__plate { margin-block-start: 0; } }

/* The ladder sits inside the railed content column, which is already
   indented on desktop. Pull the express bracket in a touch so the whole
   block still lines up with the section heading above it. */
@media (min-width: 64em) {
  .ladder { grid-template-columns: 2rem minmax(0, 1fr); }
}

/* On the narrowest phones the three-column ladder (bracket · code · body)
   leaves too little room for the description, so the express bracket
   narrows and the code plate shrinks with it. */
@media (max-width: 22.5em) {
  .ladder { grid-template-columns: 1.25rem minmax(0, 1fr); }
  .station { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-2xs); }
  .station__code { font-size: var(--step--1); }
  .ladder__express-label { font-size: .5625rem; }
}