/* ==========================================================================
   atrium.cz — Kontakty: obrazově-textové bloky (Vzorové domy, Společnost)
   Předloha: https://atrium-marketing.lovable.app/kontakty/vzorove-domy
   Rozměry změřené v předloze, barvy z design systému HP (hp-redesign.css).
   ========================================================================== */

/* --- Hlavička stránky --------------------------------------------------- */
/* Předloha: světle modrý pruh (#f4f7fb), pod ním bílé sekce s bloky. */

.atr-kb{
  background:#fff;
}

.atr-kb-hlavicka{
  background:#f4f7fb;
  padding:40px 0 56px;
  text-align:center;
}

.atr-kb-eyebrow{
  font-size:14px;
  font-weight:700;
  letter-spacing:4.2px;
  text-transform:uppercase;
  color:var(--atr-blue-l);
  margin-bottom:16px;
}

.atr-kb-h1{
  font-size:60px;
  font-weight:800;
  line-height:60px;
  color:var(--atr-ink);
  margin:0 0 20px;
}

.atr-kb-perex{
  font-size:18px;
  line-height:29px;
  color:var(--atr-muted);
  max-width:768px;
  margin:0 auto;
}

.atr-kb-perex p{ margin:0 0 12px; }
.atr-kb-perex p:last-child{ margin-bottom:0; }

/* --- Blok: fotka + text ------------------------------------------------- */
/* Předloha: grid 2 sloupce, gap 48, obsah v 1280; sudé bloky mají fotku vpravo. */

.atr-kb-bloky .blok_sirky_webu{
  width:100%;
  max-width:1280px;
  padding-left:32px;
  padding-right:32px;
  box-sizing:border-box;
}

.atr-kb-blok{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px;
  padding:56px 0;
}

.atr-kb-blok + .atr-kb-blok{
  border-top:1px solid var(--atr-line);
}

.atr-kb-blok--obr-vpravo .atr-kb-obr{ order:2; }
.atr-kb-blok--obr-vpravo .atr-kb-text{ order:1; }

.atr-kb-obr img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1504/807;   /* poměr z předlohy — fotky mají různé, ořízne se */
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 10px 26px rgba(15,58,110,.14);
  max-height:none;         /* přebít legacy img{max-height} */
}

.atr-kb-mesto{
  font-size:12px;
  font-weight:800;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--atr-blue-l);
  margin-bottom:12px;
}

.atr-kb-nadpis{
  font-size:36px;
  font-weight:800;
  line-height:1.15;
  color:var(--atr-ink);
  margin:0;
}

/* --- Informační řádky (obsah z adminu) ---------------------------------- */
/* Klient píše řádky do „zkráceného výpisu" a ikonu si vloží pluginem „ikony".
   Ikona = maskovaný <span class="lucide-ic">, barvu bere odsud. */

.atr-kb-info{
  margin:24px 0 0;
  font-size:16px;
  line-height:26px;
  color:rgba(11,26,43,.8);
}

/* Ikona je vytažená z textového toku (absolutně), ne flex položka — jinak by se
   <strong> nebo <br> uvnitř řádku staly samostatnými flex položkami a řádek by se
   rozjel. Takhle je jedno, co klient v adminu do řádku napíše. */
.atr-kb-info p{
  position:relative;
  padding-left:32px;
  margin:0 0 14px;
}

.atr-kb-info p:last-child{ margin-bottom:0; }

.atr-kb-info .lucide-ic{
  position:absolute;
  left:0;
  top:3px;                 /* na účaří prvního řádku */
  width:20px;
  height:20px;
  background-color:var(--atr-blue-l);
}

.atr-kb-info a{
  color:var(--atr-ink) !important;
  text-decoration:none;
}

.atr-kb-info a:hover{
  color:var(--atr-blue-l) !important;
  text-decoration:underline;
}

/* Odrážky uvnitř obsahu — globální .obsah ul li:before vkládá bitmapu, tady ne */
.atr-kb-info ul{ margin:0 0 14px; padding-left:0; list-style:none; }
.atr-kb-info ul li{ background-image:none; padding-left:0; }
.atr-kb-info ul li:before{ content:""; display:none; }

