@import url("./home-slider-base.css");

/* First hero translucent panel: +10px height from the previous baseline. */
body#page-site-index .stage .captions > div:first-child {
    height:450px!important;
    min-height:450px!important;
}

/* 2026-09-17: homepage hero course-family tiles.
   64x64 squares on every breakpoint. Desktop/tablet stay one row; mobile uses 4+3. */
body#page-site-index .stage .captions .ctuk-hero-categories {
    width:auto!important;
    max-width:none!important;
    margin:0 auto!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    white-space:nowrap!important;
    overflow:visible!important;
}

body#page-site-index .stage .captions .ctuk-hero-categories a {
    box-sizing:border-box!important;
    flex:0 0 64px!important;
    width:64px!important;
    height:64px!important;
    aspect-ratio:1 / 1!important;
    min-width:64px!important;
    min-height:64px!important;
    padding:5px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:balance!important;
    border:1px solid rgba(255,212,0,.82)!important;
    border-radius:8px!important;
    background:linear-gradient(145deg,rgba(255,212,0,.10),rgba(255,255,255,.025))!important;
    color:#fff!important;
    font-size:8.2px!important;
    line-height:1.12!important;
    font-weight:760!important;
    letter-spacing:0!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 10px rgba(0,0,0,.08)!important;
    transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}

body#page-site-index .stage .captions .ctuk-hero-categories a:hover,
body#page-site-index .stage .captions .ctuk-hero-categories a:focus {
    background:linear-gradient(145deg,rgba(255,212,0,.18),rgba(255,255,255,.045))!important;
    border-color:#ffe45b!important;
    color:#fff!important;
    transform:translateY(-1px)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 7px 15px rgba(0,0,0,.13)!important;
}

@media(max-width:992px){
    body#page-site-index .stage .captions > div:first-child {
        height:440px!important;
        min-height:440px!important;
    }
    body#page-site-index .stage .captions .ctuk-hero-categories {
        gap:6px!important;
    }
    body#page-site-index .stage .captions .ctuk-hero-categories a {
        flex:0 0 64px!important;
        width:64px!important;
        height:64px!important;
        min-width:64px!important;
        min-height:64px!important;
        padding:5px!important;
        font-size:8.2px!important;
        line-height:1.12!important;
        border-radius:8px!important;
    }
}

@media(max-width:768px){
    body#page-site-index .stage .captions > div:first-child {
        height:500px!important;
        min-height:500px!important;
    }

    body#page-site-index .stage .captions .ctuk-hero-categories {
        width:274px!important;
        max-width:274px!important;
        margin:0 auto!important;
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:wrap!important;
        justify-content:flex-start!important;
        align-items:flex-start!important;
        column-gap:0!important;
        row-gap:6px!important;
        white-space:normal!important;
        overflow:visible!important;
        font-size:0!important;
        line-height:0!important;
    }

    body#page-site-index .stage .captions .ctuk-hero-categories a {
        box-sizing:border-box!important;
        flex:0 0 64px!important;
        width:64px!important;
        height:64px!important;
        min-width:64px!important;
        min-height:64px!important;
        margin:0 6px 0 0!important;
        padding:5px!important;
        font-size:8.2px!important;
        line-height:1.12!important;
        border-radius:8px!important;
    }

    body#page-site-index .stage .captions .ctuk-hero-categories a:nth-of-type(4),
    body#page-site-index .stage .captions .ctuk-hero-categories a:last-of-type {
        margin-right:0!important;
    }

    body#page-site-index .stage .captions .ctuk-hero-categories a:nth-of-type(5) {
        margin-left:35px!important;
    }
}