/* of-showcase-seo1 — vzorový produkt WKCP-06120 (Oramat SK, Fixmat CZ), 4. 11. 2026.
   Platí IBA pre popis s atribútom data-of-showcase="seo1" na <article class="of-atlas">.
   Ostatné popisy atlasu nemení. Načítava sa neblokujúco (media=print → all).
   Obsah: viditeľné odkazy v texte, mobilná typografia, rozloženie výhod a galérií,
   náhľad videí YouTube (spolu s of-showcase-seo1.js) a jemné animácie.
   Animuje iba opacity/transform; pri prefers-reduced-motion sa animácie vypnú. */

/* Zvýšená špecifickosť (.of-atlas.of-atlas[…]) prebije pravidlá atlasu 3.6 bez !important. */

/* 1) Odkazy v texte: farba akcie, jemné podčiarknutie, hover, viditeľný focus */
.of-atlas.of-atlas[data-of-showcase] :is(p,li,dd,td):not(.o60 *) a:not([class]):not([role]) {
  color: var(--atlas-action, #c90000);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .15s ease;
}
.of-atlas.of-atlas[data-of-showcase] :is(p,li,dd,td):not(.o60 *) a:not([class]):not([role]):hover { text-decoration-color: currentColor; }
.of-atlas.of-atlas[data-of-showcase] :is(p,li,dd,td):not(.o60 *) a:not([class]):not([role]):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }

/* 2) Prepojenie výkres ↔ tabuľka: plynulá zmena namiesto skoku */
.of-atlas.of-atlas[data-of-showcase] tr[data-parameter-row] :is(th,td) { transition: background-color .15s ease, color .15s ease; }
.of-atlas.of-atlas[data-of-showcase] .o10 a :is(text,rect) { transition: fill .15s ease, stroke .15s ease; }

/* 3) FAQ a pevnostné údaje: plynulé otvorenie (prehliadače bez podpory otvoria okamžite) */
.of-atlas.of-atlas[data-of-showcase] details { interpolate-size: allow-keywords; }
.of-atlas.of-atlas[data-of-showcase] details::details-content {
  height: 0;
  overflow: clip;
  transition: height .26s cubic-bezier(.2, .8, .2, 1), content-visibility .26s allow-discrete;
}
.of-atlas.of-atlas[data-of-showcase] details[open]::details-content { height: auto; }

/* 4) Navigácia popisu: posuvné podčiarknutie aktívnej položky (prvok vkladá JS) */
/* .o45 nechať position: sticky z atlasu (sticky je zároveň oporný blok pre absolútny indikátor).
   Žiadne position tu: 4. 11. 2026 relative zrušilo lepenie a posunulo menu o top 110 px cez nadpis. */
