/* =============================================================================
   ARTICLES — single post page + the Driver Hub articles section
   =============================================================================
   Enqueued on is_single() and on the Driver Hub page (see functions.php), because
   the card block below is shared by both.

   Why a constrained stylesheet instead of Gutenberg defaults: this theme has no
   body-prose precedent at all. All 17 page templates are bespoke measured
   sections, so there is no paragraph/list/quote styling for a post to inherit.
   Unstyled block-library output would read as a different website bolted onto the
   shared footer. Every value below is taken from something already in the theme
   rather than invented:

     body 19px / 1.6 #4a4a4a   <- .feed-intro, page-driverhub.php
     H2 Anton 32px (26 mobile) <- .gallery-preview-title scale, cross-referenced
                                  twice in page-heavy-haul-career-path.php
     --slate #576371           <- assets/css/driver-position.css
     dark band opacity 0.38    <- design-standards.md, the measured constant
   ============================================================================= */

.article,
body.single-post {
  /* Local tokens. Kept scoped rather than pushed into global.css :root so the
     articles work cannot change the rendering of the existing 17 pages.
     --spine-max is the measure plus its two 24px gutters: every box on the page uses it
     as its max-width, so a single centred column runs from the breadcrumb to the last
     gallery card. Round 2 correction: the column is CENTRED in the container, and the
     hero aligns to the column, not to the container gutter. */
  --slate: #576371;
  --charcoal: #2a2a2a;
  --prose: #4a4a4a;
  /* Round 3: the imported 720px editorial measure is GONE. The article adopts the site's
     existing narrow-content column, --content-col (860px, global.css), which the Florida
     and Veterans pages already use. One site, one narrow-content width. The full-bleed
     bands below (gallery strip, CTA, footer) keep --maxw and are not touched. */
  --spine-gutter: 24px;
}

/* =============================================================================
   01 — HERO (the standard dark band)
   =============================================================================
   design-standards.md: a reduced-opacity image over solid black, NOT a
   semi-transparent overlay div over a full-opacity image. opacity 0.38 is the
   measured site constant and is not re-derived here.

   The hero does NOT move: per the 2026-08-10 decision, heroes stay still dark
   bands and parallax is reserved for bands the reader scrolls into. */
.article-hero {
  position: relative;
  overflow: hidden;
  background-color: #000000;
  /* The Veterans hero's geometry, verbatim: padding 200/24/112, crumb absolutely placed at
     top 104, H1 at 200, 18px from H1 to the line beneath it. Measured off the live page at
     1440 rather than transcribed from its source, so what is copied is what actually
     renders. The crumb is a DIRECT CHILD of this band (see single.php) exactly as it is on
     the Veterans page, because .article-hero__inner is a positioned layer and an absolute
     crumb inside it would anchor to the padded box instead of the band. */
  padding: 200px 24px 112px;
  /* Match the Veterans band's measured 541px even when the payload is lighter. That band
     reaches 541 on content (1-line H1 + a multi-line subhead block); an article carries a
     2-line H1 and a one-line dateline and would otherwise stop at 483. min-height, not
     height, so a long title still grows the band past this floor.
     Side effect worth having: a taller band shows more of the photo. At 1440 the visible
     slice of a 4:3 image goes from 45.2% to 50.6% of its height. */
  min-height: 541px;
}

/* No featured image: the documented no-photo variant uses the charcoal fill
   rather than a black void, so the band still reads as a designed surface. */
.article-hero--plain {
  background-color: var(--charcoal);
}

.article-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Explicit rather than relying on the initial value, so the centred crop is a stated
     decision and cannot be lost to a future rule. The band is NOT parallaxed (heroes stay
     still, decision 2026-08-10), so this is the resting and only position.
     NOTE: page-veteran-truck-driver-jobs.php uses 50% 55% for its hero because the subject
     in that 4:3 photo sits below the horizon and a centred crop clips it. If a given
     article's photo has the same problem, the fix is a per-post focal point, not a change
     to this default. */
  object-position: 50% 50%;
  opacity: 0.38;                  /* the measured constant, verbatim */
  z-index: 1;
  pointer-events: none;
}

.article-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-col);   /* the shared narrow column */
  margin: 0 auto;
  padding: 0;                      /* the band itself carries the 24px sides */
}

