/* =============================================================
   KONTAKT — kontakt1.css
   Styly jen pro tuhle stránku. Společný vzhled (hlavička, patička,
   tlačítka, písma) sedí ve style1.css, který se načítá před tímhle.

   Pozadí i dekorace jsou shodné s galerií, ceníkem a stránkou O nás:
   světlý oddíl nahoře, růžový pruh dole, neonové srdce v mezeře nad
   prvním oddílem a kytičky po stranách na širokých monitorech.
   ============================================================= */

/* ---------- nadpis stránky ----------
   POZOR: stejné hodnoty jsou i v galerie1.css, cenik1.css a onas1.css —
   když tady něco změníš, změň to i tam, ať nadpisy zůstanou stejné. */
.hlava--stranka{margin-bottom:0}
.hlava--stranka .hlava__titul{
  font-size:clamp(2.2rem,4.9vw,calc(3.75rem + var(--vic,0px) * .011));
  line-height:1.18;
}
.hlava--stranka .hlava__popis{max-width:48ch}

/* ---------- oddíly ---------- */
.kontakt-blok{position:relative;overflow:visible}

/* Mezera pod nadpisem stránky. Srdce visí kusem nahoru do prostoru
   nad oddílem (viz .velke-srdce). ID přebije .section ze style1.css. */
#napis{padding-top:clamp(36px,7vw,120px)}

/* Mapa sedí na světle růžovém pruhu přes celou šířku okna, stejně
   jako postup na stránce O nás nebo piercing v ceníku. */
.kontakt-blok--mapa{
  overflow:hidden;                       /* kvůli ratolesti v rohu */
  background:var(--band);
  padding-block:clamp(44px,5.4vw,72px);
  margin-bottom:clamp(48px,7vw,110px);   /* odstup od patičky */
}

.listy-kontakt{
  position:absolute;right:-46px;top:8%;
  width:clamp(110px,12vw,170px);height:auto;
  fill:none;stroke:var(--pink-light);stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.16;transform:rotate(-14deg);pointer-events:none;
}
.kontakt-blok .wrap{position:relative;z-index:1}

/* ---------- podnadpis oddílu ----------
   Stejná řeč jako v galerii, ceníku a na stránce O nás: rukopisný
   nadpis a pod ním krátká linka se srdíčkem uprostřed. */
.podnadpis{text-align:center;margin-bottom:clamp(26px,3.4vw,40px)}
.podnadpis h2{
  font-family:var(--display-nadpis);font-weight:400;
  font-size:clamp(1.75rem,3.5vw,calc(2.65rem + var(--vic,0px) * .008));
  line-height:1.2;
  color:var(--ink);
}
.podnadpis p{margin-top:8px;font-size:13.5px;color:var(--muted)}
.podnadpis::after{
  content:"";display:block;
  width:clamp(120px,15.5vw,185px);height:9px;
  margin:15px auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 176'%3E%3Cpath fill='%23FE9FD0' d='M100 168C42 124 6 92 6 56 6 27 28 8 54 8c19 0 35 11 46 26C111 19 127 8 146 8c26 0 48 19 48 48 0 36-36 68-94 112Z'/%3E%3C/svg%3E")
      center/10px 9px no-repeat,
    linear-gradient(90deg,transparent,var(--pink-soft) 24%,transparent 45%,transparent 55%,var(--pink-soft) 76%,transparent)
      center/100% 1px no-repeat;
}


/* =============================================================
   ROZVRŽENÍ — formulář vedle rychlého kontaktu
   Formulář je hlavní, proto dostal širší sloupec. Panely vedle něj
   se zarovnávají nahoru, ať nelítají na střed, když je formulář
   vyšší než ony.
   ============================================================= */
.kontakt-split{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);
  gap:clamp(18px,2.4vw,36px);
  align-items:start;
}


/* =============================================================
   FORMULÁŘ
   ============================================================= */
.kform{
  background:#fff;
  border:1px solid var(--pink-soft);
  border-radius:var(--r-card,20px);
  padding:clamp(20px,2.8vw,34px);
  box-shadow:0 14px 34px rgba(254,159,208,.10);
}

/* Dvě pole vedle sebe. Na užších oknech se to zalomí pod sebe,
   viz responzivita úplně dole. */
.kform__radek{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(12px,1.6vw,18px);
}

.pole{display:block;margin-bottom:clamp(13px,1.7vw,17px)}

