/* =============================================================================
   MEDIA DETAIL - MASTER TEMPLATE (media-detail.html) - Phase 14
   ============================================================================= 
   PAGE-SPECIFIC layout only, prefixed "medd-" per rules.txt Section 2 -
   distinct from "med-" (the Hub) since this is a different page/
   duplication lifecycle, same pattern as gala- vs. gal- (Phase 13). All
   visual components come from event-components.css / event-discovery-
   components.css unchanged.
   ============================================================================= */

#medd-page {
    background: var(--white);
}

.page-hero.medd-hero {
    min-height: 280px;
    height: auto;
    padding: clamp(40px, 5vw, 64px) 0;
}

.page-hero.medd-hero .page-hero-content h1 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    line-height: 1.25;
    max-width: 900px;
    margin-bottom: 12px;
}

.page-hero.medd-hero .page-hero-content p {
    font-size: clamp(0.92rem, 1.15vw, 1.02rem);
    line-height: 1.6;
    max-width: 800px;
}

.medd-meta-sec {
    padding: 32px 0 20px;
}

.medd-description-sec {
    padding: 28px 0 44px;
}

.medd-downloads-sec,
.medd-related-sec,
.medd-blog-sec {
    padding: 40px 0 48px;
}

.medd-downloads-sec,
.medd-blog-sec {
    background: var(--bg-light);
}

.medd-cta-sec,
.medd-contact-sec {
    padding: 0 0 48px;
}

.medd-downloads-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media screen and (max-width: 768px) {

    .page-hero.medd-hero {
        min-height: 240px;
        padding: 32px 0;
    }

    .medd-meta-sec {
        padding: 24px 0 16px;
    }

    .medd-description-sec {
        padding: 20px 0 32px;
    }

    .medd-downloads-sec,
    .medd-related-sec,
    .medd-blog-sec {
        padding: 28px 0 36px;
    }

    .medd-cta-sec,
    .medd-contact-sec {
        padding: 0 0 36px;
    }

    .medd-downloads-grid {
        grid-template-columns: 1fr;
    }
}