/* ==========================================================================
   TimLuks – projects.css
   Sekcia „Projekty“ (#projekty): dva projekty pod sebou (.project), každý má tablet s naživo
   vloženou stránkou (iframe) a vedľa neho text – prvý tablet vľavo/text vpravo, druhý (.project--reverse)
   naopak (text vľavo/tablet vpravo), striedavo. Text je zarovnaný na VÝŠKU tabletu (align-items: center
   v .project). Tablet sa pri scrolle otáča od boku (odvrátený) smerom čelom k divákovi – pokrok
   0–1 počíta assets/js/projects.js a zapisuje ho do --p na každom [data-project] zvlášť; samotný
   3D transform je celý tu (JS len číslo, žiadny vzhľad). projects.js zvláda ľubovoľný počet tabletov
   na stránke, každý nezávisle (vlastný pokrok, vlastné načítanie iframu, vlastná mierka).

   Iframe nemá v HTML „src“ (len „data-src“) – projects.js ho nastaví až keď je tablet dosť
   odscrollovaný (LOAD_AT v projects.js), aby sa web vnútri nesťahoval hneď pri načítaní stránky.
   Dovtedy je vidieť .tablet__fallback pod ním.

   Web vnútri iframu sa NEVYKRESĽUJE v malej šírke displeja (to by dopadlo ako mobilná verzia –
   „príliš priblížené“), ale v plnej desktopovej šírke (DESKTOP_WIDTH v projects.js) a projects.js
   ho potom celý zmenší (CSS transform: scale) presne na veľkosť displeja. Vďaka tomu vyzerá ako
   skutočný desktopový web a zároveň sa v ňom dá normálne scrollovať (myš scrolluje vnútro iframu,
   nie zmenšený obrázok).

   DÔLEŽITÉ: aby sa stránka v iframe vôbec zobrazila, NESMIE posielať hlavičku „X-Frame-Options: DENY“
   ani CSP „frame-ancestors“, ktoré by timluks.sk vylučovali. Na autopozicovna.timluks.sk je to
   vyriešené (.htaccess, povolené pre timluks.sk). sluzby365.sk má k 28. 9. 2026 stále
   „X-Frame-Options: DENY“ – kým sa to tam neopraví rovnako, jej tablet ukáže len .tablet__fallback
   (prehliadač vykreslenie potichu odmietne). Adresa v oboch iframoch má „?embed=1“ navyše – ak by
   niektorá z nich posielala aj dlhú „Cache-Control“, prehliadač, ktorý si tú istú URL (bez
   parametra) už niekedy uložil do keše SPRED opravy hlavičky, by ešte zobrazoval starú (blokovanú)
   odpoveď; iný query string = iný kešovací kľúč, takže sa vždy načíta čerstvo. „?embed=1“ na strane
   autopozicovna.timluks.sk (config/navbar.php) skrýva aj jej cookie lištu – tá bez toho v iframe
   blokovala scroll.

   Pokrok: 0, keď vrch .project je na spodnom okraji okna (blok sa práve začína ukazovať),
   1, keď je vrch .project na hornom okraji okna (celý blok je na obrazovke, tablet čelom
   k divákovi). Od tej chvíle sa v tablete „odomkne“ myš (.is-facing) – koliesko myši nad ním
   posúva stránku VNÚTRI iframu (normálne „scroll chaining“; stránka TimLuks sa NEZAMYKÁ – na
   výslovnú žiadosť bol pôvodný zámok scrollu, čo držal celú stránku „zamrazenú“ cez
   position:fixed, kým sa web v tablete nescrolloval aspoň na polovicu, úplne odstránený).
   ========================================================================== */

.project {
  position: relative;
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 64px);
}

/* ---------- Tlačidlo „Zobraziť všetky projekty" ---------- */

.projects__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 72px);
}

@media (min-width: 900px) {
  .project {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;   /* text sa zarovná na výšku tabletu (na stred, nie k vrchu) */
  }

  /* Druhý (a každý ďalší párny) projekt: text vľavo, tablet vpravo – poradie v HTML je opačné
     (text prvý v markupe), takže sa to preklopí samo bez potreby meniť grid-column. */
}

.project + .project {
  margin-top: clamp(72px, 9vw, 128px);   /* väčšia medzera medzi dvoma projektmi než pod nadpisom sekcie */
}

/* ---------- Tablet ---------- */

.project__stage {
  perspective: 1500px;
  display: flex;
  justify-content: center;
  padding-block: clamp(16px, 2.4vw, 28px);
}

/* Celý tablet sa otáča ako 3D skupina. --p ide 0 → 1 (nastavuje projects.js);
   rotateY ide 62° (odvrátený) → 0° (čelom k divákovi). */