/* --- Breadcrumbs on the band ---------------------------------------------
   Same class names and the same light-on-dark treatment as the position pages
   (assets/css/driver-position.css). Duplicated rather than shared because that
   stylesheet is only enqueued on position pages and the two never co-occur.
   Static here, not absolutely positioned: the article hero sizes to its content,
   so the crumb sits in normal flow above the H1. */
.article-hero .breadcrumbs {
  position: absolute;
  top: 104px;                    /* the Veterans crumb's measured position */
  left: 0;
  right: 0;
  z-index: 3;
  width: 100%;
  max-width: calc(var(--content-col) + 48px);   /* column + the hero's 24px side padding */
  margin: 0 auto;
  padding: 0 var(--spine-gutter);
}
.article-hero .breadcrumbs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 1.4;
}
.article-hero .breadcrumbs-item { color: rgba(255, 255, 255, 0.85); }
.article-hero .breadcrumbs-item a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.15s ease;
}
.article-hero .breadcrumbs-item a:hover { color: var(--orange); text-decoration: underline; }
.article-hero .breadcrumbs-item + .breadcrumbs-item::before {
  content: "\203A";
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.55);
}
.article-hero .breadcrumbs-current { color: #ffffff; font-weight: 700; }

.article-hero__title {
  margin: 0;
  max-width: none;                /* the spine column is the limit now */
  font-family: var(--display-font);
  /* 56px / 66px, the Veterans and Career Path hero H1 metrics exactly.
     WEIGHT IS DELIBERATELY 400, NOT the Veterans page's 700: that page overrides
     --display-font to Helvetica, which has a real bold. This template keeps the global
     Anton, which ships one weight, so 700 would render a synthetic bold. Rhythm is
     replicated; the typeface decision is left alone. */
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 400;
  line-height: 66px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}

.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;               /* the Veterans H1-to-subhead gap */
  font-family: var(--body-font);
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}
.article-hero__meta time { color: rgba(255, 255, 255, 0.82); }
/* Separator only appears when a byline follows the date, so a dateline on its
   own never renders a dangling dot. */
