/* ==========================================================================
   Atlas of Wales — structured parking records (mountain-trail-contract.md §4d)

   A scannable comparison card, not a CTA block. Shared by every mountain-trail
   page that publishes STRUCTURED parking records; pages whose parking section
   is honest prose do not load this and keep the ordinary reading measure.

   Root cause this file fixes (found on glyder-fawr, then yr-wyddfa):
   .detail-item__body carries `max-width: 68ch` — the right measure for reading
   paragraphs, but it was also clamping the parking GRID, stranding the cards in
   the left half of an open accordion with dead space to the right. Structured
   parking bodies therefore opt out via .detail-item__body--wide.

   CASCADE NOTE: every page defines .detail-item__body in its own inline <style>,
   which the browser applies AFTER any <link>ed stylesheet in <head>. The wide
   modifier is written as .detail-item__body.detail-item__body--wide (0,2,0) so it
   beats the page's own .detail-item__body (0,1,0) on specificity and does not
   depend on load order.
   ========================================================================== */

.detail-item__body.detail-item__body--wide { max-width: none; }

/* Auto-fit rather than a fixed column count: the same rule serves a 2-card
   comparison (glyder-fawr) and a 6-card one (yr-wyddfa), and stacks on its own
   when a track can no longer hold 330px.
   The min() is load-bearing: a bare minmax(330px, 1fr) keeps a hard 330px floor
   on narrow screens, so at 320px the cards overshoot the panel and are silently
   clipped by .detail-item's overflow:hidden. */
.parking-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 16px; }

.parking-card { display: flex; flex-direction: column; padding: 15px 18px 16px; border: 1px solid rgba(228, 196, 122, 0.14); border-radius: 10px; background: rgba(20, 32, 26, 0.4); }
.parking-card__head { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.parking-card__name { margin: 0; color: var(--cream); font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; font-weight: 600; }
.parking-card__routes { margin: 0; color: rgba(236, 199, 110, 0.68); font-size: 0.72rem; letter-spacing: 0.02em; }

.parking-card__facts { margin: 0; padding-top: 10px; border-top: 1px solid rgba(228, 196, 122, 0.1); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
/* Long values (multi-tier prices, addresses) take the whole card width rather than
   wrapping inside a half-column. */
.parking-card__facts .fact--wide { grid-column: 1 / -1; }
.parking-card__facts dt { color: rgba(236, 199, 110, 0.66); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.parking-card__facts dd { margin: 3px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.4; }

/* flex:1 lets the operational note absorb the slack in a shorter card, so every
   card's action links and verification note sit on the same line across a row. */
.parking-card__note { flex: 1 0 auto; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid rgba(228, 196, 122, 0.1); color: var(--muted); font-size: 0.86rem; line-height: 1.5; }

.parking-card__actions { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid rgba(228, 196, 122, 0.1); display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 6px; }
.parking-card__action { color: rgba(236, 199, 110, 0.9); font-size: 0.8rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.parking-card__action:hover, .parking-card__action:focus-visible { color: var(--gold-bright); }
.parking-card__action:focus-visible { outline: 2px solid rgba(228, 196, 122, 0.6); outline-offset: 2px; border-radius: 2px; }

.parking-card__meta { margin: 0; padding-top: 13px; color: rgba(185, 180, 166, 0.76); font-size: 0.72rem; line-height: 1.45; letter-spacing: 0.01em; }
.parking-card__meta .chip { margin-left: 6px; padding: 0 6px; font-size: 0.64rem; }

/* Source / freshness note beneath the grid — spans the full panel width. */
.parking-note { margin: 16px 0 0; font-size: 0.88rem; line-height: 1.55; }

@media (max-width: 760px) {
    /* .parking-list stacks on its own — auto-fit's 330px minimum cannot fit two
       tracks here. The in-card fact row does need a breakpoint: at phone widths a
       half-column is too narrow for "£6/day · £3 up to 4 hrs" to read as one value. */
    .parking-card { padding: 14px 15px 15px; }
    .parking-card__facts { grid-template-columns: 1fr; gap: 9px; }
}
