/* =============================================================
   FIREB — ROZVRŽENÍ
   Kontejnery, sekce, mřížky, povrchy.
   ============================================================= */

/* ---------- Kontejner ---------- */

.wrap{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--wide{max-width:var(--container-wide)}
.wrap--narrow{max-width:var(--container-narrow)}
.wrap--flush{max-width:none;padding-inline:0}

/* Plovoucí hlavička nezabírá místo v toku — obsah jí uhne shora */
main{padding-top:calc(var(--header-top) + var(--header-h) + var(--space-6))}

/* ---------- Sekce ---------- */

.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--space-11)}
.section--snug{padding-block:var(--space-8)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}

/* ---------- Povrchy ---------- */

.surface-soft{background:var(--bg-soft)}

.surface-dark{
  background:var(--bg-dark);
  color:var(--text-on-dark);
}
.surface-dark h1,.surface-dark h2,.surface-dark h3,.surface-dark h4{color:var(--c-white)}
.surface-dark .lead{color:var(--text-on-dark-2)}
.surface-dark .note,.surface-dark .caption{color:var(--text-on-dark-mute)}
.surface-dark a:hover{color:var(--c-white)}

/* ---------- Hlavička sekce ---------- */

/* Zarovnaná na střed — výchozí pro většinu sekcí */
.sec-head{
  max-width:var(--container-narrow);
  margin:0 auto var(--space-10);
  text-align:center;
}
.sec-head .lead{margin-inline:auto}
.sec-head .eyebrow{margin-bottom:var(--space-6)}

/* Zarovnaná vlevo — pro sekce s obsahem ve dvou sloupcích */
.sec-head--start{
  margin-inline:0;
  text-align:left;
}
.sec-head--start .lead{margin-inline:0}

/* ---------- Mřížka ---------- */

.grid{display:grid;gap:var(--space-6)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

/* Automatická mřížka — karty se samy zalomí */
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.grid--gap-sm{gap:var(--space-4)}
.grid--gap-lg{gap:var(--space-7)}

@media (max-width:980px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}

/* Dvousloupcový rozpad textu a vizuálu */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-10);
  align-items:center;
}
.split--text-first{grid-template-columns:1fr 1.1fr}
@media (max-width:980px){
  .split,.split--text-first{grid-template-columns:1fr;gap:var(--space-8)}
}

/* ---------- Řádek prvků ---------- */

.cluster{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3);
}
.cluster--center{justify-content:center}
.cluster--between{justify-content:space-between}
.cluster--gap-lg{gap:var(--space-5)}

/* Svislý sloupec s jednotnou mezerou */
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.stack--gap-sm{gap:var(--space-2)}
.stack--gap-lg{gap:var(--space-7)}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  max-width:980px;
  margin-inline:auto;
  text-align:center;
}
/* Hero H1: dvě věty, každá na jeden řádek — na 1440 px se nesmí lámat na čtyři */
.hero .display{font-size:clamp(40px,4.9vw,66px)}
.hero > *{position:relative;z-index:var(--z-base)}
.hero .lead{margin-inline:auto;margin-top:var(--space-6)}
.hero .eyebrow{margin-bottom:var(--space-7)}
.hero__cta{justify-content:center;margin-top:var(--space-8)}
.hero .note,.hero .caption{text-align:center;margin-inline:auto}

/* Bronzová záře za hero — čistě dekorace */
.hero::before{
  content:"";
  position:absolute;
  left:50%;
  top:-180px;
  width:1100px;
  max-width:100vw;
  height:700px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,
    rgba(181,132,76,.22),
    rgba(181,132,76,.06) 45%,
    transparent 70%);
  filter:blur(20px);
  pointer-events:none;
  z-index:0;
}
.surface-dark .hero::before{
  background:radial-gradient(ellipse at center,
    rgba(181,132,76,.22),
    transparent 70%);
}