/* /parks/{slug} — single-park detail page */

.park-detail { background: var(--color-bg); }

/* Breadcrumbs */
.park-detail__crumbs {
    padding: var(--sp-5) var(--sp-5) 0;
    font-size: var(--fs-xs);
    color: var(--color-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.park-detail__crumbs a {
    color: var(--color-forest-800);
    transition: color var(--d-fast) var(--ease-out);
}
.park-detail__crumbs a:hover { color: var(--color-gold-700); }

/* Hero band — dark forest gradient over the hero image */
.park-detail__hero {
    position: relative;
    color: var(--color-ivory);
    background:
        linear-gradient(180deg, rgba(7, 38, 29, 0.55) 0%, rgba(7, 38, 29, 0.78) 75%, rgba(7, 38, 29, 0.92) 100%),
        var(--detail-hero, none) center/cover no-repeat,
        linear-gradient(135deg, var(--color-forest-900), var(--color-forest-700));
    padding: var(--sp-10) 0 var(--sp-12);
    margin-top: var(--sp-3);
}
.park-detail__hero-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-8);
    align-items: end;
    padding-bottom: var(--sp-6);   /* breathing room beneath the hero items */
}
.park-detail__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.8rem;
    background: rgba(200, 163, 91, 0.18);
    border: 1px solid rgba(200, 163, 91, 0.45);
    color: var(--color-gold-500);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-4);
}
.park-detail__pill svg { width: 14px; height: 14px; }
.park-detail__title {
    color: var(--color-ivory);
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0;
}
.park-detail__loc {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--sp-3);
    color: rgba(250, 247, 240, 0.85);
    font-size: var(--fs-base);
}
.park-detail__loc svg { width: 16px; height: 16px; color: var(--color-gold-500); }
.park-detail__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--sp-4);
    background: rgba(250, 247, 240, 0.08);
    border: 1px solid rgba(250, 247, 240, 0.18);
    padding: 0.35rem 0.7rem;
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
}
.park-detail__rating svg { width: 14px; height: 14px; color: var(--color-gold-500); }
.park-detail__rating-val { font-weight: 700; color: var(--color-ivory); }
.park-detail__rating-rev { color: rgba(250, 247, 240, 0.7); font-size: 0.78rem; }
.park-detail__price {
    margin-top: var(--sp-3);
    font-size: var(--fs-base);
    color: rgba(250, 247, 240, 0.85);
}
.park-detail__price strong {
    color: var(--color-gold-500);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-2xl);
}
.park-detail__hero-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 220px;
}
.park-detail__hero-actions .btn { justify-content: center; gap: 0.4rem; }
.park-detail__hero-actions .btn svg { width: 14px; height: 14px; }
.park-detail__fav.is-saved { background: var(--color-gold-500); color: var(--color-forest-900); border-color: var(--color-gold-500); }
.park-detail__fav.is-saved svg { fill: currentColor; }

/* Main grid: content + sidebar */
.park-detail__grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--sp-8);
    padding-top: var(--sp-10);
    padding-bottom: var(--sp-12);
}
.park-detail__main { min-width: 0; }
.park-detail__section { margin-bottom: var(--sp-10); }
.park-detail__section h2 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    color: var(--color-forest-900);
    margin-bottom: var(--sp-4);
}
.park-detail__body p {
    margin: 0 0 1rem;
    line-height: var(--lh-loose);
    color: var(--color-text);
}

/* Gallery grid */
.park-detail__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-3);
}
.park-detail__gallery-item {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--color-line);
}
.park-detail__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--d-slow) var(--ease-out);
}
.park-detail__gallery-item:hover img { transform: scale(1.04); }

/* Amenities + features pills */
.park-detail__amenities,
.park-detail__features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-2) var(--sp-3);
}
.park-detail__amenity,
.park-detail__feature {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-line);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--color-forest-800);
}
.park-detail__amenity svg,
.park-detail__feature svg {
    width: 16px; height: 16px;
    color: var(--color-gold-700);
    flex-shrink: 0;
}

