/*
 * modern-css.css — cutting-edge CSS pro moderní UX/UI vrstvu (handoff).
 *
 * PROČ SAMOSTATNÝ SOUBOR: Tailwind v4 (Lightning CSS) při buildu zahazuje
 * vlastnosti/hodnoty, které jeho verze ještě nezná (např. `container-type:
 * scroll-state`, `@container scroll-state(...)`). Tento soubor je v `public/`,
 * takže ho Next servíruje 1:1 bez zpracování buildem. Linkuje se v
 * `app/[locale]/layout.tsx`. CSP `style-src 'self'` ho povoluje.
 *
 * Vše je progresivní vylepšení: bez podpory prohlížeč pravidla ignoruje a web
 * vypadá jako dnes. Pohyb respektuje `prefers-reduced-motion`.
 */

/* ─── Fáze 4: scroll-state sticky nav ───
   Hlavička po přilepení k hornímu okraji zúží padding a přidá hairline + jemný
   stín a průhledné rozostřené pozadí. `container-type: scroll-state` je na
   sticky prvku (.nav-sticky), dotaz míří na jeho potomka (.nav-inner). */
@supports (container-type: scroll-state) {
  .nav-sticky {
    container-type: scroll-state;
  }
  .nav-inner {
    transition:
      padding 0.24s ease,
      box-shadow 0.24s ease,
      background 0.24s ease;
  }
  @container scroll-state(stuck: top) {
    .nav-inner {
      padding-block: 10px;
      box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.06),
        0 10px 30px -24px rgba(0, 0, 0, 0.3);
      background: rgba(248, 248, 246, 0.92);
      backdrop-filter: blur(10px);
    }
  }
}

/* ─── Fáze 6: nativní <details> FAQ + field-sizing ───
   Accordion bez JS: obsah (i zavřená odpověď) je vždy v DOM (SEO/FAQPage
   1:1 + čtečky + Ctrl+F), přesto se plynule rozbaluje přes ::details-content.
   `interpolate-size: allow-keywords` povoluje animaci block-size do `auto`;
   bez podpory se přechod vypne (statické otevírání). `field-sizing` je zde,
   protože ho Lightning CSS v buildu zahazuje. */
:root {
  interpolate-size: allow-keywords;
}

.faq-item::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size 0.32s ease,
    content-visibility 0.32s allow-discrete;
}
.faq-item[open]::details-content {
  block-size: auto;
}
@supports not (interpolate-size: allow-keywords) {
  .faq-item::details-content {
    transition: none;
  }
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--color-mm-accent-deep);
  outline-offset: 4px;
}

/* +/× ikona: rotace ze stavu [open], čistě CSS (žádný React state). */
.faq-icon {
  transition:
    transform 0.24s ease,
    color 0.24s ease;
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  color: var(--color-mm-accent-deep);
}

/* Zelený čtvereček — zachováno z handoff design_handoff_v1_neon (WQSq).
   Barva = brand accent token (drží se aktuální značky). */
.faq-sq {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--color-mm-accent);
}

/* prefers-reduced-motion: statické otevírání (globální reset v globals.css
   ruší transitions, tohle je explicitní pojistka pro tento samostatný soubor). */
@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content,
  .faq-icon {
    transition: none;
  }
}

/* ─── Fáze 6: textarea roste s obsahem (poptávkový formulář) ───
   Bez JS a bez skoků layoutu. Bez podpory prohlížeč vlastnost ignoruje.
   POZOR: tento soubor je mimo @layer, takže by `min-height` přebil Tailwind
   utilitu `min-h-[120px]` na poptávkové textarea (viditelné zmenšení). Proto
   dává bare `textarea` jen auto-růst + strop 12lh a zachovává vlastní výšku
   prvku; plný handoff rozsah (3lh floor) je na opt-in třídě `.field-grow`. */
textarea,
.field-grow {
  field-sizing: content;
  max-height: 12lh;
}
.field-grow {
  min-height: 3lh;
}

/* ─── Fáze 3: CSS anchor positioning — dropdown „O nás" ───
   Panel se ukotví k tlačítku přes anchor-name/position-anchor a umístí se přes
   `position-area` (žádné manuální top/right dopočty). `position-try-fallbacks`
   panel automaticky překlopí, když u okraje viewportu chybí místo.

   PROGRESIVNÍ VYLEPŠENÍ: celý blok je v @supports (anchor-name). Prohlížeč bez
   podpory ho ignoruje a použije stávající Tailwind fallback `absolute right-0
   top-full mt-2` (nezměněno v komponentě) → vypadá a chová se jako dnes.

   POZN. ke SMĚRU: „O nás" je druhá položka zprava, produkce ji proto zarovnává
   na pravou hranu (`right-0`), jinak přeteče viewport. Proto je primární oblast
   `span-inline-start` (roste doleva = pravé zarovnání), NE handoff generický
   `span-inline-end` (ten roste doprava a u pravého okraje by přetekl). Fallbacky
   překlopí nad tlačítko / na druhou stranu, když dole/vlevo není místo.

   Lightning CSS tyto vlastnosti při buildu zahazuje → proto jsou zde. */
