/* ====================================================================
   HERO.CSS — Complete fresh rebuild, fully isolated
   Namespace: .hero-* classes (no conflicts with other site sections)
   Layout: Desktop split | Mobile single-column stack
   Color scheme: green (--primary) + gold (--secondary) from :root
   ==================================================================== */


/* ──────────────────────────────────────────────────────────────────
   1. HERO WRAPPER
   Sits directly below the 3-layer fixed header (contact + promo + nav)
   ────────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    overflow: hidden;
    margin-top: calc(var(--contact-bar-h) + var(--promo-bar-h) + var(--navbar-h));
    /* Unified with the bars' 0.4s cubic-bezier so the whole header+hero
       motion reads as one continuous animation instead of two out-of-sync
       ones (this was previously 0.3s ease here vs 0.4s cubic-bezier on
       .inner-hero/.policy-hero — a mismatch that read as "off" even when
       each piece individually was smooth). min-height is now transitioned
       too: it depends on the same bar-height variables but previously had
       no transition at all, so it snapped instantly while margin-top
       glided — a visible jump on the homepage specifically. */
    transition: margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, rgba(24,70,60,.97) 0%, rgba(16,46,40,.97) 50%, rgba(10,28,22,.98) 100%);
    padding: 18px 0 24px;
    min-height: calc(100dvh - var(--contact-bar-h) - var(--promo-bar-h) - var(--navbar-h));
    min-height: calc(100vh  - var(--contact-bar-h) - var(--promo-bar-h) - var(--navbar-h));
}

body.promo-hidden .hero {
    margin-top: calc(var(--contact-bar-h) + var(--navbar-h));
    /* min-height intentionally NOT overridden here: home.css applies a
       static cap (min(88vh, 780px)) on top of this rule for the homepage,
       and that cap must win in both scroll states — it never actually
       depends on --promo-bar-h in practice. Pages that don't load
       home.css still get the calc()-based min-height from the base
       .hero rule above, which already transitions via the shared
       min-height transition declared there; only the fully-open value
       needs a fallback since nothing here should ever shrink a cap that
       isn't scroll-dependent. */
}

/* Remove extra homepage noise overlay so the hero matches inner-page hero visuals */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: none;
    pointer-events: none;
    z-index: 1;
}

/* Particle canvas (if particle JS is active) */
#heroParticles {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
}


/* ──────────────────────────────────────────────────────────────────
   2. SPLIT ROW  (desktop: two equal columns)
   ────────────────────────────────────────────────────────────────── */
.hero-split-row {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}


/* ──────────────────────────────────────────────────────────────────
   3. LEFT COLUMN — content
   ────────────────────────────────────────────────────────────────── */
.hero-content-col {
    display: flex;
    flex-direction: column;
    color: #fff;
}


/* ── 3a. Verse badge ── */
.hero-verse-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.32);
    border-radius: 30px;
    padding: 8px 18px 8px 10px;
    margin-bottom: 12px;
    width: fit-content;
    animation: hFadeUp 0.7s ease both;
}

.hero-verse-badge-icon {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.hero-verse-badge-text {
    font-family:var(--font-display);
    font-size: 1rem;
    color: var(--secondary);
    line-height: 1.6;
    direction: rtl;          /* BUG 2 FIX: explicit RTL for Arabic */
    unicode-bidi: embed;
}


/* ── 3b. Hadith translation ── */
.hero-hadith-translation {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    font-style: italic;
    margin: 0 0 20px;
    line-height: 1.55;
    animation: hFadeUp 0.8s ease both;
}


/* ── 3c. H1 ── */
.hero-h1 {
    font-family: 'Poppins';
    font-size: clamp(2rem, 3.2vw, 3.1rem);
    font-weight: 700;
    line-height: 1.0;
    color: #fff;
    margin: 0 0 20px;
    text-shadow: 2px 3px 14px rgba(0,0,0,0.3);
    animation: hFadeUp 0.9s ease both;
    overflow-wrap: break-word;   /* BUG 5 FIX: prevents long words overflowing narrow screens */
    word-break: break-word;
}

.hero-h1 em {
    font-style: normal;
    color: var(--secondary);
}


/* ── 3d. Lead paragraph ── */
.hero-lead {
    font-size: clamp(0.9rem, 1.15vw, 1.05rem);
    color: rgba(255,255,255,0.88);
    line-height: 1.82;
    margin: 0 0 30px;
    animation: hFadeUp 1.05s ease both;
}


/* ── 3e. CTA buttons ── */
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 34px;
    animation: hFadeUp 1.2s ease both;
}

