/*
 * Layout stránky služby — všech 23 stránek pod „Co nabízíme".
 *
 * Vzniklo jako prototyp `/rimske-rolety-test` pro klienta; po odsouhlasení
 * se z toho stala ostrá šablona (`components/pages/Sluzba.jsx`) a prototyp
 * odešel. Všechno je pod `.lp`, takže se to nemůže potkat s `app.css`.
 *
 * Vychází ze značkových hodnot originálu: modrá #073a8d (hover #0852ce),
 * černá, šedý text #707070, plocha #f2f2f2, písmo Barlow.
 *
 * Návrhové rozhodnutí: původní stránka mačkala text do sloupce ~500 px a pravá
 * polovina zůstávala prázdná. Tady se šířka řídí typem obsahu — souvislý text
 * má míru ~68 znaků kvůli čitelnosti, ale dlaždice, galerie a CTA jdou přes
 * celou šířku.
 */

.lp {
  --modra: #073a8d;
  --modra-svetla: #0852ce;
  --text: #1a1a1a;
  --text-tlumeny: #5c5c5c;
  --plocha: #f4f5f7;
  --linka: #e2e5ea;
  --radius: 14px;
  --mezera: clamp(48px, 7vw, 96px);

  color: var(--text);
  font-size: 1.7rem;
  line-height: 1.65;
}

.lp__wrap {
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 24px;
}

/* měřítko textu: souvislý odstavec se čte nejlíp kolem 65–70 znaků */
.lp__measure { max-width: 68ch; }

/*
 * `app.css` má `h2 { color:#000; font-weight:900 }` a nadpisy se v obsahové
 * části centrují — na landing page chceme vlevo zarovnané a lehčí řezy,
 * proto se to tady přepisuje natvrdo.
 */
.lp h2 {
  color: inherit;
  font-size: clamp(2.6rem, 3.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
  text-align: left;
}
.lp h3 {
  color: inherit;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 8px;
  text-align: left;
}
.lp p, .lp ul, .lp li { text-align: left; }
.lp p { margin: 0 0 16px; }
.lp p:last-child { margin-bottom: 0; }
.lp strong { font-weight: 600; }

.lp__section { padding: var(--mezera) 0; }
.lp__section--plocha { background: var(--plocha); }
.lp__lead { color: var(--text-tlumeny); font-size: 1.9rem; }

/* ---------- hero ---------- */

.lp-hero { position: relative; color: #fff; overflow: hidden; }
.lp-hero__media { position: absolute; inset: 0; }
.lp-hero__media img { height: 100%; width: 100%; object-fit: cover; }
/* přechod drží text čitelný bez ohledu na to, co je na fotce */
.lp-hero__media:after {
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0.25) 100%);
  content: '';
  inset: 0;
  position: absolute;
}
/*
 * Pět stránek výrobců nemá v datech fotku. Místo prázdného hero se použije
 * značková modrá — týž postup, jaký má `app.css` u `main-header--color`.
 */
