/* ======================================================================
   NÁVRH Č. 140 — PROHLÍDKA: jeden klik, celá obrazovka
   Prefix .prohlidka- je v site.css volný (ověřeno grepem). Nepoužívat
   obecná jména jako .ukazka, .velky, .zavrit — ta už v site.css jsou
   obsazená něčím jiným.
   ====================================================================== */

/* ── rozvržení (č. 140): nahoře černý panel WhatsAppu + bílá karta
      WhatsAppu vedle sebe, pod nimi Microsoft na celou šířku ── */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 18px; align-items: stretch; }
.duo > * { min-width: 0; }
.duo > .spot { grid-template-columns: 1fr; gap: 20px; align-items: start;
               padding: 30px 32px 32px; margin: 0; height: 100%; }
.duo > .spot .h2 { font-size: 30px; line-height: 1.14; margin-top: 14px; }
.duo > .spot p { font-size: 14.5px; line-height: 1.6; margin-top: 12px; }
.duo > .spot .tagstrip { margin-top: 18px; }
.duo > .ms-banner, .duo > .wa-karta { height: 100%; }
.duo > .ms-banner > .karta, .duo > .wa-karta > .karta { height: 100%; }
.duo + .duo { margin-top: 18px; }
.duo-siroke { grid-template-columns: 1fr; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

/* ── řádek na spodní hraně karty ───────────────────────────────────
   TMAVÝ, NE SVĚTLÝ. Změněno 25. 8. 2026 příkazem č. 162 na Jiřího
   pokyn „sjednoť to", po nálezu z předvádění:

     „ty tvé tlačítka co jsou v bílo-fialové STRAŠNĚ ZANIKAJÍ,
      a náhodní lidé, kterým jsem to ukazoval, jej ani nenašli."

   Původně: šedý text a světle fialová ikona na skoro bílém pozadí,
   na dně karty, pod vlasovou linkou. To je typografie patičky —
   a patička se čte jako patička, ať do ní napíšeš cokoli.

   Teď nese pruh --akce-tmava z tokens.css, tedy TÝŽ povrch, jaký má
   .msn-akce u Microsoftu. Jedna akce, jeden vzhled, na celé stránce.
   Barva se mění v tokens.css, ne tady a ne tam.

   Akcent zůstává podle karty: fialový u Microsoftu, zelený
   u WhatsAppu. Sjednocuje se tvar a váha, ne identita karet. */
.prohlidka { margin: 18px -30px -14px; border-top: 0; }
.prohlidka-tl {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 14px 30px 16px; border: 0; cursor: pointer;
  text-align: left; font: inherit;
  background: var(--akce-tmava); color: #fff;
  border-radius: 0 0 22px 22px; transition: background .18s ease;
}
.prohlidka-tl:hover { background: var(--akce-tmava-najeti); }
.prohlidka-tl:focus-visible { outline: 2px solid var(--violet-tmave-pozadi); outline-offset: -3px; }
.prohlidka-ik {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(167, 139, 250, .16); color: var(--violet-tmave-pozadi);
}
.prohlidka-ik svg { width: 18px; height: 18px; }
/* Zelená pro tmavé pozadí. Dosavadní #047857 dávalo na tomhle pruhu
   3,64 : 1 — pod AA. Emerald-400 dává 10,39 : 1. Viz tokens.css. */
.wa-karta .prohlidka-ik {
  background: rgba(52, 211, 153, .16); color: var(--emerald-tmave-pozadi);
}
.prohlidka-text { display: block; min-width: 0; }
.prohlidka-text b { display: block; font-size: 13.5px; font-weight: 650;
                    letter-spacing: -.005em; color: #fff; }
.prohlidka-text em { display: block; font-style: normal; font-size: 11.5px;
                     color: var(--akce-tlum); margin-top: 2px; }
.prohlidka-sip { flex: 0 0 auto; margin-left: auto;
                 color: var(--violet-tmave-pozadi);
                 transition: transform .18s ease, color .18s ease; }
.wa-karta .prohlidka-sip { color: var(--emerald-tmave-pozadi); }
.prohlidka-sip svg { display: block; width: 17px; height: 17px; }
.prohlidka-tl:hover .prohlidka-sip { color: #fff; transform: translate(2px, -2px); }
.wa-karta .prohlidka-tl:hover .prohlidka-sip { color: #fff; }

/* dvě prohlídky vedle sebe (široká karta Microsoftu: pošta + kalendář) */
.prohlidka-dve { display: grid; grid-template-columns: 1fr 1fr; }
.prohlidka-dve .prohlidka-tl + .prohlidka-tl { border-left: 1px solid rgba(15, 23, 42, .09); }
.prohlidka-dve .prohlidka-tl:first-child { border-radius: 0 0 0 22px; }
.prohlidka-dve .prohlidka-tl:last-child  { border-radius: 0 0 22px 0; }
@media (max-width: 760px) {
  .prohlidka-dve { grid-template-columns: 1fr; }
  .prohlidka-dve .prohlidka-tl + .prohlidka-tl {
    border-left: 0; border-top: 1px solid rgba(15, 23, 42, .09); }
  .prohlidka-dve .prohlidka-tl:first-child { border-radius: 0; }
}

/* ── překryv s celou obrazovkou ── */
dialog.prohlidka-okno {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0; background: transparent;
  width: 100vw; height: 100dvh; max-width: none; max-height: none; overflow: auto;
}
dialog.prohlidka-okno::backdrop { background: rgba(7, 6, 16, .86); }
.prohlidka-stred { min-height: 100dvh; display: flex; flex-direction: column;
                   align-items: center; justify-content: center; gap: 13px;
                   padding: 26px 20px 32px; }
.prohlidka-lista { display: flex; align-items: baseline; gap: 12px;
                   width: min(94vw, 1560px); color: #fff; }
.prohlidka-stitek { font-size: 10.5px; font-weight: 800; letter-spacing: .11em;
                    text-transform: uppercase; color: #A78BFA; }
.prohlidka-cesta { font-size: 12.5px; color: #B9C0D4; }
.prohlidka-zavrit { margin-left: auto; font: inherit; font-size: 12.5px; font-weight: 700;
                    color: #fff; background: rgba(255,255,255,.12);
                    border: 1px solid rgba(255,255,255,.22); border-radius: 9px;
                    padding: 7px 13px; cursor: pointer; transition: background .15s ease; }
.prohlidka-zavrit:hover { background: rgba(255,255,255,.22); }
.prohlidka-ramec { width: min(94vw, 1560px); max-width: 100%; overflow: auto;
                   border-radius: 14px; background: #0B1020;
                   box-shadow: 0 50px 100px -24px rgba(0,0,0,.75),
                               0 0 0 1px rgba(255,255,255,.07); }
.prohlidka-ramec img { display: block; width: min(94vw, 1560px); height: auto; }
.prohlidka-pod { width: min(94vw, 1560px); margin: 0; font-size: 11.5px; color: #8E97AE; }
.prohlidka-pod b { color: #D6DBE8; font-weight: 650; }
dialog.prohlidka-okno[open] .prohlidka-ramec {
  animation: prohlidka-vjezd .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes prohlidka-vjezd {
  from { opacity: 0; transform: scale(.985) translateY(6px); }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .prohlidka-tl, .prohlidka-sip { transition: none; }
  dialog.prohlidka-okno[open] .prohlidka-ramec { animation: none; }
}
@media (max-width: 640px) {
  .prohlidka { margin-left: -20px; margin-right: -20px; }
  .prohlidka-tl { padding-left: 20px; padding-right: 20px; }
  .prohlidka-ramec { width: 100%; }
  .prohlidka-ramec img { width: auto; max-width: none; }
  .prohlidka-lista, .prohlidka-pod { width: 100%; }
  .prohlidka-lista { flex-wrap: wrap; }
}