/* =========================================================
   My Blues Radio — design system
   Άλλαξε οτιδήποτε εδώ και αλλάζει σε όλο το site.
   ========================================================= */

:root {
  /* ---- Χρώματα (δειγματοληψία από το τρέχον site) ---- */
  --ink:        #12131f;   /* βαθύτερο μαύρο-μπλε: player, dark sections */
  --navy:       #2b2d42;   /* footer, δευτερεύον σκούρο */
  --steel:      #517ebd;   /* το μπλε του header/band */
  --powder:     #b0e0e6;   /* οι ανοιχτές ενότητες */
  --brass:      #d9a441;   /* accent: φυσαρμόνικα / λάμπες ενισχυτή */
  --brass-hi:   #f0be5e;   /* accent hover */
  --cream:      #f2ede4;   /* κείμενο πάνω σε σκούρο */
  --onair:      #e04b3a;   /* κόκκινο "στον αέρα" — μόνο για το live dot */

  --ink-soft:   rgba(255,255,255,.68);
  --ink-faint:  rgba(255,255,255,.40);
  --line:       rgba(255,255,255,.12);
  --line-dark:  rgba(18,19,31,.14);

  /* ---- Τυπογραφία ---- */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(.82rem, .78rem + .18vw, .92rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2:  clamp(1.55rem, 1.35rem + .9vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.1rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);

  /* ---- Χώρος & σχήματα ---- */
  --gutter:  clamp(1.15rem, .6rem + 2.4vw, 3rem);
  --bay:     clamp(3.5rem, 2rem + 6vw, 7rem);   /* κάθετο padding ενοτήτων */
  --max:     1200px;
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-lift: 0 18px 48px rgba(10,12,24,.34);
  --ease: cubic-bezier(.22,.7,.3,1);
}

/* =========================================================
   Reset / βάση
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--steel);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-wrap: balance;
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -.015em;
}

:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--brass); color: var(--ink);
  padding: .75rem 1.25rem; z-index: 999; font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* =========================================================
   Κουμπιά
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.75rem;
  border: 0; border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--step-0); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brass); color: var(--ink);
  box-shadow: 0 10px 26px rgba(217,164,65,.32);
}
.btn--primary:hover { background: var(--brass-hi); }

.btn--ghost {
  background: transparent; color: var(--cream);
  border: 1.5px solid rgba(255,255,255,.34);
}
.btn--ghost:hover { border-color: var(--brass); color: var(--brass); }

.btn__icon { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--steel);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(24,32,52,.97);
  box-shadow: 0 1px 0 var(--line);
}

/* ΠΡΟΣΟΧΗ: το backdrop-filter κάνει το header containing block για τα
   position:fixed παιδιά του. Στο κινητό το μενού ΕΙΝΑΙ fixed μέσα στο
   header, οπότε θα κολλούσε πάνω του αντί για την οθόνη. Το κρατάμε
   μόνο εκεί που το μενού δεν είναι fixed. */
@media (min-width: 901px) {
  .site-header.is-stuck { backdrop-filter: blur(14px); }
}

.site-header__inner {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: .9rem;
}

.brand { flex: none; display: block; }
.brand img { height: clamp(48px, 6vw, 76px); width: auto; }

.nav {
  margin-left: auto;
  display: flex; align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.nav__list {
  display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  color: var(--cream); text-decoration: none;
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: .02em; padding: .4rem 0;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--brass); }
.nav__link[aria-current="page"] { border-bottom-color: var(--brass); }

.socials { display: flex; gap: .65rem; flex: none; }
.socials a {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  color: var(--cream);
  border: 1px solid rgba(255,255,255,.22);
  transition: all .18s var(--ease);
}
.socials a:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 0; cursor: pointer;
  color: var(--cream); padding: .5rem;
}
.nav-toggle svg { width: 26px; height: 26px; fill: currentColor; }