.of-atlas.of-atlas[data-of-showcase] .o45.om-has-ind > a[aria-current] { text-decoration: none; }
.of-atlas.of-atlas[data-of-showcase] .om-nav-ind {
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 1px;
  height: 2px;
  background: var(--atlas-action, #c90000);
  border-radius: 2px;
  transform-origin: 0 50%;
  opacity: 0;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
  pointer-events: none;
}

/* 5) Videá: náhľad, prehrávač sa načíta až po kliknutí */
.om-yt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  color: #fff;
}
/* hqdefault je 4:3 s čiernymi pruhmi; výška 133,4 % a posun −16,7 % ich skryje v ráme 16:9 */
.om-yt img { position: absolute; left: 0; top: -16.7%; width: 100%; height: 133.4%; object-fit: cover; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.om-yt__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  border-radius: 14px;
  background: rgba(15, 15, 15, .78);
  display: grid;
  place-items: center;
  transition: background-color .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.om-yt__play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
@media (hover: hover) {
  .om-yt:hover img { transform: scale(1.03); }
  .om-yt:hover .om-yt__play { background: var(--atlas-action, #c90000); transform: scale(1.06); }
}
.om-yt:focus-visible { outline: 3px solid var(--atlas-action, #c90000); outline-offset: 3px; }
.om-yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; }

/* 6) Mobil: typografia, výhody, galérie */
@media (max-width: 767px) {
  .of-atlas.of-atlas[data-of-showcase] header.o36 h2 { font-size: 26px; line-height: 1.18; text-wrap: balance; }
  .of-atlas.of-atlas[data-of-showcase] .o57 p { font-size: 16px; line-height: 1.6; }

  /* Výhoda: malý kruh vedľa nadpisu, text na celú šírku.
     Atlas 3.6 (of-a360) má neohraničené `.o11 {… !important}` pre ≤680 px, preto tu !important s vyššou špecifickosťou. */
  .of-atlas.of-atlas.of-atlas[data-of-showcase] .o15 > .o11 { display: grid !important; grid-template-columns: 56px minmax(0, 1fr) !important; column-gap: 14px !important; row-gap: 8px !important; align-items: center !important; }
  .of-atlas.of-atlas.of-atlas[data-of-showcase] .o15 > .o11 > .o13 { grid-column: 1 !important; grid-row: 1 !important; width: 56px !important; min-width: 56px !important; margin: 0 !important; }
  .of-atlas.of-atlas.of-atlas[data-of-showcase] .o15 > .o11 > .o13 > .o19 { width: 56px !important; min-width: 56px !important; height: 56px !important; margin: 0 !important; }
  .of-atlas.of-atlas.of-atlas[data-of-showcase] .o15 > .o11 > .o13 > .o19 img { width: 44px !important; height: 44px !important; padding: 4px !important; box-sizing: border-box !important; }
  .of-atlas.of-atlas.of-atlas[data-of-showcase] .o15 > .o11 > .o14 { display: contents !important; }
  .of-atlas.of-atlas.of-atlas[data-of-showcase] .o15 > .o11 > .o14 > h4 { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; }
  .of-atlas.of-atlas.of-atlas[data-of-showcase] .o15 > .o11 > .o14 > p { grid-column: 1 / -1 !important; grid-row: 2 !important; margin: 0 !important; }

  /* Galérie bez textu: vodorovný pás so snapom namiesto stĺpca obrázkov */
  .of-atlas.of-atlas[data-of-showcase] .o43 .o56 {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .of-atlas.of-atlas[data-of-showcase] .o43 .o56::-webkit-scrollbar { display: none; }
  .of-atlas.of-atlas[data-of-showcase] .o43 .o56 > figure { flex: 0 0 78%; scroll-snap-align: start; margin: 0; }
}

/* 7) Objavenie pri prvom zobrazení (JS pridá .om-anim na koreň a .is-in na sekciu) */
@media (prefers-reduced-motion: no-preference) {
  .of-atlas[data-of-showcase].om-anim .o16 .o19 { opacity: 0; transform: scale(.86); transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1); }
  .of-atlas[data-of-showcase].om-anim .o16.is-in .o19 { opacity: 1; transform: none; }
  .of-atlas[data-of-showcase].om-anim .o16.is-in .o11:nth-child(2) .o19 { transition-delay: .04s; }
  .of-atlas[data-of-showcase].om-anim .o16.is-in .o11:nth-child(3) .o19 { transition-delay: .08s; }
  .of-atlas[data-of-showcase].om-anim .o16.is-in .o11:nth-child(4) .o19 { transition-delay: .12s; }
  .of-atlas[data-of-showcase].om-anim .o16.is-in .o11:nth-child(5) .o19 { transition-delay: .16s; }
  .of-atlas[data-of-showcase].om-anim .o16.is-in .o11:nth-child(n+6) .o19 { transition-delay: .2s; }

  /* Štítky rozmerov vo výkrese: iba opacity, transform SVG prvkov zostáva nedotknutý */
  .of-atlas[data-of-showcase].om-anim .o54 .o10 > a { opacity: 0; transition: opacity .25s ease; }
  .of-atlas[data-of-showcase].om-anim .o54.is-in .o10 > a { opacity: 1; }
  .of-atlas[data-of-showcase].om-anim .o54.is-in .o10 > a:nth-of-type(2) { transition-delay: .05s; }
  .of-atlas[data-of-showcase].om-anim .o54.is-in .o10 > a:nth-of-type(3) { transition-delay: .1s; }
  .of-atlas[data-of-showcase].om-anim .o54.is-in .o10 > a:nth-of-type(4) { transition-delay: .15s; }
  .of-atlas[data-of-showcase].om-anim .o54.is-in .o10 > a:nth-of-type(5) { transition-delay: .2s; }
  .of-atlas[data-of-showcase].om-anim .o54.is-in .o10 > a:nth-of-type(n+6) { transition-delay: .25s; }
}
@media (prefers-reduced-motion: reduce) {
  .of-atlas[data-of-showcase] *, .om-yt, .om-yt * { transition: none !important; }
  .of-atlas.of-atlas[data-of-showcase] details::details-content { transition: none; }
}