/* ----------------------------------------------------------------
   Events / RV Friendly portal — portal-specific styles only.
   Shared components live in ClubConnect.API.CMS/wwwroot/css/main.css.
   Always reach for a shared class from main.css first; only override
   the differing properties here via context/descendant selectors.
   ---------------------------------------------------------------- */

body {
    padding-top: 0;
    overflow: visible;
}

/* ----------------------------------------------------------------
   Page section (white full-width section wrapping a .container)
   The shared .footer (main.css) pulls its mountain backdrop up over the
   preceding content (a decal below 1250px; a -32rem negative margin at
   >=1250px). Reserve enough bottom space here so the mountain rises into
   empty space below the content instead of overlapping it.
   Override in this portal CSS, never main.css.
   ---------------------------------------------------------------- */
.page-section {
    background: var(--color-white);
    padding: 3rem 0;
    padding-bottom: 8rem;
}

@media (min-width: 1250px) {
    .page-section {
        padding-bottom: 17rem;
    }
}

/* ----------------------------------------------------------------
   Page title
   ---------------------------------------------------------------- */
.page-title {
    color: var(--color-midnight);
    margin-bottom: 1rem;
}

/* ----------------------------------------------------------------
   GPT ad slot container
   ---------------------------------------------------------------- */
.div-gpt-ad {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

/* ----------------------------------------------------------------
   Featured cards = shared .news-card (main.css) + a full-bleed image header.
   Title / description / button reuse the shared .news-card__* and .btn
   classes; only the image header is portal-specific (no shared equivalent).
   Context selectors override .news-card padding so the image bleeds to the
   card edges, then .feature-event__body re-adds the padding for the text.
   ---------------------------------------------------------------- */
.feature-event {
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.feature-event__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

    .feature-event__image-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.feature-event__image-state {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--color-midnight);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.feature-event__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    flex: 1;
    min-height: 280px;
    max-height: 280px;
}

    .feature-event__body .btn {
        align-self: flex-start;
        margin-top: auto;
    }

.feature-event__date {
    color: var(--color-ochre-600);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

.feature-event .news-card__description {
    flex: 1 1 auto;
    overflow: hidden;
    margin: 0;
}

/* ----------------------------------------------------------------
   Event / RV Friendly detail pages (ViewEvent, ViewRVFriendly).
   Sits inside the shared .detail-layout (main.css) grid: a main
   column (hero + description + photos + nearby towns) and a sidebar
   (map + contact info + ad). Only portal-specific pieces live here;
   .gallery comes from main.css. The sidebar mirrors the Market detail
   sidebar look (see .event-detail__info-block / __sidebar-heading below).
   ---------------------------------------------------------------- */
.event-detail__hero {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    margin-bottom: 1.5rem;
}

    .event-detail__hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.event-detail__description {
    line-height: 1.6;
    margin-bottom: 2rem;
}

.event-detail__map {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

/* Sidebar info blocks — mirror the Market detail sidebar (.market-detail__info-block
   / .market-detail__sidebar-heading): evenly spaced groups with midnight uppercase
   headings, instead of the lighter shared .sidebar-label. */
.event-detail__info-block {
    margin-bottom: 1.25rem;
}

    .event-detail__info-block p {
        margin: 0;
    }

.event-detail__sidebar-heading {
    font-family: var(--font-sans);
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-midnight);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* Nearby RV Friendly towns (ViewEvent only) */
.event-detail__nearby-item {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-gray-100);
}

.event-detail__nearby-name {
    color: var(--color-midnight);
    margin-bottom: 0.5rem;
}

.event-detail__nearby-line {
    margin: 0 0 0.25rem;
}

.event-detail__nearby-distance {
    font-weight: 600;
    margin: 0.5rem 0;
}

/* Collapsible detail sections (Location Images, Nearby Towns). Each block is its
   own shared .accordion, so the single-open accordion JS from <shell-script />
   (main.js initAccordion) degrades to an independent toggle — no portal JS. These
   selectors strip the shared FAQ chrome (dark fill, centred max-width, heavy
   padding) down to the inline gray-underline heading the detail column needs. */
.event-detail__accordion {
    padding: 0;
    margin-bottom: 1.5rem;
}

    .event-detail__accordion .accordion__container {
        max-width: none;
        margin-inline: 0;
    }

    .event-detail__accordion .accordion__list {
        border-radius: 0;
        overflow: visible;
    }

    .event-detail__accordion .accordion__item {
        background-color: transparent;
        border-top: none;
    }

    .event-detail__accordion .accordion__question {
        padding: 0 0 0.5rem;
        color: var(--color-midnight);
        text-transform: uppercase;
        border-bottom: 2px solid var(--color-gray-100);
    }

    .event-detail__accordion .accordion__icon {
        color: var(--color-midnight);
    }

    /* Shared --open caps at 1000px (fine for FAQ answers); a long nearby-towns
       list or tall gallery needs more headroom while still animating from 0. */
    .event-detail__accordion .accordion__answer--open {
        max-height: 500vh;
    }

    .event-detail__accordion .accordion__answer-inner {
        padding: 1.25rem 0 0;
        opacity: 1;
        color: inherit;
        font-size: inherit;
    }

/* ----------------------------------------------------------------
   Maps (EventsMap, RVFriendlyMap) — full-bleed interactive Mapbox.
   The map height previously lived in the legacy SCSS that _Layout no
   longer loads, so it must be defined here or the container collapses.
   ---------------------------------------------------------------- */
.event-map__wrapper {
    position: relative;
    z-index: 1;
}

.event-map {
    width: 100%;
    height: 80vh;
}

/* The shared footer pulls its mountain backdrop up (−32rem at ≥1250px) over the
   preceding content. On a full-bleed map that backdrop overlaps the map and its
   controls, so push it behind the map (z-index) instead of reserving space for it.
   Scoped via :has() to the two map pages only — other pages keep the backdrop. */
@media (min-width: 1250px) {
    body:has(.event-map__wrapper) .footer::before {
        z-index: -1;
    }
}

/* ----------------------------------------------------------------
   Map popup (Mapbox marker click) — portal-specific compact card.
   No shared counterpart in main.css. Zero out Mapbox's default content
   padding so the image bleeds to the popup edge; the body re-adds it.
   Selectors need the extra .mapboxgl-popup ancestor for specificity:
   mapbox-gl.css loads after this file (PageHeaders section) and would
   otherwise win with its own equal-specificity .mapboxgl-popup-content
   and .mapboxgl-popup-close-button rules.
   ---------------------------------------------------------------- */
.mapboxgl-popup .mapboxgl-popup-content {
    padding: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.mapboxgl-popup .mapboxgl-popup-close-button {
    top: 0.25rem;
    right: 0.5rem;
    padding: 0.25rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-midnight-faded);
    opacity: 0.6;
    border-radius: 0;
}

    .mapboxgl-popup .mapboxgl-popup-close-button:hover {
        background: none;
        opacity: 1;
    }

/* Explicit width, not max-width: the card sits in Mapbox's shrink-wrapped
   .mapboxgl-popup-content, and Firefox excludes the image column's
   flex-basis from the intrinsic width (its only content, the img, is
   absolutely positioned) — the wrapper then shrink-wraps too narrow and
   overflow: hidden clips the body. */
.map-popup {
    display: flex;
    width: 450px;
}

/* The img is absolutely positioned so its intrinsic size cannot inflate the
   row height. min-height sets the card height: slightly taller than the
   column is wide, so two-line-title cards still have visible slack above the
   button — that slack is what margin-top: auto needs for the button to read
   as anchored to the bottom. */
.map-popup__image {
    flex: 0 0 220px;
    min-height: 220px;
    align-self: stretch;
    position: relative;
    background: var(--color-gray-050);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    overflow: hidden;
}

    .map-popup__image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.map-popup__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
}

.map-popup__title {
    margin: 0;
    padding-right: 1.25rem;
    font-size: 1rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

    .map-popup__title a {
        color: var(--color-midnight);
        text-decoration: none;
    }

        .map-popup__title a:hover {
            text-decoration: underline;
        }

.map-popup__type {
    margin: 0;
    color: var(--color-ochre-600);
    font-weight: 600;
    font-size: 0.875rem;
}

.map-popup__location {
    margin: 0 0 0.5rem;
    color: var(--color-midnight-faded);
    font-size: 0.875rem;
}

.map-popup__link {
    align-self: center;
    margin-top: auto;
}

/* Marker hover tooltip — small label shown on marker mouseenter, separate from
   the click popup above. Replaces the legacy Bootstrap text-primary/<small>.
   Shares .mapboxgl-popup-content (padding zeroed above), so it re-adds its own. */
.map-tooltip {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-width: 240px;
    padding: 0.625rem 0.875rem;
}

.map-tooltip__title {
    color: var(--color-midnight);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
}

.map-tooltip__hint {
    color: var(--color-midnight-faded);
    font-size: 0.8125rem;
}

/* ----------------------------------------------------------------
   Error page — self-contained (no shell), centred message.
   ---------------------------------------------------------------- */
.error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 0;
}

    .error-page p {
        margin-bottom: 1rem;
    }