@supports (anchor-name: --a) {
  .nav-about {
    anchor-name: --about-anchor;
  }
  .nav-about-menu {
    /* Ukotvení přes anchor() insety (ne position-area): panel zůstává
       `position: absolute`, takže jeho containing blockem je těsný `.relative`
       wrapper — NE `.nav-sticky`, který má z fáze 4 `container-type:
       scroll-state` a vytvářel by CB pro fixed/absolutně pozic. potomky a panel
       „uvěznil" uvnitř lišty. anchor() vrací konkrétní délku (ne oblast, která se
       musí vejít), takže funguje i v malém CB.
       top: anchor(bottom)  → pod tlačítkem
       right: anchor(right) → pravé zarovnání (jako fallback right-0). */
    position-anchor: --about-anchor;
    top: anchor(bottom);
    right: anchor(right);
    bottom: auto;
    left: auto;
    /* flip-block překlopí nad tlačítko, když dole u okraje chybí místo. */
    position-try-fallbacks: flip-block;
    margin-block-start: 10px;
    min-width: 250px;
  }
}

/* ─── Fáze 8A: vjemový náběh submenu „O nás" ───
   Panel se mountuje až po otevření (React `open`), takže CSS animace na
   `.nav-about-menu` proběhne jednou při vložení do DOM. Jen krátký posun
   shora + fade, klávesová obsluha i focus ring beze změny (řídí komponenta).
   Pod prefers-reduced-motion se nepřehraje (obal no-preference). */
@media (prefers-reduced-motion: no-preference) {
  .nav-about-menu {
    animation: nav-about-in 0.22s cubic-bezier(0.16, 0.84, 0.24, 1) both;
  }
  @keyframes nav-about-in {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* ─── Fáze 7: cursor-adaptive tilt (jen karty a dlaždice) ───
   Drobná reakce na pozici kurzoru — NE parallax. Pozici píše JS do proměnných
   --mx/--my (viz components/ui/TiltZone.tsx), náklon dělá tento CSS. Výchozí
   hodnoty 0.5 → v klidu rotateY(0) rotateX(0), tj. žádný náklon dokud kurzor
   nevejde. Strop ±1,2° (limit z handoffu). Nikdy na holé fotky/mockupy klientů.

   Progresivní vylepšení: celé je pod @media (hover: hover) + no-preference →
   na dotyku i s prefers-reduced-motion je pravidlo pryč a karty jsou statické.
   Animuje se výhradně transform (kompozitor, CLS 0). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tilt-card {
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
    transform: perspective(900px)
      rotateY(calc(var(--mx, 0.5) * 2.4deg - 1.2deg))
      rotateX(calc(var(--my, 0.5) * -2deg + 1deg));
  }
}

/* ─── Fáze 8B: přepínač variant „Shoptet na míru" ───
   Panel (.sv-panel) se při přepnutí varianty remountuje (React `key`), takže se
   tyto animace přehrají znovu — přepnutí je čitelné, ne bliknutí. Animuje se
   VÝHRADNĚ transform (nikdy opacity), takže text zůstává čitelný i při
   pozastavených animacích, v printu i ve skrytém tabu; výška se nemění → CLS 0.
   `both` drží prvky na počátečním posunu po dobu delaye (staggered náběh bez
   bliknutí). Lightning CSS `field-sizing` apod. sem nepatří — čistá kompozice. */
.sv-panel > * {
  animation: svIn 0.5s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
.sv-panel > *:nth-child(2) {
  animation-delay: 0.07s;
}
.sv-panel > *:nth-child(3) {
  animation-delay: 0.13s;
}
.sv-panel > *:nth-child(4) {
  animation-delay: 0.19s;
}
.sv-panel > *:nth-child(5) {
  animation-delay: 0.25s;
}
@keyframes svIn {
  from {
    transform: translateY(14px);
  }
  to {
    transform: none;
  }
}

/* Měřicí prvky pomaleji a s odstupem — na nich je rozdíl variant vidět. */
.sv-bar-fill {
  transition: width 0.95s cubic-bezier(0.16, 0.84, 0.24, 1) 0.12s;
}
.sv-mod {
  transition: background 0.34s ease;
}
.sv-panel .sv-mod:nth-of-type(1) {
  transition-delay: 0.16s;
}
.sv-panel .sv-mod:nth-of-type(2) {
  transition-delay: 0.28s;
}
.sv-panel .sv-mod:nth-of-type(3) {
  transition-delay: 0.4s;
}

/* Přístupnost — focus ring na tabech i panelu (kontrast tmavý text na #00e676). */
.sv-tab:focus-visible,
.sv-panel:focus-visible {
  outline: 2px solid #00a854;
  outline-offset: -3px;
}

/* Hover jen na zařízeních s myší a bez reduced-motion (kompozitor, transform). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sv-shot {
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .sv-shot:hover {
    transform: translateY(-4px);
  }
  .sv-cta {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }
  .sv-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.5);
  }
}

/* Reduced-motion: žádný pohyb ani prodlevy, obsah v koncovém stavu, text čitelný. */
@media (prefers-reduced-motion: reduce) {
  .sv-panel > * {
    animation: none;
  }
  .sv-bar-fill,
  .sv-mod,
  .sv-shot,
  .sv-cta {
    transition: none;
    transition-delay: 0s;
  }
}