@media (max-width: 900px) {
  .nav-toggle { display: block; position: relative; z-index: 95; }

  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(86vw, 340px);
    background: var(--ink);
    padding: 1.5rem var(--gutter) 2rem;
    /* Σε στήλη — αλλιώς τα social κάθονται δίπλα στο μενού */
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    z-index: 90; margin-left: 0;
    box-shadow: -20px 0 50px rgba(0,0,0,.45);
  }
  .nav.is-open { transform: translateX(0); }

  .nav__list {
    flex-direction: column; align-items: flex-start;
    gap: 1.5rem; width: 100%; margin-top: 3.5rem;
  }
  .nav__link {
    font-size: var(--step-1); font-family: var(--font-display);
    display: block; width: 100%; padding: .35rem 0;
  }

  .socials { display: none; }
  .nav .socials {
    display: flex;
    margin-top: auto; padding-top: 3rem;
  }

  /* Σκίαση πίσω από το πάνελ, με tap για κλείσιμο */
  .nav-backdrop {
    position: fixed; inset: 0; z-index: 85;
    background: rgba(8,10,20,.6);
    opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease);
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  /* Κλείδωμα του scroll όσο το μενού είναι ανοιχτό */
  body.nav-open { overflow: hidden; }
}

@media (min-width: 901px) {
  .nav-backdrop { display: none; }
}

/* Το hamburger γίνεται Χ όταν το μενού ανοίγει — ένα χειριστήριο,
   στην ίδια θέση, ώστε να ξέρει ο χρήστης πού να ξαναπατήσει. */
.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-burger { display: none; }
body.nav-open .nav-toggle .icon-close  { display: block; }

/* =========================================================
   HERO — η υπογραφή της σελίδας: το άκουσμα είναι το hero
   ========================================================= */
.hero {
  position: relative; isolation: isolate;
  min-height: min(94vh, 860px);
  display: flex; align-items: center;
  padding-block: calc(var(--bay) * .9);
  color: var(--cream);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(110% 80% at 22% 45%, rgba(18,19,31,.86) 0%, rgba(18,19,31,.62) 45%, rgba(18,19,31,.78) 100%),
    linear-gradient(to top, var(--steel) 0%, rgba(81,126,189,0) 26%);
}

.hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
}
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
}

.hero__title {
  font-size: var(--step-4);
  max-width: 14ch;
  margin-block: .6rem 1rem;
}
.hero__lead {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0 0 2.2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Ένδειξη "στον αέρα" */
.onair {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--cream);
}
.onair__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--onair); flex: none;
  box-shadow: 0 0 0 0 rgba(224,75,58,.7);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224,75,58,.65); }
  70%  { box-shadow: 0 0 0 12px rgba(224,75,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,75,58,0); }
}

/* ---- Κάρτα "παίζει τώρα" ---- */
.nowcard {
  background: rgba(18,19,31,.62);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  box-shadow: var(--shadow-lift);
}
.nowcard__art {
  position: relative;
  aspect-ratio: 1; width: 100%;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--ink);
  margin-bottom: 1.25rem;
}
.nowcard__art img { width: 100%; height: 100%; object-fit: cover; }

.nowcard__label {
  color: var(--brass); margin-bottom: .45rem; display: block;
}
.nowcard__track {
  font-family: var(--font-display);
  font-size: var(--step-2); line-height: 1.2;
  margin: 0 0 .3rem;
}
.nowcard__artist { color: var(--ink-soft); margin: 0; }
.nowcard__album  { color: var(--ink-faint); font-size: var(--step--1); margin: .3rem 0 0; }

/* Ισοσταθμιστής — κινείται μόνο όταν παίζει */
.eq {
  display: inline-flex; align-items: flex-end; gap: 2.5px;
  height: 15px; margin-right: .5rem; vertical-align: -2px;
}
.eq span {
  width: 3px; background: var(--brass); border-radius: 1px;
  height: 45%; transform-origin: bottom;
}
.is-playing .eq span { animation: bounce .9s ease-in-out infinite; }
.is-playing .eq span:nth-child(2) { animation-delay: .18s; }
.is-playing .eq span:nth-child(3) { animation-delay: .36s; }
.is-playing .eq span:nth-child(4) { animation-delay: .09s; }
@keyframes bounce { 0%,100% { height: 25%; } 50% { height: 100%; } }

/* =========================================================
   Πρόσφατα κομμάτια
   ========================================================= */
.recent {
  background: var(--ink); color: var(--cream);
  padding-block: calc(var(--bay) * .7);
}
.recent__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.75rem;
}
.recent__title { font-size: var(--step-2); }
.recent__nav { display: flex; gap: .5rem; }
.recent__nav button {
  width: 38px; height: 38px; border-radius: var(--r-pill);
  background: transparent; color: var(--cream);
  border: 1px solid var(--line); cursor: pointer;
  display: grid; place-items: center;
  transition: all .18s var(--ease);
}
.recent__nav button:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.recent__nav svg { width: 16px; height: 16px; fill: currentColor; }

