/* MonstruM – podstrony z tekstami. Ładowany PO /styles.css. */

.teksty {
  --t-tlo: #0a0a0a;
  --t-linia: #262626;
  --t-tekst: #ece8e1;
  --t-szary: #9a948a;
  --t-ciemny: #6f6a62;
  --t-akcent: #e0513f;

  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  color: var(--t-tekst);
}
@media (min-width: 900px) { .teksty { padding: 24px 64px 80px; } }

.teksty h1 {
  margin: 0 0 12px;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1;
  text-transform: uppercase;
}

.teksty-okruszki { font-size: 14px; color: var(--t-szary); margin-bottom: 24px; }
.teksty-okruszki a { color: var(--t-szary); text-decoration: none; }
.teksty-okruszki a:hover { color: var(--t-akcent); }
.teksty-okruszki [aria-current] { color: var(--t-tekst); }

.teksty-uklad { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .teksty-uklad { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }
  .teksty-uklad--plyta { grid-template-columns: 400px minmax(0, 1fr); }
}

/* na telefonie tekst przed tracklistą */
@media (max-width: 899px) { .teksty-plyta { order: 2; } }

.teksty-okladka { display: block; width: 100%; height: auto; border: 1px solid var(--t-linia); }
.teksty-plyta-tytul {
  display: block; margin-top: 20px; font-size: 24px; font-weight: 600;
  text-transform: uppercase; color: var(--t-tekst); text-decoration: none;
}
.teksty-plyta-meta, .teksty-opis { color: var(--t-szary); margin: 4px 0 20px; }

.teksty-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--t-linia); }
.teksty-lista li { border-bottom: 1px solid #1c1c1c; }
.teksty-lista a, .teksty-lista li > span {
  display: flex; gap: 14px; padding: 7px 0; color: #c9c3b8; text-decoration: none;
}
.teksty-lista a:hover { color: var(--t-akcent); }
.teksty-lista .nr { width: 22px; text-align: right; color: var(--t-ciemny); flex-shrink: 0; }
.teksty-lista .aktywny { color: var(--t-akcent); font-weight: 600; }
.teksty-lista .brak { color: var(--t-ciemny); }
.teksty-lista--duza a, .teksty-lista--duza li > span { font-size: 19px; padding: 16px 0; align-items: center; }
.teksty-lista .tytul { flex-grow: 1; }
.teksty-lista .czas { color: var(--t-ciemny); font-size: 14px; font-variant-numeric: tabular-nums; }
.teksty-lista .akcja { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--t-szary); }

.teksty-utwor { max-width: 680px; }
.teksty-etykieta, .teksty-podpis, .teksty-sekcja-etykieta {
  margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
}
.teksty-etykieta { color: var(--t-akcent); }
.teksty-credits { color: var(--t-szary); margin: 0 0 20px; }

.teksty-odsluch { margin-bottom: 24px; }
.teksty-podpis { color: var(--t-ciemny); }
.teksty-przyciski { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, max-content)); gap: 10px; }
.teksty-serwis {
  min-height: 48px; padding: 0 18px; display: flex; align-items: center; gap: 10px;
  border: 1px solid #3a3a3a; color: var(--t-tekst); font-weight: 600; text-decoration: none;
}
.teksty-serwis:hover { border-color: var(--t-akcent); }
.teksty-ikona { width: 22px; height: 22px; flex-shrink: 0; }
.teksty-sklep { display: inline-block; margin-top: 14px; color: var(--t-szary); font-weight: 600; }

.teksty-tekst { border-top: 1px solid var(--t-linia); padding-top: 24px; }
.teksty-sekcja { margin-bottom: 22px; }
.teksty-sekcja p:last-child { margin: 0; font-size: 18px; line-height: 1.5; }
.teksty-sekcja-etykieta { color: var(--t-ciemny); margin-bottom: 4px; font-size: 12px; }
.teksty-sekcja--refren { padding-left: 24px; }
.teksty-sekcja--refren .teksty-sekcja-etykieta { color: var(--t-akcent); }
@media (max-width: 599px) { .teksty-sekcja--refren { padding-left: 18px; } }

.teksty-nawigacja { display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 600px) { .teksty-nawigacja { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.teksty-nawigacja a {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  border: 1px solid var(--t-linia); color: var(--t-tekst); text-decoration: none; font-size: 20px;
}
.teksty-nawigacja a:hover { border-color: var(--t-akcent); }
.teksty-nawigacja a span { font-size: 13px; color: var(--t-szary); text-transform: uppercase; letter-spacing: 1px; }
.teksty-nawigacja .prawo { text-align: right; }

.teksty-albumy { list-style: none; padding: 0; display: grid; gap: 32px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.teksty-albumy a { display: flex; flex-direction: column; gap: 6px; color: var(--t-tekst); text-decoration: none; }
.teksty-albumy img { width: 100%; height: auto; border: 1px solid var(--t-linia); }
.teksty-albumy .tytul { font-size: 20px; font-weight: 600; text-transform: uppercase; }
.teksty-albumy .meta { color: var(--t-szary); font-size: 14px; }