/* ================================================================
   TRIO EPK — Foglio di stile
   ★ Per personalizzare: modifica solo il blocco :root qui sotto.
      Tutto il resto si aggiorna automaticamente.
   ================================================================ */

:root {
  /* ★ Colore accent principale — cambia questo per ridipingere tutto */
  --accent:        #1a1a1a;
  /* Colore descrizione sezioni*/
  --red:  #c0392b;
  --gold:   #d4aa00;

  /* ★ Sfondo sezioni alternate */
  --accent-light:  #f5f0e8;

  /* ★ Colore linee, etichette, dettagli secondari */
  --accent-mid:    #c8b89a;

  /* Font e spaziatura sezioni */
  --font-main:     'Raleway', sans-serif;
  --section-py:    5rem;
}


/* ----------------------------------------------------------------
   RESET & BASE
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  background: #fff;
  color: #1a1a1a;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
}


/* ----------------------------------------------------------------
   BARRA UTILITY (Indietro + Google Translate)
---------------------------------------------------------------- */
#util-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1.5rem;
  border-bottom: 1px solid #e8e2d9;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.btn-back {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-mid);
  transition: border-color .2s;
}

.btn-back:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}


/* ----------------------------------------------------------------
   HERO — immagine di sfondo full width
   ★ Per cambiare la foto: aggiorna url() qui sotto
---------------------------------------------------------------- */
#hero {
  position: relative;
  /* ★ background-image NON è qui — va come style="" direttamente
        sul tag <section id="hero"> in ogni pagina HTML.
        Esempio: <section id="hero" style="background-image:url('img/cover2.jpg')"> */
  background-size: cover;
  background-position: center top;
  padding: 0;
  border-bottom: none;
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
}

/* Gradiente scuro in basso per leggibilità del testo */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.08) 0%,
    rgba(0,0,0,.15) 40%,
    rgba(0,0,0,.72) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.hero-tag-trio {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.25rem;
}

.hero-tag-quartet {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.hero-title {
  font-size: 39px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: #fff;
}

/* ★ La riga con "trio" (o qualsiasi parola secondaria nel titolo)
      va racchiusa in <span class="hero-title-sub">...</span> nell'HTML */
.hero-title-sub {
  font-size: 35px;
  font-weight: 400 !important;
  font-style: italic !important;
  letter-spacing: 0.1em;
  text-transform: none;
  display: block;
}

.hero-desc {
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(255,255,255,.82);
  max-width: 560px;
  line-height: 1.85;
}

.hero-meta-trio {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 2.5rem;
}

.hero-meta-quartet {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2.5rem;
}
/* ----------------------------------------------------------------
   SEZIONI — intestazioni e ritmo verticale
---------------------------------------------------------------- */
.section-label-trio {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .4rem;
}

.section-label-quartet {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .4rem;
}

.section-title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

section { padding: var(--section-py) 0; }

/* Sfondo alternato sulle sezioni pari */
section:nth-of-type(even) { background: var(--accent-light); }


/* ----------------------------------------------------------------
   FORMAZIONE
---------------------------------------------------------------- */
.member-card {
  border: 1px solid #e0d9cf;
  background: #fff;
  padding: 2rem 1.75rem;
}

.member-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: .1rem;
}

.member-role {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-mid);
  margin-bottom: .8rem;
}

.member-bio {
  font-size: .9rem;
  color: #555;
  line-height: 1.7;
}

.bio-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-mid);
  margin-bottom: .2rem;
}
/* ----------------------------------------------------------------
   VIDEO
---------------------------------------------------------------- */
.video-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border: 1px solid #e0d9cf;
}

.video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

.video-label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #aaa;
  margin-top: .7rem;
}


/* ----------------------------------------------------------------
   AUDIO PLAYER
---------------------------------------------------------------- */
.audio-block {
  border: 1px solid #e0d9cf;
  background: #fff;
  padding: 2rem;
}

.track-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .2rem;
}

.track-meta {
  font-size: .76rem;
  color: #aaa;
  letter-spacing: .08em;
  margin-bottom: 1rem;
}

audio {
  width: 100%;
  display: block;
  color: var(--accent);
}

/* ----------------------------------------------------------------
/* ----------------------------------------------------------------
   PLAYER MULTI-TRACCIA
---------------------------------------------------------------- */
.player-progress {
  width: 100%;
  height: 3px;
  background: #e0d9cf;
  margin: 1rem 0 .75rem;
  cursor: pointer;
  position: relative;
}
.player-progress-bar {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width .1s linear;
}
.player-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.player-btn {
  background: none;
  border: none;
  color: var(--red);
  font-family: var(--font-main);
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: opacity .2s;
}
.player-btn:hover { opacity: .5; }
.player-btn-main  { font-size: 1.1rem; }
.player-time {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: #aaa;
  margin-left: auto;
}

/* Override colore per il quartet */
.player-quartet .player-btn { color: var(--gold); }

