/* ==========================================================================
   CONTACTS (/contacts) — prefix .ct-*
   Navazuje na style.css (tokeny, .trust-strip, .btn, .form-*), guides.css
   (.gd-hero) a services.css (.svc-fact, .svc-wa-icon).

   RYTMUS STRÁNKY (proč nejsou všechny sekce stejné):
     hero        tmavý, plná šířka
     kanály      dvě STEJNĚ široké karty — rovnocenné volby, ale různá váha
                 (Thajsko primární, mezinárodní sekundární)
     Ploy        TMAVÝ pás přes celou šířku — kontrastní řez uprostřed světla
     office+mapa 36/64 ve prospěch mapy, mapa bez rámečku
     formulář    úzký a vycentrovaný — je to záchytka, ne hlavní cesta
     odkazy      tři sloupce
   Střídání šířek a jeden tmavý řez drží oko v pohybu; kdyby bylo všechno
   50/50 a světlé, stránka se čte jako tabulka.

   Celá stránka je CTA, proto tu NENÍ tmavý closing band jako jinde.

   KONTRAST: na světlém podkladu je zlatá jen --color-gold-shadow a jen pro
   grafiku / velký text. Na tmavém pásu naopak patří --color-gold-hi.
   ========================================================================== */

.ct-section { padding: clamp(48px, 5.5vw, 84px) 0; }
.ct-section + .ct-section { padding-top: 0; }

.ct-section {
  --ct-measure: 62ch;
  --ct-body-sm: clamp(15px, 0.35vw + 14px, 16.5px);
}

.ct-head { margin-bottom: clamp(22px, 2.4vw, 32px); max-width: var(--ct-measure); }
.ct-head h2 { margin-top: 8px; }
.ct-head p {
  margin-top: 10px;
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: 1.65;
}

/* ==========================================================================
   1. JAZYKOVÉ KARTY — hrdina stránky.
   Šířky zůstávají stejné (jsou to rovnocenné volby), hierarchii nese
   orámování, velikost čísla a typ tlačítka.
   ========================================================================== */

.ct-channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.2vw, 28px);
}

@media (min-width: 760px) {
  .ct-channels { grid-template-columns: repeat(2, 1fr); }
}

.ct-channel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 38px);
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--trans-medium), box-shadow var(--trans-medium), transform var(--trans-medium);
}

.ct-channel:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 162, 75, 0.4);
  box-shadow: 0 12px 30px rgba(18, 16, 11, 0.08);
}

/* PRIMÁRNÍ karta — zlatý pruh nahoře, výraznější stín, teplejší podklad.
   Tohle je ta jediná vizuální hierarchie, kterou tu potřebujeme. */
.ct-channel.is-primary {
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(201, 162, 75, 0.1), transparent 62%);
  border-color: rgba(201, 162, 75, 0.45);
  box-shadow: 0 10px 30px rgba(18, 16, 11, 0.09);
}

.ct-channel.is-primary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-gold);
}

.ct-channel.is-primary:hover {
  box-shadow: 0 16px 36px rgba(18, 16, 11, 0.12);
}

/* ---- Hlavička karty: ikona jazyka + návěští ---- */

.ct-channel-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ct-flag {
  flex: none;
  width: 34px;
  height: 24px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border-line);
  background: var(--bg-main);
}

.ct-flag svg { display: block; width: 100%; height: 100%; }

.ct-channel-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Odznak "primární" — ať je volba explicitní, ne jen tušená z odstínu.
   KONTRAST: zlatá na 11px kapitálkách dá jen 3.77:1 — text proto tmavý
   (15.7:1), zlatá zůstává na rámečku, kde jako grafika 3:1 splní. */
.ct-channel-badge {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid rgba(156, 122, 52, 0.55);
  background: var(--bg-main);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-main);
  white-space: nowrap;
}

.ct-channel h2 {
  margin-top: clamp(14px, 1.6vw, 18px);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.2;
}

.ct-channel-note {
  margin-top: 8px;
  font-size: var(--ct-body-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

/* ČÍSLO je hlavní údaj karty — musí být vidět dřív než cokoli jiného */
.ct-number {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(24px, 1.6vw + 17px, 34px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  transition: color var(--trans-fast);
}

a.ct-number:hover { color: var(--color-gold-shadow); }

/* Sekundární karta drží stejnou strukturu, jen o stupeň tišší */
.ct-channel:not(.is-primary) .ct-number {
  font-size: clamp(21px, 1.1vw + 16px, 28px);
  color: var(--text-muted);
}

.ct-channel:not(.is-primary) a.ct-number:hover { color: var(--text-main); }

.ct-channel-actions {
  margin-top: auto;
  padding-top: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.ct-channel-actions .btn { width: 100%; }

/* Číslo je zároveň tel: odkaz, takže druhý řádek s ním by ho jen zopakoval —
   místo toho jedna tichá věta, že jde o stejné číslo pro chat i hovor. */
.ct-channel-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

.ct-number-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(16px, 1.8vw, 22px);
}

.ct-number-wrap svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--color-gold-shadow);
}

/* ---- E-mail řádek pod kartami ---- */

.ct-email-row {
  margin-top: clamp(18px, 2vw, 24px);
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--border-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: var(--ct-body-sm);
  color: var(--text-muted);
}

.ct-email-row a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-main);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(156, 122, 52, 0.55);
  text-underline-offset: 3px;
}

