/* =========================================
           Hero Image - Prevent oversized images
           ========================================= */

.tg-hero__img-col {
    width: 100%;
    max-width: 60%;
    min-width: 0;
    box-sizing: border-box;
}

.tg-badge-cont {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.tg-hero__circle {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    box-sizing: border-box;
}


/* Don't allow the image to exceed the viewport */

.tg-hero__img-col img.tg-hero__circle {
    max-width: 60vw;
}


/* Keep the badge inside the image area */

.tg-hero__badge {
    max-width: calc(100% - 30px);
}


/* =========================================
           Desktop
           ========================================= */

@media (min-width: 769px) {

    .tg-hero {
        display: grid;
        grid-template-columns: 40% 60%;
        align-items: center;
        gap: 30px;
    }

        .tg-hero > :first-child {
            min-width: 0;
        }

    .tg-hero__img-col {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .tg-badge-cont {
        width: 100%;
        max-width: 100%;
    }

    /* Always a true circle: square frame, image cropped with cover */
    .tg-badge-cont {
        display: flex;
        justify-content: center;
    }

    .tg-hero__circle {
        width: min(100%, 480px) !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        border-radius: 50%;
    }
}


/* =========================================
           Mobile
           ========================================= */

@media (max-width: 768px) {

    /* Curriculum cards: keep grid tracks within the viewport (no sideways
       overflow) and give the image cards a real height on mobile. */
    .tg-curr {
        overflow-x: hidden;
    }

    .tg-curr-grid1,
    .tg-curr-grid2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .tg-curr-card {
        min-width: 0;
    }

    .tg-curr-card.tg-curr-card--teal,
    .tg-curr-card.tg-curr-card--surf {
        min-height: 258px;
    }

    /* Force the admin-uploaded banner image into a fixed square frame,
       whatever its original dimensions, so the circle never distorts. */
    .tg-hero__img-col {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 8px auto;
        /* Stack the image above the action buttons (both live in this column) */
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .tg-hero__img-col .d-desktop,
    .tg-hero__img-col .tg-hero__actions {
        width: 100%;
    }

    .tg-hero__img-col .tg-hero__actions {
        margin-top: 0;
    }

    .tg-badge-cont {
        width: min(282px, 100%);
        max-width: 100%;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        border-radius: 50%;
    }

    .tg-hero__circle {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        border-radius: 50%;
    }
}



@media (max-width: 768px) {

    .d-mobile {
        width: 100%;
    }

    .tg-hero__actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

        .tg-hero__actions .tg-btn-uae,
        .tg-hero__actions .tg-btn-req {
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }

    .tg-btn-uae {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        white-space: nowrap;
        text-align: center;
    }

        .tg-btn-uae img {
            flex: 0 0 auto;
            width: 22px;
            height: 22px;
        }
}