/* ================================================================
   LUMARQ HERO — Full Width / No Image Column
================================================================ */

/* ── Keyframes ── */
@keyframes lmq-h-fadeup  { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes lmq-h-fadein  { from{opacity:0} to{opacity:1} }
@keyframes lmq-h-scalein { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes lmq-h-float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes lmq-h-pulse   { 0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.4)} 70%{box-shadow:0 0 0 12px rgba(201,168,76,0)} }
@keyframes lmq-h-lineGrow{ from{width:0} to{width:100%} }

/* ── HERO WRAPPER ── */
section.lmq-hero {
    background: #419D99;
    position: relative;
    overflow: hidden;
    min-height: 560px;
    display: flex;
    align-items: center;
    isolation: isolate;
    z-index: 1;
}

/* Background image support */
section.lmq-hero .lmq-hero-bg-img {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
}
section.lmq-hero .lmq-hero-bg-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 100%);
}

/* Texture overlay */
.lmq-hero .lmq-hero-texture {
    position: absolute; inset: 0;
    opacity: .4; pointer-events: none; z-index: 1;
}
.lmq-hero .lmq-hero-texture svg { width:100%; height:100%; display:block; }

/* Gradient shimmer */
section.lmq-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg,rgba(45,122,118,.6) 0%,rgba(65,157,153,.2) 50%,transparent 100%);
    pointer-events: none; z-index: 2;
}
section.lmq-hero.has-bg-img::after { display: none; }

/* ── INNER — full width centered ── */
.lmq-hero .lmq-hero-inner,
.lmq-hero-full-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 90px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    /* Override any RTL grid inheritance */
    grid-template-columns: unset !important;
}

/* ── Hide image column completely ── */
.lmq-hero .lmq-hero-image { display: none !important; }
.lmq-hero .lmq-hero-content {
    width: 100%;
    max-width: 580px;       /* نصف الشاشة تقريباً */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 0;
    margin: 0;              /* يسار التدفق = يمين الشاشة RTL */
    float: none !important;
    grid-column: unset !important;
}

/* Eyebrow */
.lmq-hero .lmq-hero-eyebrow {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    white-space: nowrap;
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,.75);
    letter-spacing: 2px; text-transform: uppercase;
    animation: lmq-h-fadein .6s .2s both;
    width: auto;
}
.lmq-hero .lmq-eyebrow-line {
    display: inline-block;
    width: 32px; height: 1.5px;
    background: #C9A84C; flex-shrink: 0;
    order: 2; /* يظهر بعد النص — على يسار النص في RTL */
    animation: lmq-h-lineGrow .5s .1s both;
}

/* H1 */
.lmq-hero .lmq-hero-h1 {
    font-size: clamp(40px, 6vw, 76px);
    font-weight: 900; color: #fff;
    line-height: 1.05; letter-spacing: -2px;
    text-align: right;
    animation: lmq-h-fadeup .8s .3s both;
    margin: 0;
}
.lmq-hero .lmq-hero-h1 em {
    color: #C9A84C; font-style: normal; display: block;
}

/* Sub */
.lmq-hero .lmq-hero-sub {
    font-size: 16px; font-weight: 400;
    color: rgba(255,255,255,.78);
    line-height: 1.8; max-width: 480px;
    text-align: right; margin: 0;
    animation: lmq-h-fadeup .7s .45s both;
}

/* Chips */
.lmq-hero .lmq-hero-chips {
    display: flex; gap: 8px; flex-wrap: wrap;
    justify-content: flex-start;
    animation: lmq-h-fadeup .7s .88s both;
}
.lmq-hero .lmq-hero-chip {
    padding: 5px 14px; border-radius: 99px;
    font-size: 10.5px; font-weight: 700;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.88);
}

/* Actions */
.lmq-hero .lmq-hero-actions {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap; justify-content: flex-start;
    animation: lmq-h-fadeup .7s .6s both;
}
.lmq-hero .lmq-hero-btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 32px; background: #C9A84C;
    color: #2B2320; border-radius: 10px;
    font-family: 'Cairo', sans-serif; font-size: 14px;
    font-weight: 900; border: none; text-decoration: none;
    cursor: pointer; transition: transform .2s, box-shadow .2s;
    box-shadow: 0 6px 24px rgba(201,168,76,.4);
    animation: lmq-h-pulse 2.5s 1.8s infinite;
}
.lmq-hero .lmq-hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(201,168,76,.55);
    color: #2B2320;
}
.lmq-hero .lmq-hero-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 15px 26px; background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.3);
    color: #fff; border-radius: 10px;
    font-family: 'Cairo', sans-serif; font-size: 13px;
    font-weight: 700; text-decoration: none; transition: background .2s;
}
.lmq-hero .lmq-hero-btn-ghost:hover { background: rgba(255,255,255,.2); color:#fff; }

/* Stats row */
.lmq-hero-stats-row {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; justify-content: flex-start;
    margin-top: 8px;
    animation: lmq-h-fadeup .7s .75s both;
}
.lmq-hero-stat-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    padding: 8px 16px; border-radius: 99px;
    font-size: 13px; color: rgba(255,255,255,.85);
    white-space: nowrap;
}
.lmq-hero-stat-pill .lmq-hero-stars { display: flex; gap: 2px; }
.lmq-hero-stat-pill strong {
    font-size: 15px; font-weight: 900;
    color: var(--lmq-gold, #C9A84C);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .lmq-hero .lmq-hero-inner,
    .lmq-hero-full-inner {
        padding: 60px 20px;
        max-width: 100%;
        align-items: center;
        text-align: center;
    }
    .lmq-hero .lmq-hero-content {
        align-items: center;
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
    }
    .lmq-hero .lmq-hero-h1,
    .lmq-hero .lmq-hero-sub { text-align: center !important; margin: 0 auto !important; }
    .lmq-hero .lmq-hero-chips,
    .lmq-hero .lmq-hero-actions,
    .lmq-hero-stats-row,
    .lmq-hero .lmq-hero-eyebrow { justify-content: center !important; }
    .lmq-hero .lmq-hero-h1 { font-size: clamp(32px, 8vw, 52px); letter-spacing: -1px; }
    .lmq-hero .lmq-hero-sub { font-size: 14px; }
}
@media (max-width: 480px) {
    .lmq-hero .lmq-hero-inner,
    .lmq-hero-full-inner { padding: 48px 16px; }
    .lmq-hero .lmq-hero-h1 { font-size: 34px; }
    .lmq-hero .lmq-hero-btn-ghost { display: none; }
    .lmq-hero-stats-row { flex-direction: column; gap: 8px; }
}