/*
 * hub-ride-page.css — the ride-page frame the GPX page and the public roadbook
 * page share (DMD Ops #1486, plan #16): the sig-card cards and their right-rail
 * variants, the header card's title / meta / coloured pills / action row, the
 * stats row, the photo grid, the Share and Created by cards, the Reviews &
 * comments shell and the sticky right column. Load it after locations-ui.css
 * and hub-list-page.css. Page-only rules stay on the page.
 */
/* Card chrome — mirrors the site palette overridden in head.php and
   re-used on the Signature Track public page. */
.sig-card {
  background: #1b1d23;
  border: 1px solid #2e3239;
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.sig-card h6 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}
.sig-card h6 i { color: #6366f1; }

/* Right-rail variants — each metadata card picks up a semantic accent. */
.sig-card.sig-card-author    { background: linear-gradient(135deg, rgba(99,102,241,0.14) 0%, #1b1d23 55%);  border-color: rgba(99,102,241,0.40); border-left: 3px solid #6366f1; }
.sig-card.sig-card-time      { background: linear-gradient(135deg, rgba( 56,189,248,0.12) 0%, #1b1d23 55%); border-color: rgba( 56,189,248,0.35); border-left: 3px solid #38bdf8; }
.sig-card.sig-card-surface   { background: linear-gradient(135deg, rgba(161, 98,  7,0.16) 0%, #1b1d23 55%); border-color: rgba(161, 98,  7,0.40); border-left: 3px solid #a16207; }
.sig-card.sig-card-season    { background: linear-gradient(135deg, rgba( 34,197, 94,0.12) 0%, #1b1d23 55%); border-color: rgba( 34,197, 94,0.35); border-left: 3px solid #22c55e; }
.sig-card.sig-card-vehicles  { background: linear-gradient(135deg, rgba( 59,130,246,0.12) 0%, #1b1d23 55%); border-color: rgba( 59,130,246,0.35); border-left: 3px solid #3b82f6; }
.sig-card.sig-card-project   { background: linear-gradient(135deg, rgba(168, 85,247,0.14) 0%, #1b1d23 55%); border-color: rgba(168, 85,247,0.40); border-left: 3px solid #a855f7; }
.sig-card.sig-card-author    h6 i { color: #818cf8; }
.sig-card.sig-card-time      h6 i { color: #38bdf8; }
.sig-card.sig-card-surface   h6 i { color: #d97706; }
.sig-card.sig-card-season    h6 i { color: #4ade80; }
.sig-card.sig-card-vehicles  h6 i { color: #60a5fa; }
.sig-card.sig-card-project   h6 i { color: #c084fc; }

/* Social share icons (right rail) — copied verbatim from
   modules/news/pages/single.php (lines 208-225), renamed
   .news-share-row → .gpx-share-row so we stay namespace-scoped
   and the two pages' rules can't accidentally cross-pollute if
   ever loaded on the same document (e.g. inside an admin shell). */
.gpx-share-row a.btn-icon,
.gpx-share-row button.btn-icon {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  margin-right: 6px; margin-bottom: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: #cbd5e1;
  transition: all 0.15s ease;
  text-decoration: none;
  /* Reset native <button> appearance so it sits exactly like the <a> twins. */
  -webkit-appearance: none; appearance: none;
  padding: 0; cursor: pointer; font: inherit;
}
.gpx-share-row a.btn-icon:hover,
.gpx-share-row button.btn-icon:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.32);
}
.gpx-share-row a.btn-icon i,
.gpx-share-row button.btn-icon i { font-size: 1.25rem; }
/* Brand-coloured icons — official hex per platform. !important wins
   over the inline `color:#e1306c` left on the IG icon for backward
   compat with the old markup. See news/pages/single.php for the
   reference pattern. */
.gpx-share-row a.btn-icon .bxl-linkedin    { color: #0a66c2 !important; }
.gpx-share-row a.btn-icon .bxl-facebook    { color: #1877f2 !important; }
.gpx-share-row a.btn-icon .bxl-twitter     { color: #1da1f2 !important; }
.gpx-share-row button.btn-icon .bxl-instagram { color: #e1306c !important; }
.gpx-share-row a.btn-icon:hover .bxl-linkedin    { color: #2f81d8 !important; }
.gpx-share-row a.btn-icon:hover .bxl-facebook    { color: #4793f5 !important; }
.gpx-share-row a.btn-icon:hover .bxl-twitter     { color: #3fb3f6 !important; }
.gpx-share-row button.btn-icon:hover .bxl-instagram { color: #f04d83 !important; }

/* Stats row inside a sig-card (GPX Contents tile counts). */
.sig-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-around;
  align-items: center;
}
.sig-stat { text-align: center; min-width: 70px; }
.sig-stat-value { font-size: 1.4rem; font-weight: 700; color: #6366f1; }
.sig-stat-label { font-size: 15px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.04em; }

/* Photo grid wraps inline images in the description card. */
.sig-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.sig-photo-grid a {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  border: 1px solid #2e3239;
  cursor: zoom-in;
}
.sig-photo-grid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.25s ease;
}
.sig-photo-grid a:hover img { transform: scale(1.04); }
.sig-photo-cap {
  font-size: 15px; color: rgba(255,255,255,0.5);
  margin-top: 4px; text-align: center;
}

/* Video embed chrome. */
.sig-video-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sig-video-grid .vid-wrap {
  position: relative; aspect-ratio: 16 / 9;
  background: #000; border-radius: 8px; overflow: hidden;
  border: 1px solid #2e3239;
}
.sig-video-grid iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Hero badge strip — small pills matching the loc-page-hero ink. */
.loc-page-hero .gpx-hero-badges { margin-top: 10px; }
.loc-page-hero .gpx-hero-badges .badge {
  font-size: 15px; padding: 5px 10px; font-weight: 600; margin-right: 6px; margin-bottom: 6px;
}
.loc-page-hero h1 { color: #f3f4f6; margin: 0 0 6px 0; font-weight: 700; font-size: 28px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.loc-page-hero h1 i { color: #60a5fa; }
.loc-page-hero .gpx-hero-sub { color: #9ca3af; font-size: 15px; margin: 0; }
.loc-page-hero .gpx-hero-meta { color: rgba(255,255,255,0.55); font-size: 15px; margin-top: 6px; }
.loc-page-hero .gpx-hero-meta i { margin-right: 4px; }
/* Hero CTA column — lay out All GPX + Download + collection chip
   in a single right-aligned row with a 10px gap. Matches the
   side-by-side rhythm now used on the Locations / Events / Services
   single pages. `align-items: center` keeps the chip vertically
   aligned with the buttons even though their heights differ.
   `justify-content: flex-end` replaces the chip's old
   `margin-left: auto` trick, which used to push only the chip to
   the right while leaving the All GPX button stranded at the left
   of an otherwise-empty row. */
.loc-page-hero-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.loc-page-hero-actions .loc-hero-btn { min-width: 180px; justify-content: center; }

/* Author card — name pill matching the sig-track right-rail look. */
.gpx-author-row { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; }
.gpx-author-row a { color: #fff; text-decoration: none; }
.gpx-author-row a:hover { color: #a8b5ff; }
.gpx-author-row i { color: #818cf8; font-size: 1.3rem; }
/* Avatar thumbnail in the Created-by card. Round 36px chip matches
   the visual weight of the previous bx-user-circle icon but pulls
   the actual user portrait via get_avatar_url(). Falls back to
   /assets/img/avatar/default.png server-side when the user has no
   uploaded avatar, so we never need a broken-image state here. */
.gpx-author-row img.gpx-author-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(129,140,248,0.6);
  background: #1b1d23;
  flex-shrink: 0;
}

/* Best-time / vehicle pills inside their cards. */
.gpx-tag-pill {
  display: inline-block; padding: 4px 10px; margin: 0 6px 6px 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  border-radius: 999px; font-size: 15px;
}
.gpx-tag-pill.vehicle { background: rgba(59,130,246,0.18); border-color: rgba(59,130,246,0.40); color: #c5d8ff; }

/* Reviews wrapper — sig-card chrome around the inner renderGpxReviews
   card so the page reads as a single family. Inner .card chrome is
   made transparent so we do not get "card inside card" double frames.
   If the inner card layout ever changes and the override starts
   leaking through, narrow the selector instead of removing the rule. */
.gpx-reviews-shell .card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.gpx-reviews-shell .card-body { padding: 0 !important; }

/* Sticky right rail on lg+ so cards travel with the map/description. */
@media (min-width: 992px) {
  .gpx-side-sticky { position: sticky; top: 96px; }
}

/* Header card thumbnail (the roadbook's cover beside its title). */
.loc-page-hero .ride-hero-row { display: flex; gap: 14px; align-items: flex-start; }
.loc-page-hero .ride-hero-thumb { width: 92px; height: 69px; border-radius: 8px; object-fit: cover; border: 1px solid #2e3239; flex-shrink: 0; display: block; }
.loc-page-hero .gpx-hero-badges .badge.bg-indigo { background: #6366f1; color: #fff; }
.loc-page-hero .gpx-hero-badges a.badge { text-decoration: none; }
@media (max-width: 575.98px) {
  .loc-page-hero .ride-hero-thumb { width: 64px; height: 48px; }
}