/* ============================================================
   WELCOME HERO — Business Intelliguide Consulting
   Loaded AFTER styles.css, so the overrides below win.

   Structure:

       ┌───────────────────────────────────────────────┐
       │  WELCOME  ·  headline          page header    │
       └───────────────────────────────────────────────┘
       ┌──────────────────┬────────────────────────────┐
       │  intro text      │  video still + language    │
       │                  │  drop-down                 │
       └──────────────────┴────────────────────────────┘
       ┌────────┬────────┬────────┬────────┐
       │ Explore│ Webinar│Consult.│ Contact│   four actions
       └────────┴────────┴────────┴────────┘

   Every box on this page uses --hero-radius, so the corners match.

   Background: assets/images/hero-grid-bg.jpg — the supplied grid
   artwork recoloured to the brand palette (navy #1c2a3a base,
   #509ee3 grid glow).

   Sections:
     1. Hero shell + background
     2. Two-column grid
     3. Text card
     4. Video still + language drop-down
     5. Action row
     6. Responsive
   ============================================================ */

:root {
    /* One radius for every box on this page — header, text card, video
       block and the four action buttons. Change it here only. */
    --hero-radius: 18px;
}

/* ------------------------------------------------------------
   1. HERO SHELL
   ------------------------------------------------------------ */
.hero-section {
    position: relative;
    min-height: auto;
    display: block;
    overflow: hidden;
    padding: clamp(26px, 3.4vw, 52px) 0 clamp(30px, 4vw, 60px);
    background:
        linear-gradient(180deg, rgba(14,24,36,.55) 0%, rgba(14,24,36,.30) 45%, rgba(14,24,36,.80) 100%),
        url("assets/images/hero-grid-bg.jpg") center 40% / cover no-repeat,
        var(--color-dark);
}

/* A soft vignette keeps the corners from competing with the cards. */
.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 85% at 50% 45%, rgba(0,0,0,0) 35%, rgba(9,16,25,.55) 100%);
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ------------------------------------------------------------
   2. TWO-COLUMN GRID
   ------------------------------------------------------------ */
/* Both columns are the same height. The still keeps its true 16:9 shape
   regardless (it is flex: 0 0 auto, not stretched), so squaring the
   columns up can never crop the picture. */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(20px, 2.6vw, 38px);
    align-items: stretch;
}

/* ------------------------------------------------------------
   2b. PAGE HEADER
   Reuses .page-hero from styles.css, so the badge and the headline
   are typographically identical to every other page. Only the frame
   is different: a card on the grid backdrop instead of a full-bleed
   band.
   ------------------------------------------------------------ */
.page-hero.hero-header {
    padding: clamp(22px, 2.4vw, 34px) clamp(24px, 3.2vw, 46px);
    margin-bottom: clamp(18px, 2.2vw, 30px);
    border-radius: var(--hero-radius);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 22px 55px rgba(4,10,18,.45);
    background: linear-gradient(160deg, rgba(28,42,58,.94) 0%, rgba(20,32,46,.90) 100%);
    backdrop-filter: blur(3px);
}
.hero-header .hero-badge { margin-bottom: 14px; }
.hero-header h1 {
    max-width: none;            /* the band is the measure, not 700px */
    margin-bottom: 0;
    font-size: clamp(1.65rem, 3.3vw, 2.7rem);
    line-height: 1.16;
}

/* ------------------------------------------------------------
   3. TEXT CARD
   ------------------------------------------------------------ */
.hero-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(18px, 1.8vw, 28px);
    padding: clamp(30px, 3.4vw, 52px) clamp(26px, 3vw, 44px);
    text-align: center;
    border-radius: var(--hero-radius);
    background: linear-gradient(160deg, rgba(28,42,58,.92) 0%, rgba(20,32,46,.88) 100%);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 22px 55px rgba(4,10,18,.45);
    backdrop-filter: blur(3px);
}

.hero-lead {
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: clamp(1.02rem, 1.15vw, 1.24rem);
    line-height: 1.65;
    text-wrap: pretty;
}
.hero-lead strong { color: #fff; font-weight: 700; }

/* ------------------------------------------------------------
   4. VIDEO STILL + LANGUAGE DROP-DOWN
   ------------------------------------------------------------ */
.hero-video {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--hero-radius);
    overflow: hidden;
    background: #0a121c;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 22px 55px rgba(4,10,18,.5);
}

.hero-video-still {
    position: relative;
    display: block;
    width: 100%;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: #0a121c;
    cursor: pointer;
    overflow: hidden;
}
.hero-video-still img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.22,.9,.3,1);
}
.hero-video:hover .hero-video-still img { transform: scale(1.02); }

/* Play badge.
   Only a soft pool of shade behind the button plus a light foot —
   a full-frame scrim would grey out the slide, which is the one thing
   the still is there to show. */
