/* Purpose:
Extends the original Darrow card into a responsive multi-location explorer without external image licensing.

Responsibilities:
- Apply the layout, responsive behavior, and visual states required by east-lyme-explorer.

Boundaries:
CSS controls presentation only; trust meaning, workflow state, privacy, and persistence remain in maintained source logic.

Key decisions and invariants:
east-lyme-explorer rules stay scoped to their owning surface so visual changes do not leak into unrelated workflows.
*/
.explore-location-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.explore-location-grid .explore-location-card {
    min-width: 0;
    height: 100%;
}

.explore-location-grid .explore-location-content {
    height: 100%;
    align-content: start;
}

.explore-location-grid .explore-location-content h2 {
    font-size: clamp(1.3rem, 2.8vw, 1.72rem);
}

.explore-card-details {
    display: grid;
    gap: 10px;
    margin: 0;
}

.explore-card-details > div {
    display: grid;
    grid-template-columns: minmax(92px, 0.34fr) minmax(0, 1fr);
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--rbo-border);
}

.explore-card-details dt,
.explore-card-details dd {
    margin: 0;
}

.explore-card-details dt {
    color: var(--rbo-gold);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.explore-card-details dd {
    color: var(--rbo-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.explore-card-details .explore-card-caution {
    border-color: rgba(217, 130, 73, 0.45);
}

.explore-location-status-qualified {
    border-color: rgba(217, 130, 73, 0.6);
    background: rgba(70, 35, 26, 0.9);
}

.explore-scene-symbol {
    position: absolute;
    z-index: 1;
    right: 50%;
    bottom: 50%;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(3.5rem, 8vw, 5.6rem);
    line-height: 1;
    text-shadow: 0 10px 34px rgba(0, 0, 0, 0.48);
    transform: translate(50%, 50%);
}

/* Darrow retains Cody's original metadata-free field photograph from explore-image.css. */
.explore-scene-pond .explore-scene-symbol {
    opacity: 0;
}

/* All other visuals are original CSS illustrations stored with the application and available offline. */
.explore-scene-forest,
.explore-scene-forest-ridge,
.explore-scene-coast,
.explore-scene-athletic,
.explore-scene-harbor,
.explore-scene-beach,
.explore-scene-boardwalk,
.explore-scene-green,
.explore-scene-bluff,
.explore-scene-field,
.explore-scene-field-trail,
.explore-scene-pocket,
.explore-scene-accessible-field {
    position: relative;
    background-size: cover;
    background-position: center;
}

.explore-scene-forest {
    background-image: linear-gradient(145deg, #152717, #315539 55%, #b5a15d) !important;
}

.explore-scene-forest-ridge {
    background-image: linear-gradient(160deg, #111a2b, #384c42 58%, #827b5d) !important;
}

.explore-scene-coast {
    background-image: linear-gradient(165deg, #416b86, #83afbd 52%, #d6c79c 53%, #877657) !important;
}

.explore-scene-athletic,
.explore-scene-field {
    background-image: linear-gradient(165deg, #24394a, #447750 53%, #8c7754 54%, #425a3b) !important;
}

.explore-scene-harbor {
    background-image: linear-gradient(160deg, #324f69, #6c9dab 50%, #d1c5a7 51%, #77684f) !important;
}

.explore-scene-beach {
    background-image: linear-gradient(165deg, #5b879b, #9fc4c7 52%, #e0d1a9 53%, #9b815e) !important;
}

.explore-scene-boardwalk {
    background-image: linear-gradient(165deg, #43657e, #84a9b5 54%, #a38a67 55%, #5b4937) !important;
}

.explore-scene-green,
.explore-scene-pocket {
    background-image: linear-gradient(150deg, #22354d, #466c50 58%, #a28c61) !important;
}

.explore-scene-bluff {
    background-image: linear-gradient(165deg, #466f85, #8db2b7 48%, #536a46 49%, #938563) !important;
}

.explore-scene-field-trail {
    background-image: linear-gradient(150deg, #26354b, #47724d 48%, #785f42 49%, #304b34) !important;
}

.explore-scene-accessible-field {
    background-image: linear-gradient(150deg, #263d5b, #4f7f62 58%, #b49a59) !important;
}

@media (max-width: 820px) {
    .explore-location-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .explore-card-details > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .explore-location-grid {
        gap: 18px;
    }
}