/* ==========================================================================
   atrium.cz — Formuláře (fáze 2)
   Předloha: https://atrium-marketing.lovable.app/#katalogy a /kontakty
   Rozměry změřené v předloze, barvy z design systému HP (hp-redesign.css).

   Sdílený základ `.atr-fm-*` pro oba formuláře webu:
     · „Katalogy a inspirace" — template/modul/formular.php (patička = celý web)
     · „Napište nám"          — template/modul/formular_kontakt.php

   Oba jsou samostatné includy, takže se dají vložit kamkoli; liší se jen
   obalem (bílá karta nad fotkou × světlá karta ve dvou sloupcích).
   ========================================================================== */

/* --- Společné prvky ------------------------------------------------------ */

.atr-fm-radek{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.atr-fm-radek--1{ grid-template-columns:1fr; }
.atr-fm-radek + .atr-fm-radek{ margin-top:16px; }

.atr-fm-pole{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.atr-fm-pole--pul{ max-width:calc(50% - 8px); }

.atr-fm-label{
  font-size:14px;
  line-height:20px;
  font-weight:800;
  color:var(--atr-ink);
}

.atr-fm-povinne{
  margin-left:4px;
  font-weight:600;
  color:#5A7A96;
}

.atr-fm-input,
.atr-fm-select,
.atr-fm-textarea{
  box-sizing:border-box;
  width:100%;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  color:var(--atr-ink);
  background:#fff;
  border:1px solid #CFDBE8;
  border-radius:6px;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .15s var(--atr-ease),box-shadow .15s var(--atr-ease);
}

.atr-fm-input,
.atr-fm-select{
  height:44px;
  padding:0 12px;
}

.atr-fm-textarea{
  padding:12px;
  line-height:22px;
  min-height:146px;
  resize:vertical;
}

.atr-fm-input:focus,
.atr-fm-select:focus,
.atr-fm-textarea:focus{
  outline:none;
  border-color:#006CB0;
  box-shadow:0 0 0 3px rgba(0,108,176,.12);
}

.atr-fm-input::placeholder,
.atr-fm-textarea::placeholder{ color:#9DB1C4; }

/* select — vlastní chevron (appearance:none sebral nativní).
   Platí, dokud nenaskočí JS a nepostaví nad ním vlastní rozbalovačku (níže). */
.atr-fm-select{
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A7A96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
  cursor:pointer;
}

/* --- Vlastní rozbalovačka nad nativním selectem -------------------------- */
/* Mechanika i vzhled jako filtr databáze studií (funkce/studie.js, pattern
   z Dukovan) — nativní select v každém systému vypadá jinak. */

/* nativní select se schová AŽ když nad ním JS postaví vlastní pole; ne display:none,
   jinak některé prohlížeče pole vynechají z odeslání i z validace */
.atr-fm-select--skryty{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.atr-fm-sel{
  position:relative;
  background:#fff;
  border:1px solid #CFDBE8;
  border-radius:6px;
  transition:border-color .15s var(--atr-ease),box-shadow .15s var(--atr-ease);
}

.atr-fm-sel:hover{ border-color:#9DB1C4; }

.atr-fm-sel.je-otevrene{
  border-color:#006CB0;
  box-shadow:0 0 0 3px rgba(0,108,176,.12);
}

.atr-fm-sel-val{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  height:42px;              /* +2× rámeček = 44 jako předloha */
  padding:0 12px;
  font-size:14px;
  font-weight:500;
  color:var(--atr-ink);
  cursor:pointer;
  user-select:none;
}

.atr-fm-sel-val:focus-visible{ outline:2px solid #006CB0;outline-offset:2px; }

/* dokud není vybráno, chová se text jako placeholder */
.atr-fm-sel.je-prazdne .atr-fm-sel-hodnota{ color:#9DB1C4; }

.atr-fm-sel-hodnota{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.atr-fm-sel-caret{
  flex:0 0 auto;
  display:inline-flex;
  color:#5A7A96;
  transition:transform .2s var(--atr-ease);
}

.atr-fm-sel.je-otevrene .atr-fm-sel-caret{ transform:rotate(180deg); }

.atr-fm-sel-pop{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:30;
  max-height:264px;
  overflow-y:auto;
  padding:6px;
  background:#fff;
  border:1px solid #E2EAF2;
  border-radius:8px;
  box-shadow:0 12px 28px rgba(15,40,80,.16);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s var(--atr-ease),transform .18s var(--atr-ease),visibility .18s;
}

.atr-fm-sel.je-otevrene .atr-fm-sel-pop{
  opacity:1;
  visibility:visible;
  transform:none;
}

.atr-fm-sel-item{
  display:block;
  padding:9px 10px;
  border-radius:6px;
  font-size:14px;
  line-height:20px;
  font-weight:500;
  color:var(--atr-ink);
  cursor:pointer;
  transition:background-color .12s var(--atr-ease),color .12s var(--atr-ease);
}

.atr-fm-sel-item:hover{ background:rgba(0,108,176,.07); }

.atr-fm-sel-item.je-aktivni{
  background:rgba(0,108,176,.1);
  color:#006CB0;
  font-weight:700;
}

/* --- Checkboxy ----------------------------------------------------------- */

.atr-fm-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  font-size:14px;
  line-height:20px;
  font-weight:500;
  color:var(--atr-ink);
}

.atr-fm-check + .atr-fm-check{ margin-top:12px; }

.atr-fm-check input{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:1px 0 0;
  padding:0;
  border:1.5px solid #CFDBE8;
  border-radius:5px;
  background-color:#fff;
  background-repeat:no-repeat;
  background-position:center;
  background-size:12px;
  cursor:pointer;
  transition:background-color .15s var(--atr-ease),border-color .15s var(--atr-ease);
}

.atr-fm-check input:checked{
  background-color:#006CB0;
  border-color:#006CB0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.atr-fm-check input:focus-visible{
  outline:2px solid #006CB0;
  outline-offset:2px;
}

.atr-fm-hvezda{ margin-left:2px;color:#006CB0; }

/* skupina checkboxů („Vyberte katalogy") */
.atr-fm-skupina{ margin-top:24px; }
.atr-fm-skupina-nadpis{
  display:block;
  margin-bottom:12px;
  font-size:14px;
  line-height:20px;
  font-weight:800;
  color:var(--atr-ink);
}

.atr-fm-souhlasy{ margin-top:20px; }

/* --- Tlačítko ------------------------------------------------------------ */

.atr-fm-tl{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:28px;
  padding:14px 24px;
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  letter-spacing:.35px;
  line-height:20px;
  color:#fff;
  background:#006CB0;
  border:2px solid #006CB0;
  border-radius:6px;
  cursor:pointer;
  transition:background-color .2s var(--atr-ease),border-color .2s var(--atr-ease);
}

.atr-fm-tl:hover{ background:var(--atr-blue); border-color:var(--atr-blue); }

/* dokud není odsouhlasené zpracování údajů (Lovable: tlačítko je do té doby neaktivní) */
.atr-fm-tl:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.atr-fm-tl:disabled:hover{ background:#006CB0; border-color:#006CB0; }

.atr-fm-pozn{
  margin-top:14px;
  font-size:13px;
  line-height:1.5;
  font-weight:500;
  color:#5A7A96;
}

/* honeypot — vidí ho jen robot */
.atr-fm-past{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none;
}

/* --- Stav po odeslání ---------------------------------------------------- */

.atr-fm-hlaska{
  padding:20px;
  border-radius:8px;
  font-size:15px;
  line-height:24px;
  font-weight:600;
}

.atr-fm-hlaska--ok{
  background:rgba(0,108,176,.07);
  border:1px solid rgba(0,108,176,.25);
  color:var(--atr-ink);
}

.atr-fm-hlaska--chyba{
  background:rgba(200,40,40,.06);
  border:1px solid rgba(200,40,40,.25);
  color:#8c2020;
}

.atr-fm-hlaska-nadpis{
  display:block;
  margin-bottom:6px;
  font-size:20px;
  font-weight:800;
  color:var(--atr-ink);
}

/* ==========================================================================
   Formulář „Katalogy a inspirace" — bílá karta nad fotkou (patička webu)
   ========================================================================== */

.blok_dokumenty_zdarma_nad_patou .blok_sirky_webu{
  width:100%;
  max-width:1480px;
  margin-left:auto;
  margin-right:auto;
  padding-left:40px;
  padding-right:40px;
  box-sizing:border-box;
}

/* karta vpravo (margin-left:auto), aby dosedla na dělící linku patičky */
.blok_dokumenty_zdarma_nad_patou_in{
  width:720px;
  max-width:100%;
  margin-left:auto;
  box-sizing:border-box;
  padding:48px;
  border-radius:18px;
  background:rgba(255,255,255,.98);
  box-shadow:0 20px 60px rgba(15,40,80,.22);
}

.blok_dokumenty_zdarma_nad_patou .nadpis_dokumenty_zdarma{
  font-size:38px;
  line-height:45.6px;
  font-weight:800;
  color:var(--atr-ink);
}

.blok_dokumenty_zdarma_nad_patou .podnadpis_dokumenty_zdarma{
  margin-top:12px;
  font-size:16px;
  line-height:26px;
  font-weight:400;
  color:var(--atr-muted);
}

.blok_dokumenty_zdarma_nad_patou .blok_dokumenty_zdarma_nadpis{
  margin-bottom:0;
  padding:0;
  border:0;
}

/* --- Adresa schovaná za checkbox („Chci zaslat tištěné výtisky") --------- */

.atr-fm-adresa{ margin-top:16px; }
.atr-fm-adresa[hidden]{ display:none; }

/* ==========================================================================
   Formulář „Napište nám" — dva sloupce, světlá karta vpravo
   ========================================================================== */

.atr-fk{
  background:#fff;
  padding:96px 0;
}

.atr-fk .blok_sirky_webu{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
  width:100%;
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
  padding-left:40px;
  padding-right:40px;
  box-sizing:border-box;
}

.atr-fk-eyebrow{
  font-size:12px;
  line-height:16px;
  font-weight:800;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--atr-blue-l);
}

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

.atr-fk-perex{ margin-top:16px; }

.atr-fk-perex,
.atr-fk-perex p{
  font-size:16px;
  line-height:26px;
  color:var(--atr-muted);
}

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

.atr-fk-kontakty{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:28px;
}

.atr-fk-kontakty a:link,
.atr-fk-kontakty a:visited{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:16px;
  line-height:24px;
  font-weight:600;
  color:var(--atr-ink);
  text-decoration:none;
  transition:color .2s var(--atr-ease);
}

.atr-fk-kontakty a:hover{ color:var(--atr-blue-l); }
.atr-fk-kontakty svg{ flex:0 0 20px;color:#006CB0; }

.atr-fk-karta{
  box-sizing:border-box;
  padding:32px;
  border:1px solid #E2EAF2;
  border-radius:18px;
  background:#F7FAFD;
}

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

@media (max-width:1100px){
  .blok_dokumenty_zdarma_nad_patou .nadpis_dokumenty_zdarma{font-size:32px;line-height:40px}
  .atr-fk-nadpis{font-size:30px;line-height:38px}
}

@media (max-width:900px){
  .blok_dokumenty_zdarma_nad_patou .blok_sirky_webu{padding-left:24px;padding-right:24px}
  .blok_dokumenty_zdarma_nad_patou_in{width:100%;margin-left:0;padding:32px}
  .atr-fk{padding:56px 0}
  .atr-fk .blok_sirky_webu{grid-template-columns:1fr;gap:32px;padding-left:24px;padding-right:24px}
}

@media (max-width:600px){
  .blok_dokumenty_zdarma_nad_patou_in{padding:24px}
  .blok_dokumenty_zdarma_nad_patou .nadpis_dokumenty_zdarma{font-size:26px;line-height:34px}
  .atr-fk-nadpis{font-size:26px;line-height:34px}
  .atr-fk-karta{padding:20px}
  .atr-fm-radek{grid-template-columns:1fr}
  .atr-fm-pole--pul{max-width:none}
  .atr-fm-tl{width:100%;justify-content:center}
}

/* --- Formulář pod kartou domu (bod 6.4 korektury 8/2026) ------------------
   Předloha Lovable /domy/grus-49: bílý pás, vystředěný nadpis 36/800 a úzký
   sloupec formuláře (622 px), aby pod širokým detailem domu působil klidně.
   Vlastní pole a chování dědí od .atr-fm výš. */
/* Tlačítko v hero na detail stavby sjíždí sem — hlavička je fixní, takže kotva
   potřebuje odskok jako filtr katalogu i kotva katalogů na hlavní straně. */
#napiste-nam-dum{ scroll-margin-top:110px; }
/* potvrzení po odeslání katalogů — kdyby na kotvu někdo mířil napřímo (korektura 31. 8.) */
#kotva_form{ scroll-margin-top:130px; }
@media (max-width:900px){ #napiste-nam-dum{ scroll-margin-top:90px; } }

.atr-fdum{
  background:#fff;
  padding:96px 0;
}
.atr-fdum-obal{
  box-sizing:border-box;   /* web nemá globální reset — bez toho padding přeteče na mobilu */
  width:100%;
  max-width:670px;         /* 622 obsah + 2× 24 padding */
  margin:0 auto;
  padding:0 24px;
}
.atr-fdum-nadpis{
  margin:0 0 12px;
  font-size:36px;
  line-height:44px;
  font-weight:800;
  color:#0b1a2b;
  text-align:center;
}
.atr-fdum-perex{
  margin:0 0 32px;
  font-size:18px;
  line-height:29px;
  color:#5A6B7D;
  text-align:center;
}

@media (max-width:900px){
  .atr-fdum{padding:56px 0}
  .atr-fdum-nadpis{font-size:30px;line-height:38px}
}

@media (max-width:600px){
  .atr-fdum{padding:44px 0}
  .atr-fdum-nadpis{font-size:26px;line-height:34px}
  .atr-fdum-perex{font-size:16px;line-height:26px}
}

/* Výběr katalogů ve dvou sloupcích (bod 3 korektury 24. 8. 2026) —
   osm položek pod sebou byl zbytečně dlouhý sloupec, klientka je má na
   screenshotu vedle sebe. Na telefonu zůstávají pod sebou. */
.atr-fm-katalogy{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:28px;
  row-gap:12px;
}

/* Rozestup řádků dělá row-gap. Obecné odsazení sousedních checkboxů (mimo mřížku
   se používá dál) by tu první položku posunulo o 12 px výš než tu vedle ní
   a udělalo pod ní mezeru — přesně to klientka hlásila 25. 8. 2026. */
.atr-fm-katalogy .atr-fm-check + .atr-fm-check{ margin-top:0; }
@media only screen and (max-width:640px){
  .atr-fm-katalogy{ grid-template-columns:1fr; }
}

/* Modrý box kolem formuláře u karty domu (bod 2 korektury 24. 8. 2026).
   Podle screenshotu klientky: pole sedí ve světle modrém rámečku se zaoblenými
   rohy, nadpis a perex zůstávají nad ním na bílé. Odděluje formulář od zbytku
   stránky, aby nesplýval s obsahem karty. */
.atr-fdum-obal{ max-width:760px; }          /* box potřebuje o kus víc než holá pole */
.atr-fdum .atr-fm{
  background:#f4f7fb;
  border:1px solid #dde6f1;
  border-radius:14px;
  padding:32px;
}
@media (max-width:900px){
  .atr-fdum .atr-fm{ padding:24px; border-radius:12px; }
}
@media (max-width:640px){
  .atr-fdum .atr-fm{ padding:18px 16px; }
}

/* Tři pole v jednom řádku (e-mail · telefon · PSČ u formuláře k domu, bod 2
   korektury 24. 8. 2026). Na užších displejích se vrací ke dvěma a pak k jednomu. */
.atr-fm-radek--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
/* Korektura 31. 8. 2026: popisek „PSČ trvalého bydliště" se ve třetím sloupci
   zalomí na dva řádky a pole pod ním by pak sedělo níž než e-mail a telefon.
   Popisky proto v tomhle řádku drží výšku dvou řádků a text sedí u spodní hrany
   — všechna tři pole zůstanou v jedné lince. */
.atr-fm-radek--3 .atr-fm-label{ display:flex; flex-wrap:wrap; align-items:flex-end; min-height:40px; }
@media (max-width:900px){ .atr-fm-radek--3{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px){ .atr-fm-radek--3{ grid-template-columns:1fr; } .atr-fm-radek--3 .atr-fm-label{ display:block; min-height:0; } }