.ct-email-row a:hover { color: var(--teal-accent); text-decoration-color: currentColor; }
.ct-email-row svg { width: 17px; height: 17px; color: var(--color-gold-shadow); flex: none; }

/* ==========================================================================
   2. PLOY — TMAVÝ PÁS přes celou šířku.
   Jediný kontrastní řez uprostřed světlé stránky: rozbije monotónnost
   a zároveň vytáhne nejsilnější lidský prvek nahoru, hned za kanály.
   ========================================================================== */

/* Bez margin-top — odstup nese padding-bottom předchozí světlé sekce,
   jinak by se mezera sečetla dvakrát. */
.ct-ploy-band {
  position: relative;
  padding: clamp(40px, 4.6vw, 68px) 0;
  background-color: var(--bg-dark-main);
  background-image: radial-gradient(120% 80% at 15% 0%, rgba(201, 162, 75, 0.16), transparent 62%);
  color: var(--text-dark-main);
  border-top: 1px solid var(--border-dark-line);
  border-bottom: 1px solid var(--border-dark-line);
}

/* Stejné zrno jako na ostatních tmavých pásech webu */
.ct-ploy-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E") repeat;
  background-size: 160px 160px;
  opacity: 0.55;
  mix-blend-mode: overlay;
}

.ct-ploy-band > .container { position: relative; z-index: 1; }

.ct-ploy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 2.8vw, 40px);
}

.ct-ploy-photo {
  flex: none;
  width: clamp(104px, 11vw, 148px);
  height: clamp(104px, 11vw, 148px);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 75, 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  background: var(--bg-dark-surface);
}

.ct-ploy-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.ct-ploy-main { flex: 1 1 320px; min-width: 0; }

.ct-ploy-band .eyebrow { color: var(--color-gold-hi); }

.ct-ploy-name {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: clamp(24px, 1.4vw + 18px, 32px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--text-dark-main);
}

/* KONTRAST: --text-dark-muted dá na tomto pásu ~7:1, na drobném textu OK */
.ct-ploy-role {
  margin-top: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dark-muted);
}

.ct-ploy-role a {
  color: var(--color-gold-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ct-ploy-role a:hover { color: var(--color-bone); }

/* Akce sedí vpravo, aby pás nebyl jen dlouhý řádek textu */
.ct-ploy-actions {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.ct-socials { display: inline-flex; align-items: center; gap: 10px; }

.ct-social {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-dark-line);
  border-radius: 50%;
  background: var(--bg-dark-surface);
  color: var(--text-dark-muted);
  transition: color var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast);
}

.ct-social:hover {
  color: var(--color-bone);
  border-color: rgba(201, 162, 75, 0.5);
  transform: translateY(-2px);
}

.ct-social svg { width: 18px; height: 18px; }

@media (min-width: 900px) {
  .ct-ploy-actions { margin-left: auto; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 559px) {
  .ct-ploy-actions .btn { width: 100%; }
}

/* ==========================================================================
   3. OFFICE & MAPA — 36/64 ve prospěch mapy.
   Mapa je nejbohatší vizuální prvek stránky; v malé krabičce byla promarněná.
   ========================================================================== */

.ct-office {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 2.6vw, 40px);
  align-items: center;
}

@media (min-width: 900px) {
  .ct-office { grid-template-columns: 0.72fr 1.28fr; }
}

.ct-address {
  font-size: var(--ct-body-sm);
  line-height: 1.75;
  color: var(--text-muted);
}

.ct-address strong {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
}

.ct-reg {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-line);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.ct-bank {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-line);
}

.ct-bank-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}

.ct-bank-list {
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: var(--fs-sm);
}