.tracklist {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #e0d9cf;
}
.tracklist-item {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .6rem 0;
  border-bottom: 1px solid #e0d9cf;
  cursor: pointer;
  transition: background .15s;
}
.tracklist-item:hover        { background: var(--accent-light); }
.tracklist-item.active       { background: var(--accent-light); }
.tracklist-item.active .tracklist-num { color: var(--accent); }
.tracklist-num {
  font-size: .68rem;
  font-weight: 700;
  color: #ccc;
  letter-spacing: .05em;
}
.tracklist-name {
  font-size: .85rem;
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tracklist-album {
  font-size: .7rem;
  color: #aaa;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* ----------------------------------------------------------------
   PULSANTI PIATTAFORME
---------------------------------------------------------------- */
.platform-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
}
.btn-platform {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .42rem 1rem;
  border: 1.5px solid var(--red);
  background: transparent;
  color: var(--red);
  text-decoration: none;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.btn-platform:hover {
  background: var(--red);
  color: #fff;
}

/* Override colore per il quartet */
.player-quartet .btn-platform {
  border-color: var(--gold);
  color: var(--gold);
}
.player-quartet .btn-platform:hover {
  background: var(--gold);
  color: #fff;
}
/* ----------------------------------------------------------------
   LA CRITICA SCRIVE — citazioni stampa
---------------------------------------------------------------- */
.press-quote {
  border-left: 2px solid var(--accent-mid);
  padding-left: 1.25rem;
}

.press-text {
  font-size: .95rem;
  font-weight: 300;
  font-style: italic;
  color: #333;
  line-height: 1.75;
  margin-bottom: .4rem;
}

.press-source {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-mid);
  margin: 0;
}
.bio-text {
  font-size: 1rem;
  font-weight: 300;
  color: #333;
  line-height: 1.9;
}

.bio-text p + p { margin-top: 1.25rem; }


/* ----------------------------------------------------------------
   FOTO PRESS
---------------------------------------------------------------- */
.photo-card {
  position: relative;
  overflow: hidden;
}

.photo-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  filter: grayscale(15%);
  transition: filter .3s, transform .45s;
}

.photo-card:hover img {
  filter: grayscale(0%);
  transform: scale(1.04);
}

.photo-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.52));
  padding: 2rem .75rem .75rem;
  opacity: 0;
  transition: opacity .3s;
  display: flex;
  justify-content: flex-end;
}

.photo-card:hover .photo-overlay { opacity: 1; }

.btn-download {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  background: #fff;
  color: #1a1a1a;
  text-decoration: none;
}

.btn-download:hover { background: var(--accent-light); }

.photo-caption {
  font-size: .72rem;
  color: #aaa;
  margin-top: .4rem;
}

.photo-card-portrait img {
  object-position: top;
}

/* ----------------------------------------------------------------
   CONTATTI / BOOKING
---------------------------------------------------------------- */
#contatti { border-top: 1px solid #e0d9cf; }

.contact-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-mid);
  margin-bottom: .2rem;
}

.contact-value {
  font-size: 1rem;
  font-weight: 500;
}

.contact-value a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-mid);
}

.contact-value a:hover { border-bottom-color: var(--accent); }


/* ----------------------------------------------------------------
   FOOTER
---------------------------------------------------------------- */
footer {
  border-top: 1px solid #e0d9cf;
  padding: 2rem 0;
  font-size: .75rem;
  color: #bbb;
  letter-spacing: .07em;
}


/* ----------------------------------------------------------------
   UTILITY
---------------------------------------------------------------- */
.divider {
  width: 36px;
  height: 2px;
  background: var(--accent-mid);
  margin-bottom: 1.75rem;
}

/* Nel hero lo sfondo è scuro: forza il divider bianco */
#hero .divider {
  background: rgba(255,255,255,.4);
}


/* ----------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------- */
@media (max-width: 768px) {
  .platform-links { flex-direction: column; }
  .btn-platform   { justify-content: center; }
}
/* ----------------------------------------------------------------
   HA COLLABORATO CON
---------------------------------------------------------------- */
.collab-names {
  font-size: .82rem;
  font-weight: 400;
  color: #555;
  line-height: 2;
}

.social-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .75rem;
  column-gap: 1.5rem;
}

.social-icon {
  font-size: 1.3rem;
  color: var(--red);
  text-decoration: none;
  transition: opacity .2s;
  line-height: 1;
}

.social-icon:hover { color: var(--accent); opacity: 1; }

/* ----------------------------------------------------------------
   FORMAZIONE INLINE (quartet / formazioni > 3)
---------------------------------------------------------------- */
.formation-block {
  display: flex;
  align-items: stretch;
  border: 1px solid #e0d9cf;
  background: #fff;
}
.formation-item {
  flex: 1;
  padding: 1.5rem 1rem;
}

.formation-item .member-name {
  font-size: .88rem;
  margin-bottom: .1rem;
}

.formation-item .member-role {
  font-size: .68rem;
  margin-bottom: 0;
}
.formation-divider {
  width: 1px;
  background: #e0d9cf;
  align-self: stretch;
  margin: 1rem 0;
}

@media (max-width: 768px) {
  .formation-block { flex-direction: column; }
  .formation-divider { width: 100%; height: 1px; }
}

.contatti-quartet .btn-platform {
  border-color: var(--gold);
  color: var(--gold);
}
.contatti-quartet .btn-platform:hover {
  background: var(--gold);
  color: #fff;
}
.contatti-quartet .social-icon {
  color: var(--gold);
}
.contatti-quartet .social-icon:hover {
  color: var(--accent);
  opacity: 1;
}