/* ── madmajkl.com — vzhled podle předlohy: celoplošné střídání černých
      a bílých pásů, obří centrované nadpisy, fotky jako pozadí sekcí.
      Připojuje se přes brand.stylesheet za styly tématu. ── */

/* Psaná homepage jede přes celou šířku — pásy si šířku hlídají samy. */
.s-postrannim { display: block; }
.s-postrannim > div > article { max-width: none; }

/* Plný pás přes šířku okna uvnitř užšího kontejneru */
.pas {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 5rem max(1.25rem, calc(50vw - 36rem)) 5.5rem;
}
.pas-svetly { background: #fff; color: #14161a; }
.pas-svetly a { color: #c8151c; }
.pas-tmavy { background: #101010; color: #f1f1f2; }

/* Obří centrovaný nadpis pásu */
.pas > h2 {
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0 0 2.5rem;
  border: 0;
}
.pas-svetly > h2 { color: #202226; }

/* ── Hero: fotka přes celou obrazovku, claim uprostřed ── */
article { position: relative; }
.hero-mm {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: calc(-1 * var(--hero-odsazeni, 2rem));
  height: max(88svh, 34rem);
  background: #0a0a0a url('/assets/hero-kytara.jpg') center 22% / cover no-repeat;
  /* Jako na předloze: fotka stojí a obsah po ní klouže. */
  background-attachment: fixed;
  position: relative;
}
.hero-mm::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(rgba(8,8,8,.25), rgba(8,8,8,.05) 45%, rgba(8,8,8,.55));
}
/* Automatická H1 psané stránky = claim položený do hero fotky */
article > h1 {
  position: absolute;
  z-index: 2;
  left: 1rem; right: 1rem;
  top: min(52svh, 21rem);
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  font-weight: 800;
  text-shadow: 0 2px 18px rgba(0,0,0,.65);
}
.hero-podtitul {
  position: absolute;
  z-index: 2;
  left: 1rem; right: 1rem;
  top: calc(min(52svh, 21rem) + clamp(2.6rem, 5.5vw, 4rem));
  margin: 0;
  text-align: center;
  color: #e8e8ea;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.hero-sipka {
  position: absolute;
  z-index: 2;
  left: 50%; top: calc(max(88svh, 34rem) - 4.2rem);
  transform: translateX(-50%);
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  background: #fff;
  color: #14161a !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}

/* ── Mad story: bílý pás, text v čitelném sloupci, foto vpravo ── */
.madstory-obsah { max-width: 52rem; margin: 0 auto; }
.madstory-obsah img { border-radius: 8px; }

/* ── Členové: černý pás, kulaté fotky, verzálková jména ── */
.clenove-mrizka {
  display: flex; gap: 3rem; flex-wrap: wrap; justify-content: center;
  text-align: center;
}
.clen { flex: 0 1 18rem; }
.clen img { border-radius: 50%; max-width: 11rem; }
.clen strong {
  display: block;
  margin-top: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.15rem;
}
.clen .role { color: #9a9aa2; }
.clen a { color: #ff6157; }

/* ── Hudba: bílý pás, obal + informace ── */
.album {
  display: flex; gap: 3rem; flex-wrap: wrap; align-items: center;
  justify-content: center;
  max-width: 62rem; margin: 0 auto;
}
.album img { flex: 0 1 21rem; max-width: 21rem; border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.album-info { flex: 1 1 18rem; max-width: 26rem; }
.album-info .predtitul {
  text-transform: uppercase; letter-spacing: 0.25em;
  color: #c8151c; font-weight: 700; margin: 0;
}
.album-info .nazev { font-size: 2.4rem; font-weight: 800; line-height: 1.1; margin: .3rem 0 .4rem; color: #14161a; }
.album-info .vydano { color: #5f6672; margin: 0 0 1.4rem; }
.pas-svetly .btn-primary { background: #e02b20; color: #fff; }
.pas-svetly .btn-secondary { border: 2px solid #202226; color: #202226; background: transparent; }

/* ── Videa: černý pás, mřížka ── */
.videa-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.4rem;
  max-width: 72rem; margin: 0 auto;
}
.videa-mrizka .video { margin: 0; }
.videa-mrizka figcaption { color: #b9b9c0; }
.pas-tmavy .video-spust img { border-radius: 6px; }
.videa-uvod { text-align: center; color: #9a9aa2; margin: -1.5rem 0 2rem; }

/* ── Zpěvník: bílý pás, řádky s linkou ── */
.zpevnik-seznam { max-width: 46rem; margin: 0 auto; }
.zpevnik-seznam details { border-bottom: 1px solid #e6e6ea; }
.zpevnik-seznam summary {
  cursor: pointer;
  padding: 0.85rem 0.25rem;
  list-style-position: outside;
}
.zpevnik-seznam summary strong { font-weight: 600; color: #202226; }
.zpevnik-seznam details[open] summary strong { color: #c8151c; }
.zpevnik-seznam details p { color: #3a3d43; }

/* ── Kontakt: černý pás s fotkou v pozadí, bílá karta formuláře ── */
.pas-kontakt {
  background: #0c0c0c url('/assets/madmajkl-foto.jpg') right center / cover no-repeat;
  position: relative;
}
.pas-kontakt::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(8, 8, 8, 0.82);
}
.pas-kontakt > * { position: relative; }
.kontakt-mrizka {
  display: flex; gap: 3rem; flex-wrap: wrap;
  max-width: 66rem; margin: 0 auto;
}
.kontakt-udaje { flex: 1 1 16rem; }
.kontakt-udaje a { color: #ff6157; }
.kontakt-formular {
  flex: 1 1 20rem;
  background: #fff; color: #14161a;
  border-radius: 8px;
  padding: 1.75rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.kontakt-formular .formular label { color: #14161a; }
.kontakt-formular .formular input,
.kontakt-formular .formular textarea {
  background: #fff !important;
  color: #14161a !important;
  border: 1px solid #c9c9cf !important;
}
.kontakt-formular .btn-primary { background: #e02b20; color: #fff; }
/* Souhlas dědí z tématu světlou --fg tmavého webu — na bílé kartě by byl
   neviditelný (našel to test formuláře 18. 9.). */
.kontakt-formular .formular-souhlas label > span { color: #14161a; }

/* Kotvy nesmí končit pod pevnou hlavičkou */
.pas, .pas > h2, article > h1 { scroll-margin-top: 4.5rem; }

@media (max-width: 720px) {
  .pas { padding-top: 3.2rem; padding-bottom: 3.6rem; }
  .album img { max-width: 15rem; }
}

/* ── scroll jako na předloze (Michal, 18. 9. 2026) ─────────────────────
   Předloha má tři sekce s pevným pozadím (hero, videa, kontakt) — fotka
   stojí a obsah po ní klouže — a kotvy menu rolují plynule. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
#videa.pas {
  /* Ztmavení drží čitelnost textu na fotce (portrét je černobílý). */
  background: linear-gradient(rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.8)),
              url('/assets/pozadi-2.jpg') center / cover no-repeat #101010;
  background-attachment: fixed;
}
/* Kontakt má ztmavení řešené přes ::before (.pas-kontakt) — tady se jen
   mění fotka podle předlohy a připíná pozadí; druhý překryv by sekci
   utopil do černa. */
#kontakt.pas {
  background: #0c0c0c url('/assets/pozadi-2.jpg') center / cover no-repeat;
  background-attachment: fixed;
}
/* Dotyková zařízení fixed pozadí neumí (iOS ho ignoruje nebo škube) —
   tam se fotka roluje s obsahem. */
@media (hover: none) {
  .hero-mm, #videa.pas, #kontakt.pas { background-attachment: scroll; }
}

/* Hlášky formuláře na bílé kartě: --surface tmavého webu je tmavý a text
   karty tmavý — tma na tmě (našel test 18. 9.). OK zeleně; značková
   červená by splývala s chybou. */
.kontakt-formular .formular-hlaska {
  background: #f4f4f6;
  border-color: #c9c9cf;
  color: #14161a;
}
.kontakt-formular .formular-hlaska--ok { border-color: #2e7d32; }