@media (min-width: 992px) {
    .hero-cta-row {
        flex-wrap: nowrap;
    }

    .hero-cta-row .hero-btn-primary,
    .hero-cta-row .hero-btn-wa {
        flex: 0 0 auto;
    }
}

/* Gold primary button */
.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
    color: var(--dark);
    padding: 15px 36px;
    border-radius: 30px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 26px rgba(212,175,55,0.35);
    white-space: nowrap;
}

.hero-btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
    transition: left 0.5s ease;
}

.hero-btn-primary:hover::before { left: 100%; }

.hero-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(212,175,55,0.55);
    color: var(--dark);
}

/* WhatsApp green button */
.hero-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    padding: 15px 36px;
    border-radius: 30px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 26px rgba(37,211,102,0.35);
    white-space: nowrap;
}

.hero-btn-wa:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(37,211,102,0.55);
    color: #fff;
}


/* ── 3f. Stats strip ── */
.hero-stats-row {
    display: flex;
    flex-wrap: wrap;             /* BUG 1 FIX: prevents overflow on 320px screens */
    align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 16px;
    padding: 16px 22px;
    animation: hFadeUp 1.35s ease both;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 0 6px;
}

.hero-stat-num {
    font-family:var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--secondary);
    line-height: 1.1;
    display: block;
    margin-bottom: 4px;
}

.hero-stat-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.35;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hero-stat-sep {
    width: 1px;
    height: 38px;
    background: rgba(212,175,55,0.22);
    flex-shrink: 0;
    margin: 0 4px;
}


/* ──────────────────────────────────────────────────────────────────
   4. RIGHT COLUMN — image / visual
   ────────────────────────────────────────────────────────────────── */
.hero-visual-col {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: -42px; /* Lift the hero visual higher for stronger balance */
}


/* ── 4a. Image wrap ── */
.hero-img-wrap {
    position: relative;
    width: 100%;
    max-width: 500px;
    overflow: visible;           /* BUG 3 FIX: badges use position:absolute outside bounds */
    animation: hFadeRight 1.1s ease both;
    transform: translateY(-12px);
}

/* Gold radial glow behind image */
.hero-img-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(212,175,55,0.2) 0%,
        rgba(24,70,60,0.12) 50%,
        transparent 75%
    );
    z-index: 0;
    animation: hGlowPulse 4s ease-in-out infinite;
}

/* Student image */
.hero-img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    max-height: 540px;
    object-fit: contain;
    filter: drop-shadow(0 24px 44px rgba(0,0,0,0.35));
    display: block;
    margin: 0 auto;
}


/* ── 4b. Floating badges ── */
.hero-fl-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    padding: 10px 16px;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

.hero-fl-badge strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    font-family: 'Poppins', sans-serif;
}

.hero-fl-badge span {
    display: block;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.25;
}

.hero-fl-badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Badge positions */
.hero-fl-students {
    top: 12%;
    left: -4%;
    animation: hBadgeFloat 5s ease-in-out infinite;
}

.hero-fl-rating {
    bottom: 16%;
    right: -4%;
    animation: hBadgeFloat 6s ease-in-out infinite 1.5s;
}


/* ──────────────────────────────────────────────────────────────────
   5. KEYFRAMES
   ────────────────────────────────────────────────────────────────── */
@keyframes hFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes hFadeRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes hGlowPulse {
    0%, 100% { transform: translate(-50%,-50%) scale(1);    opacity: 1; }
    50%       { transform: translate(-50%,-50%) scale(1.18); opacity: 0.65; }
}

@keyframes hBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}


/* ──────────────────────────────────────────────────────────────────
   6. RESPONSIVE BREAKPOINTS
   Mobile-first cascade: desktop → tablet → mobile → small → tiny
   ────────────────────────────────────────────────────────────────── */

