/* ============================================================
   home-slider.css — Slider της ΑΡΧΙΚΗΣ (homepage_banner_fdn, kind=2).

   Προέρχεται αυτούσιο από τα slider-demos (fb-1-swipe / fb-1-swipe-full).
   ΟΛΟΙ οι κανόνες είναι scoped κάτω από .hp-slider ώστε τα global resets
   (*, html, body) και οι γενικές κλάσεις (.btn, .eyebrow …) να ΜΗΝ
   «διαρρέουν» στο υπόλοιπο site (π.χ. το footer έχει επίσης .btn).

   Variants:
     .hp-slider--split  -> Κείμενο + Slider   (slider_kind = 1)
     .hp-slider--full   -> μόνο Slider         (slider_kind = 2)

   Σημ.: το full demo ήταν position:fixed;inset:0 (standalone fullscreen).
   Εδώ μπαίνει σαν κανονικό section (height:100vh) για να συνυπάρχει με
   τα υπόλοιπα banners της σελίδας.
   ============================================================ */
.hp-slider{
  --ink:#242833;--ink-soft:#3C5754;--teal:#12B5AC;--teal-deep:#0B807A;
  --paper:#F5F8F7;--white:#fff;--coral:#FF6A4D;--line:rgba(14,43,40,.12);
  font-family:'TT Norms Pro',system-ui,sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.hp-slider *{margin:0;padding:0;box-sizing:border-box}

/* ---- SPLIT: μισό κείμενο / μισό slider ---- */
.hp-slider--split{display:grid;grid-template-columns:1.02fr 1fr;min-height:100vh;min-height:100svh;background:#fff}
.hp-slider--split .hp-sl-text{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,96px);z-index:2}
.hp-slider .eyebrow{display:inline-flex;align-items:center;gap:10px;width:max-content;background:var(--white);border:none;border-radius:999px;margin-left:-2px;padding:9px 16px 9px 0;font-weight:600;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);opacity:0;transform:translateY(14px);animation:hpSlUp .7s ease .1s forwards}
.hp-slider .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,106,77,.18)}
.hp-slider .hp-sl-text h1{font-weight:800;font-size:clamp(42px,5.4vw,84px);line-height:.98;letter-spacing:-.03em;margin:22px 0 0}
.hp-slider .hp-sl-text h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hp-slider .hp-sl-text h1 .ln i{display:block;font-style:normal;transform:translateY(112%);animation:hpSlRise .95s cubic-bezier(.22,1,.36,1) forwards}
.hp-slider .hp-sl-text h1 .ln:nth-child(1) i{animation-delay:.18s}
.hp-slider .hp-sl-text h1 .ln:nth-child(2) i{animation-delay:.30s}
.hp-slider .hp-sl-text h1 .ln:nth-child(3) i{animation-delay:.42s}
.hp-slider .hp-sl-text h1 .ln:nth-child(4) i{animation-delay:.54s}
.hp-slider .hp-sl-text h1 .ln:nth-child(5) i{animation-delay:.66s}
.hp-slider .hp-sl-text h1 .ln:nth-child(6) i{animation-delay:.78s}
/* kind=2 -> πράσινα (teal gradient)· kind=1 -> κανονικά (ink) */
.hp-slider .hp-sl-text h1 .ln-teal i{background:linear-gradient(100deg,var(--teal),var(--teal-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hp-slider .sub{max-width:520px;margin:26px 0 0;font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:var(--ink-soft);opacity:0;transform:translateY(16px);animation:hpSlUp .8s ease .6s forwards}
.hp-slider .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;opacity:0;transform:translateY(16px);animation:hpSlUp .8s ease .75s forwards}
.hp-slider .btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:16px 28px;border-radius:999px;text-decoration:none;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s,color .25s,border-color .25s;border:1.5px solid transparent}
.hp-slider .btn .arr{transition:transform .25s}
.hp-slider .btn-primary{background:var(--teal-deep);color:#fff;box-shadow:0 14px 30px -14px rgba(18,181,172,.8)}  /* teal-deep: WCAG AA (λευκό/teal = 2.55, ανεπαρκές) */
.hp-slider .btn-primary:hover{background:#075E59;transform:translateY(-3px)}
.hp-slider .btn-primary:hover .arr{transform:translateX(5px)}
.hp-slider .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.hp-slider .btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep);background:var(--white);transform:translateY(-3px)}
@keyframes hpSlUp{to{opacity:1;transform:none}}
@keyframes hpSlRise{to{transform:translateY(0)}}

/* ---- STAGE (κοινό για split & full) ---- */
.hp-slider .hp-sl-stage{position:relative;overflow:hidden;background:#08201d}
.hp-slider--full{display:block;background:#08201d}
.hp-slider--full .hp-sl-stage{height:100vh;height:100svh}
/* LCP poster: server-rendered hero του 1ου slide, κάτω από τον track (τον σκεπάζει το slide 0) */
.hp-slider .hp-hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hp-slider .fb-track{position:relative;z-index:1;display:flex;height:100%;will-change:transform;transition:transform .6s cubic-bezier(.22,1,.36,1);cursor:grab}
.hp-slider .fb-track.drag{transition:none;cursor:grabbing}
.hp-slider .fb-slide{flex:0 0 100%;height:100%;position:relative;overflow:hidden;color:#fff}
.hp-slider .fb-slide .bg{position:absolute;inset:0;transform:scale(1.06);transition:transform 7s linear;background-size:cover;background-position:center;background-repeat:no-repeat}
.hp-slider .fb-slide video.bg{width:100%;height:100%;object-fit:cover;display:block}
.hp-slider .fb-slide.on .bg{transform:scale(1.16)}
.hp-slider .fb-slide .fb-link{position:absolute;inset:0;z-index:2}   /* πάνω από media/veil, κάτω από dots/badge (z-index:3) */
.hp-slider .fb-slide .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,32,29,0) 40%,rgba(8,32,29,.7))}
.hp-slider .fb-slide .mono{position:absolute;top:38px;left:clamp(30px,4vw,56px);font-weight:800;font-size:clamp(90px,11vw,150px);line-height:1;letter-spacing:-.05em;color:rgba(255,255,255,.15)}
.hp-slider .fb-cap{position:absolute;left:clamp(30px,4vw,56px);right:clamp(30px,4vw,56px);bottom:96px}
.hp-slider .fb-cap .tag{display:inline-block;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(6px);padding:6px 13px;border-radius:999px;margin-bottom:14px}
.hp-slider .fb-cap .fb-cap-h{font-weight:800;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.02em}
.hp-slider .fb-badge{position:absolute;top:34px;right:34px;background:rgba(255,255,255,.92);color:var(--ink);border-radius:14px;padding:12px 16px;text-align:right;backdrop-filter:blur(8px);z-index:3}
.hp-slider .fb-badge b{display:block;font-weight:800;font-size:20px;letter-spacing:-.02em}
.hp-slider .fb-badge span{font-size:11px;color:var(--ink-soft)}
.hp-slider .fb-dots{position:absolute;left:clamp(30px,4vw,56px);bottom:36px;display:flex;gap:2px;z-index:3}
/* target ≥24×24 (WCAG) — το ορατό dot μένει μικρό μέσω ::before */
.hp-slider .fb-dots button{width:24px;height:24px;display:grid;place-items:center;border:none;background:transparent;cursor:pointer;padding:0}
.hp-slider .fb-dots button::before{content:"";width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.45);transition:.3s}
.hp-slider .fb-dots button.on::before{width:28px;background:#fff;border-radius:6px}
.hp-slider .ap-prog{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.28);z-index:6}
.hp-slider .ap-prog i{display:block;height:100%;width:0;background:var(--teal)}
/* ΕΝΑ slide -> στατικό: χωρίς dots, progress bar ή grab cursor */
.hp-slider--single .fb-dots,.hp-slider--single .ap-prog{display:none}
.hp-slider--single .fb-track{cursor:default}