.hero-video-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    /* Only a foot of shade where the still meets the picker bar. No
       scrim over the middle: the slide is white, so any veil there
       reads as a grey smudge rather than as depth. The button carries
       its own contrast instead. */
    background: linear-gradient(180deg, rgba(9,16,25,0) 68%, rgba(9,16,25,.32) 100%);
}
.hero-video-play span {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 3px solid rgba(255,255,255,.92);
    display: grid;
    place-items: center;
    box-shadow: 0 12px 34px rgba(4,10,18,.5);
    transition: transform .22s ease, background .22s ease;
}
.hero-video-still:hover .hero-video-play span {
    transform: scale(1.07);
    background: var(--color-primary-dark);
}
.hero-video-play span::before {
    content: "";
    width: 0; height: 0;
    margin-left: 5px;
    border-left: 20px solid #fff;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
}

/* --- inline player (replaces the still while playing) --- */
.hero-video-stage {
    display: none;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.hero-video-stage iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.hero-video-missing {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 20px;
    color: #cfdcea;
    text-align: center;
}
.hero-video.is-playing .hero-video-still { display: none; }
.hero-video.is-playing .hero-video-stage { display: block; }

/* language that is currently playing */
.hero-video-list button.is-active {
    background: rgba(80,158,227,.22);
    color: #fff;
}

/* --- the drop-down itself --- */
.hero-video-picker {
    position: relative;
    flex: 0 0 auto;
    margin-top: auto;           /* stays at the foot if the card is stretched */
    border-top: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(#16222f, #101a25);
}

.hero-video-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    color: #e6eef8;
    font-size: .98rem;
    font-weight: 600;
    text-align: left;
}
.hero-video-toggle:hover { background: rgba(255,255,255,.05); }
.hero-video-toggle .hvt-icon {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--color-primary);
    display: grid;
    place-items: center;
}
.hero-video-toggle .hvt-icon::before {
    content: "";
    width: 0; height: 0;
    margin-left: 2px;
    border-left: 9px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.hero-video-toggle .hvt-label { flex: 1 1 auto; }
.hero-video-toggle .hvt-caret {
    flex: 0 0 auto;
    color: #8fa9c4;
    font-size: .7rem;
    transition: transform .2s ease;
}
.hero-video-picker.is-open .hvt-caret { transform: rotate(180deg); }

.hero-video-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 6px;
    border-top: 1px solid rgba(255,255,255,.1);
    background: #0d1620;
}
.hero-video-picker.is-open .hero-video-list { display: block; }

.hero-video-list button {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 7px;
    color: #cfdcea;
    font-size: .94rem;
    text-align: left;
}
.hero-video-list button:hover,
.hero-video-list button:focus-visible {
    background: rgba(80,158,227,.16);
    color: #fff;
    outline: none;
}
.hero-video-list .hvl-flag {
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--color-primary);
    min-width: 22px;
}
.hero-video-list .hvl-name { flex: 1 1 auto; }
.hero-video-list .hvl-len {
    flex: 0 0 auto;
    font-size: .78rem;
    color: #7f95ad;
}

/* ------------------------------------------------------------
   5. ACTION ROW
   ------------------------------------------------------------ */
.hero-actions {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: clamp(20px, 2.4vw, 34px) auto 0;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 20px);
}

.hero-action {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 74px;
    padding: 16px 18px;
    border-radius: var(--hero-radius);
    font-size: clamp(.94rem, 1.05vw, 1.05rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    transition: transform var(--transition), box-shadow var(--transition),
                background var(--transition), border-color var(--transition);
}
.hero-action:hover { transform: translateY(-2px); }

.hero-action-primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 10px 26px rgba(45,125,210,.35);
}
.hero-action-primary:hover { background: var(--color-primary-dark); }

.hero-action-accent {
    background: var(--color-orange);
    color: #23200a;
    box-shadow: 0 10px 26px rgba(218,166,0,.30);
}
.hero-action-accent:hover { background: var(--color-orange-dark); color: #fff; }

.hero-action-ghost {
    background: rgba(255,255,255,.07);
    color: #eaf2fa;
    border: 1px solid rgba(255,255,255,.26);
    backdrop-filter: blur(3px);
}
.hero-action-ghost:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.45);
}

.hero-action-white {
    background: #fff;
    color: var(--color-primary-dark);
    box-shadow: 0 10px 26px rgba(4,10,18,.30);
}
.hero-action-white:hover { background: #eaf3fc; }

/* ------------------------------------------------------------
   6. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-video-still img { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
    .hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .hero-section { padding: 28px 0 32px; }
    .hero-intro { padding: 24px 20px; }
    .hero-video-toggle { padding: 13px 14px; font-size: .92rem; }
    .hero-actions { grid-template-columns: 1fr; }
    .hero-action { min-height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-video-still img,
    .hero-action,
    .hero-video-play span { transition: none; }
    .hero-video:hover .hero-video-still img { transform: none; }
}