/* Karty kurzů grilování na /zbozi — fotka se otočí na vstup do kurzu.

   Roman 14. 9. 2026: „místo vybrat kurz bude koupit kurz a rovnou to půjde
   do košíku a fotka bude naopak vstup do sekce toho kurzu; když najedeme
   na fotku, změní se na nápis toho daného kurzu a pod nápisem Prohlédnout
   menu." Hned potom poslal otáčecí kartu z Uiverse (ElSombrero2):
   „takhle měla fungovat ta fotka."

   Z té předlohy zůstalo otočení kolem svislé osy. Dvě věci jsou jinak:

   - Pořadí stran. V předloze je vidět rub a po najetí fotka; Roman to chce
     obráceně, fotka je líc.
   - Otáčí se jen fotka, ne celá karta. Cena a „Koupit kurz" tak zůstávají
     vidět i během otočení.

   Rub byl nejdřív jako v předloze — obíhající oranžový pruh a žhavé skvrny.
   Roman 15. 9. 2026: „tam dej černé okno s červeným grilem z loga Weber
   a přes to ty nápisy." Skvrny nahradilo černé okno s bílým rámečkem
   a červeným grilem; obíhající pruh kolem okna zůstává („to jsem neřekl
   dát pryč").

   HTML se kvůli tomu nemění: líc je <img>, rub je .academy-kurz-vstup,
   obojí v odkazu .academy-kurz-obraz. Mřížka karet zůstává
   v zbozi-weber.css. */

.academy-kurz-obraz {
  position: relative;
  perspective: 1200px;
  background: #151515;
  outline: none;
}

/* ------------------------------------------------ líc a rub */

.academy-kurz-obraz img,
.academy-kurz-vstup {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 700ms cubic-bezier(.2, .8, .2, 1);
  transform-style: preserve-3d;
}

.academy-kurz-obraz img {
  position: relative;
  z-index: 1;
  transform: rotateY(0deg);
}

.academy-kurz-vstup {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
  background: #000;
  color: #fff;
  text-align: center;
  transform: rotateY(-180deg);
  pointer-events: none;
}

/* Obíhající oranžový pruh — v předloze `.back::before`. Leží pod černým
   oknem a z okna vykukuje jen po okraji.

   Roman 15. 9. 2026: „vrať tam tu animaci toho lemu oranžového proužku,
   co běhal kolem, to jsem neřekl dát pryč." Při přidání černého okna
   s grilem jsem ho omylem zrušil; okno s grilem a pruh patří k sobě. */
.academy-kurz-vstup::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 46%;
  height: 170%;
  background: linear-gradient(90deg, transparent, #ff9966, #ff9966, #ff9966, #ff9966, transparent);
  transform: translate(-50%, -50%) rotateZ(0deg);
  animation: academy-obeh 5000ms linear infinite;
}

/* Černé okno nad pruhem. Roman 15. 9. 2026 k otočené kartě: „tam dej
   černé okno s červeným grilem z loga Weber a přes to ty nápisy."

   Tři vrstvy v jednom pozadí, odshora:
   - bílý zaoblený rámeček jako vnitřní obrys loga (SVG, tloušťka čáry
     se roztažením nemění),
   - červený gril — soubor web/assets/academy/weber-gril-znak.svg, tvar
     i barva z oficiálního vektorového loga Weber,
   - černá plocha.
   Okno je o 3 px menší než rub, takže okraj nechá prosvítat pruh. */
.academy-kurz-vstup::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect x='4' y='5' width='92' height='90' rx='4' ry='6' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    url("/assets/academy/weber-gril-znak.svg") center / auto 76% no-repeat,
    #000;
}

/* Nápis nad grilem i nad rámečkem. */
.academy-kurz-vstup > * {
  position: relative;
  z-index: 2;
}

.academy-kurz-vstup b {
  padding: 0 18px;
  font-size: clamp(36px, 3vw, 48px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 4px 24px rgb(0 0 0 / .45);
}

.academy-kurz-vstup > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* Roman 15. 9. 2026: „odstraň rámeček pod Prohlédnout menu, musí tam
     být jen text, transparentní pozadí." Tmavý ovál a stín pryč. */
  padding: 9px 14px;
  background: transparent;
  text-shadow: 0 2px 12px rgb(0 0 0 / .6);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.academy-kurz-vstup svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------ otočení */

/* Najetí myší i příchod klávesou Tab otočí totéž. */
@media (hover: hover) {
  .academy-kurz-obraz:hover img { transform: rotateY(180deg); }
  .academy-kurz-obraz:hover .academy-kurz-vstup { transform: rotateY(0deg); }
}

.academy-kurz-obraz:focus-visible img { transform: rotateY(180deg); }
.academy-kurz-obraz:focus-visible .academy-kurz-vstup {
  transform: rotateY(0deg);
  box-shadow: inset 0 0 0 3px #fff;
}

/* Starý efekt z zbozi-weber.css (přiblížení fotky) by se s otočením
   přetahoval. */
.academy-kurz:hover .academy-kurz-obraz img { filter: none; }

/* Dotyk najetí nezná a otáčet po klepnutí by znamenalo dvě klepnutí na
   jeden odkaz. Fotka tu proto zůstává lícem a že je to vstup do kurzu,
   říká štítek dole. */
@media (hover: none) {
  .academy-kurz-obraz::after {
    content: "Prohlédnout menu";
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 3;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgb(21 21 21 / .82);
    box-shadow: 0 6px 20px rgb(0 0 0 / .35);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
}

/* ------------------------------------------------ Koupit kurz */

.academy-kurz-telo a.academy-kurz-koupit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: -6px -8px -6px 0;
  padding: 0 8px;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 250ms ease, background-color 250ms ease;
}

.academy-kurz-koupit svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 450ms cubic-bezier(.16, 1, .3, 1);
}

.academy-kurz-koupit svg circle {
  fill: currentColor;
  stroke: none;
}

.academy-kurz-telo a.academy-kurz-koupit:hover {
  background: var(--red);
  color: #fff;
}

.academy-kurz-koupit:hover svg { transform: translateX(2px); }

.academy-kurz-telo a.academy-kurz-koupit:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Potvrzení po vložení nastavuje web/zbozi.js (třída `pridano`). */
.academy-kurz-telo a.academy-kurz-koupit.pridano {
  background: var(--black);
  color: #fff;
}

@media (max-width: 760px) {
  .academy-kurz-telo a.academy-kurz-koupit { min-height: 44px; }
}

/* Kdo má omezený pohyb, dostane místo otočení prolnutí a pruh stojí. */
@media (prefers-reduced-motion: reduce) {
  .academy-kurz-obraz img,
  .academy-kurz-vstup {
    transform: none !important;
    backface-visibility: visible;
    transition: opacity 200ms linear;
  }
  .academy-kurz-vstup { opacity: 0; }
  .academy-kurz-obraz:hover .academy-kurz-vstup,
  .academy-kurz-obraz:focus-visible .academy-kurz-vstup { opacity: 1; }
  .academy-kurz-vstup::before { animation: none; }
}

/* Oběh pruhu. Předloha má v @keyframes rotation_481 dvakrát `0%`, takže se
   tam pruh netočil; tady je `to` a pruh obíhá. */
@keyframes academy-obeh {
  from { transform: translate(-50%, -50%) rotateZ(0deg); }
  to { transform: translate(-50%, -50%) rotateZ(360deg); }
}