/* =========================================================
   1. KOLORY, FONTY, ODSTĘPY – jedyne miejsce do zmiany wyglądu
   ========================================================= */
:root {
  --paper: #ffffff;      /* tło */
  --ink: #000000;        /* tekst i linie */
  --ink-soft: #5d6167;   /* szary tekst pomocniczy */
  --hair: #d9dee4;       /* jasne obramowania */
  --frame: #e3e9f0;      /* tło kadru filmu i kafelków galerii */

  /* Futura PT z Adobe Fonts (link w <head> pliku index.html).
     Dostępne grubości futura-pt: 400 (Book) i 700 (Heavy).
     --font-bold to osobna rodzina Futura PT Bold – najbliższa Futurze Bold ze szkicu
     (używana do BASS ASTRAL, „Koncerty”, daty, miasta i przycisku). */
  --font: "futura-pt", Futura, "Century Gothic", sans-serif;
  --font-bold: "futura-pt-bold", Futura, "Century Gothic", sans-serif;

  --gutter-l: max(clamp(16px, 3.2vw, 48px), env(safe-area-inset-left, 0px));
  --gutter-r: max(clamp(16px, 3.2vw, 48px), env(safe-area-inset-right, 0px));
  --max: 1680px;

  color-scheme: light;
}

/* =========================================================
   2. PODSTAWY
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.page { overflow-x: clip; }

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

/* Wspólny styl małych napisów (menu, przyciski, stopka) */
.nav a, .show-title, .tix, .foot {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =========================================================
   3. NAWIGACJA
   ========================================================= */
.top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-block: 12px 4px;
}
.nav { display: flex; gap: 28px; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 400;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.nav a:hover { border-bottom-color: var(--ink); }

/* =========================================================
   4. HERO – nazwa i film
   ========================================================= */
.name {
  margin: 0;
  padding-top: 0.06em;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 24vw;             /* wartość startowa; script.js dopasowuje do szerokości */
  line-height: 0.84;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.name-fit { display: inline-block; white-space: nowrap; }
.name .w { display: block; }   /* telefon: BASS / ASTRAL w dwóch liniach */

.loop {
  position: relative;
  aspect-ratio: 16 / 9;
  /* telefon: film od krawędzi do krawędzi */
  margin: clamp(14px, 2.2vw, 32px) calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l));
  background: var(--frame) url("img/poster.jpg") center / cover no-repeat;
}
.loop video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;             /* „rączka”: film można kliknąć (pauza / odtwarzanie) */
}
/* Ramka przy wyborze filmu klawiaturą (Tab) – w środku kadru, żeby nie ucinała się na telefonie */
.loop video:focus-visible { outline-offset: -3px; }

@media (min-width: 641px) {
  .name { font-size: 13.5vw; line-height: 0.8; }
  .name .w { display: inline; }
  .loop { margin-left: 0; margin-right: 0; }
}

/* =========================================================
   5. KONCERTY
   ========================================================= */
.sec {
  padding-block: clamp(64px, 10vw, 144px) clamp(56px, 8vw, 112px);
  scroll-margin-top: 8px;
}
.sec h2 {
  margin: 0 0 clamp(20px, 3vw, 40px);
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: clamp(2.75rem, 9vw, 7.5rem);
  line-height: 0.82;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.shows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 3px solid var(--ink);
}
.show {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-block: clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid var(--ink);
}
.show-date {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.show-info { min-width: 0; display: grid; gap: 6px; }
.show-title {
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-soft);
}
.show-place {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5em;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.1;
}
.show-place .city { font-family: var(--font-bold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; }
.show-place .venue { font-weight: 400; }

.tix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 0 24px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 700 13px/1 var(--font-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tix:hover { background: var(--paper); color: var(--ink); }
.tix.is-pending {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--hair);
  cursor: default;
}

@media (min-width: 721px) {
  .show {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) auto;
    gap: 12px clamp(20px, 3vw, 48px);
    align-items: center;
  }
  .tix { width: auto; margin-top: 0; }
}

/* =========================================================
   6. STOPKA
   ========================================================= */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding-block: 20px 28px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
}
.foot a { text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.foot a:hover { color: var(--ink); }