.recent__rail {
  /* Πόσα πλακίδια χωράνε στο ορατό πλάτος. Το ".5" στο τέλος είναι
     σκόπιμο: το μισό πλακίδιο που ξεπροβάλλει λέει "υπάρχει συνέχεια".
     Χωρίς αυτό, κανείς δεν σκρολάρει. */
  --rail-visible: 2.4;
  --rail-gap: clamp(.85rem, 2vw, 1.5rem);

  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--rail-gap) * (var(--rail-visible) - 1))) / var(--rail-visible)
  );
  gap: var(--rail-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .75rem; scrollbar-width: thin;
}

@media (min-width: 600px)  { .recent__rail { --rail-visible: 3.5; } }
@media (min-width: 900px)  { .recent__rail { --rail-visible: 4.5; } }
@media (min-width: 1200px) { .recent__rail { --rail-visible: 5.5; } }
.recent__rail::-webkit-scrollbar { height: 6px; }
.recent__rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.track { scroll-snap-align: start; }
.track__art {
  aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden;
  background: var(--navy); margin-bottom: .7rem;
}
.track__art img { width: 100%; height: 100%; object-fit: cover; }
.track__title {
  font-family: var(--font-body); font-weight: 600; font-size: var(--step--1);
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.track__artist {
  color: var(--ink-faint); font-size: var(--step--1); margin: .1rem 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =========================================================
   Ενότητες περιεχομένου
   ========================================================= */
.section { padding-block: var(--bay); }
.section--light { background: var(--powder); color: var(--ink); }
.section--navy  { background: var(--navy); color: var(--cream); }

.section__head { max-width: 62ch; margin-inline: auto; text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__title { font-size: var(--step-3); margin-bottom: 1rem; }
.section__lead { margin: 0; opacity: .82; }

.cards {
  display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card__media {
  aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden;
  margin-bottom: 1.15rem; background: var(--navy);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.045); }
.card__title { font-size: var(--step-1); margin-bottom: .5rem; }
.card__text { margin: 0; opacity: .8; font-size: var(--step-0); }

/* Ενότητα με φωτογραφία φόντου */
.feature {
  position: relative; isolation: isolate;
  color: var(--cream); padding-block: calc(var(--bay) * 1.15);
}
.feature__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.feature::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(18,19,31,.9) 0%, rgba(18,19,31,.62) 55%, rgba(18,19,31,.4) 100%);
}
.feature__inner { max-width: 46ch; margin-inline: 0; }
.feature__title { font-size: var(--step-3); margin-bottom: 1.15rem; }
.feature__text { color: var(--ink-soft); margin: 0 0 2rem; }

/* =========================================================
   Πού αλλού μας ακούς
   ========================================================= */
.directories {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.dir {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.35rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--cream); text-decoration: none;
  transition: all .2s var(--ease);
}
.dir:hover { background: rgba(255,255,255,.1); border-color: var(--brass); transform: translateY(-2px); }
.dir__name { font-weight: 600; font-size: var(--step--1); }
.dir__hint { display: block; font-size: .78rem; color: var(--ink-faint); font-weight: 400; }

/* =========================================================
   Sticky mini player
   ========================================================= */
.miniplayer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(18,19,31,.95);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  color: var(--cream);
  transform: translateY(110%);
  transition: transform .38s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.miniplayer.is-visible { transform: translateY(0); }

.miniplayer__inner {
  display: flex; align-items: center; gap: 1rem;
  padding-block: .7rem;
}
.miniplayer__art {
  width: 46px; height: 46px; flex: none;
  border-radius: var(--r-sm); overflow: hidden; background: var(--navy);
}
.miniplayer__art img { width: 100%; height: 100%; object-fit: cover; }
.miniplayer__meta { min-width: 0; flex: 1; }
.miniplayer__track {
  font-weight: 600; font-size: var(--step--1); margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.miniplayer__artist {
  color: var(--ink-faint); font-size: .8rem; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.playbtn {
  width: 48px; height: 48px; flex: none;
  border-radius: var(--r-pill); border: 0; cursor: pointer;
  background: var(--brass); color: var(--ink);
  display: grid; place-items: center;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.playbtn:hover { background: var(--brass-hi); transform: scale(1.06); }
.playbtn svg { width: 19px; height: 19px; fill: currentColor; }
.icon-pause { display: none; }
.is-playing .icon-play  { display: none; }
.is-playing .icon-pause { display: block; }

.volume { display: flex; align-items: center; gap: .5rem; flex: none; }
.volume input { width: 92px; accent-color: var(--brass); }
@media (max-width: 700px) { .volume { display: none; } }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--navy); color: var(--cream);
  padding-block: var(--bay) 2rem;
}
.footer__grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: start;
}
.footer__title {
  font-size: var(--step-1); margin-bottom: 1.1rem;
  padding-bottom: .6rem; border-bottom: 2px solid var(--brass);
  display: inline-block;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer__list a { color: var(--ink-soft); text-decoration: none; font-size: var(--step--1); }
.footer__list a:hover { color: var(--brass); }
.footer__text { color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 .8rem; }
.footer__licence { max-width: 260px; margin-top: 1.25rem; border-radius: var(--r-sm); }

.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  color: var(--ink-faint); font-size: var(--step--1);
}

/* Χώρος ώστε ο mini player να μην κρύβει το footer */
body { padding-bottom: 0; }
body.has-miniplayer { padding-bottom: 72px; }

/* =========================================================
   Εσωτερικές σελίδες
   ========================================================= */
.pagehead {
  background: var(--ink); color: var(--cream);
  padding-block: clamp(3rem, 8vw, 5.5rem);
  text-align: center;
}
.pagehead__title { font-size: var(--step-3); }
.pagehead__lead { color: var(--ink-soft); margin: .9rem auto 0; max-width: 54ch; }

.prose { max-width: 68ch; margin-inline: auto; }
.prose h2 { font-size: var(--step-2); margin-block: 2.5rem 1rem; }
.prose h3 { font-size: var(--step-1); margin-block: 2rem .75rem; }
.prose p, .prose li { opacity: .85; }
.prose a { color: var(--ink); text-underline-offset: 3px; }

/* =========================================================
   Κινητό: η κάρτα "παίζει τώρα" γίνεται οριζόντια,
   ώστε να χωράει μαζί με το κουμπί μέσα στην πρώτη οθόνη.
   ========================================================= */
@media (max-width: 940px) {
  .hero { min-height: auto; }

  .nowcard {
    display: grid;
    grid-template-columns: clamp(88px, 26vw, 130px) minmax(0, 1fr);
    gap: 1.1rem; align-items: center;
  }
  .nowcard__art { margin-bottom: 0; }
  .nowcard__track { font-size: var(--step-1); }
  .nowcard__body { min-width: 0; }
}

@media (max-width: 520px) {
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* Οι τίτλοι ενοτήτων να μην κρύβονται κάτω από το sticky header */
[id] { scroll-margin-top: 100px; }

/* =========================================================
   Testimonials καλλιτεχνών
   Δεν είναι ανώνυμα σχόλια — είναι άνθρωποι που παίζονται
   στον σταθμό, οπότε το όνομα και ο σύνδεσμος έχουν βάρος.
   ========================================================= */
.voices { background: var(--ink); color: var(--cream); }

.voices__grid {
  display: grid; gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

/* Με 1-2 testimonials το auto-fit θα τέντωνε την κάρτα σε όλο το
   πλάτος και θα φαινόταν άδεια. Τις κρατάμε στο κέντρο, σε λογικό
   πλάτος, ώσπου να μαζευτούν περισσότερες. */
.voices__grid--few {
  grid-template-columns: repeat(auto-fit, minmax(290px, 420px));
  justify-content: center;
}

.voice {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.voice:hover { border-color: rgba(217,164,65,.45); transform: translateY(-3px); }

/* Εισαγωγικό ως σχήμα, όχι ως χαρακτήρας — δεν διαβάζεται από screen readers */
.voice__mark {
  font-family: var(--font-display);
  font-size: 3.4rem; line-height: .6;
  color: var(--brass); opacity: .5;
  margin-bottom: .6rem;
}

.voice__quote {
  font-family: var(--font-display);
  font-size: var(--step-1); line-height: 1.45;
  margin: 0 0 1.6rem; flex: 1;
}

.voice__who { display: flex; align-items: flex-start; gap: .9rem; }
.voice__who > div { min-width: 0; }
.voice__photo {
  width: 60px; height: 60px; flex: none;
  /* Τετράγωνο με στρογγυλεμένη γωνία, όχι κύκλος: έτσι δουλεύουν
     και τα πορτρέτα ΚΑΙ τα εξώφυλλα δίσκων, που έρχονται τετράγωνα
     και συχνά έχουν τυπογραφία στις άκρες. */
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--navy);
}
.voice__photo img { width: 100%; height: 100%; object-fit: cover; }

.voice__name { font-weight: 600; font-size: var(--step-0); margin: 0; line-height: 1.3; }
.voice__role { color: var(--ink-faint); font-size: var(--step--1); margin: 0; }
.voice__link {
  margin-top: .3rem; display: inline-block; white-space: nowrap;
  color: var(--brass); font-size: var(--step--1);
  text-decoration: none; font-weight: 500;
}
.voice__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }
.prose h2:first-of-type { margin-top: 0; }

/* =========================================================
   Νομικά κείμενα (Privacy, Terms)
   Αριθμημένες ενότητες + callouts, ώστε ένα μακρύ κείμενο
   να διαβάζεται και να σαρώνεται, όχι μόνο να υπάρχει.
   ========================================================= */
.legal { counter-reset: legal-section; }

.legal__meta {
  display: inline-block;
  background: rgba(18,19,31,.07);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-pill);
  padding: .45rem 1.1rem;
  font-size: var(--step--1); font-weight: 500;
  margin-bottom: 2.5rem;
}

.legal__intro {
  font-size: var(--step-1);
  line-height: 1.6;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-dark);
}

