/* ========================================
   STATE DESCRIPTION SECTIONS
   ======================================== */

.description-section {
    min-height: 150vh;
    position: relative;
    z-index: 20;
    background-color: var(--color-rov-cream-alt);
}

@supports not (scroll-snap-type: y proximity) {
    .description-section {
        min-height: 200vh;
    }
}

@media (max-width: 768px) {
    .description-section {
        min-height: 200vh;
    }
}

/* Dynamic content descendants (from post_content) */
.stateDescription p {
    color: #4a5568;
}

.stateDescription a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.stateDescription img {
    height: 100%;
    max-width: 100%;
    display: block;
}

/* ========================================
   TOC STATE CARD — JS-toggled active state
   ======================================== */

.toc-state-card.active {
    border-color: var(--color-rov-green);
    background: linear-gradient(135deg, #f0fff4 0%, #f7fafc 100%);
}

/* ========================================
   FLYOVER CARD DESCENDANTS (dynamic content)
   ======================================== */

.flyoversContainer > div h2,
.flyoversContainer > div h3 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

.flyoversContainer > div img:first-of-type {
    height: 350px;
    object-fit: cover;
}

.flyoversContainer > div iframe {
    height: auto;
    aspect-ratio: 16/9;
}