/* Popisky polí mluví stejnou řečí jako nadpisy kroků na stránce
   O nás — verzálky, prostrkané, drobné. */
.pole__nazev{
  display:block;margin-bottom:7px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--ink);
}
.pole__nazev em{font-style:normal;color:var(--pink)}          /* hvězdička u povinných */
.pole__nazev i{                                               /* „nepovinné" */
  font-style:normal;letter-spacing:.06em;text-transform:none;
  font-weight:500;font-size:11px;color:var(--muted);
}

.pole input,
.pole textarea{
  width:100%;
  font:inherit;font-size:14.5px;line-height:1.5;color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.pole textarea{min-height:150px;resize:vertical;line-height:1.62}
.pole input::placeholder,
.pole textarea::placeholder{color:#C3AAB4}

/* Vybrané pole se orámuje růžovou a dostane měkkou záři — stejný
   jazyk jako tlačítka a odkazy na zbytku webu. */
.pole input:focus,
.pole textarea:focus{
  outline:none;
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(254,159,208,.15);
}

/* ---------- souhlas ---------- */
.souhlas{
  display:flex;gap:11px;align-items:flex-start;
  margin:2px 0 clamp(16px,2vw,22px);
  font-size:12.5px;line-height:1.55;color:var(--muted);cursor:pointer;
}
.souhlas input{
  flex:0 0 auto;width:16px;height:16px;margin-top:2px;
  accent-color:var(--pink);cursor:pointer;
}

/* past na roboty — musí zůstat v kódu, ale nikde se nesmí ukázat */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- tlačítko a hlášky ---------- */
.kform__pata{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:14px clamp(14px,2vw,20px);
}

.odeslat{
  display:inline-flex;align-items:center;gap:11px;
  padding:13px 26px;border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--pink-dark,#E8399A));
  box-shadow:0 10px 24px rgba(254,159,208,.28);
  transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;
}
.odeslat:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(254,159,208,.34)}
.odeslat:active{transform:translateY(0)}
.odeslat:disabled{opacity:.55;transform:none;cursor:default}
.odeslat svg{
  width:22px;height:10px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Hláška po odeslání. Dokud je prázdná, nezabírá místo. */
.kform__stav{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0}
.kform__stav:empty{display:none}
.kform__stav.je-ok{color:var(--pink-dark,#E8399A);font-weight:600}
.kform__stav.je-chyba{color:#C0392B;font-weight:600}


/* =============================================================
   PANELY VEDLE FORMULÁŘE
   ============================================================= */
.kontakt-side{display:grid;gap:clamp(14px,1.8vw,20px);align-content:start}

.rychle{
  border:1px solid var(--pink-soft);
  border-radius:var(--r-card,20px);
  background:linear-gradient(160deg,#FFF4F9,#FFE9F2);
  padding:clamp(18px,2.2vw,26px);
}
.rychle h3{
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;color:var(--ink);margin:0 0 14px;
}

/* ---------- seznam kontaktů ---------- */
.rychle__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rychle__list li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:13.5px;line-height:1.5;color:var(--ink);
}
.rychle__list svg{
  flex:0 0 auto;width:18px;height:18px;margin-top:1px;
  fill:none;stroke:var(--pink);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.rychle__list a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid var(--pink-soft);
  transition:color .2s ease,border-color .2s ease;
}
.rychle__list a:hover{color:var(--pink);border-color:var(--pink)}

/* ---------- otevírací doba ---------- */
.hodiny{
  display:grid;grid-template-columns:auto 1fr;
  gap:8px 18px;margin:0;font-size:13.5px;
}
.hodiny dt{color:var(--muted)}
.hodiny dd{margin:0;text-align:right;font-weight:600;color:var(--ink)}

/* ---------- odrážky se srdíčkem ---------- */
.tipy{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tipy li{
  position:relative;padding-left:19px;
  font-size:13px;line-height:1.5;color:var(--muted);
}
.tipy li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:9px;height:8px;opacity:.75;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 176'%3E%3Cpath fill='%23FE9FD0' d='M100 168C42 124 6 92 6 56 6 27 28 8 54 8c19 0 35 11 46 26C111 19 127 8 146 8c26 0 48 19 48 48 0 36-36 68-94 112Z'/%3E%3C/svg%3E")
    center/contain no-repeat;
}


/* =============================================================
   MAPA
   ============================================================= */
.mapa-split{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);
  gap:clamp(18px,2.4vw,34px);
  align-items:stretch;
}

/* Výšku držíme tady, ať nezáleží na tom, co si .map nese ze
   style1.css — iframe se do rámečku roztáhne na celou plochu.
   Výška je schválně nízká: panel vedle se natahuje na výšku mapy,
   takže čím vyšší mapa, tím víc prázdna v panelu. */
.mapa{
  position:relative;
  min-height:clamp(240px,21vw,272px);
  border-radius:var(--r-img);
  overflow:hidden;
  box-shadow:0 14px 34px rgba(254,159,208,.18);
}
.mapa .map{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Na růžovém pruhu je panel bílý, jinak by splynul s pozadím. */
.kontakt-blok--mapa .rychle{background:#fff}

/* Panel má být stejně vysoký jako mapa vedle. Sloupec se natáhne
   na výšku řádku a panel uvnitř na výšku sloupce; odkaz do Map pak
   sedí u spodní hrany, ať dole nezůstane prázdno. */
.mapa-info{display:grid}
.mapa-info .rychle{
  height:100%;
  display:flex;flex-direction:column;
}
.mapa-info .mapa-odkaz{margin-top:auto;padding-top:18px}

.adresa{
  margin:0 0 12px;font-size:14px;line-height:1.5;
  font-weight:600;color:var(--ink);
}

.mapa-odkaz{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:16px;
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--pink);text-decoration:none;
  transition:gap .2s ease,color .2s ease;
}
.mapa-odkaz svg{
  width:17px;height:17px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.mapa-odkaz:hover{gap:12px;color:var(--pink-dark,#E8399A)}


/* ---------- velké srdce nad prvním oddílem ----------
   Stejná velikost i umístění jako v galerii a na stránce O nás.
   Na užších obrazovkách se skryje, aby nelezlo do textu. */
.velke-srdce{
  display:none;
  position:absolute;z-index:0;
  left:clamp(-20px,2.5vw,70px);
  top:clamp(-30px,-1vw,0px);
  width:clamp(150px,17vw,260px);height:auto;
  fill:none;stroke:#FFB0D2;stroke-width:1.5;stroke-linejoin:round;
  filter:
    drop-shadow(0 0 3px var(--pink-neon))
    drop-shadow(0 0 14px rgba(255,92,158,.6))
    drop-shadow(0 0 38px rgba(255,92,158,.32));
  opacity:.55;pointer-events:none;
  transform:rotate(-10deg);
}

/* ---------- kytičky po stranách ----------
   Obsah má omezenou šířku, takže na širokých monitorech zbývá
   po stranách prázdno. Kytičky ho zaplní — ale jen tam, kde je
   na ně opravdu místo, jinak by lezly do textu. ---------- */
.kyticka{display:none}

@media (min-width:1100px){
  .velke-srdce{display:block}
}

@media (min-width:1400px){
  .kyticka{
    display:block;position:absolute;top:50%;
    width:clamp(90px,7vw,130px);height:auto;
    fill:none;stroke:var(--pink-light);stroke-width:1.2;
    stroke-linecap:round;stroke-linejoin:round;
    opacity:.3;pointer-events:none;
  }
  .kyticka--l{left:2.2vw;transform:translateY(-50%) rotate(12deg)}
  /* pravá je zrcadlově otočená, ať to nevypadá jako kopie */
  .kyticka--p{right:2.2vw;transform:translateY(-50%) scaleX(-1) rotate(12deg)}
}


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

/* Panely vedle formuláře se od téhle šířky nevejdou vedle sebe
   rozumně, tak jdou pod formulář a rozdělí se na dva sloupce. */
@media (max-width:980px){
  .kontakt-split{grid-template-columns:minmax(0,1fr)}
  .kontakt-side{
    grid-template-columns:repeat(2,1fr);
    gap:clamp(14px,2vw,18px);
  }
  .mapa-split{grid-template-columns:minmax(0,1fr)}
  .mapa{min-height:clamp(280px,42vw,380px)}
}

@media (max-width:900px){
  .listy-kontakt{opacity:.1;right:-64px}
}

@media (max-width:760px){
  .kontakt-side{grid-template-columns:1fr}
}

@media (max-width:560px){
  .listy-kontakt{display:none}
  .kform{padding:18px 16px}
  .kform__radek{grid-template-columns:1fr}   /* pole pod sebe */
  .pole textarea{min-height:130px}
  .odeslat{width:100%;justify-content:center}
  .kform__pata{gap:12px}
}