/* =====================  03 - About «Η ΝΥΧΤΑ ΞΕΚΙΝΑ ΕΔΩ»  =====================
   Μετρημένο στο Figma (node 54:429 / 94:878 / 23:86):
     section 1920×1040 · ζώνες 103 πάνω, 97 κάτω
     εικόνα  1920×840
     εναλλάκτης 24×149 @ left 67, κάθετα κεντραρισμένος, gap 23 → κάθε νούμερο 20px
     κάρτα   726×443 @ right 64, top 53 από την εικόνα · bg rgba(0,0,0,.83)
     padding κάρτας 66 / 93 / 102 / 61 · κείμενο 572 πλάτος, gap 29
     social  5 τετράγωνα 48px, gap 14, δεξιά-κάτω (right 35, bottom 45)
     fade    linear-gradient(180deg, rgba(8,8,8,0) 0%, #080808 100%) ύψος 236
   ============================================================================= */

.about {
  position: relative;
  padding-block: clamp(48px, 5.4vw, 103px) clamp(44px, 5vw, 97px);
}

/* --- Η εικόνα --- */
.about__stage {
  position: relative;
  aspect-ratio: 1920 / 840;
  overflow: clip;
}
.about__slides { position: absolute; inset: 0; }
.about__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.about__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.about__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Χωρίς JS δεν υπάρχει εναλλαγή — δείχνουμε την πρώτη και κρύβουμε τα κουμπιά. */
html:not(.has-js) .about__slide:first-child { opacity: 1; visibility: visible; }
html:not(.has-js) .about__switch { display: none; }

.about__fade {
  position: absolute; inset: auto 0 0; height: 28.1%;   /* 236/840 */
  background: linear-gradient(180deg, rgb(8 8 8 / 0) 0%, #080808 100%);
  pointer-events: none;
}

/* --- Εναλλάκτης 01–04 --- */
.about__switch {
  position: absolute; z-index: 3;
  left: var(--page-margin); top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 23px;
}
.about__num {
  appearance: none; background: none; border: 0; padding: 0;
  font-family: var(--f-sans); font-size: 14px; font-weight: 500;
  letter-spacing: .1em; line-height: 20px;
  color: var(--c-secondary); cursor: pointer;
  position: relative;
  /* τα νούμερα κάθονται πάνω σε φωτεινές εικόνες — χωρίς σκιά χάνονται */
  text-shadow: 0 1px 6px rgb(0 0 0 / .65);
  transition: color var(--dur) var(--ease);
}
.about__num::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; scale: 0 1; transform-origin: left;
  transition: scale var(--dur) var(--ease);
}
.about__num:hover { color: var(--c-white); }
.about__num.is-active { color: var(--c-white); }
.about__num.is-active::after { scale: 1 1; }

/* --- Η κάρτα --- */
.about__card {
  background: rgb(0 0 0 / .83);
  padding: 34px 28px 30px;
}
.about__body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.about__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(24px, 1.667vw, 32px); line-height: 1.25;
  letter-spacing: var(--ls-h1); text-transform: uppercase;
  margin: 0;
}
.about__text { margin: 0; color: var(--c-white); max-width: 52ch; }
.about__cta { align-self: flex-start; }

.about__social { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 24px 0 0; padding: 0; }
.about__social a {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid rgb(255 255 255 / .28);
  color: var(--c-white);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.about__social a:hover { border-color: var(--c-gold); background: var(--c-gold); color: var(--c-black); }
.about__social .icon { width: 20px; height: 20px; }

/* --- Desktop: η κάρτα κουμπώνει πάνω στην εικόνα, όπως στο Figma --- */
@media (min-width: 1100px) {
  .about__card {
    position: absolute; z-index: 2;
    right: 64px;                      /* μετρημένο */
    /* 53px κάτω από την κορυφή της ΕΙΚΟΝΑΣ (840 ψηλή). Το ποσοστό λυνόταν
       πάνω στο .about (1040 ψηλό), όχι στην εικόνα — δηλαδή 65,6px αντί 53. */
    top: calc(clamp(48px, 5.4vw, 103px) + min(2.76vw, 53px));   /* 53/1920 */
    width: min(726px, 42vw);
    min-height: 443px;
    padding: 66px 93px 45px 61px;     /* μετρημένο· το κάτω κόβεται από τα social */
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  .about__body { gap: 29px; max-width: 572px; }
  /* Στο Figma τα social απέχουν 35px από τη δεξιά ακμή της κάρτας, ενώ το
     padding-right της κάρτας είναι 93. Χωρίς αυτό κάθονταν 58px πιο μέσα. */
  .about__social { margin-top: auto; align-self: flex-end; margin-right: -58px; }
}

/* --- Tablet / mobile: κρατάμε την κινηματογραφική αίσθηση, χωρίς κόστος --- */
@media (max-width: 1099px) {
  /* Πόσο «σκαρφαλώνει» η κάρτα πάνω στην εικόνα. Το ίδιο νούμερο κρατά
     τα 01–04 πάνω από την κάρτα — αλλιώς πέφτουν πίσω της. */
  .about { --about-overlap: 56px; }
  .about__stage { aspect-ratio: 4 / 3; }
  .about__switch {
    left: 0; right: 0; top: auto; translate: none;
    bottom: calc(var(--about-overlap) + 18px);
    flex-direction: row; justify-content: center; gap: 22px;
  }
  /* Πιο ψηλό fade: σκουραίνει τη ζώνη όπου κάθονται τα νούμερα και δένει
     την εικόνα με την κάρτα από κάτω. */
  .about__fade { height: 46%; }
  .about__num { font-size: 13px; color: rgb(255 255 255 / .62); }
  .about__card {
    position: relative; z-index: 2;
    margin: calc(var(--about-overlap) * -1) var(--page-margin) 0;
    padding: 26px 22px 24px;
  }
  .about__social { gap: 10px; margin-top: 20px; }
  .about__social a { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  .about { --about-overlap: 64px; }
  /* Το stage μένει 4/3 και στα μικρά κινητά.
     Η φωτογραφία είναι 1920×840 (2,29:1)· σε κουτί 3/4 το object-fit: cover
     θα έδειχνε το ~33% του κάδρου ΚΑΙ θα ζητούσε εικόνα 3× φαρδύτερη από την
     οθόνη. Το 4/3 κρατά και το κάδρο και το βάρος λογικά. */
  .about__title { font-size: 22px; }
  .about__text { font-size: 15px; line-height: 1.7; }
  .about__cta { width: 100%; }
}