/* Κάθε <h2> αριθμείται μόνο του — δεν γράφεις νούμερα στο χέρι,
   και αν προσθέσεις ενότητα στη μέση δεν χαλάει η σειρά. */
.legal h2 {
  counter-increment: legal-section;
  display: flex; align-items: baseline; gap: .8rem;
  font-size: var(--step-2);
  margin-block: 3rem 1.1rem;
}
.legal h2::before {
  content: counter(legal-section);
  flex: none;
  font-family: var(--font-body);
  font-size: .82rem; font-weight: 700;
  color: var(--brass);
  background: var(--ink);
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  transform: translateY(-2px);
}

.legal h3 {
  font-size: var(--step-1);
  margin-block: 1.9rem .7rem;
  opacity: .95;
}

.legal p { margin-block: 0 1rem; }

.prose .legal ul,
.legal ul { margin: 1rem 0 1.4rem; padding: 0; list-style: none; }
.legal li {
  position: relative;
  padding: .5rem 0 .5rem 1.5rem;
  border-bottom: 1px solid var(--line-dark);
}
.legal li:last-child { border-bottom: 0; }
.legal li::before {
  content: ""; position: absolute; left: 2px; top: 1.05em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brass);
}

/* Το σημείο που θέλεις να διαβαστεί ακόμη κι από όποιον σκανάρει */
.callout {
  background: rgba(18,19,31,.06);
  border-left: 3px solid var(--brass);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.15rem 1.4rem;
  margin: 1.4rem 0;
}
.callout p:last-child { margin-bottom: 0; }