.ct-bank-list > div {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.ct-bank-list dt {
  flex: none;
  min-width: 130px;
  color: var(--text-muted);
}

.ct-bank-list dd {
  margin: 0;
  color: var(--text-main);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ct-office-links {
  margin-top: clamp(16px, 1.8vw, 20px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Bez rámečku — jen měkký stín, ať mapa splývá se stránkou a nepůsobí
   jako vložený widget. Poměr drží místo, než se iframe načte. */
.ct-map {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-surface);
  aspect-ratio: 4 / 3;
  box-shadow: 0 18px 40px rgba(18, 16, 11, 0.14);
}

@media (min-width: 900px) { .ct-map { aspect-ratio: 3 / 2; } }

.ct-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   4. FORMULÁŘ — úzký a vycentrovaný.
   Šířkou dává najevo, že je to vedlejší cesta pro toho, kdo nechce WhatsApp.
   ========================================================================== */

/* Zapuštěný pás: teplejší/tmavší plocha přes celou šířku, na které světlá
   karta formuláře vyskočí nahoru → vrstvení "panel v pásu". Šířkou i touto
   zónou dává formulář najevo, že je to vedlejší cesta.
   Vlastní symetrické odsazení (přebíjí .ct-section + .ct-section padding-top:0),
   ať má pás vzduch nahoře i dole. */
.ct-section.ct-form-section {
  padding-top: clamp(44px, 5vw, 72px);
  padding-bottom: clamp(44px, 5vw, 72px);
  background-color: var(--bg-sunken);
  background-image: radial-gradient(120% 80% at 50% 0%, rgba(201, 162, 75, 0.05), transparent 60%);
  border-top: 1px solid var(--border-line);
  border-bottom: 1px solid var(--border-line);
}

/* Sekce ZA pásem potřebuje horní odsazení zpět — .ct-section + .ct-section ho
   vynulovalo, takže by nadpis seděl na hraně pásu. */
.ct-form-section + .ct-section { padding-top: clamp(48px, 5.5vw, 84px); }

.ct-form-wrap {
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  /* Karta je jen o 15 jasů světlejší než pás — jemný stín ji zvedne nahoru,
     aby hrana panelu četla i bez silného rámečku. */
  box-shadow: 0 10px 30px rgba(18, 16, 11, 0.08);
}

.ct-form-wrap .ct-head {
  margin-bottom: clamp(16px, 1.8vw, 22px);
  max-width: none;
  text-align: center;
}

.ct-form .form-label { color: var(--text-main); }

/* .form-* v style.css počítá s tmavou kartou na indexu — tady přebarvit */
.ct-form .form-input,
.ct-form .form-textarea {
  background: var(--bg-main);
  border-color: var(--border-line);
  color: var(--text-main);
}

.ct-form .form-input::placeholder,
.ct-form .form-textarea::placeholder { color: var(--text-muted); }

.ct-form .form-legal-note { color: var(--text-muted); }
.ct-form .form-legal-note a { color: var(--teal-accent); }

.ct-form-status {
  margin-bottom: clamp(16px, 1.8vw, 22px);
  padding: 14px 16px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-line);
  font-size: var(--ct-body-sm);
  line-height: 1.6;
}

.ct-form-status.is-ok {
  border-color: rgba(31, 94, 87, 0.35);
  background: rgba(31, 94, 87, 0.08);
  color: var(--text-main);
}

.ct-form-status.is-err {
  border-color: rgba(156, 122, 52, 0.45);
  background: rgba(201, 162, 75, 0.1);
  color: var(--text-main);
}

.ct-form-status a { color: var(--teal-accent); font-weight: 600; text-decoration: underline; }

/* ==========================================================================
   5. QUICK LINKS — deflektor dotazů, které nemusí jít přes chat
   ========================================================================== */

.ct-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 20px);
}

@media (min-width: 700px) { .ct-links { grid-template-columns: repeat(3, 1fr); } }

.ct-link {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2vw, 24px);
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  transition: transform var(--trans-medium), border-color var(--trans-medium), box-shadow var(--trans-medium);
}

.ct-link:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 162, 75, 0.45);
  box-shadow: 0 12px 28px rgba(18, 16, 11, 0.09);
}

.ct-link-ico {
  display: inline-flex;
  color: var(--color-gold-shadow);
  margin-bottom: 12px;
  transition: color var(--trans-medium);
}

.ct-link-ico svg { width: 28px; height: 28px; stroke-width: 1.5; }
.ct-link:hover .ct-link-ico { color: var(--color-ink); }

.ct-link h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.25;
}

.ct-link p {
  margin-top: 6px;
  font-size: var(--ct-body-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

.ct-link-go {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-main);
}

.ct-link-go svg { width: 15px; height: 15px; transition: transform var(--trans-fast); }
.ct-link:hover .ct-link-go svg { transform: translateX(4px); }

/* ==========================================================================
   6. TRUST STRIP
   ========================================================================== */

.ct-trust { padding-bottom: clamp(48px, 5.5vw, 84px); }
.ct-trust .trust-strip { margin-top: 0; }