/* ============================================================
   GBH — Quarterly Highlight
   Custom styles for Elementor templates
   ============================================================ */


/* ============================================================
   TOKENS
   ============================================================ */

:root {
    --gbh-purple: #772B8D;
    --gbh-purple-card: #9E28BC;
    --gbh-yellow: #F8ED57;

    --gbh-edge: linear-gradient(
        90deg,
        #9918D5 0%,
        #E48AF6 50%,
        #F2B3FF 100%
    );
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.gbh-h2 .elementor-heading-title {
    font-size: clamp(28px, 3.2vw, 42px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.01em !important;
}

.gbh-lede {
    font-size: clamp(16px, 1.6vw, 21px) !important;
    line-height: 1.4 !important;
}

.gbh-lede p:last-child {
    margin-bottom: 0 !important;
}

.gbh-eyebrow .elementor-heading-title {
    font-size: clamp(20px, 2.4vw, 29px) !important;
    line-height: 1.2 !important;
    color: var(--gbh-yellow) !important;
}

.gbh-copy {
    font-size: clamp(15px, 1.5vw, 17px) !important;
    line-height: 1.4 !important;
}

.gbh-copy p:last-child {
    margin-bottom: 0 !important;
}


/* ============================================================
   GRADIENT EDGE
   ============================================================ */

.gbh-edge {
    background-image: var(--gbh-edge) !important;
}


/* ============================================================
   BENEFIT CARD
   ============================================================ */

.gbh-benefit {
    border-radius: 42px !important;
    padding: 6px 8px 0 0 !important;
}

.gbh-benefit-card {
    border-radius: 40px !important;
    background: var(--gbh-purple-card) !important;
    padding: 20px 26px 22px 22px !important;
    height: 100% !important;
}

.gbh-benefit-card .elementor-icon-box-title {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1.5px !important;
}


/* ============================================================
   PROGRAM POSTERS
   ============================================================ */

.gbh-show img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 141 / 208 !important;
    object-fit: cover !important;

    border-radius: 33% / 22.4% !important;

    box-shadow: 12px 12px 14px rgba(0, 0, 0, 0.36) !important;

    transition:
        transform 0.35s cubic-bezier(.2, .7, .3, 1) !important;
}

.gbh-show:hover img {
    transform: translateY(-6px) !important;
}


/* ============================================================
   PHOTO RING
   Main image from the Public Media section

   IMPORTANT:
   The image itself is circular.
   The original source image keeps its own composition,
   and object-fit/object-position control the crop.
   ============================================================ */

.gbh-photo-ring {
    position: relative !important;

    width: min(42vw, 680px) !important;

    aspect-ratio: 1 / 1 !important;

    border-radius: 50% !important;

    padding: 2% !important;

    box-sizing: border-box !important;

    flex-shrink: 0 !important;

    overflow: visible !important;

    background-image: var(--gbh-edge) !important;
}


/* ============================================================
   PHOTO RING — ELEMENTOR IMAGE WIDGET
   ============================================================ */

.gbh-photo-ring .elementor-widget-image {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
}


.gbh-photo-ring .elementor-widget-image .elementor-widget-container {
    width: 100% !important;
    height: 100% !important;
}


/* ============================================================
   PHOTO
   ============================================================ */

.gbh-photo-ring .elementor-widget-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;

    /*
     * Keeps the important right side of the original photo.
     */
    object-position: 100% center !important;

    border-radius: 50% !important;
}


/* ============================================================
   PHOTO RING — LARGE DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .gbh-photo-ring {
        width: min(39vw, 680px) !important;

        margin-left: auto !important;

        /*
         * Slightly moves the circle outside the content area,
         * but not as aggressively as the previous -28%.
         */
        margin-right: -18% !important;

        margin-top: -4% !important;
    }

}


/* ============================================================
   PHOTO RING — TABLET
   ============================================================ */

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

    .gbh-photo-ring {
        width: min(52vw, 520px) !important;

        margin-left: auto !important;

        margin-right: auto !important;

        margin-top: 0 !important;
    }

}


/* ============================================================
   PHOTO RING — MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .gbh-photo-ring {
        width: min(88vw, 420px) !important;

        margin-left: auto !important;

        margin-right: auto !important;

        margin-top: 20px !important;

        padding: 2.5% !important;
    }


    .gbh-photo-ring .elementor-widget-image img {
        object-position: center center !important;
    }

}

/* ============================================================
   ORNAMENTS
   ============================================================ */

.gbh-ornament {
    pointer-events: none !important;
    opacity: 0.5 !important;
}

.gbh-ornament img {
    width: 100% !important;
    height: auto !important;
}


/* ============================================================
   SECTION
   ============================================================ */

.gbh-section {
    overflow: hidden !important;
}


/* ============================================================
   FOCUS STATES
   ============================================================ */

.gbh-section a:focus-visible,
.gbh-section button:focus-visible {
    outline: 3px solid var(--gbh-yellow) !important;
    outline-offset: 3px !important;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .gbh-show img,
    .gbh-show:hover img {
        transition: none !important;
        transform: none !important;
    }

}