/* ==========================================================================
   CROWN RIDES — JOURNAL
   Loaded only by /blog and article pages.
   ========================================================================== */

/* ==========================================================================
   1. POST GRID
   ========================================================================== */

.pgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

.pcard { min-width: 0; }

.pcard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-raised);
  transition: transform var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-ui),
              box-shadow var(--d-base) var(--e-out);
}
.pcard__link:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: var(--sh-md);
}

.pcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-n-100);
}
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}
.pcard__link:hover .pcard__media img { transform: scale(1.05); }

.pcard__cat {
  position: absolute;
  top: var(--s-4); left: var(--s-4);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--c-black);
  color: var(--c-gold);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  flex: 1;
}

.pcard__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.pcard__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  font-weight: var(--fw-regular);
  line-height: 1.18;
  letter-spacing: var(--ls-display);
}

.pcard__excerpt {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

.pcard__body .scard__more { margin-top: auto; }

/* ==========================================================================
   2. ARTICLE
   ========================================================================== */

.phero--post { min-height: clamp(26rem, 20rem + 16vw, 34rem); }

.post__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   3. PROSE — the reading experience
   ========================================================================== */

.prose { max-width: 42rem; }

.prose p {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  margin-bottom: var(--s-5);
  text-wrap: pretty;
}

.prose__lead {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem) !important;
  font-style: italic;
  font-weight: var(--fw-light);
  line-height: 1.45 !important;
  color: var(--text) !important;
  padding-bottom: var(--s-6);
  margin-bottom: var(--s-6) !important;
  border-bottom: 1px solid var(--border);
}

.prose__h2 {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: var(--ls-display);
  color: var(--text);
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}
.prose__h2:first-child { margin-top: 0; }

.prose__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding-left: var(--s-5);
  border-left: 1px solid var(--rule-gold);
}
.prose__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}
.prose__list svg { width: 17px; height: 17px; color: var(--text-accent); flex: none; margin-top: 6px; }

.prose__quote {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  font-style: italic;
  font-weight: var(--fw-light);
  line-height: 1.45;
  color: var(--text);
  padding: var(--s-5) 0 var(--s-5) var(--s-6);
  margin-bottom: var(--s-6);
  border-left: 2px solid var(--c-gold);
}

.prose__cta { margin-top: var(--s-7); }

.prose__aside {
  margin-top: var(--s-8);
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-subtle);
}
.prose__aside-label {
  font-size: var(--fs-eyebrow) !important;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent) !important;
  margin-bottom: var(--s-3) !important;
}
.prose__aside-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  color: var(--text);
}
.prose__aside-link strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-regular);
}
.prose__aside-link small { font-size: var(--fs-sm); color: var(--text-muted); }
.prose__aside-link svg { width: 18px; height: 18px; color: var(--text-accent); flex: none;
  transition: transform var(--d-base) var(--e-out); }
.prose__aside-link:hover svg { transform: translateX(4px); }

.prose__note {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm) !important;
}
.prose__note a { color: var(--text-accent); }

/* ==========================================================================
   3b. EVENT CARDS

   Deliberately NOT a copy of .pcard. An event is a date first — someone
   scanning this page is asking "when", not "what" — so the date is the
   loudest thing on the card and sits on the image rather than in the body.

   It also carries the section on its own. There is no licensed photography
   for these events, so every card falls back to the site's own imagery; if
   the picture were doing the work they would all look like the same card
   three times.
   ========================================================================== */
.egrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

.ecard { min-width: 0; }

.ecard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-raised);
  transition: transform var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-ui),
              box-shadow var(--d-base) var(--e-out);
}
.ecard__link:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: var(--sh-md);
}

.ecard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-n-100);
}
.ecard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}
.ecard__link:hover .ecard__media img { transform: scale(1.05); }

/* The date block. aria-hidden in the markup — the same date is in the
   <time> element below in a form a screen reader can actually read out,
   and hearing "11 13 SEP 2026" first would be noise. */
.ecard__date {
  position: absolute;
  top: var(--s-4); left: var(--s-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 68px;
  padding: var(--s-3) var(--s-3) calc(var(--s-2) + 2px);
  border-radius: var(--r-lg);
  background: var(--c-black);
  /* --c-white, not a cream: there is no cream token in tokens.css, and
     var() on a name that does not exist silently resolves to the inherited
     colour — which here is the body's near-black, so the month and year
     rendered black on black and vanished. */
  color: var(--c-white);
  line-height: 1;
  box-shadow: var(--sh-md);
}
.ecard__date-day {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--c-gold);
}
.ecard__date-mon {
  margin-top: 4px;
  font-size: 0.625rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.ecard__date-yr {
  margin-top: 2px;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  opacity: 0.65;
}

/* Category sits opposite the date so the two never collide, however long
   the day range gets. */
.ecard__cat {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--c-black);
  color: var(--c-gold);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.ecard__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  flex: 1;
}

.ecard__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  font-weight: var(--fw-regular);
  line-height: 1.18;
  letter-spacing: var(--ls-display);
}

.ecard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.ecard__excerpt {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

.ecard__body .scard__more { margin-top: auto; }

/* --------------------------------------------------------------------------
   EVENT CARD MOTION

   The card itself rides the site's ordinary [data-reveal] fade, staggered by
   the grid. The DATE gets its own entrance a beat later, because it is the
   thing the page is actually for — the eye should land on "11–13 SEPT" before
   it reads the name.

   Everything is expressed in --d-* tokens, which collapse to 1ms under
   prefers-reduced-motion, so this needs no separate reduced-motion block:
   the badge simply appears.

   The delay is built ON TOP of --reveal-delay, the per-card stagger value
   main.js writes onto the <li>. So card 2's badge waits for card 2, not for
   card 1 — the dates land in sequence rather than all at once.
   -------------------------------------------------------------------------- */
.js .ecard[data-reveal] .ecard__date {
  opacity: 0;
  transform: translateY(-8px) scale(0.9);
  transition:
    opacity var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-ui);
  transition-delay: calc(var(--reveal-delay, 0ms) + 220ms);
}
.js .ecard[data-reveal].is-revealed .ecard__date {
  opacity: 1;
  transform: none;
}

/* Hover: the date is the affordance, so it answers first. A thin gold rule
   rather than a glow — the card already lifts, and two loud signals for one
   pointer is noise. */
.ecard__link:hover .ecard__date,
.ecard__link:focus-visible .ecard__date {
  box-shadow: var(--sh-md), inset 0 0 0 1px rgba(212, 175, 55, 0.55);
}

/* Keyboard users get the same lift the mouse does. Without this the card
   moves on hover and sits dead still on Tab, which reads as broken. */
.ecard__link:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.5);
}

/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */

@media (min-width: 700px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .egrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .egrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Lead story spans the full width with a side-by-side layout */
  .pcard--featured { grid-column: 1 / -1; }
  .pcard--featured .pcard__link { flex-direction: row; }
  .pcard--featured .pcard__media { flex: 0 0 52%; aspect-ratio: auto; }
  .pcard--featured .pcard__body { justify-content: center; padding: var(--s-7); gap: var(--s-4); }
  .pcard--featured .pcard__title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
  .pcard--featured .pcard__excerpt { font-size: var(--fs-md); }
}

/* ==========================================================================
   ROUTE FACTS
   The strip of distance / drive time / motorway at the top of a route page.
   Three plain facts, given the visual weight they deserve — they are what the
   visitor came to check before reading anything else.
   ========================================================================== */
.route-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.route-fact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
}

.route-fact__label {
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.route-fact__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.1;
  color: var(--text);
}