.section--navy .callout,
.section--navy .legal li { border-color: var(--line); }
.section--navy .callout { background: rgba(255,255,255,.05); border-left-color: var(--brass); }
.section--navy .legal__meta { background: rgba(255,255,255,.05); border-color: var(--line); }

/* Στοιχεία επικοινωνίας στο τέλος */
.legal__contact { list-style: none; padding: 0; margin: 1rem 0 0; }
.legal__contact li {
  padding-left: 0; border-bottom: 0;
  display: flex; gap: .7rem; align-items: center;
  padding-block: .35rem;
}
.legal__contact li::before { display: none; }

/* Παραλλαγή callout για ρήτρες αποποίησης ευθύνης — πρέπει να ξεχωρίζει
   οπτικά από τα υπόλοιπα, γιατί λέει κάτι διαφορετικού βάρους. */
.callout--warn {
  border-left-color: var(--onair);
  background: rgba(224,75,58,.08);
}
.section--navy .callout--warn { background: rgba(224,75,58,.14); }

/* =========================================================
   Ενσωματωμένα widgets τρίτων (Streemlion)
   Δεν ελέγχουμε το περιεχόμενό τους, οπότε τους δίνουμε
   δικό μας πλαίσιο ώστε να μη μοιάζουν με ξένο σώμα.
   ========================================================= */
.embed {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: clamp(.5rem, 2vw, 1.25rem);
  overflow: hidden;
}
.embed iframe { display: block; width: 100%; border: 0; }

