/* ==================================================================
   KONTAKT — sekce podle Figmy (frame „Kontakt stránka", 232:1360)

   Rytmus sekcí, tři sloupce, pole formuláře a závěrečné CTA jsou
   sdílené v sekce.css. Tady je jen rozvržení hera a bloku s kontakty.
   ================================================================== */

.sekce--hero-svetly { padding-block: var(--pad-m) var(--pad-s); }

@media (max-width: 63.9375rem) {
  .sekce--hero-svetly { padding-top: var(--pad-l); }
}

/* ------------------------------------------------------------------
   HERO — fotka vlevo, kontakty a formulář vpravo

   Na mobilu jde všechno pod sebe v pořadí, v jakém to člověk potřebuje:
   nejdřív nadpis a telefon, pak fotka, teprve nakonec formulář. Fotka
   uprostřed není dekorace — kdo píše cizímu člověku, chce vidět, komu.
   ------------------------------------------------------------------ */

.kontakt-hero { display: grid; gap: var(--space-7); }

.kontakt-hero__foto {
  width: 100%;
  aspect-ratio: 571 / 575;
  /* Strop se dává na šířku, ne na výšku. max-height by přebil poměr
     stran — box by se z portrétu stal na šířku a ořez by usekl kus
     obličeje. Takhle se fotka jen zmenší a výřez zůstane, jaký má být.
     Číslo je „kolik smí být vysoká" přepočtené přes poměr stran. */
  max-width: calc(62svh * 571 / 575);
  object-fit: cover;
  /* Výřez z návrhu — bez něj by ořez sedl na střed a usekl obličej. */
  object-position: 50% 61%;
  background: var(--c-placeholder);
}

/* Tablet a menší: fotka je pod textem přes celý sloupec a v šířce
   tabletu by z portrétu byl skoro půlmetrový plakát. Strop ji drží
   v rozumné velikosti; na telefonu se neuplatní a fotka zůstane přes
   celou šířku, jak je teď. */
@media (max-width: 63.9375rem) {
  .kontakt-hero__foto { max-width: min(32rem, calc(56svh * 571 / 575)); }
}

@media (min-width: 64rem) {
  .kontakt-hero {
    grid-template-columns: 571fr 553fr;
    align-items: start;
    column-gap: clamp(3rem, 32.9px + 4.027vw, 8.5rem);   /* 48 → 136 */
    row-gap: var(--space-7);
  }
  /* Fotka zabírá celou levou stranu obou řádků a při scrollování se
     v ní veze s sebou: začne v jedné lince s popiskem „Nezávazná
     konzultace", drží se pod hlavičkou, dokud je vedle ní co číst,
     a zastaví se spodní hranou na konci formuláře. Dělá to sticky,
     ne skript — nezávisí to na plynulosti scrollování a nemá to co
     zadrhnout. Sticky funguje jen u položky zarovnané nahoru, proto
     align-self: start. */
  .kontakt-hero__foto {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: calc(var(--vyska-headeru) + var(--space-5));
  }
  .kontakt-hero__uvod { grid-column: 2; grid-row: 1; }
  .kontakt-hero__form { grid-column: 2; grid-row: 2; }
}

/* ------------------------------------------------------------------
   PŘÍMÉ KONTAKTY — telefon a e-mail nad formulářem

   Kdo chce volat, nemá kvůli tomu vyplňovat formulář. Proto stojí
   telefon výš než on a je největším prvkem po nadpisu.
   ------------------------------------------------------------------ */

.kontakt-hero__lead {
  max-width: 60ch;
  margin: var(--space-5) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--vaha-ui);
}

.spojeni { margin-top: var(--space-6); }

.spojeni__telefon {
  display: inline-block;
  color: var(--text);
  font-size: var(--fs-blok);
  line-height: 1.25;
  font-weight: var(--vaha-ui);
  text-decoration: none;
}
.spojeni__telefon:hover { color: var(--accent); }

.spojeni__pozn {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.spojeni__email {
  display: inline-block;
  margin-top: var(--space-5);
  color: var(--text);
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: var(--vaha-ui);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.22em;
  /* Adresa se na úzkém displeji nesmí protáhnout mimo sloupec. */
  overflow-wrap: anywhere;
}
.spojeni__email:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ------------------------------------------------------------------
   FORMULÁŘ — pole pod sebou, jak je v návrhu
   ------------------------------------------------------------------ */

.zprava__pole {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.zprava__akce { margin-top: var(--space-2); }

.zprava__pozn {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-mini);
  line-height: 1.6;
}

/* Pole mají display:flex, které by atribut hidden přebilo — bez tohohle
   zůstal formulář po odeslání vidět a poděkování skončilo pod ním. */
.zprava__pole[hidden],
.zprava__hotovo[hidden] { display: none; }

/* Odeslání: formulář se rozplyne, na jeho místě se vykreslí fajfka
   a poděkování. Zelená je tu jediná výjimka z palety — znamená „hotovo"
   a jinde na webu se nepoužívá. */
.zprava { --uspech: #4f8a63; }
.zprava__pole.je-odchazi {
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.zprava__hotovo { outline: none; }
.zprava__hotovo:not([hidden]) { animation: zprava-prichod 0.5s ease both; }
.zprava__fajfka {
  display: block;
  margin-bottom: var(--space-4);
  fill: none;
  stroke: var(--uspech);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zprava__fajfka circle {
  stroke-dasharray: 164;
  stroke-dashoffset: 164;
  animation: zprava-kresli 0.6s ease-out 0.1s forwards;
}
.zprava__fajfka path {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: zprava-kresli 0.35s ease-out 0.6s forwards;
}
.zprava__znovu { margin-top: var(--space-5); }

@keyframes zprava-prichod {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}
@keyframes zprava-kresli { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .zprava__pole.je-odchazi { transition: none; }
  .zprava__hotovo:not([hidden]) { animation: none; }
  .zprava__fajfka circle,
  .zprava__fajfka path { animation: none; stroke-dashoffset: 0; }
}

/* Poděkování po odeslání — stejná sazba jako u odhadu ceny. */
.zprava__hotovo h2 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 400;
}
.zprava__hotovo p {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.zprava__hotovo p:last-child { margin-bottom: 0; }

/* Nízké okno od tabletu výš — formulář se stáhne, ať tlačítko zůstane
   nad ohybem. Stejné pravidlo jako u formuláře odhadu ceny. */
@media (min-width: 48rem) and (max-height: 40rem) {
  .zprava__pole { gap: var(--space-3); }
  .zprava__akce { margin-top: 0; }
  .pole textarea { min-height: 5rem; }
}

/* Poslední světlá sekce před tmavým CTA — stejný nádech jako na
   ostatních stránkách. */
.sekce--zastihnete { padding-bottom: var(--pad-xl); }

@media (max-width: 63.9375rem) {
  .sekce--zastihnete { padding-bottom: calc(var(--pad-xl) * 1.25); }
}

/* Hláška, když se zprávu nepodaří odeslat. */
.zprava__chyba { color: var(--text); font-weight: var(--vaha-ui); }