.lp-hero--bezfotky { background: linear-gradient(105deg, #041f4b 0%, var(--modra) 100%); }

/* jen svislé odsazení — vodorovné drží `.lp__wrap`, zkrácený zápis by ho přebil */
.lp-hero__inner { position: relative; padding-block: clamp(56px, 8vw, 104px); }

/*
 * Drobečky zůstávají i v novém layoutu — nesou strukturu webu pro návštěvníka
 * i pro vyhledávač. `app.css` je barví tmavě, na fotce by zmizely.
 */
.lp-hero .breadcrumb-wrapper { margin-bottom: 20px; position: relative; }
.lp-hero .breadcrumb { padding: 0; }
.lp-hero .breadcrumb__item,
.lp-hero .breadcrumb__link,
.lp-hero .breadcrumb__item:after { color: rgba(255, 255, 255, 0.72); }
.lp-hero .breadcrumb__link:hover { color: #fff; }
.lp-hero .breadcrumb__home-icon { fill: rgba(255, 255, 255, 0.72); }
.lp-hero__content { max-width: 620px; }
/*
 * Nadpis v hero musí mít barvu určenou natvrdo — `app.css` nastavuje nadpisům
 * tmavou barvu a na fotce by byl nečitelný. Zvýrazněné první slovo přebírá
 * vzor originálu (`.main-header__title span`), aby hero vypadalo jako zbytek
 * webu, ne jako cizí šablona.
 */
.lp-hero h1 {
  color: #fff;
  font-size: clamp(3.4rem, 5.2vw, 5.4rem);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 16px;
}
.lp-hero h1 span { color: var(--modra-svetla); }
/* perex je v datech HTML odstavec, proto se barví i vnořené `<p>` */
.lp-hero__perex,
.lp-hero__perex p { color: rgba(255, 255, 255, 0.9); font-size: 2rem; margin: 0; }
.lp-hero__perex { margin-bottom: 28px; }
.lp-hero__akce { display: flex; flex-wrap: wrap; gap: 12px; }

.lp-btn {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-size: 1.6rem;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  padding: 15px 28px;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}
.lp-btn--hlavni { background: var(--modra); color: #fff; }
.lp-btn--hlavni:hover { background: var(--modra-svetla); color: #fff; }
.lp-btn--vedlejsi { border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; }
.lp-btn--vedlejsi:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.lp-btn--tmavy { background: var(--modra); color: #fff; }
.lp-btn--tmavy:hover { background: var(--modra-svetla); color: #fff; }

/* ---------- pruh s důvěryhodností ---------- */

.lp-duvera {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  gap: 20px 32px;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 40px;
  padding-top: 24px;
  position: relative;
}
.lp-duvera__cislo { display: block; font-size: 2.4rem; font-weight: 700; line-height: 1.2; }
.lp-duvera__popis { color: rgba(255, 255, 255, 0.72); font-size: 1.45rem; }

/* ---------- dlaždice výhod ---------- */

.lp-vyhody { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.lp-vyhoda {
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: 28px;
}
.lp-vyhoda__ikona {
  align-items: center;
  background: rgba(7, 58, 141, 0.08);
  border-radius: 10px;
  color: var(--modra);
  display: flex;
  height: 44px;
  justify-content: center;
  margin-bottom: 16px;
  width: 44px;
}
.lp-vyhoda p { color: var(--text-tlumeny); font-size: 1.6rem; }

/* ---------- střídavé bloky text + fotka ---------- */

.lp-blok {
  align-items: center;
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: 1fr 1fr;
}
.lp-blok + .lp-blok { margin-top: var(--mezera); }
.lp-blok--obraceny .lp-blok__media { order: -1; }
/*
 * Fotky na šířku se použijí tak, jak jsou. Fotky na výšku (731×1300) se
 * neořezávají — ořez na šířku z nich udělá strop a kus zdi — jen se omezí
 * výška a vycentrují ve sloupci, aby blok nenarostl do nesmyslné délky.
 */
.lp-blok__media img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  display: block;
  object-fit: cover;
  width: 100%;
}
.lp-blok__media--portret img {
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  max-height: 540px;
  width: auto;
}
.lp-blok__seznam { list-style: none; margin: 16px 0 0; padding: 0; }
.lp-blok__seznam li {
  padding-left: 30px;
  position: relative;
  margin-bottom: 10px;
}
.lp-blok__seznam li:before {
  border-left: 2px solid var(--modra);
  border-bottom: 2px solid var(--modra);
  content: '';
  height: 6px;
  left: 4px;
  position: absolute;
  top: 9px;
  transform: rotate(-45deg);
  width: 12px;
}

/* ---------- srovnání pro / proti ---------- */

.lp-srovnani { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.lp-karta {
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: 32px;
}
.lp-karta--proti { background: var(--plocha); }
.lp-karta h3 { margin-bottom: 16px; }
.lp-karta ul { list-style: none; margin: 0; padding: 0; }
.lp-karta li { margin-bottom: 12px; padding-left: 32px; position: relative; }
.lp-karta li:last-child { margin-bottom: 0; }
.lp-karta--pro li:before {
  border-left: 2px solid #1a7f4b;
  border-bottom: 2px solid #1a7f4b;
  content: '';
  height: 6px;
  left: 4px;
  position: absolute;
  top: 9px;
  transform: rotate(-45deg);
  width: 12px;
}
.lp-karta--proti li:before {
  background: #b06a00;
  border-radius: 50%;
  content: '';
  height: 8px;
  left: 6px;
  position: absolute;
  top: 10px;
  width: 8px;
}

/* ---------- galerie ---------- */

/*
 * Prototyp měl tři fotky napevno. Služby jich mají 0 až 24, takže se — stejně
 * jako v původním layoutu — ukážou tři a zbytek otevře dlaždice „+ N dalších".
 * Mřížka tím má tři nebo čtyři buňky a `auto-fit` je rozloží samo.
 */
.lp-galerie { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lp-galerie a { display: block; overflow: hidden; border-radius: var(--radius); }
/* fotky nad rámec mřížky — v dokumentu zůstávají kvůli náhledům v lightboxu */
.lp-galerie a.lp-galerie__skryta { display: none; }
.lp-galerie img {
  aspect-ratio: 4 / 3;
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
  width: 100%;
}
.lp-galerie a:hover img { transform: scale(1.04); }

/*
 * Dlaždice „+ N dalších" otevře lightbox od čtvrtého snímku.
 *
 * Selektor musí být `a.lp-galerie__vic`, ne jen `.lp-galerie__vic` — jinak ho
 * `.lp-galerie a { display: block }` přebije a z dlaždice se stane blok, ve
 * kterém ikona s textem visí nahoře místo uprostřed.
 */
.lp-galerie a.lp-galerie__vic {
  align-items: center;
  aspect-ratio: 4 / 3;
  background: var(--modra);
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 1.7rem;
  font-weight: 600;
  gap: 10px;
  justify-content: center;
  text-align: center;
  transition: background 0.2s;
}
.lp-galerie__vic:hover { background: var(--modra-svetla); color: #fff; }
.lp-galerie__vic .icon { fill: currentColor; height: 28px; width: 28px; }

/* ---------- často kladené otázky ---------- */

.lp-faq { border-top: 1px solid var(--linka); margin-top: 8px; }
.lp-faq__polozka { border-bottom: 1px solid var(--linka); }
.lp-faq summary {
  cursor: pointer;
  font-size: 1.9rem;
  font-weight: 600;
  list-style: none;
  padding: 22px 44px 22px 0;
  position: relative;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary:after {
  border-right: 2px solid var(--modra);
  border-bottom: 2px solid var(--modra);
  content: '';
  height: 10px;
  position: absolute;
  right: 6px;
  top: 28px;
  transform: rotate(45deg);
  transition: transform 0.2s;
  width: 10px;
}
.lp-faq details[open] summary:after { transform: rotate(-135deg); }
.lp-faq__odpoved { color: var(--text-tlumeny); padding: 0 44px 24px 0; }

/* ---------- závěrečná výzva ---------- */

.lp-cta {
  background: #000;
  border-radius: var(--radius);
  color: #fff;
  display: grid;
  gap: 32px;
  grid-template-columns: 1.4fr 1fr;
  padding: clamp(32px, 5vw, 56px);
}
.lp-cta h2 { color: #fff; margin-bottom: 12px; }
.lp-cta p { color: rgba(255, 255, 255, 0.78); }
.lp-cta__kontakt { display: grid; align-content: center; gap: 14px; }
.lp-cta__radek { align-items: center; color: #fff; display: flex; font-size: 1.8rem; gap: 12px; }
.lp-cta__radek a { color: #fff; text-decoration: underline; }
.lp-cta__poznamka { color: rgba(255, 255, 255, 0.6); font-size: 1.45rem; }

/* ---------- odkazy na alternativy ---------- */

.lp-dalsi { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
.lp-dalsi__karta {
  align-items: center;
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 24px 28px;
  transition: border-color 0.2s, transform 0.2s;
}
.lp-dalsi__karta:hover { border-color: var(--modra); transform: translateY(-2px); }
.lp-dalsi__karta h3 { margin-bottom: 4px; }
.lp-dalsi__karta p { color: var(--text-tlumeny); font-size: 1.55rem; }
.lp-dalsi__sipka { color: var(--modra); flex-shrink: 0; font-size: 2.4rem; line-height: 1; }


/* ---------- redakční próza ----------
 *
 * Text služeb je HTML z původního redakčního systému (`data.text`) — odstavce,
 * mezinadpisy, odrážky, občas tabulka a zapletená galerie. Prototyp měl text
 * přepsaný do JSX, ostrá šablona ho musí vzít tak, jak v datech leží.
 *
 * Míra řádku se dává jen prvkům se souvislým textem. Galerie a tabulky uvnitř
 * prózy jdou přes celou šířku — kdyby dostaly 68ch, byly by zbytečně malé.
 */

.lp-proza > p,
.lp-proza > ul,
.lp-proza > ol,
.lp-proza > h2,
.lp-proza > h3 { max-width: 68ch; }
.lp-proza > h2 { margin-top: 48px; }
.lp-proza > h3 { margin-top: 32px; }
.lp-proza > :first-child { margin-top: 0; }
.lp-proza ul, .lp-proza ol { margin: 0 0 16px; padding-left: 22px; }
.lp-proza li { margin-bottom: 8px; }
.lp-proza a { color: var(--modra); text-decoration: underline; }
.lp-proza a:hover { color: var(--modra-svetla); }
.lp-proza img { border-radius: var(--radius); height: auto; max-width: 100%; }
.lp-proza table { border-collapse: collapse; margin: 24px 0; width: 100%; }
.lp-proza th, .lp-proza td {
  border: 1px solid var(--linka);
  padding: 10px 14px;
  text-align: left;
}
.lp-proza th { background: var(--plocha); font-weight: 600; }
/* tabulka je jediný prvek, který se na mobilu nezmenší — ať radši ujíždí sama */
.lp-proza__tabulka { overflow-x: auto; }

/* ---------- rozcestník na podřazené služby ---------- */

.lp-podpolozky { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.lp-podpolozka {
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.lp-podpolozka:hover { border-color: var(--modra); transform: translateY(-2px); }
.lp-podpolozka img {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  width: 100%;
}
.lp-podpolozka__text {
  align-items: center;
  color: var(--text);
  display: flex;
  font-size: 1.8rem;
  font-weight: 600;
  gap: 12px;
  justify-content: space-between;
  padding: 20px 24px;
}
.lp-podpolozka__sipka { color: var(--modra); flex-shrink: 0; font-size: 2.2rem; line-height: 1; }

/* ---------- značky výrobců ---------- */

.lp-znacky { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.lp-znacka {
  align-items: center;
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  padding: 28px 20px;
  text-align: center;
  transition: border-color 0.2s;
}
.lp-znacka:hover { border-color: var(--modra); }
.lp-znacka img { max-height: 60px; max-width: 100%; object-fit: contain; width: auto; }
.lp-znacka__nazev { color: var(--text); font-size: 1.6rem; font-weight: 600; }

/* ---------- logo výrobce ----------
 *
 * Čtyři stránky výrobců mají v datech logo. V původním layoutu stálo
 * v postranním sloupci, který tady není — dostane tedy vlastní řádek
 * nad textem, kde plní tutéž roli: čí technika to je.
 */

.lp-logo { margin-bottom: 32px; }
.lp-logo img { height: auto; max-height: 90px; max-width: 260px; width: auto; }

/* ---------- poptávkový formulář ---------- */

/* formulář má vlastní vzhled v `app.css`; tady se jen odsadí od obsahu */
.lp-formular { padding-top: var(--mezera); }

/*
 * Nadpis formuláře je výjimka, kterou je potřeba vrátit ručně.
 *
 * Formulář je uvnitř `<main class="lp">`, takže na jeho `<h2>` dosáhne
 * `.lp h2 { color: inherit }` — a to je specificitou (0,1,1) silnější než
 * `.message-form__title` (0,1,0) z `app.css`. Nadpis tím dostal barvu textu
 * landing page (#1a1a1a) na černém pozadí sekce, tedy kontrast ~1,1 : 1;
 * prakticky neviditelný. Týkalo se to všech 23 stránek služeb.
 *
 * Sekce `.lp-cta` má to samé ošetřené řádkem `.lp-cta h2 { color: #fff }`.
 * Tady se vrací celý původní vzhled z `app.css`, aby nadpis vypadal stejně
 * jako na ostatních stránkách s formulářem (Kontakty, O nás, realizace).
 */
.lp-formular .message-form__title {
  color: #fff;
  font-size: 2.4rem;
  font-weight: 300;
  margin: 0 auto 30px;
  max-width: 420px;
  text-align: center;
}

@media (min-width: 1280px) {
  .lp-formular .message-form__title { font-size: 4.1rem; }
}

/* ---------- responzivita ---------- */

@media (max-width: 900px) {
  .lp-vyhody, .lp-srovnani, .lp-dalsi, .lp-cta { grid-template-columns: 1fr; }
  .lp-podpolozky { grid-template-columns: 1fr 1fr; }
  .lp-znacky { grid-template-columns: 1fr 1fr; }
  .lp-blok { grid-template-columns: 1fr; }
  .lp-blok--obraceny .lp-blok__media { order: 0; }
  .lp-galerie { grid-template-columns: 1fr 1fr; }
  .lp-duvera { grid-template-columns: 1fr 1fr; }
}

/* sekce referencí převzatá z původní stránky — jen se odsadí */
.lp-reference { padding-top: var(--mezera); }

@media (max-width: 520px) {
  .lp-hero__akce .lp-btn { flex: 1 1 100%; }
  .lp-galerie { grid-template-columns: 1fr; }
  .lp-podpolozky { grid-template-columns: 1fr; }
}