.tablet {
  position: relative;
  width: min(88%, 36em);
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(calc(62deg - 62deg * var(--p, 1)));
  transition: transform 0.15s linear;   /* len vyhladí mikro-skoky medzi snímkami, scroll ju stále vedie priamo */
  will-change: transform;
}

/* Druhý (a každý ďalší párny) projekt má tablet vpravo – otáča sa preto na opačnú stranu
   (zrkadlovo k prvému), nech to pôsobí ako dvojica, nie kopírovaný pohyb. */
.project--reverse .tablet {
  transform: rotateX(15deg) rotateY(calc(-62deg + 62deg * var(--p, 1)));
}

@media (prefers-reduced-motion: reduce) {
  .tablet { transition: none; }
}

/* Rovnomerný tenký rámik zo všetkých strán (na rozdiel od notebooku žiadny podstavec/klávesnica). */
.tablet__bezel {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0.55em;
  border-radius: 1.1em;
  background: linear-gradient(155deg, #3a3d45, #101114 68%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

.tablet__cam {
  position: absolute;
  left: 50%;
  top: 0.28em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
  transform: translateX(-50%);
}

.tablet__display {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 0.65em;
  background: #05070a;
}

/* Keď tablet namiesto živého iframu zobrazuje len fotku (napr. sluzby365.sk, ktorá posiela
   X-Frame-Options: DENY) – rovnaké orezanie na celý displej ako by malo video/screenshot vo
   webkite, len bez scale() z projects.js (statický obrázok to nepotrebuje). */
.tablet__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;   /* pri oreze radšej stratiť spodok stránky než jej hornú (dôležitejšiu) časť */
}

/* Vidno len kým sa iframe ešte nenačítal (alebo keby ho druhá stránka odmietla vykresliť – pozri komentár hore). */
.tablet__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1em;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.32);
  background: linear-gradient(160deg, #14161c, #05070a 75%);
}

/* Rozmery a mierku (aby web vnútri vyzeral ako desktop, nie zmenšená mobilná verzia) nastavuje
   priamo na tomto prvku projects.js – width/height/transform sú inline štýly, tu je len základ. */
.tablet__frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;     /* núdzová veľkosť bez JS – projects.js ju hneď po nábehu nahradí presným prepočtom */
  height: 100%;
  transform-origin: top left;
  border: 0;
  background: #fff;
  pointer-events: none;   /* kým tablet nie je čelom k divákovi, myš cez neho „prejde“ na scroll stránky */
}

/* Tablet je čelom k divákovi (.is-facing pridáva projects.js pri --p = 1): teraz môže myš nad
   iframom posúvať web vnútri neho namiesto stránky TimLuks. */
.project.is-facing .tablet__frame { pointer-events: auto; }

/* „Pilulka“ v strede displeja (na výslovnú žiadosť – predtým malá pri spodnom okraji, viditeľná
   len na :hover). Vždy viditeľná a klikateľná – pôvodné riešenie ju schovávalo (opacity:0;
   pointer-events:none) a ukazovalo len na .tablet:hover, čo na dotykových zariadeniach (žiadny
   :hover) znamenalo, že sa na ňu nedalo kliknúť vôbec (dalo sa maximálne dotabovať klávesnicou
   cez :focus-visible). Vždy vo vrchnej vrstve (je to súrodenec .tablet__display, nie jeho
   potomok, takže ho neorezáva jeho overflow:hidden, a má vlastný z-index nad iframom) a otáča sa
   spolu s tabletom (je stále v 3D skupine). Otvára skutočnú stránku v novom okne (nie ?embed=1
   verziu vnútri iframu). */
.tablet__visit {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.3em;
  border-radius: 999px;
  background: rgba(13, 13, 15, 0.88);
  color: #f5f4f0;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.tablet__visit svg { flex-shrink: 0; }

@media (hover: hover) {
  .tablet__visit:hover {
    transform: translate(-50%, -50%) scale(1.06);
    background: rgba(13, 13, 15, 0.98);
  }
}
.tablet__visit:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Rozmazaný tieň pod tabletom – drží ho vizuálne „na zemi“. */
.tablet__shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -1em;
  height: 1.6em;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.32), transparent 72%);
}

/* ---------- Text ---------- */

.project__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project__text p {
  max-width: 42em;
  color: var(--ink-soft);
}

.project__heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
}

.project__link {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease);
}
.project__link:hover,
.project__link:focus-visible { color: var(--accent-text); }

.project__award {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-weight: 600;
}
.project__award svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent-text);
}

@media (max-width: 899.98px) {
  .project__text { text-align: left; }
}