/* .atr-btn řeší barvy/rámeček, výška a padding jsou per-button (viz hp-redesign.css) */
.atr-kb-tl{
  margin-top:32px;
  height:48px;
  padding:0 26px;
}

/* --- Detail (Vzorový dům / Sídlo …) ------------------------------------- */
/* Base je detail „Příběhy dřevostaveb" (template/clanek.php). Ten má modrý citační
   blok napsaný v adminu inline styly — tady je z toho komponenta, aby to klient
   psát nemusel: město jako modrý eyebrow, kontaktní řádky s ikonami, modrá linka. */

.atr-kb-detail .h2_clanek{
  font-size:14px;
  font-weight:800;
  letter-spacing:2.4px;
  line-height:1.3;
  text-transform:uppercase;
  color:var(--atr-blue-l);
  margin:0 0 4px;
}

/* Pořadí: eyebrow (město) nad nadpisem, jako ve výpisu i v předloze */
.atr-kb-detail .obal_h1_h2_clanek{
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
}

.atr-kb-detail .zkraceny_vypis{
  margin-top:32px;
  padding:8px 0 8px 28px;
  border-left:5px solid var(--atr-blue-l);
  font-size:17px;
  line-height:28px;
  color:rgba(11,26,43,.8);
}

.atr-kb-detail .zkraceny_vypis p{
  position:relative;
  padding-left:32px;
  margin:0 0 14px;
}

.atr-kb-detail .zkraceny_vypis p:last-child{ margin-bottom:0; }

.atr-kb-detail .zkraceny_vypis .lucide-ic{
  position:absolute;
  left:0;
  top:4px;
  width:20px;
  height:20px;
  background-color:var(--atr-blue-l);
}

.atr-kb-detail .zkraceny_vypis a{
  color:var(--atr-ink) !important;
  text-decoration:none;
}

.atr-kb-detail .zkraceny_vypis a:hover{
  color:var(--atr-blue-l) !important;
  text-decoration:underline;
}

@media (max-width:768px){
  .atr-kb-detail .zkraceny_vypis{margin-top:24px;padding-left:18px;border-left-width:4px;font-size:16px;line-height:26px}
}

/* --- Responzivita ------------------------------------------------------- */

@media (max-width:1024px){
  .atr-kb-h1{font-size:44px;line-height:48px}
  .atr-kb-blok{gap:32px;padding:44px 0}
  .atr-kb-nadpis{font-size:30px}
}

@media (max-width:768px){
  .atr-kb-hlavicka{padding:28px 0 40px}
  .atr-kb-h1{font-size:34px;line-height:38px}
  .atr-kb-perex{font-size:16px;line-height:26px}
  .atr-kb-bloky .blok_sirky_webu{padding-left:20px;padding-right:20px}
  /* Na mobilu je fotka vždy nahoře — i u bloků, které mají na desktopu vpravo. */
  .atr-kb-blok{grid-template-columns:1fr;gap:24px;padding:32px 0}
  .atr-kb-blok--obr-vpravo .atr-kb-obr{order:1}
  .atr-kb-blok--obr-vpravo .atr-kb-text{order:2}
  .atr-kb-nadpis{font-size:26px}
  .atr-kb-info{margin-top:20px;font-size:15px;line-height:24px}
  .atr-kb-tl{margin-top:24px}
}

/* Tlačítko „Rezervovat návštěvu“ u vzorových domů (bod 11 korektury 24. 8. 2026).
   Stojí vedle „Více informací“ a drží stejný vzhled — obě akce jsou rovnocenné,
   liší se ikonou (šipka vs. kalendář). Vidět je jen u domu s vyplněným odkazem,
   takže na stránce často nebude vůbec. */
.atr-kb-tl--rezervace{
  margin-left:10px;
}
@media only screen and (max-width:640px){
  .atr-kb-tl--rezervace{ margin-left:0; margin-top:10px; }
}