/* =====================================================================
   internationaltributebands.com — foglio di base
   Solo struttura, accessibilità e comportamento responsive.
   La direzione visiva (palette, tipografia, hero) arriva nel prossimo
   passo: qui non ci sono scelte estetiche da disfare.
   ===================================================================== */

:root {
  --measure: 68ch;
  --gap: 1.5rem;
  --gap-lg: 3rem;
  --radius: 0;

  /* Segnaposto neutri, da sostituire con la palette definitiva */
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #5a5a5a;
  --rule: #d8d8d8;
  --accent: #1a1a1a;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, sans-serif;   /* segnaposto */
  line-height: 1.55;
}

img, picture, video, iframe { max-width: 100%; height: auto; display: block; }

.prose { max-width: var(--measure); }
.prose p { margin-block: 0 1em; }

/* --- Accessibilità ------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  padding: .75rem 1rem;
  background: var(--fg);
  color: var(--bg);
  transform: translateY(-100%);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

/* --- Layout ------------------------------------------------------- */

.site-header,
main,
.site-footer {
  padding-inline: clamp(1rem, 5vw, 4rem);
}

main { padding-block: var(--gap-lg); }

/* --- Navigazione -------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
}

.site-nav__list,
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-toggle { display: none; }

@media (max-width: 800px) {
  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    flex-basis: 100%;
  }
  .site-nav[data-open] { display: block; }

  .site-nav__list { flex-direction: column; gap: .5rem; }
}

/* --- Elenco band -------------------------------------------------- */

.band-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.band-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.band-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* object-position arriva inline dal focal point */
}

/* --- Hero della scheda band --------------------------------------- */

.band-hero { position: relative; }

.band-hero__track {
  display: grid;
  grid-template-areas: "stack";
}
.band-hero__slide {
  grid-area: stack;
  margin: 0;
  opacity: 0;
  visibility: hidden;
}
.band-hero__slide[data-active] {
  opacity: 1;
  visibility: visible;
}
.band-hero__slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 700px) {
  .band-hero__slide img { aspect-ratio: 4 / 5; }  /* verticale su mobile */
}

.band-hero__nav {
  display: flex;
  gap: .5rem;
  padding-block: .75rem;
}
.band-hero__nav button {
  width: 2.5rem;
  height: .25rem;
  padding: 0;
  border: 0;
  background: var(--rule);
  cursor: pointer;
}
.band-hero__nav button[aria-selected="true"] { background: var(--accent); }

/* --- Video -------------------------------------------------------- */

.video-frame,
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.video-frame iframe,
.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-facade__note {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: .5rem;
  background: rgb(0 0 0 / .75);
  color: #fff;
  font-size: .875rem;
}

/* --- Scheda tecnica ----------------------------------------------- */

.tech-sheet {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem var(--gap);
  margin: 0;
}
.tech-sheet dt { color: var(--muted); }
.tech-sheet dd { margin: 0; }

@media (max-width: 500px) {
  .tech-sheet { grid-template-columns: 1fr; gap: 0 0; }
  .tech-sheet dd { margin-bottom: .75rem; }
}

/* --- Consenso ----------------------------------------------------- */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  padding: var(--gap);
  background: var(--bg);
  border-top: 1px solid var(--rule);
}
.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
/* Accetta e rifiuta hanno lo stesso peso visivo: è un requisito, non uno stile */
.consent__actions button {
  flex: 1 1 8rem;
  padding: .75rem 1rem;
  border: 1px solid var(--fg);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}