/* ════════════════════════════════════════════════════════════
   07-akce.css

   Karty akci (/akce) a detail akce.

   Cast verejneho stylu. Soubory se nactou v poradi podle nazvu
   (`assets.PUBLIC_CSS`) a kaskada zavisi na tom poradi - nemenit ho
   a nove pravidlo psat do souboru, kam patri obsahove.
   ════════════════════════════════════════════════════════════ */

/* ── EVENT CARDS (Akce) — obrázkový grid ─────────── */
.akce-head { margin-bottom: 2.5rem; text-align: center; }
.akce-head h1 { text-align: center; margin: 0 0 .6rem; }
.akce-head .lead { margin: 0 auto; max-width: 48ch; }
.akce-empty { margin-top: 1.5rem; border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 2.5rem; text-align: center; }

/* Centrovaný řádek, ne grid: auto-fill drží prázdné sloupce, takže jedna
   nebo dvě akce zůstaly slepené u levého okraje pod vycentrovaným nadpisem.
   Flex rozdělí volné místo po stranách; max-width brání tomu, aby se
   jediná karta roztáhla přes celou šířku stránky. */
.event-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px; margin-top: 1rem;
}
.event-card {
  /* max-width drží osamocenou kartu v posledním řádku skoro na šířce karet
     v plném řádku (~328 px), aby nevypadala nafouknutě. */
  flex: 1 1 300px; max-width: 340px;
  display: flex; flex-direction: column;
  background: transparent;
  border-radius: var(--radius-lg);
  transition: border-color .2s, transform .18s ease-out;
}
/* ŽÁDNÝ `overflow: hidden` na kartě. Ořez si dělá `.event-card-media` sama
   (jen ona ho potřebuje — kvůli `scale` obrázku na hover); na kartě by
   uřízl „gumy" v `.neon-frame::after`, které leží na jejím okraji, a
   přerušení rámečku by zmizela. */
.event-card:hover { transform: translateY(-3px); }
.event-card.is-full { opacity: .72; }

/* média (obrázek / fallback) */
.event-card-media {
  position: relative; display: block; aspect-ratio: 16/9;
  background: var(--surface-2); overflow: hidden;
  /* Horní rohy dorovnávají vnitřní poloměr rámečku karty (radius-lg minus
     tloušťka linky), jinak roh fotky vykoukne přes zaoblení. */
  border-radius: calc(var(--radius-lg) - var(--frame-w)) calc(var(--radius-lg) - var(--frame-w)) 0 0;
}
/* STINOVY PRECHOD („shadow fade") — fotka nekonci tvrdou hranou, ale
   prechazi do plochy karty. Stejny prvek jako u karet na homepage; bez nej
   se karta cte jako dva slepene bloky. `z-index` proto, ze ::after se kresli
   AZ ZA vsemi potomky, tedy i pres odznaky data a „obsazeno" — ty musi
   zustat nad nim. */
.event-card-media::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 48%;
  z-index: 1; pointer-events: none;
  /* Stinovy prechod konci barvou toho, co je pod fotkou. Karta uz vlastni
     plochu nema (kolo 5), takze se fotka vytmavuje do pozadi STRANKY —
     s puvodni `--surface` by pod fotkou zustal modry pruh. */
  background: linear-gradient(180deg, rgba(0, 14, 18, 0), var(--bg));
}
.event-date-badge, .event-full-badge { z-index: 2; }
.event-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.event-card:hover .event-card-media img { transform: scale(1.04); }
.event-card-media.no-img img { display: none; }
.event-media-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 3.5rem; color: var(--faint);
  background:
    radial-gradient(120% 120% at 15% 10%, var(--accent-dim), transparent 55%),
    radial-gradient(120% 120% at 90% 95%, var(--accent-2-dim), transparent 55%),
    var(--surface-2);
}
.event-date-badge {
  position: absolute; left: .85rem; bottom: .85rem;
  background: rgba(8,8,10,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--text); font-size: .8rem; font-weight: 500;
  padding: .35rem .7rem; border-radius: 8px; border: 1px solid var(--line);
}
.event-full-badge {
  position: absolute; right: .85rem; top: .85rem;
  background: var(--accent-2); color: #08080a; font-size: .72rem; font-weight: 600;
  padding: .25rem .65rem; border-radius: 999px;
}

/* tělo karty */
.event-card-body { display: flex; flex-direction: column; gap: .65rem; padding: 1.4rem; flex: 1; }
.event-card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.event-card-title {
  font-family: var(--font-head); font-size: 1.2rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--text); margin: 0;
}
.event-card-desc { font-size: 0.92rem; color: var(--muted); line-height: 1.6; margin: 0; }
.event-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-top: auto; padding-top: .5rem;
}
.event-spots { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--muted); }
.event-meta-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.65; }
.event-full-label { font-size: 0.85rem; font-weight: 600; color: var(--error); }

/* detail akce */
/* aspect-ratio drží místo dřív, než se obrázek načte. U uploadů neznáme
   rozměry předem (width/height do <img> doplnit nejde), takže box musí
   vyhradit CSS — jinak se po načtení posune celý detail akce (CLS). */
/* Jediná fotka akce = ohnisko stránky, takže tady je PLNÝ rámeček (na mřížce
   karet je `--soft`, viz výš). `overflow: hidden` tu být nesmí — uřízlo by
   „gumy" v `::after`, které dělají přerušení; ořez si proto bere obrázek sám
   na vnitřní poloměr. */
.event-hero { margin: 1.25rem 0 .5rem; aspect-ratio: 16 / 9; max-height: 420px; }
.event-hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: calc(var(--radius-lg) - var(--frame-w));
}
.event-meta-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.event-detail-meta { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; margin: 0.75rem 0 1rem; }
.event-detail h1 { text-align: left; }

/* Skill tagy u akcí */
.skill-tag {
  display: inline-block;
  background: var(--accent-2-dim); color: var(--accent-2);
  border: 1px solid var(--accent-2-border);
  padding: 3px 12px; border-radius: 99px;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
}