/* =========  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);
  transition: background var(--dur) var(--ease);
}
.hero__sound img { width: 20px; }
/* Ενεργός ήχος: gold tint + ηχητικά κύματα αντί X */
.hero__sound.is-on { background: rgb(199 162 77 / .25); }
.hero__sound.is-on .icon--sound {
  --icon: url("data:image/svg+xml,<svg width=%2230%22 height=%2230%22 viewBox=%220 0 30 30%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M20.5 12 C23.5 12 23.5 18 20.5 18%22 stroke=%22white%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/> <path d=%22M23 9 C28 9 28 21 23 21%22 stroke=%22white%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/> <path d=%22M2 17.4998V12.8573C2 12.1943 2.26339 11.5584 2.73223 11.0896C3.20107 10.6207 3.83696 10.3573 4.5 10.3573H8.125C8.3694 10.3573 8.60842 10.2856 8.8125 10.1511L16.3125 5.20609C16.5009 5.08199 16.7195 5.01121 16.9449 5.00126C17.1703 4.99131 17.3942 5.04256 17.5928 5.14957C17.7915 5.25658 17.9575 5.41537 18.0732 5.60908C18.1889 5.80279 18.25 6.02421 18.25 6.24984V24.1073C18.25 24.333 18.1889 24.5544 18.0732 24.7481C17.9575 24.9418 17.7915 25.1006 17.5928 25.2076C17.3942 25.3146 17.1703 25.3659 16.9449 25.3559C16.7195 25.346 16.5009 25.2752 16.3125 25.1511L8.8125 20.2061C8.60842 20.0716 8.3694 19.9999 8.125 19.9998H4.5C3.83696 19.9998 3.20107 19.7364 2.73223 19.2676C2.26339 18.7988 2 18.1629 2 17.4998Z%22 stroke=%22white%22 stroke-width=%221.5%22/> </svg>");
}

/* 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;
  transition: border-color var(--dur) var(--ease);
}
a.single-card { cursor: pointer; }
a.single-card:hover { border-color: rgb(255 255 255 / .3); }
a.single-card:hover .single-card__title { color: var(--c-white); }
.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; }
  /* #22 — καρτέλα NEW SINGLE πεσμένη στο κάτω μέρος του hero, πάνω από το scroll cue */
  .hero__single {
    position: absolute;
    bottom: clamp(60px, 9vh, 100px);
    left: 0; right: 0;
    margin: 0;
    padding-inline: var(--page-margin);
  }
}

/* Μικρά κινητά (≤640px): ανέβασμα ~70px ώστε η NEW SINGLE κάρτα να μην σκεπάζει τα κουμπιά */
@media (max-width: 640px) {
  .hero__inner { transform: translateY(-70px); }
}

/* Κουμπιά 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; }