/* full-bleed: μεγαλύτερα μεγέθη (όπως στο fb-1-swipe-full) */
.hp-slider--full .fb-slide .mono{top:clamp(30px,5vw,60px);left:clamp(30px,5vw,72px);font-size:clamp(90px,13vw,200px)}
.hp-slider--full .fb-cap{left:clamp(30px,5vw,72px);right:clamp(30px,5vw,72px);bottom:clamp(96px,12vh,140px)}
.hp-slider--full .fb-cap .fb-cap-h{font-size:clamp(30px,5vw,72px)}
.hp-slider--full .fb-badge{top:clamp(24px,3vw,40px);right:clamp(24px,3vw,40px)}
.hp-slider--full .fb-dots{left:clamp(30px,5vw,72px)}

/* responsive (split): slider πάνω, κείμενο κάτω — breakpoint 991 (βασικό του site) */
@media (max-width:991px){
  .hp-slider--split{grid-template-columns:1fr}
  .hp-slider--split .hp-sl-text{padding:96px 24px 40px;text-align:center;align-items:center}
  .hp-slider--split .eyebrow,.hp-slider--split .cta{justify-content:center}
  .hp-slider--split .hp-sl-stage{height:66vh;order:-1}
}

/* ============================================================
   MOBILE VIDEO FIT — .hp-slider--video (η κλάση μπαίνει από τη banners.php
   όταν έστω ΕΝΑ slide είναι video).

   Πρόβλημα: σε κινητό το stage είναι 100svh (π.χ. 390×844) και ένα 16:9 video
   με object-fit:cover κλιμακώνεται στο ΥΨΟΣ -> αποδίδεται ~1500px πλατύ, άρα
   φαίνεται μόλις το ~26% του κάδρου· όλα τα υπόλοιπα κόβονται δεξιά/αριστερά.

   Λύση: το stage παίρνει ύψος από την ΑΝΑΛΟΓΙΑ του video (aspect-ratio) και το
   media γίνεται contain. Θυσιάζουμε ύψος, κερδίζουμε ΟΛΟΚΛΗΡΟ το κάδρο.
   Σε 16:9 video το contain πέφτει ακριβώς πάνω στο box -> μηδέν μαύρες μπάρες·
   αν κάποτε ανέβει video άλλης αναλογίας το contain εγγυάται ότι πάλι θα
   φαίνεται όλο (και τα κενά γεμίζουν με το ίδιο σκούρο #08201d του stage).
   Άλλη αναλογία -> αρκεί override του --hp-sl-ar (π.χ. inline style 4/3).
   ============================================================ */
@media (max-width:991px){
  .hp-slider--video{--hp-sl-ar:16/9}
  /* height:auto + aspect-ratio -> ύψος = πλάτος οθόνης × 9/16.
     max-height = δικλείδα για landscape κινητά (αλλιώς το stage θα ξεπερνούσε
     το viewport)· εκεί το contain απλώς κεντράρει με κενά δεξιά/αριστερά. */
  .hp-slider--video .hp-sl-stage{height:auto;aspect-ratio:var(--hp-sl-ar);max-height:78svh}
  .hp-slider--video .fb-slide video.bg,
  .hp-slider--video .hp-hero-poster--v{object-fit:contain}
  /* το Ken-Burns zoom (scale 1.06 -> 1.16) θα ξανάκοβε τις άκρες -> off στα video */
  .hp-slider--video .fb-slide video.bg,
  .hp-slider--video .fb-slide.on video.bg{transform:none;transition:none}
  /* το veil υπάρχει για αναγνωσιμότητα του caption· χωρίς caption απλώς
     σκουραίνει το κάτω 60% ενός ήδη μικρού κάδρου */
  .hp-slider--video .fb-slide:not(:has(.fb-cap)) .veil{opacity:0}
}