.article-hero__sep { color: rgba(255, 255, 255, 0.45); }
.article-hero__byline { color: #ffffff; font-weight: 700; }

/* =============================================================================
   02 — PROSE
   ============================================================================= */
.article-body {
  background: #ffffff;
  /* 24px sides mirror the hero band, so the column has the same breathing room to fall
     back on when the viewport is narrower than 860 + 48. Bottom padding closes the gap to
     the shared gallery strip; see the closing-act block below. */
  padding: 76px 24px 36px;
}

/* ONE SPINE, top to bottom (review round 1, 2026-08-24).
   The inner box is the SAME container as .article-hero__inner: max-width var(--maxw),
   centred, 24px gutters. The prose column then hangs off its left edge instead of being
   centred on its own axis, so the H1 and the body text share a single left edge. Before
   this, the H1 sat at 136px and the body text at 376px on a 1440 viewport: two alignment
   systems on one page. */
.article-body__inner {
  width: 100%;
  max-width: var(--content-col);   /* the SAME column as the hero above */
  margin: 0 auto;
  padding: 0;
}
.article-prose {
  width: 100%;
  max-width: none;             /* the inner box already is the measure */
  margin: 0;
  font-family: var(--body-font);
  font-size: 19px;
  line-height: 1.7;
  color: var(--prose);
}

/* Vertical rhythm: one rule, so any block WP emits gets sane spacing even if it
   is not styled individually below. */
.article-prose > * { margin: 0 0 28px; }
.article-prose > *:last-child { margin-bottom: 0; }

/* --- The cold open -------------------------------------------------------
   The opening paragraph reads as a lead: larger, darker, more air beneath it.

   :first-child is deliberate rather than :first-of-type. A lead only exists if the
   article actually OPENS with prose; when a post opens with an image or a heading,
   first-child is not a <p> and nothing is promoted, which is the correct outcome.
   :first-of-type would reach past an opening image and promote a paragraph sitting
   halfway down the piece.

   Block output puts the first block directly in .article-prose, so the selector holds
   for Gutenberg content. The one soft spot is an empty leading paragraph block, which
   would take lead styling while rendering nothing visible. If that shows up in practice
   the robust alternative is an explicit editor-applied class, or rendering the excerpt
   as a real standfirst element in single.php instead of styling body content. */
.article-prose > p:first-child {
  font-size: 22px;             /* body is 19px */
  line-height: 1.6;
  /* Round 2: #2a2a2a against a #4a4a4a body was too small a step to read as a deliberate
     lead. Taken to #111111, the same ink as the headings and <strong>, so the contrast
     against body copy is the same one the page already uses to signal emphasis. */
  color: #111111;
  margin-bottom: 44px;
}

.article-prose h2 {
  margin: 64px 0 20px;
  font-family: var(--display-font);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #111111;
}
.article-prose h3 {
  margin: 46px 0 16px;
  font-family: var(--body-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: #111111;
}
.article-prose h4 {
  margin: 34px 0 12px;
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.article-prose h2:first-child,
.article-prose h3:first-child { margin-top: 0; }

.article-prose a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(189, 81, 23, 0.35);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.article-prose a:hover {
  color: var(--orange-bright);
  border-bottom-color: currentColor;
}

.article-prose strong { color: #111111; font-weight: 700; }

.article-prose ul,
.article-prose ol { padding-left: 26px; margin-bottom: 32px; }
.article-prose li { margin: 0 0 12px; }
.article-prose li:last-child { margin-bottom: 0; }
.article-prose ul { list-style: disc; }
.article-prose ol { list-style: decimal; }

/* --- Body images: every one is a figure, none of them float ----------------
   In-prose images fill the measure edge to edge and sit on the spine like the text.
   No floats: .alignleft / .alignright are neutralised rather than supported, because a
   float at this measure leaves a 300px text gutter that collapses to nonsense on a phone
   and reintroduces exactly the second alignment axis item 3 removed. */
.article-prose figure,
.article-prose .wp-block-image {
  margin: 48px 0;
  width: 100%;
}
.article-prose .wp-block-image img,
.article-prose figure img,
.article-prose > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;         /* the site's dominant card radius */
}
.article-prose figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
  text-align: left;            /* on the spine, like everything else */
}

/* Neutralise floats and the editor's alignment classes. */
.article-prose .alignleft,
.article-prose .alignright,
.article-prose .aligncenter {
  float: none;
  display: block;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Wide/full images may run past the measure, but only to the RIGHT: the left edge stays
   on the spine. theme.json already promises the editor 1200px, and the prose column is
   left-aligned inside that same box, so this needs no negative margin. */
/* Wide/full images break OUT of the 860 column symmetrically, up to the site's --maxw,
   so the column's left and right edges stay intact above and below them. */
.article-prose .alignwide,
.article-prose .alignfull {
  width: calc(var(--maxw) - 48px);
  max-width: calc(100vw - 48px);
  margin-left: 50%;
  transform: translateX(-50%);
}

.article-prose blockquote,
.article-prose .wp-block-quote {
  margin: 52px 0;
  padding: 4px 0 4px 26px;
  border-left: 4px solid var(--orange);
  font-size: 21px;
  line-height: 1.6;
  color: #111111;
}
.article-prose blockquote p:last-child { margin-bottom: 0; }
.article-prose blockquote cite {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  color: var(--slate);
}

.article-prose .wp-block-table { overflow-x: auto; }
.article-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.article-prose th,
.article-prose td {
  padding: 12px 14px;
  border: 1px solid #e2e5e9;
  text-align: left;
}
.article-prose th {
  background: #f5f6f8;
  color: #111111;
  font-weight: 700;
}

.article-prose hr,
.article-prose .wp-block-separator {
  height: 0;
  margin: 52px 0;
  border: 0;
  border-top: 1px solid #e2e5e9;
}

.article-prose code {
  padding: 2px 6px;
  border-radius: 4px;
  background: #f2f3f5;
  font-size: 0.9em;
}
.article-prose pre {
  padding: 20px;
  border-radius: 8px;
  background: #1f1f1d;
  color: #f5f6f8;
  overflow-x: auto;
  font-size: 15px;
  line-height: 1.6;
}
.article-prose pre code { background: none; padding: 0; }

/* Embeds (responsive-embeds support is declared in functions.php). */
.article-prose .wp-block-embed { margin: 40px 0; }

/* --- The closing act ------------------------------------------------------
   The shared gallery strip is the article's ending, not a separate page, so the seam
   between them is tightened from 154px of combined air (90 bottom + 64 strip top) to 76.

   The strip's own 64px top padding is NOT edited: assets/css/gallery-preview.css is a
   shared component on the home, Florida, veterans and position pages, and changing it
   would move all of them. This override is scoped to the single-post body class instead,
   so the strip keeps its normal spacing everywhere else. */
body.single-post .gallery-preview { padding-top: 40px; }

/* ROUND 3: the round-2 overrides that dragged the strip's heading and first card onto the
   narrow column are REMOVED. The gallery strip, the CTA and the footer are the site's
   full-bleed band system and are correct at their own --maxw geometry; a reading column
   is not supposed to govern them. Only the seam above the strip is still tightened, which
   is spacing, not band geometry. */

/* =============================================================================
   03 — DRIVER HUB ARTICLES SECTION (shared card block)
   =============================================================================
   Renders ABOVE the photo gallery on /driverhub/. The whole section is omitted by
   the template when nothing is published, so this CSS is inert until the first
   article goes live.

   Count-driven modifiers, not a fixed grid: the section is built once and simply
   changes shape as articles accumulate, so growing it into the page's lead is a
   content change rather than a rebuild.
     1 post   -> .hub-articles--single : one wide lead card
     2-3      -> .hub-articles--few    : lead + a stacked rail beside it
     4+       -> .hub-articles--many   : lead + a 3-up grid underneath */
.hub-articles {
  --slate: #576371;
  background: #ffffff;
  padding: 76px 0 8px;
}
.hub-articles-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
}
.hub-articles-head {
  max-width: 680px;
  margin: 0 auto 40px;
  text-align: center;
}
.hub-articles-title {
  margin: 0 0 14px;
  font-family: var(--display-font);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #111111;
}
.hub-articles-sub {
  margin: 0;
  font-family: var(--body-font);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--prose, #4a4a4a);
}

.hub-articles-grid { display: grid; gap: 28px; }

/* 2-3 articles: lead on the left, the rest stacked in a rail on the right. */
.hub-articles--few .hub-articles-grid {
  grid-template-columns: 1.35fr 1fr;
}
/* The lead spans both rail rows and STRETCHES to their combined height (no
   align-items: start), otherwise a short lead leaves a ragged gap under itself
   while the rail runs on. Its photo takes up the slack so the body copy stays put. */
.hub-articles--few .hub-article-card--lead { grid-row: span 2; }
.hub-articles--few .hub-article-card--lead .hub-article-media { flex: 1 1 auto; min-height: 320px; }
.hub-articles--few .hub-article-card--lead .hub-article-media img { height: 100%; min-height: 320px; }

/* 4+: full-width lead, then a 3-up row. */
.hub-articles--many .hub-articles-grid { grid-template-columns: repeat(3, 1fr); }
.hub-articles--many .hub-article-card--lead { grid-column: 1 / -1; }

/* --- The card ------------------------------------------------------------ */
.hub-article-card {
  background: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hub-article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  border-color: #d8dbe0;
}
.hub-article-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.hub-article-media {
  overflow: hidden;
  line-height: 0;
  background: #eef0f3;
}
.hub-article-media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.hub-article-card:hover .hub-article-media img { transform: scale(1.04); }

.hub-article-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 24px;
}
.hub-article-date {
  margin: 0 0 10px;
  font-family: var(--body-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
}
.hub-article-title {
  margin: 0 0 12px;
  font-family: var(--body-font);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.32;
  color: #111111;
}
.hub-article-excerpt {
  margin: 0 0 18px;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--prose, #4a4a4a);
}
.hub-article-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
}
.hub-article-more svg { width: 17px; height: 17px; flex: 0 0 auto; }
.hub-article-card:hover .hub-article-more { color: var(--orange-bright); }

/* The lead card: bigger type and a taller photo, same markup. */
.hub-article-card--lead .hub-article-media img { height: 320px; }
.hub-article-card--lead .hub-article-title { font-size: 28px; line-height: 1.25; }
.hub-article-card--lead .hub-article-excerpt { font-size: 17px; }
.hub-article-card--lead .hub-article-body { padding: 26px 30px 28px; }

/* In the 2-3 rail the lead keeps its photo but the rail cards go compact. */
.hub-articles--few .hub-articles-grid .hub-article-card:not(.hub-article-card--lead) .hub-article-media img { height: 150px; }

/* When articles exist, the gallery below stops being the page's only content and
   gets its own heading so it reads as the second act. The template only prints
   this heading when there is an article above it, so today's page is unchanged. */
.feed-heading {
  margin: 0 auto 14px;
  font-family: var(--display-font);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #111111;
  text-align: center;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  /* The 541 floor is desktop geometry; below 1024 the band goes back to content height,
     which is how the Veterans band behaves at these widths too. */
  .article-hero { padding: 168px 24px 88px; min-height: 0; }
  .article-hero .breadcrumbs { top: 100px; }
  .article-body { padding: 62px 24px 30px; }
  .hub-articles { padding: 60px 0 8px; }
  .hub-articles-inner { padding: 0 32px; }
  .hub-articles-title,
  .feed-heading { font-size: 34px; }

  /* Two columns for the many-case; the lead still spans. */
  .hub-articles--many .hub-articles-grid { grid-template-columns: repeat(2, 1fr); }
  .article-prose .alignwide,
  .article-prose .alignfull { width: 100%; margin-left: 0; max-width: 100%; transform: none; }
}

@media (max-width: 768px) {
  /* The 200/112 band rhythm is desktop geometry: at phone width it would push the H1 most
     of the way down the first screen. Compressed, but the crumb still clears the header. */
  .article-hero { padding: 136px 20px 56px; }
  .article-hero__title { font-size: clamp(30px, 8vw, 40px); line-height: 1.14; }
  .article-hero__meta { font-size: 14px; margin-top: 16px; }
  .article-hero .breadcrumbs { top: 100px; padding: 0 20px; }

  /* One shorthand, so a later rule cannot silently drop the side gutter and let the
     column run to the screen edge while the hero above it keeps its 20px. */

  .article-body { padding: 50px 20px 26px; }
  body.single-post .gallery-preview { padding-top: 32px; }

  .article-prose { font-size: 17px; }
  .article-prose > p:first-child { font-size: 19px; margin-bottom: 32px; }
  .article-prose h2 { font-size: 26px; margin: 48px 0 16px; }   /* documented mobile scale */
  .article-prose h3 { font-size: 20px; margin: 36px 0 13px; }
  .article-prose figure,
  .article-prose .wp-block-image { margin: 36px 0; }
  .article-prose ul,
  .article-prose ol { margin-bottom: 26px; }
  .article-prose blockquote,
  .article-prose .wp-block-quote { font-size: 19px; padding-left: 20px; margin: 40px 0; }

  .hub-articles { padding: 48px 0 8px; }
  .hub-articles-inner { padding: 0 20px; }
  .hub-articles-head { margin-bottom: 30px; }
  .hub-articles-title,
  .feed-heading { font-size: 28px; }
  .hub-articles-sub { font-size: 16px; }

  /* Every count collapses to a single column; the lead keeps its emphasis
     through type size alone. */
  .hub-articles--few .hub-articles-grid,
  .hub-articles--many .hub-articles-grid { grid-template-columns: 1fr; }
  .hub-articles--few .hub-article-card--lead { grid-row: auto; }
  .hub-article-card--lead .hub-article-media img { height: 220px; }
  .hub-article-card--lead .hub-article-title { font-size: 23px; }
  .hub-article-card--lead .hub-article-body { padding: 22px 22px 24px; }
  .hub-articles--few .hub-articles-grid .hub-article-card:not(.hub-article-card--lead) .hub-article-media img { height: 180px; }
}

@media (max-width: 420px) {
  .hub-articles-title,
  .feed-heading { font-size: 24px; }
  .hub-article-title { font-size: 19px; }
}

/* Motion: honour the OS setting for the card lift/zoom. */
@media (prefers-reduced-motion: reduce) {
  .hub-article-card,
  .hub-article-media img { transition: none; }
  .hub-article-card:hover { transform: none; }
  .hub-article-card:hover .hub-article-media img { transform: none; }
}