/* ── Tablet (≤ 992px) — collapse to single column ── */
@media (max-width: 992px) {
    .hero {
        padding: 16px 0 22px;
        min-height: auto;
    }

    .hero-split-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Stack order: content first, image second */
    .hero-content-col { order: 1; }
    .hero-visual-col  { order: 2; margin-top: 0; } /* Reset margin on tablet/mobile */
    .hero-img-wrap { transform: translateY(0); }

    /* Center content on tablet */
    .hero-content-col {
        align-items: center;
        text-align: center;
    }

    .hero-verse-badge { margin: 0 auto 12px; }

    .hero-hadith-translation { text-align: center; }

    .hero-cta-row { justify-content: center; }

    .hero-stats-row { max-width: 480px; width: 100%; }

    .hero-img-wrap { max-width: 380px; }

    .hero-fl-students { left: 0; }
    .hero-fl-rating   { right: 0; }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
    .hero {
        padding: 28px 0 36px;
    }

    .hero-split-row { gap: 32px; }

    .hero-h1 {
        font-size: clamp(1.85rem, 6vw, 2.4rem);
    }

    .hero-lead {
        font-size: 0.95rem;
    }

    .hero-stats-row {
        padding: 14px 16px;
    }

    .hero-stat-num { font-size: 1.3rem; }

    .hero-img-wrap { max-width: 300px; }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .hero {
        padding: 24px 0 32px;
    }

    .hero-split-row { gap: 28px; }

    .hero-h1 {
        font-size: clamp(1.7rem, 7vw, 2.1rem);
        margin-bottom: 14px;
    }

    .hero-lead {
        font-size: 0.9rem;
        margin-bottom: 22px;
    }

    .hero-verse-badge {
        padding: 6px 14px 6px 8px;
        gap: 8px;
    }

    .hero-verse-badge-text { font-size: 0.9rem; }

    .hero-hadith-translation { font-size: 0.78rem; margin-bottom: 16px; }

    /* Stack CTAs vertically on small screens */
    .hero-cta-row {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .hero-btn-primary,
    .hero-btn-wa {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        font-size: 0.96rem;
    }

    .hero-stats-row {
        padding: 12px 12px;
        border-radius: 12px;
    }

    .hero-stat-num  { font-size: 1.15rem; }
    .hero-stat-label { font-size: 0.64rem; }

    .hero-fl-badge {
        padding: 8px 12px;
        gap: 8px;
        border-radius: 11px;
    }

    .hero-fl-badge strong { font-size: 0.82rem; }
    .hero-fl-badge span   { font-size: 0.64rem; }

    .hero-fl-students { top: 5%;  left: -2%; }
    .hero-fl-rating   { bottom: 8%; right: -2%; }

    .hero-img-wrap { max-width: 260px; }
}

/* ── Very small screens (≤ 380px) ── */
@media (max-width: 380px) {
    .hero { padding: 10px 0 18px; }

    .hero-h1 { font-size: 1.55rem; }

    .hero-lead { font-size: 0.86rem; }

    /* Hide floating badges on tiny screens — they'd overlap */
    .hero-fl-badge { display: none; }

    .hero-btn-primary,
    .hero-btn-wa { padding: 13px 20px; font-size: 0.9rem; }

    /* BUG 4+7 FIX: collapse stats to 2-col grid, hide separators */
    .hero-stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 12px 10px;
        text-align: center;
    }

    .hero-stat-sep { display: none; }   /* separators don't make sense in grid layout */

    .hero-stat { padding: 0; }

    .hero-stat-num  { font-size: 1.1rem; }
    .hero-stat-label { font-size: 0.62rem; }
}

/* ── Hero ayah (Al-Qamar 54:17) — sits quietly under the CTAs ── */
.hero-ayah {
    margin: 26px 0 0;
    padding: 4px 0 4px 16px;
    border-left: 2px solid rgba(212,175,55,0.55);
    max-width: 520px;
    animation: hFadeUp 1s ease both;
}
.hero-ayah-quote { margin: 0; padding: 0; border: 0; }
.hero-ayah-ar {
    font-family:var(--font-display);
    font-size: 1.35rem;
    line-height: 1.9;
    color: var(--secondary);
    margin: 0 0 4px;
    direction: rtl;
    unicode-bidi: embed;
    text-align: left;
}
.hero-ayah-en {
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.6;
    color: rgba(255,255,255,0.72);
    margin: 0 0 6px;
}
.hero-ayah-ref {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(240,199,71,0.9);
}
@media (max-width: 991px) {
    .hero-ayah { margin: 22px auto 0; padding: 14px 16px 0; border-left: 0; border-top: 1px solid rgba(212,175,55,0.4); text-align: center; }
    .hero-ayah-ar { text-align: center; font-size: 1.25rem; }
}
@media (max-width: 420px) {
    .hero-ayah-ar { font-size: 1.1rem; }
}

/* ── Lift the hero image slightly (two-column layout only) ──
   Uses `top` (not transform): the entrance animation's transform would override it. */
@media (min-width: 993px) {
    .hero-img-wrap { top: -36px; }
}
@media (min-width: 993px) and (max-width: 1199px) {
    .hero-img-wrap { top: -48px; }
}