/* Το widget δεν προσαρμόζει μόνο του το ύψος του */
.embed--tall iframe { min-height: 720px; }
@media (max-width: 700px) { .embed--tall iframe { min-height: 620px; } }

/* Όταν το widget βάφεται στα χρώματά μας, δεν χρειάζεται λευκή κάρτα
   από κάτω — αφήνουμε να κάθεται απευθείας πάνω στην ενότητα. */
.embed--seamless {
  background: transparent;
  border: 0;
  padding: 0;
}

.embed__note {
  font-size: var(--step--1);
  opacity: .7;
  margin: .9rem 0 0;
  text-align: center;
}

/* Τρία βήματα πάνω από το widget */
.howto {
  display: grid; gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  counter-reset: howto;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.howto__step { counter-increment: howto; }
.howto__step h3 {
  display: flex; align-items: center; gap: .7rem;
  font-size: var(--step-1); margin: 0 0 .5rem;
}
.howto__step h3::before {
  content: counter(howto);
  flex: none;
  font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  color: var(--brass); background: var(--ink);
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
}
.howto__step p { margin: 0; opacity: .8; font-size: var(--step-0); }

/* =========================================================
   Συνεργάτες / κατάλογοι
   Κάθε embed έρχεται με δικό του styling που δεν ελέγχουμε,
   οπότε τους δίνουμε ίδιο πλαίσιο για να μοιάζουν σύνολο.
   ========================================================= */
.partners {
  display: grid; gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.partner {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.partner__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .35rem;
}
.partner__name { font-size: var(--step-1); margin: 0; }
.partner__link {
  flex: none; font-size: var(--step--1); font-weight: 500;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid rgba(18,19,31,.3);
  white-space: nowrap;
}
.partner__link:hover { border-bottom-color: var(--ink); }

.partner__blurb { margin: 0 0 1.15rem; opacity: .78; font-size: var(--step--1); }

/* Το ύψος ορίζεται ανά συνεργάτη μέσω --embed-h (μόνο για iframes·
   τα banners παίρνουν το φυσικό τους ύψος). */
.partner__embed {
  margin-top: auto;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(18,19,31,.05);
  display: grid; place-items: center;
  min-height: 70px;
}
.partner__embed iframe {
  display: block; width: 100%;
  height: var(--embed-h, 100px);
  border: 0;
}

/* Τα banners έρχονται με inline width:468px / height:60px.
   Το inline style κερδίζει κάθε κανονικό CSS, οπότε εδώ το !important
   είναι ο μόνος τρόπος — αλλιώς σπάει η σελίδα σε κινητό. */
.partner__embed img {
  max-width: 100% !important;
  height: auto !important;
}
.partner__embed a { display: block; max-width: 100%; }

/* Widgets με σταθερό πλάτος που δεν αντέχουν συρρίκνωση:
   αφήνουμε οριζόντιο scroll αντί να τα παραμορφώσουμε. */
.partner__embed--fixed {
  overflow-x: auto;
  justify-items: start;
  padding: .35rem;
}
.partner__embed--fixed img { max-width: none !important; }

.partners__empty {
  text-align: center; padding: 3rem 1rem;
  opacity: .6; border: 1px dashed var(--line-dark);
  border-radius: var(--r-lg);
}

/* Ώρα κάτω από κάθε πρόσφατο κομμάτι */
.track__time {
  color: var(--ink-faint);
  font-size: .78rem;
  margin: .2rem 0 0;
}

/* Ζωντανοί ακροατές, δίπλα στην ένδειξη "on air" */
.onair__count {
  color: var(--ink-faint);
  font-weight: 500;
  letter-spacing: .04em;
}
.onair__count::before { content: "·"; margin: 0 .5rem; opacity: .6; }

/* Η λίστα που παίζει, στην κάρτα του hero */
.nowcard__show {
  color: var(--ink-faint);
  font-size: var(--step--1);
  margin: .75rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}
.nowcard__show:empty { display: none; }

/* =========================================================
   Λωρίδα cross-promo (My Blue Tunes)
   Σκόπιμα λιτή: δεν πρέπει να ανταγωνίζεται τον player.
   ========================================================= */
.sister {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.sister__label {
  color: var(--ink-faint);
  display: block;
  margin-bottom: 1.25rem;
}
.sister__banner {
  display: inline-block;
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 100%;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sister__banner:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.sister__banner img {
  display: block;
  width: 468px; max-width: 100%; height: auto;
}