/* Explain: Styles for page sections, including padding, banners, and media frames. */
.section-pad {
    padding-top: clamp(3.5rem, 7vw, 6rem);
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.hero-banner {
    position: relative;
    overflow: hidden;
}

.cta-band {
    background: #B85C32;
    color: #FFFFFF;
}

.cta-band h2 {
    color: #FFFFFF;
}

.cta-band .btn-terracotta {
    background: #FFFFFF;
    color: #B5582A;
    box-shadow: 0 12px 28px rgba(43, 38, 32, 0.18);
}

.cta-band .btn-terracotta:hover {
    background: #F7F1E8;
    color: #9A4720;
}

.media-frame {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 1.75rem;
    background: var(--surface-color);
    box-shadow: var(--shadow-soft);
}

.media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frame-tall {
    height: min(70vh, 520px);
    min-height: 320px;
}