/* ============================================================
   FIKR CMS — Hero slider (home hero replacement). Markup: api/inc/ssr/hero.php + assets/js/hero-slider.js (SWHero.html)
   Uses the site tokens (--indigo-*, --mauve-*, --radius-*, --shadow-*, .container, .btn*, .hero-tag, .eyebrow).
   All positioning is logical (inline-start/end) and flips with <html dir="rtl">.
   Height: min-height only (content never clips); every slide shares ONE grid cell, so the box is as tall as the tallest slide on every
   device and nothing jumps when the slide changes or when the script takes over from the server-rendered markup.
   ============================================================ */

.hs{
  --hs-s:1;--hs-dur:700ms;--hs-maxw:640px;--hs-ratio:4/3;--hs-hdr:116px;--hs-int:6000ms;
  --hs-hd:620px;--hs-ht:560px;--hs-hm:560px;--hs-h:var(--hs-hd);
  --hs-ov-bg:none;--hs-ov-bg-rtl:var(--hs-ov-bg);
  --hs-fg:#fff;--hs-fg2:#d3cdea;
  position:relative;isolation:isolate;overflow:hidden;background:var(--indigo-950,#15123c);color:var(--hs-fg);padding:0;
}
[dir="rtl"] .hs{--hs-s:-1;}
.hs-h-compact{--hs-hd:440px;--hs-ht:400px;--hs-hm:440px;}
.hs-h-standard{--hs-hd:620px;--hs-ht:560px;--hs-hm:580px;}
.hs-h-tall{--hs-hd:780px;--hs-ht:700px;--hs-hm:680px;}
.hs-h-fullscreen{--hs-hd:max(500px,calc(100vh - var(--hs-hdr)));--hs-ht:var(--hs-hd);--hs-hm:var(--hs-hd);}
@supports (height:100svh){.hs-h-fullscreen{--hs-hd:max(500px,calc(100svh - var(--hs-hdr)));}}
.hs-v-top{--hs-va:flex-start;}.hs-v-middle{--hs-va:center;}.hs-v-bottom{--hs-va:flex-end;}

/* ---------- viewport: every slide in the same grid cell ---------- */
.hs-viewport{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-height:var(--hs-hd);touch-action:pan-y;}
@media (max-width:1024px){.hs-viewport{min-height:var(--hs-ht);}}
@media (max-width:640px){.hs-viewport{min-height:var(--hs-hm);}}
.hs-slide{grid-area:1/1;position:relative;display:flex;min-width:0;overflow:hidden;visibility:hidden;opacity:0;z-index:0;
  --hs-fg:#fff;--hs-fg2:#d3cdea;color:var(--hs-fg);}
.hs-slide[data-tone="dark"]{--hs-fg:#1a1730;--hs-fg2:#4a4466;}
.hs-slide.is-active{visibility:visible;opacity:1;z-index:2;}
.hs-slide.is-leaving,.hs-slide.is-leaving-back{visibility:visible;z-index:1;}

/* ---------- layers ---------- */
.hs-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(1100px 500px at 85% -10%,rgba(142,125,120,.28),transparent 60%),linear-gradient(160deg,var(--indigo-950,#15123c) 0%,#100d2c 55%,var(--indigo-900,#1e1a50) 100%);}
.hs-bg picture{display:contents;}
.hs-bg .hs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hs-fx,50%) var(--hs-fy,50%);}
.hs-ov{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--hs-ov-bg);}
[dir="rtl"] .hs-ov{background:var(--hs-ov-bg-rtl,var(--hs-ov-bg));}
.hs-inner{position:relative;z-index:2;flex:1 1 auto;display:flex;align-items:var(--hs-va,center);
  padding-block:clamp(44px,6vw,84px) clamp(76px,8vw,108px);}

/* ---------- text ---------- */
.hs-text{display:flex;flex-direction:column;align-items:flex-start;width:100%;max-width:var(--hs-maxw);text-align:start;min-width:0;}
.hs-slide[data-align="center"] .hs-text{align-items:center;text-align:center;margin-inline:auto;}
.hs-slide[data-align="end"] .hs-text{align-items:flex-end;text-align:end;margin-inline-start:auto;}
.hs-title{font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.14;margin:0 0 16px;color:var(--hs-fg);text-wrap:balance;overflow-wrap:anywhere;}
.hs-desc{color:var(--hs-fg2);font-size:1.06rem;line-height:1.65;margin:0 0 26px;max-width:62ch;}
.hs-body{width:100%;display:flex;flex-direction:column;align-items:inherit;}
.hs-body:only-child{margin-top:0;}
.hs-cta{display:flex;flex-wrap:wrap;gap:12px 14px;margin:0;}
.hs-slide[data-align="center"] .hs-cta{justify-content:center;}
.hs-slide[data-align="end"] .hs-cta{justify-content:flex-end;}
.hs-desc:last-child{margin-bottom:0;}
.hs .hero-tag{display:inline-flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin:0 0 16px;border:1px solid var(--mauve-500,#8e7d78);border-radius:999px;padding:6px 14px;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#e3d9d6;background:rgba(20,18,60,.42);}
.hs .eyebrow{display:inline-flex;width:fit-content;max-width:100%;margin:0 0 14px;background:rgba(255,255,255,.12);color:#e3d9d6;}
html[lang="ar"] .hs .hero-tag,html[lang="ar"] .hs .eyebrow{letter-spacing:0;}
.hs-slide[data-tone="dark"] .hero-tag{color:var(--indigo-800,#282460);background:rgba(40,36,96,.08);border-color:rgba(40,36,96,.35);}
.hs-slide[data-tone="dark"] .eyebrow{background:var(--badge-bg,#ece9f5);color:var(--badge-text,#282460);}
.hs-slide[data-tone="dark"] .btn-outline{border-color:rgba(26,23,48,.4);color:#1a1730;}
.hs-slide[data-tone="dark"] .btn-outline:hover{background:rgba(26,23,48,.07);}
.hs .btn{white-space:normal;text-align:center;}

/* buttons beside the description (wide screens, cover layout); stacked when there is no room */
@media (min-width:900px){
  .hs-bp-beside .hs-slide[data-mode="cover"] .hs-body,.hs-bp-beside .hs-slide[data-nomedia] .hs-body{flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px 32px;}
  .hs-bp-beside .hs-slide[data-mode="cover"] .hs-desc,.hs-bp-beside .hs-slide[data-nomedia] .hs-desc{flex:1 1 300px;margin:0;}
  .hs-bp-beside .hs-slide[data-mode="cover"] .hs-cta,.hs-bp-beside .hs-slide[data-nomedia] .hs-cta{flex:0 0 auto;}
  .hs-bp-beside .hs-slide[data-mode="cover"] .hs-text,.hs-bp-beside .hs-slide[data-nomedia] .hs-text{max-width:max(var(--hs-maxw),min(100%,860px));}
}

/* ---------- card layout: image as a card on one half, text on the other ---------- */
.hs-slide[data-mode="card"] .hs-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:var(--hs-va,center);}
.hs-slide[data-mode="card"] .hs-text{max-width:min(100%,var(--hs-maxw));margin-inline:0;}
.hs-slide[data-mode="card"][data-align="center"] .hs-text{margin-inline:auto;}
.hs-slide[data-mode="card"][data-align="end"] .hs-text{margin-inline-start:auto;}
.hs-slide[data-mode="card"] .hs-text{grid-column:1;grid-row:1;}
.hs-slide[data-mode="card"] .hs-card{grid-column:2;grid-row:1;}
.hs-slide[data-mode="card"][data-card="start"] .hs-text{grid-column:2;}
.hs-slide[data-mode="card"][data-card="start"] .hs-card{grid-column:1;}
.hs-card{margin:0;position:relative;width:100%;aspect-ratio:var(--hs-ratio);border-radius:var(--radius-lg,22px);overflow:hidden;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow-lg,0 24px 60px -20px rgba(21,18,60,.5));}
.hs-card picture{display:contents;}
.hs-card .hs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hs-fx,50%) var(--hs-fy,50%);}
.hs-slide[data-mode="card"][data-nomedia] .hs-inner{display:flex;}
@media (max-width:900px){
  .hs-slide[data-mode="card"] .hs-inner{grid-template-columns:minmax(0,1fr);gap:26px;}
  .hs-slide[data-mode="card"] .hs-text,.hs-slide[data-mode="card"][data-card="start"] .hs-text{grid-column:1;grid-row:2;max-width:100%;}
  .hs-slide[data-mode="card"] .hs-card,.hs-slide[data-mode="card"][data-card="start"] .hs-card{grid-column:1;grid-row:1;max-width:560px;max-height:34vh;margin-inline:auto;}
}

/* ---------- controls ---------- */
.hs-arrow{position:absolute;top:50%;z-index:6;width:46px;height:46px;margin-top:-23px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  color:#fff;background:rgba(21,18,60,.5);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:0;
  transition:background .18s ease,transform .18s ease,opacity .18s ease;}
.hs-arrow svg{width:22px;height:22px;}
.hs-arrow:hover{background:rgba(21,18,60,.78);}
.hs-arrow:active{transform:scale(.94);}
.hs-arrow[disabled]{opacity:.35;cursor:default;}
.hs-prev{inset-inline-start:max(14px,calc((100% - var(--container,1180px)) / 2 - 62px));}
.hs-next{inset-inline-end:max(14px,calc((100% - var(--container,1180px)) / 2 - 62px));}
.hs-prev svg{transform:scaleX(-1);}
[dir="rtl"] .hs-prev svg{transform:none;}
[dir="rtl"] .hs-next svg{transform:scaleX(-1);}
.hs-ctrl{position:absolute;inset-inline:0;bottom:22px;z-index:6;display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none;padding-inline:20px;}
.hs-ctrl>*{pointer-events:auto;}
.hs-dots{display:flex;align-items:center;gap:8px;}
.hs-dot{position:relative;border:0;padding:0;cursor:pointer;background:transparent;height:24px;min-width:24px;display:inline-flex;align-items:center;justify-content:center;}
.hs-dot i{display:block;position:relative;overflow:hidden;height:6px;width:26px;border-radius:99px;background:rgba(255,255,255,.34);transition:width .3s ease,background .3s ease;}
.hs-dot i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;transform:scaleX(0);transform-origin:left center;}
[dir="rtl"] .hs-dot i::after{transform-origin:right center;}
.hs-dot.is-active i{width:46px;}
.hs-dots-progress .hs-dot.is-active i::after{animation:hs-fill var(--hs-int) linear forwards;}
.hs-dots-progress.is-paused:not(.hs-single) .hs-dot.is-active i::after{animation-play-state:paused;}
.hs-dots-progress:not(.hs-js) .hs-dot.is-active i::after,.hs:not(.is-playing) .hs-dot.is-active i::after{animation-play-state:paused;}
.hs-dots-dots .hs-dot i{width:10px;height:10px;border-radius:50%;}
.hs-dots-dots .hs-dot.is-active i{width:10px;background:#fff;}
.hs-dots-dots .hs-dot.is-active i::after{display:none;}
@keyframes hs-fill{to{transform:scaleX(1);}}
.hs-dot:focus-visible,.hs-arrow:focus-visible,.hs-pause:focus-visible,.hs-hint:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 5px rgba(21,18,60,.7);}
.hs-pause{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;background:rgba(21,18,60,.5);border:1px solid rgba(255,255,255,.28);padding:0;}
.hs-pause:hover{background:rgba(21,18,60,.78);}
.hs-pause svg{width:15px;height:15px;}
.hs[data-tone="dark"] .hs-dot i{background:rgba(26,23,48,.28);}
.hs[data-tone="dark"] .hs-dot i::after,.hs[data-tone="dark"].hs-dots-dots .hs-dot.is-active i{background:#1a1730;}
.hs-hint{position:absolute;inset-inline-end:22px;bottom:20px;z-index:6;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(21,18,60,.4);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;animation:hs-bob 2s ease-in-out infinite;}
.hs-hint svg{width:20px;height:20px;}
@keyframes hs-bob{50%{transform:translateY(5px);}}
/* no script: the first slide is simply shown; controls need JS */
.hs:not(.hs-js) .hs-ctrl,.hs:not(.hs-js) .hs-arrow,.hs:not(.hs-js) .hs-hint{display:none;}
.hs-single .hs-ctrl,.hs-single .hs-arrow{display:none;}
@media (min-width:641px) and (max-width:1260px){.hs-has-arrows .hs-inner{padding-inline:72px;}}
.hs[data-autoplay="0"] .hs-dots-progress .hs-dot.is-active i::after{transform:scaleX(1);animation:none;}
@media (max-width:640px){
  .hs-arrow{display:none;}
  .hs-ctrl{bottom:14px;}
  .hs-inner{padding-block:36px 64px;}
  .hs-desc{font-size:1rem;margin-bottom:22px;}
  .hs-hint{display:none;}
}

/* ---------- transitions ---------- */
.hs-tr-fade .hs-slide,.hs-tr-zoom .hs-slide{transition:opacity var(--hs-dur) ease,visibility 0s linear var(--hs-dur);}
.hs-tr-fade .hs-slide.is-active,.hs-tr-zoom .hs-slide.is-active{transition:opacity var(--hs-dur) ease,visibility 0s;}
.hs-tr-zoom .hs-bg,.hs-tr-zoom .hs-card{transform:scale(1.07);transition:transform calc(var(--hs-dur) * 4) cubic-bezier(.2,.6,.2,1);}
.hs-tr-zoom .is-active .hs-bg,.hs-tr-zoom .is-active .hs-card{transform:scale(1);}
.hs-tr-slide .hs-slide{opacity:1;transform:translateX(calc(var(--hs-s) * 100%));transition:transform var(--hs-dur) cubic-bezier(.45,.05,.2,1),visibility 0s linear var(--hs-dur);}
.hs-tr-slide .hs-slide.is-active{transform:none;transition:transform var(--hs-dur) cubic-bezier(.45,.05,.2,1),visibility 0s;}
.hs-tr-slide .hs-slide.is-leaving{transform:translateX(calc(var(--hs-s) * -100%));}
.hs-tr-slide .hs-slide.is-before{transform:translateX(calc(var(--hs-s) * -100%));}
.hs-tr-slide .hs-slide.is-leaving-back{transform:translateX(calc(var(--hs-s) * 100%));}
.hs .hs-slide.no-tr,.hs .hs-slide.no-tr .hs-bg,.hs .hs-slide.no-tr .hs-card{transition:none!important;}
/* text rises in on the slide that is arriving (never on the first paint, so the LCP text is not animated) */
.hs-slide.is-entering .hs-text>*{animation:hs-rise .6s cubic-bezier(.2,.7,.2,1) both;}
.hs-slide.is-entering .hs-text>*:nth-child(2){animation-delay:.07s;}
.hs-slide.is-entering .hs-text>*:nth-child(3){animation-delay:.14s;}
.hs-slide.is-entering .hs-text>*:nth-child(4){animation-delay:.21s;}
@keyframes hs-rise{from{opacity:0;transform:translateY(14px);}}
@media (prefers-reduced-motion:reduce){
  .hs .hs-slide,.hs .hs-bg,.hs .hs-card{transition:none!important;}
  .hs-slide.is-entering .hs-text>*{animation:none!important;}
  .hs-dot i::after{animation:none!important;}
  .hs-hint{animation:none;}
}

/* ---------- dark site theme: the slider is already a dark, self-contained scene; only light-tone slides need a softer edge ---------- */
[data-theme="dark"] .hs-slide[data-tone="dark"] .hs-card{border-color:rgba(26,23,48,.18);}