/* =========  02 - Hero Section  =========
   Μετρημένο: 1920×1015 · content left 63px
   eyebrow  : Inter 700 20px · ls 4px · uppercase · Gold
   wordmark : image 748×110  (το «VOTANIKOS» είναι asset, όχι κείμενο)
   subtitle : Literata 700 54px · ls 5.4px · uppercase · Pure white
   scrim    : linear-gradient #000000 → #080808
   ======================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--header-h) + 24px) clamp(64px, 9vh, 120px);
  overflow: clip;
}
@media (min-width: 1100px) {
  .hero { min-height: min(100svh, 1015px); }
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
}
.hero__media video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s linear; }
.hero__media video.is-ready { opacity: 1; }

/* Ken Burns — παίζει όταν ΔΕΝ φορτώνει video (richness 0) */
[data-richness="0"] .hero__media img { animation: heroPan 24s ease-in-out infinite alternate; }
@keyframes heroPan { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }

.hero__scrim { position: absolute; inset: 0; z-index: 1; background: var(--c-hero-scrim); }

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__wordmark {
  width: clamp(220px, 38.95vw, 748px);   /* 748/1920 */
  margin: clamp(12px, 1.2vw, 22px) 0 clamp(10px, 1vw, 18px);
}
.hero__subtitle {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(18px, 2.8125vw, 54px);
  line-height: 1.15; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-white); margin: 0;
  max-width: 26ch; text-wrap: balance;
}
.hero__subtitle-part { display: block; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(24px, 2.6vw, 44px); }

/* Ήχος */
.hero__sound[hidden] { display: none; }
.hero__sound {
  position: absolute; z-index: 3; top: calc(var(--header-h) + 24px); right: var(--page-margin);
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(255 255 255 / .1); backdrop-filter: blur(6px);
}
.hero__sound img { width: 20px; }

/* Scroll cue */
.hero__cue {
  position: absolute; z-index: 3; left: 50%; bottom: 22px; translate: -50% 0;
  font-size: 22px; color: var(--c-white); opacity: .75;
  animation: cueBob 2.4s var(--ease) infinite;
}
@keyframes cueBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* --- NEW SINGLE --- */
.single-card {
  display: flex; align-items: stretch; gap: 0;
  background: rgb(8 8 8 / .82); backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / .1);
  max-width: 420px;
}
.single-card__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.single-card__label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.single-card__title { font-size: 14px; line-height: 1.45; color: var(--c-secondary); margin: 0; }
.single-card__links { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-secondary); }
.single-card__links img { width: 20px; }
.single-card__thumb { width: 130px; flex: none; }
.single-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Η κάρτα είναι αδελφός του .hero__inner: στο desktop κουμπώνει κάτω δεξιά στο hero,
   στο mobile μπαίνει απλά από κάτω στη ροή. */
.hero__single { position: relative; z-index: 3; margin-top: 28px; }
@media (min-width: 1100px) {
  .hero__single { position: absolute; inset: auto var(--page-margin) clamp(48px, 6vh, 92px) auto;
                  margin: 0; padding: 0; width: auto; }
}
@media (max-width: 1099px) {
  .single-card { max-width: none; }
}

/* Κουμπιά hero σε mobile: ίσο πλάτος, όχι «σκάλα» */
@media (max-width: 1099px) {
  /* Σε στενή οθόνη το πλάγιο σκούρυνσμα δεν αρκεί — χρειάζεται ομοιόμορφο. */
  .hero__scrim {
    background:
      linear-gradient(180deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / .35) 35%, rgb(8 8 8 / .8) 78%, #080808 100%),
      rgb(0 0 0 / .28);
  }
  .hero__wordmark { width: min(72vw, 340px); }
}
@media (max-width: 640px) {
  .hero__actions { gap: 12px; }
  .hero__actions .btn { flex: 1 1 45%; padding-inline: 14px; font-size: 13px; }
  .u-eyebrow { font-size: 12px; letter-spacing: .16em; }
  .hero__subtitle { font-size: 20px; line-height: 1.28; }
}

/* Στο desktop ο υπότιτλος είναι μία γραμμή, όπως στο Figma.
   Μπαίνει στο τέλος του αρχείου ώστε να υπερισχύει του max-width του βασικού κανόνα. */
@media (min-width: 1100px) {
  .hero__subtitle { max-width: none; }
  .hero__subtitle-part { display: inline; }
  .hero__subtitle-part + .hero__subtitle-part::before { content: " - "; }
}

/* Το video αφαιρέθηκε επειδή απέτυχε να φορτώσει — μένει η στατική εικόνα.
   Η κλάση υπάρχει ώστε να μπορεί το CSS να αντιδράσει αν χρειαστεί· η εικόνα
   είναι ήδη στη θέση της με object-fit: cover, οπότε το layout δεν αλλάζει. */
.hero__media--novideo video { display: none; }