/* Page-specific tweaks for the KARE reference detail page */

/* Festival list: reduce the default padding so it doesn't feel "too big" */
.reference-detail-page__list--compact{
    list-style-position: outside;
    margin: 0.5rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
}

/* Reduce the oversized section heights on desktop/tablet.
   Base CSS sets very large min-heights (900px / 720px), which stretches the image blocks. */
.reference-detail-page__section--main,
.reference-detail-page__section--reverse{
    min-height: 0;
}

@media (min-width: 768px){
    /* Hero right image: make it larger and let it hang in a bit more. */

    .reference-detail-page__hero-svg svg{
        width: clamp(360px, 34vw, 450px);
        height: auto;
    }

    /* Give the image blocks a predictable, smaller height while keeping them responsive. */
    .reference-detail-page__section--main .reference-detail-page__image--right,
    .reference-detail-page__section--reverse .reference-detail-page__image--left{
        height: clamp(320px, 38vw, 600px);
    }
}

@media (max-width: 767px){
    .reference-detail-page__list--compact{
        text-align: left;
        padding: 0.25rem 0 0.25rem 1.25rem;
    }
}