/* ============================================================
   Hero Media Grid — admin-managed mosaic
   Tiles: image / uploaded video / youtube. Inline playback.
   ============================================================ */

.hero {
    position: relative;
    background: linear-gradient(135deg, var(--fst-navy) 0%, var(--fst-navy-900) 100%);
    padding: 48px 0 56px;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(201,24,18,.18), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(10,47,107,.4), transparent 40%);
    pointer-events: none;
}
.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1.4fr;
    gap: 44px;
    align-items: center;
}

/* ---- Left: headline ---- */
.hero__copy { color: #fff; }
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 700;
    font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
    color: #fff; background: var(--fst-red);
    padding: 7px 14px; border-radius: 100px; margin-bottom: 20px;
}
.hero__copy h1 {
    color: #fff;
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    line-height: 1.08;
    margin-bottom: 18px;
}
.hero__copy h1 .accent { color: #ff5a4d; }
.hero__copy p {
    color: #c4d0e3; font-size: 1.08rem; max-width: 520px; margin-bottom: 28px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.hero__points { display: flex; gap: 22px; flex-wrap: wrap; }
.hero__point { display: flex; align-items: center; gap: 9px; color: #dbe4f1; font-size: .92rem; font-weight: 500; }
.hero__point i { color: #2ecc71; font-size: 1.05rem; }

/* ---- Right: media mosaic ---- */
.hero__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
    gap: 14px;
}
.hero-tile {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #0a1b3a;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
    cursor: default;
}
/* Feature tile spans 2x2; standard is 1x1 */
.hero-tile--feature { grid-column: span 2; grid-row: span 2; }
.hero-tile--standard { grid-column: span 1; grid-row: span 1; }

.hero-tile img,
.hero-tile video,
.hero-tile iframe {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block; border: 0;
}
.hero-tile__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(2,16,40,.85) 0%, transparent 55%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 16px; opacity: 1; transition: opacity .25s;
    pointer-events: none;
}
.hero-tile__overlay h3 { color: #fff; font-size: 1rem; margin-bottom: 4px; }
.hero-tile__overlay p { color: #cdd8ea; font-size: .82rem; margin: 0; }
.hero-tile__overlay .btn { pointer-events: auto; margin-top: 10px; align-self: flex-start; }

/* Play button for video / youtube tiles */
.hero-tile__play {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(2,16,40,.35);
    cursor: pointer; transition: background .2s;
    z-index: 2;
}
.hero-tile__play:hover { background: rgba(2,16,40,.15); }
.hero-tile__play i {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--fst-red); color: #fff;
    display: grid; place-items: center; font-size: 1.3rem;
    box-shadow: 0 6px 18px rgba(201,24,18,.5);
    transition: transform .2s;
}
.hero-tile__play:hover i { transform: scale(1.1); }
.hero-tile.is-playing .hero-tile__play,
.hero-tile.is-playing .hero-tile__overlay { display: none; }

.hero-tile__type {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    background: rgba(2,16,40,.7); color: #fff;
    font-size: .68rem; font-weight: 700; letter-spacing: .05em;
    padding: 4px 9px; border-radius: 100px;
    display: flex; align-items: center; gap: 5px;
}

/* Fallback single-image hero if no media configured */
.hero__fallback {
    border-radius: 16px; overflow: hidden; min-height: 360px;
    background: url('../img/hero-default.jpg') center/cover no-repeat, #0a1b3a;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .hero__inner { grid-template-columns: 1fr; gap: 32px; }
    .hero__grid { grid-auto-rows: 130px; }
}
@media (max-width: 560px) {
    .hero__grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
    .hero-tile--feature, .hero-tile--standard { grid-column: span 1; grid-row: span 1; }
}