/* Sidebar cards */
.park-detail__side { display: flex; flex-direction: column; gap: var(--sp-5); }
.park-detail__card {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
}
.park-detail__card h3 {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    color: var(--color-forest-900);
    margin: 0 0 var(--sp-3);
}
.park-detail__dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.55rem 1rem;
    font-size: var(--fs-sm);
}
.park-detail__dl dt {
    color: var(--color-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 0.15rem;
}
.park-detail__dl dd { margin: 0; color: var(--color-text); }
.park-detail__dl dd a { color: var(--color-forest-800); }
.park-detail__dl dd a:hover { color: var(--color-gold-700); }

.park-detail__map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--sp-4);
    padding: 0.5rem 0.75rem;
    background: rgba(63, 133, 105, 0.08);
    color: var(--color-forest-800);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: background var(--d-fast) var(--ease-out);
}
.park-detail__map-link:hover { background: rgba(63, 133, 105, 0.16); }
.park-detail__map-link svg { width: 14px; height: 14px; color: var(--color-gold-700); }

/* Responsive */
@media (max-width: 980px) {
    .park-detail__grid { grid-template-columns: 1fr; }
    .park-detail__hero-row { grid-template-columns: 1fr; }
    .park-detail__hero-actions { width: 100%; min-width: 0; }
}
@media (max-width: 540px) {
    .park-detail__hero { padding: var(--sp-8) 0 var(--sp-10); }
    .park-detail__amenities,
    .park-detail__features { grid-template-columns: 1fr 1fr; }
}

/* ── Quick-view: the same detail markup shown as a full page inside
   #park-view-modal, below the site header. It should read like the real
   /parks/{slug} page, so we keep the page layout and only strip the bits that
   don't belong in the popup. Applies only when nested under the modal. ── */
.modal--park-view .park-detail__crumbs { display: none; }        /* redundant with the ✕ close */
.modal--park-view .park-detail__rating-rev { display: none; }    /* score only, e.g. "5.0" — no review count */
/* A clean 8px white breather above the hero when a park opens in the popup. */
.modal--park-view .park-detail__hero { margin-top: 8px; }
/* Keep the hero actions (Visit website / phone / Save) clear of the fixed ✕
   in the top-right corner. */
.modal--park-view .park-detail__hero-actions { margin-top: var(--sp-9); }
@media (max-width: 980px) {
    .modal--park-view .park-detail__hero-actions { margin-top: var(--sp-6); }
}

/* ── "Your trip" banner: shown at the top of the quick-view popup when the
   traveler reached it from the hero search (destination + dates + rig). Gives
   the dates & rig type a visible purpose. Rendered by ParkModal._renderTripBanner. ── */
.pv-trip {
    background: var(--color-forest-900, #0f3d2e);
    color: var(--color-ivory, #faf7f0);
}
.pv-trip__inner {
    max-width: var(--container, 1200px);
    margin: 0 auto;
    padding: var(--sp-4, 0.9rem) var(--sp-6, 1.5rem);
    /* Reserve the top-right corner for the popup's fixed ✕ close button so the
       rig-fit note never tucks underneath it. */
    padding-right: calc(var(--sp-6, 1.5rem) + 60px);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    font-size: var(--fs-sm, 0.9rem);
}
.pv-trip__label {
    font-family: var(--font-display, serif);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--color-gold-500, #c8a35b);
    text-transform: uppercase;
    font-size: var(--fs-xs, 0.75rem);
}
.pv-trip__body { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; opacity: 0.95; }
.pv-trip__dot { opacity: 0.45; }
.pv-trip__seg { white-space: nowrap; }
.pv-trip__fit {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: var(--r-full, 999px);
    font-weight: 600;
    font-size: var(--fs-xs, 0.75rem);
    line-height: 1.3;
}
.pv-trip__fit.is-ok   { background: rgba(200, 163, 91, 0.18); color: var(--color-gold-500, #c8a35b); border: 1px solid rgba(200, 163, 91, 0.35); }
.pv-trip__fit.is-warn { background: rgba(250, 247, 240, 0.10); color: rgba(250, 247, 240, 0.9); border: 1px solid rgba(250, 247, 240, 0.22); }
@media (max-width: 640px) {
    .pv-trip__fit { margin-left: 0; width: 100%; }
}