/* Logan's Martial Arts - Compact Cinematic Hero Card Overrides
   Applies to the shared Gallery-style hero treatment on:
   - Gallery & Videos
   - Five Animals / Kenpo Animals
   - Contact, when the Contact hero is enabled
   - Academy News

   Loaded after each page-specific stylesheet so these rules intentionally
   override the larger default hero-card sizing. */

.gallery-cinematic-hero,
.animals-cinematic-hero,
.contact-cinematic-hero,
.news-cinematic-hero {
    padding: 1.85rem 0 1.55rem;
}

.gallery-hero-panel,
.animals-hero-panel,
.contact-hero-panel,
.news-hero-panel {
    max-width: 760px;
    padding: .8rem .9rem;
    border-left-width: 2px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
}

.gallery-hero-panel .eyebrow,
.animals-hero-panel .eyebrow,
.contact-hero-panel .eyebrow,
.news-hero-panel .eyebrow {
    margin: 0 0 .3rem;
    font-size: .50rem;
    letter-spacing: .14em;
}

.gallery-hero-panel h1,
.animals-hero-panel h1,
.contact-hero-panel h1,
.news-hero-panel h1 {
    margin: .05rem 0 .34rem;
    font-size: clamp(.9rem, 1.7vw, 1.62rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
}

.gallery-hero-panel .lead,
.animals-hero-panel .lead,
.contact-hero-panel .lead,
.news-hero-panel .lead {
    max-width: 42rem;
    margin-bottom: 0;
    font-size: clamp(.78rem, 1.05vw, .88rem);
    line-height: 1.22;
}

.gallery-hero-panel .button,
.animals-hero-panel .button,
.contact-hero-panel .button,
.news-hero-panel .button {
    padding: .45rem .8rem;
    font-size: .78rem;
}

.gallery-hero-panel p[style*="margin-top"],
.animals-hero-panel p[style*="margin-top"],
.contact-hero-panel p[style*="margin-top"],
.news-hero-panel p[style*="margin-top"] {
    margin-top: .65rem !important;
}

@media (max-width: 780px) {
    .gallery-cinematic-hero,
    .animals-cinematic-hero,
    .contact-cinematic-hero,
    .news-cinematic-hero {
        padding: 1.1rem 0;
    }

    .gallery-hero-panel,
    .animals-hero-panel,
    .contact-hero-panel,
    .news-hero-panel {
        max-width: none;
        padding: .6rem .7rem;
        border-left-width: 2px;
    }

    .gallery-hero-panel h1,
    .animals-hero-panel h1,
    .contact-hero-panel h1,
    .news-hero-panel h1 {
        font-size: clamp(.95rem, 4.2vw, 1.4rem);
    }

    .gallery-hero-panel .lead,
    .animals-hero-panel .lead,
    .contact-hero-panel .lead,
    .news-hero-panel .lead {
        font-size: .8rem;
        line-height: 1.22;
    }
}