/* ELDAK — styly tématu nad Tailwindem produktu. Skoro všechno jsou Tailwind třídy
 * přímo v blocích; tady jsou jen písma, napojení na LaunchBlock a formulář. */
html { scroll-behavior: smooth; }
body.eldak { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.eldak-display { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; }

/* Přepínací engine produktu (state.js) skrývá varianty atributem data-off:
   firemní FVE sestavy, karty realizací mimo zvolený filtr. */
body:not(.eldak-editor) [data-off] { display: none !important; }

/* Jen v editoru (canvas_body_class „eldak-editor“): skripty tam neběží, takže
   ukázat všechny varianty a označit je štítkem, ať jdou upravit. Na webu nic. */
.eldak-editor [data-when] { position: relative; }
.eldak-editor [data-when]::before {
  position: absolute; top: .5rem; right: .5rem; z-index: 20; pointer-events: none;
  padding: .2rem .5rem; border-radius: .25rem; background: #0b1726; color: #ffc400;
  font: 700 10px/1.4 "Inter", sans-serif; letter-spacing: .05em; text-transform: uppercase;
}
.eldak-editor [data-vals~="dum"]::before { content: "Pro domácnosti"; }
.eldak-editor [data-vals~="firma"]::before { content: "Pro firmy"; }
.eldak-editor [data-vals~="elektro"]::before { content: "Kategorie: Elektro"; }
.eldak-editor [data-vals~="fve"]::before { content: "Kategorie: FVE"; }
.eldak-editor [data-vals~="revize"]::before { content: "Kategorie: Revize"; }
.eldak-editor [data-vals~="hromosvod"]::before { content: "Kategorie: Hromosvody"; }
.eldak-editor [data-off] { outline: 2px dashed #f0b400; outline-offset: 3px; }
/* Gradienty přes fotky propustí klik na fotku pod nimi (výměna obrázku). */
.eldak-editor div.absolute[class*="bg-gradient"] { pointer-events: none; }
/* Fotka pod textem (hero, pruhy s výzvou): obal textu je přes celou šířku a v editoru
   by ji zakryl — klient pak klikne na text a místo výměny fotky mu mění barvu.
   Prázdná místa obalu propustí klik na fotku, text, tlačítka a karty zůstávají klikací. */
.eldak-editor section:has(> img.absolute) > div.relative,
.eldak-editor section:has(> img.absolute) > div.relative div:not([class*="bg-"]) { pointer-events: none; }
.eldak-editor section:has(> img.absolute) > div.relative :is(h1, h2, h3, h4, p, a, span, ul, ol, li, dl, dt, dd, img, svg, button, form, label, input, select, textarea, blockquote, article, figure),
.eldak-editor section:has(> img.absolute) > div.relative div[class*="bg-"] { pointer-events: auto; }
/* Na notebooku je plátno editoru vedle panelů užší než 1024 px (lg) a fotky pruhů
   s výzvou (`hidden lg:block`) v něm nebyly vidět, takže je klient nemohl vyměnit.
   V editoru je ukážeme už od 800 px šířky plátna; Tablet (768) a Mobil (375)
   zůstanou jako na webu. */
@media (min-width: 800px) {
  .eldak-editor img.absolute.hidden.lg\:block,
  .eldak-editor div.absolute.hidden.lg\:block { display: block; }
}

/* Kontakt z nastavení webu (widget site.contact) přebírá barvu okolí. */
.lb-widget a { color: inherit; text-decoration: none; }
[data-eldak-link] { cursor: pointer; }

/* ── Formulář poptávky (blok Formulář / /admin/forms) ───────────────────────
 * Produktový style.css se v tématu nenačítá, proto tu je vše, co formulář
 * potřebuje: skrytá pole, chyby, stavy odeslání — ve vzhledu návrhu. */
.eldak-form .lb-form [hidden] { display: none !important; }
.eldak-form .lb-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.eldak-form .lb-form-title { font-size: 1.25rem; font-weight: 700; margin-bottom: .35rem; }
.eldak-form .lb-form-field { margin-bottom: 1.1rem; }
.eldak-form .lb-form-field--layout { display: flex; flex-wrap: wrap; column-gap: 1.25rem; margin-bottom: 0; }
.eldak-form .lb-form-field--layout > * { flex: 1 1 220px; min-width: 0; width: auto; }
.eldak-form .lb-form-label { display: block; margin-bottom: .375rem; font-size: .875rem; font-weight: 600; color: #0f1b2b; }
.eldak-form .lb-form-req { margin-left: .15rem; color: #0f1b2b; }
.eldak-form .lb-form-input {
  width: 100%; max-width: none; border: 1px solid #cbd5e1; border-radius: .375rem; background: #f8fafc;
  padding: .625rem .875rem; font-size: .875rem; color: #0f1b2b; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.eldak-form .lb-form-input::placeholder { color: #94a3b8; }
.eldak-form .lb-form-input:focus { outline: 0; border-color: #0b1726; background: #fff; box-shadow: 0 0 0 3px rgb(255 196 0 / .35); }
.eldak-form select.lb-form-input {
  appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='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 .75rem center; background-size: 1rem;
}
.eldak-form textarea.lb-form-input { min-height: 7.5rem; resize: vertical; }
.eldak-form .lb-form-sublabel, .eldak-form .lb-form-desc-field { display: block; margin-top: .25rem; font-size: .8rem; color: #64748b; }
.eldak-form .lb-form-field--checkbox .lb-form-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.eldak-form .lb-form-choice { display: flex; gap: .625rem; align-items: flex-start; cursor: pointer; font-size: .875rem; color: #475569; }
.eldak-form .lb-form-choice input { width: 1rem; height: 1rem; margin-top: .15rem; flex: none; accent-color: #0b1726; }
.eldak-form .lb-form-error { display: none; margin-top: .3rem; color: #dc2626; font-size: .8rem; }
.eldak-form .lb-form-field--error:not(.lb-form-field--layout) > .lb-form-error { display: block; }
.eldak-form .lb-form-field--error:not(.lb-form-field--layout) .lb-form-input { border-color: #ef4444; box-shadow: 0 0 0 3px rgb(239 68 68 / .15); }
.eldak-form .lb-form-status { margin: 1rem 0; }
.eldak-form .lb-form-status:empty, .eldak-form .lb-form-captcha:empty { display: none; margin: 0; }
.eldak-form .lb-form-alert { padding: .875rem 1rem; border-radius: .5rem; font-size: .9rem; }
.eldak-form .lb-form-alert--ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.eldak-form .lb-form-alert--err { background: #fef2f2; color: #991b1b; }
.eldak-form .lb-form-limit { margin-top: .25rem; font-size: .8rem; color: #64748b; text-align: right; }
.eldak-form .lb-form-submit, .eldak-form .lb-form button[type="submit"] {
  display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .5rem; margin-top: .25rem;
  border: 0; border-radius: .375rem; background: #ffc400; padding: .875rem 1.5rem;
  font-size: .9rem; font-weight: 700; color: #0b1726; cursor: pointer; transition: background-color .15s;
}
.eldak-form .lb-form-submit::after, .eldak-form .lb-form button[type="submit"]::after { content: "→"; font-weight: 700; }
.eldak-form .lb-form-submit:hover, .eldak-form .lb-form button[type="submit"]:hover { background: #f0b400; }
.eldak-form .lb-form-submit:disabled { opacity: .6; cursor: progress; }

/* Fotky v tmavých pruzích (hero, CTA nad patičkou): levý okraj fotky plynule
   přechází do pozadí. Overlay gradient přes celou sekci okraj nezakryje vždy
   (záleží na šířce fotky), maska ano — i po výměně fotky v editoru. */
@media (min-width: 1024px) {
  section.bg-\[\#0b1726\] img.absolute.right-0 {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 35%);
            mask-image: linear-gradient(to right, transparent, #000 35%);
  }
  section.bg-\[\#0b1726\] img.absolute.top-0.right-0:not(.h-full) {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 35%), linear-gradient(to top, transparent, #000 35%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent, #000 35%), linear-gradient(to top, transparent, #000 35%);
            mask-composite: intersect;
  }
}