/* 2026-06-10: Premium page-title hero/card redesign for all frontend CMS pages.
   Loaded after the frontend template CSS so the repeated page header card has
   stronger spacing, cleaner typography, and better contrast on every page. */

body.mlc-frontend-template .mlc-public-page-shell{
    width:min(1180px, calc(100% - 32px));
    gap:clamp(1.1rem, 2vw, 1.6rem);
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero,
body.mlc-frontend-template .frontend-default-content-wrap .mlc-public-page-shell > .mlc-public-hero,
body.mlc-frontend-template .modern-content-frame .mlc-public-page-shell > .mlc-public-hero{
    --mlc-page-hero-primary:var(--fd-primary, var(--fm-primary, #1d4ed8));
    --mlc-page-hero-accent:var(--fd-accent, var(--fm-accent, #14b8a6));
    isolation:isolate;
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0, 1.36fr) minmax(250px, .64fr);
    align-items:stretch;
    gap:clamp(1rem, 2.2vw, 1.45rem);
    padding:clamp(1.2rem, 3.5vw, 2.35rem) !important;
    border-radius:clamp(1.35rem, 3vw, 2.25rem) !important;
    color:#0f172a !important;
    background:
        radial-gradient(circle at 12% 16%, rgba(255,255,255,.34), transparent 25%),
        radial-gradient(circle at 88% 8%, rgba(125,211,252,.24), transparent 30%),
        radial-gradient(circle at 82% 88%, rgba(45,212,191,.22), transparent 32%),
        linear-gradient(135deg, rgba(12,23,52,.98) 0%, rgba(29,78,216,.95) 48%, rgba(13,148,136,.9) 100%) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:0 30px 90px rgba(15,23,42,.20) !important;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero::before,
body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero::after{
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;
    border-radius:999px;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero::before{
    width:22rem;
    height:22rem;
    right:-8rem;
    top:-10rem;
    background:radial-gradient(circle, rgba(255,255,255,.28), rgba(255,255,255,0) 68%);
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero::after{
    width:17rem;
    height:17rem;
    left:-7rem;
    bottom:-8rem;
    background:radial-gradient(circle, rgba(251,191,36,.24), rgba(251,191,36,0) 70%);
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-bg{
    z-index:0;
    opacity:1;
    background:
        linear-gradient(120deg, rgba(255,255,255,.14), rgba(255,255,255,0) 42%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 1px, transparent 1px 18px) !important;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-copy,
body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-card{
    position:relative;
    z-index:1;
    min-width:0;
    border-radius:clamp(1.1rem, 2.5vw, 1.65rem) !important;
    box-shadow:0 18px 54px rgba(2,6,23,.18) !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:.05rem;
    padding:clamp(1.65rem, 5vw, 3.15rem) !important;
    color:#0f172a !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
    border:1px solid rgba(255,255,255,.72) !important;
    border-left:7px solid var(--mlc-page-hero-accent) !important;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-eyebrow{
    align-self:flex-start;
    max-width:100%;
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    padding:.62rem .9rem !important;
    margin:0 0 .95rem !important;
    border-radius:999px !important;
    color:#075985 !important;
    background:linear-gradient(135deg, rgba(219,234,254,.92), rgba(204,251,241,.88)) !important;
    border:1px solid rgba(14,165,233,.22) !important;
    box-shadow:0 10px 28px rgba(14,165,233,.12) !important;
    font-size:clamp(.68rem, 1.55vw, .82rem) !important;
    font-weight:900 !important;
    line-height:1.28;
    letter-spacing:.07em;
    text-transform:uppercase;
    overflow-wrap:anywhere;
    word-break:normal;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-eyebrow i{
    flex:0 0 auto;
    width:1.65rem;
    height:1.65rem;
    display:inline-grid;
    place-items:center;
    border-radius:999px;
    color:#ffffff !important;
    background:linear-gradient(135deg, var(--mlc-page-hero-primary), var(--mlc-page-hero-accent));
    font-size:.95rem !important;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero h1{
    max-width:860px;
    margin:0 0 .9rem !important;
    color:#08111f !important;
    font-size:clamp(2.05rem, 5.8vw, 4.05rem) !important;
    line-height:1.03 !important;
    font-weight:950 !important;
    letter-spacing:-.05em;
    overflow-wrap:break-word;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero p{
    max-width:780px;
    margin:0 !important;
    color:#334155 !important;
    opacity:1 !important;
    font-size:clamp(1.03rem, 2.25vw, 1.24rem) !important;
    line-height:1.78 !important;
    font-weight:500;
    overflow-wrap:break-word;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.78rem;
    margin-top:1.45rem !important;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-actions .btn{
    min-height:2.95rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px !important;
    font-weight:850;
    letter-spacing:-.01em;
    box-shadow:0 14px 30px rgba(37,99,235,.16);
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-actions .btn-light{
    color:#ffffff !important;
    background:linear-gradient(135deg, var(--mlc-page-hero-primary), var(--mlc-page-hero-accent)) !important;
    border-color:transparent !important;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-actions .btn-outline-light{
    color:#1d4ed8 !important;
    background:#ffffff !important;
    border-color:rgba(37,99,235,.24) !important;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-card{
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:.35rem;
    padding:clamp(1.25rem, 3vw, 1.75rem) !important;
    color:#ffffff !important;
    background:
        linear-gradient(145deg, rgba(8,17,31,.82), rgba(30,64,175,.64)),
        rgba(15,23,42,.72) !important;
    border:1px solid rgba(255,255,255,.20) !important;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-card i{
    width:3.15rem;
    height:3.15rem;
    display:inline-grid;
    place-items:center;
    border-radius:1.05rem;
    margin-bottom:.5rem;
    color:#fbbf24 !important;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.12);
    font-size:1.55rem !important;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-card strong{
    display:block;
    color:#ffffff !important;
    font-size:1.12rem;
    line-height:1.25;
    font-weight:900;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-card span{
    color:rgba(226,232,240,.92) !important;
    line-height:1.58;
}

body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-countdown{
    color:#fef3c7 !important;
    font-weight:900;
}

@media (max-width: 900px){
    body.mlc-frontend-template .mlc-public-page-shell{
        width:min(100% - 20px, 1180px);
        gap:1rem;
    }

    body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero,
    body.mlc-frontend-template .frontend-default-content-wrap .mlc-public-page-shell > .mlc-public-hero,
    body.mlc-frontend-template .modern-content-frame .mlc-public-page-shell > .mlc-public-hero{
        grid-template-columns:1fr;
        padding:clamp(.85rem, 3vw, 1.05rem) !important;
        border-radius:1.35rem !important;
        gap:.85rem;
    }

    body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-copy{
        padding:clamp(1.35rem, 6vw, 2rem) !important;
        border-left-width:5px !important;
        border-radius:1.1rem !important;
    }

    body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero h1{
        font-size:clamp(1.9rem, 8.8vw, 2.8rem) !important;
        line-height:1.08 !important;
        letter-spacing:-.04em;
        margin-bottom:.75rem !important;
    }

    body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero p{
        font-size:1.02rem !important;
        line-height:1.7 !important;
    }

    body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-actions .btn{
        width:100%;
        justify-content:center;
    }

    body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-card{
        padding:1.15rem !important;
        border-radius:1.1rem !important;
    }
}

@media (max-width: 420px){
    body.mlc-frontend-template .mlc-public-page-shell{
        width:min(100% - 16px, 1180px);
    }

    body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero{
        padding:.7rem !important;
    }

    body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-hero-copy{
        padding:1.15rem !important;
    }

    body.mlc-frontend-template .mlc-public-page-shell > .mlc-public-hero .mlc-public-eyebrow{
        font-size:.62rem !important;
        letter-spacing:.045em;
        padding:.52rem .65rem !important;
    }
}