/* ==========================================================
   com_bhgprogram – program akcí (event cards)
   DEER design system / Zlatý Strom

   Sdílený stylopis: používá ho site view komponenty
   (menu „Program") i modul mod_bhgprogram. Je proto
   jen JEDNOU, v /media/com_bhgprogram/css/deer-program.css.

   Hooky jsou ZÁMĚRNĚ deer-program__*, ne deer-events__* –
   ty patří původnímu modulu mod_deer_events, který zůstává
   samostatně použitelný. Oddělené prefixy zaručí, že se oba
   nikdy nepoperou, i kdyby běžely na jedné stránce.

   PRAVIDLO: tento soubor řeší JEN mechaniku (grid, poměry,
   rozestupy, stavy). Barvy / typografie / spacing výhradně
   přes tokeny z typography.css. Žádné natvrdo psané hodnoty.

   Hooky:
     .deer-program            sekce
     .deer-program__inner     obsahový wrapper
     .deer-program__head      hlavička (nadpis + perex)
     .deer-program__grid      mřížka karet
     .deer-program__card      karta akce   (+ .is-featured, .is-nest/roots/apple)
     .deer-program__media     box s fotkou (poměr stran)
     .deer-program__body      textová část karty
     .deer-program__date      datum + den
     .deer-program__title     název akce
     .deer-program__badges    seznam odznaků
     .deer-program__badge     odznak       (+ --accent)
     .deer-program__text      popis
     .deer-program__btn       CTA karty
     .deer-program__more      tlačítko "Další akce"
   ========================================================== */

/* ----------------------------------------------------------
   §1  SEKCE
   ---------------------------------------------------------- */
.deer-program{
  /* Výchozí akcent = Nest (zlatá); přepisují ho .is-* třídy na kartě */
  --ev-accent: var(--world-nest);

  /* Nastavuje inline style z default.php */
  --ev-cols:  3;
  --ev-ratio: 1.7778;

  --ev-card-bg:     var(--c-forest-350);
  --ev-card-border: color-mix(in srgb, var(--c-forest-50) 12%, transparent);
  --ev-muted:       color-mix(in srgb, var(--c-canvas) 60%, transparent);

  position: relative;
}

.deer-program--bg{
  background-color: var(--c-forest-400);
}

/* Full-bleed breakout z Bootstrap gridu */
.deer-program--fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Vertikální padding ZÁMĚRNĚ není tady – řídí ho utility třída
   (výchozí `py-6`) z pole „Třídy – vnitřní blok". Kdyby seděl v CSS,
   nešel by z administrace přebít – utility mají stejnou specificitu. */
.deer-program__inner{
  padding-inline: 0;
}

.deer-program--fullbleed .deer-program__inner{
  padding-inline: var(--space-5);
  margin-inline: auto;
  max-inline-size: 1320px;
}

/* ----------------------------------------------------------
   §2  HLAVIČKA
   ---------------------------------------------------------- */
.deer-program__head{
  margin-block-end: var(--space-5);
  max-inline-size: 46ch;
}

.deer-program__heading{
  margin: 0;
}

.deer-program__intro{
  margin-block-start: var(--space-3);
  color: var(--ev-muted);
}

.deer-program__intro > :last-child{
  margin-block-end: 0;
}

/* ----------------------------------------------------------
   §3  MŘÍŽKA
   ---------------------------------------------------------- */
.deer-program__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

@media (min-width: 576px){
  .deer-program__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px){
  .deer-program__grid{
    grid-template-columns: repeat(var(--ev-cols), minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------
   §4  KARTA
   ---------------------------------------------------------- */
.deer-program__card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;

  background-color: var(--ev-card-bg);
  border: 1px solid var(--ev-card-border);
  border-radius: var(--radius-card);

  transition: border-color .2s ease, transform .2s ease;
}

/* Akcent podle světa – per karta */
.deer-program__card.is-nest  { --ev-accent: var(--world-nest); }
.deer-program__card.is-roots { --ev-accent: var(--world-roots); }
.deer-program__card.is-apple { --ev-accent: var(--world-apple); }

/* Zvýrazněná karta – varianta 1 z předlohy.
   Změřeno v referenci: tělo karty = #C2A361 (--c-grain-400), tj. CELÁ
   plocha v barvě světa, ne jen rámeček. Obsah se proto invertuje na tmavý. */
.deer-program__card.is-featured{
  background-color: var(--ev-accent);
  border-color: var(--ev-accent);
}

.deer-program__card.is-featured .deer-program__date{
  color: color-mix(in srgb, var(--c-forest-400) 75%, transparent);
}

.deer-program__card.is-featured .deer-program__title{
  color: var(--c-forest-400) !important;
}

.deer-program__card.is-featured .deer-program__text{
  color: color-mix(in srgb, var(--c-forest-400) 80%, transparent);
}

/* Fialová a růžová jsou tmavé – na nich zůstává obsah světlý */
.deer-program__card.is-roots.is-featured .deer-program__date,
.deer-program__card.is-apple.is-featured .deer-program__date{
  color: color-mix(in srgb, var(--c-canvas) 85%, transparent);
}

.deer-program__card.is-roots.is-featured .deer-program__title,
.deer-program__card.is-apple.is-featured .deer-program__title{
  color: var(--c-canvas) !important;
}

.deer-program__card.is-roots.is-featured .deer-program__text,
.deer-program__card.is-apple.is-featured .deer-program__text{
  color: color-mix(in srgb, var(--c-canvas) 80%, transparent);
}

/* ----------------------------------------------------------
   §5  MEDIA BOX (poměr stran bez Bootstrap .ratio)
   ---------------------------------------------------------- */
.deer-program__media{
  position: relative;
  inline-size: 100%;
  padding-block-start: calc(100% / var(--ev-ratio));
  overflow: hidden;
  background-color: var(--c-forest-400);
}

.deer-program__media img{
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* ----------------------------------------------------------
   §6  TĚLO KARTY
   ---------------------------------------------------------- */
.deer-program__body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-2);
  padding: var(--space-4);
}

.deer-program__date{
  margin: 0;
  /* Zlata = Nest. Sleduje svet karty (.is-roots/.is-apple ji prepnou). */
  color: var(--ev-accent);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.deer-program__title{
  margin: 0;
}

/* ----------------------------------------------------------
   §7  ODZNAKY
   ---------------------------------------------------------- */
.deer-program__badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;                       /* Figma: gap 10 */
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.deer-program__badge{
  /* Figma: h24, r20, px8, text 11px #F0F3FFB2, plocha #F0F3FF1A */
  display: inline-flex;
  align-items: center;
  block-size: 24px;
  padding-inline: 8px;
  border-radius: 20px;

  font-family: var(--ff-body);
  font-size: 11px;                 /* Figma; v DEER na 11px token není */
  line-height: 1;
  font-weight: var(--typo-w-ui);
  letter-spacing: var(--typo-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;

  background-color: color-mix(in srgb, var(--c-surface) 10%, transparent);  /* #F0F3FF1A */
  color: color-mix(in srgb, var(--c-surface) 70%, transparent);             /* #F0F3FFB2 */
  border: 0;
}

/* Akcentni odznak = plna vypln barvou sveta */
.deer-program__badge--accent{
  background-color: var(--ev-accent) !important;
  color: var(--c-forest-400) !important;
}

.deer-program__card.is-roots .deer-program__badge--accent,
.deer-program__card.is-apple .deer-program__badge--accent{
  color: var(--c-canvas) !important;
}

/* Na zvyraznene (zlate) karte se odznaky invertuji na tmave */
.deer-program__card.is-featured .deer-program__badge{
  background-color: color-mix(in srgb, var(--c-forest-400) 12%, transparent);
  color: color-mix(in srgb, var(--c-forest-400) 75%, transparent);
}

.deer-program__card.is-featured .deer-program__badge--accent{
  background-color: var(--c-forest-400) !important;
  color: var(--ev-accent) !important;
}

/* ----------------------------------------------------------
   §8  POPIS
   ---------------------------------------------------------- */
.deer-program__text{
  color: var(--ev-muted);
  margin-block-start: var(--space-1);
}

.deer-program__text > :last-child{
  margin-block-end: 0;
}

/* ----------------------------------------------------------
   §9  TLAČÍTKA
   ---------------------------------------------------------- */
.deer-program__actions{
  margin-block-start: auto;
  padding-block-start: var(--space-3);
}

/* Karta: CTA je plne tlacitko z DEER utilit
     - bezna karta   -> .btn .btn-canvas .btn-fill  (svetle na tmavem tele)
     - zvyraznena    -> .btn .btn-forest .btn-fill  (tmave na zlatem tele)
   Tridy se skladaji v default.php, tady jen dorovnani vysky. */
/* "Další akce" je obrysové -> globální .btn-canvas-outline (user.css).
   Barvu ani rámeček tady ZÁMĚRNĚ neřešíme: modulové CSS drží jen mechaniku,
   vzhled patří utilitám.

   Dřív se tu barva vnucovala přes --btn-color na .btn-outline. Ten řetěz
   (--btn-color -> --bs-btn-color -> color) je křehký a když selže, spadne
   na fallback var(--color-primary) = #23142D = přesně barva pozadí sekce,
   takže tlačítko beze stopy zmizí. .btn-canvas-outline barvu deklaruje
   napřímo se specificitou (0,2,0) a žádný fallback nemá. */
.deer-program__btn,
.deer-program__more{
  min-height: 38px;
  padding: 8px 16px;
}

/* CTA bez odkazu (jen text) se nesmí tvářit jako klikatelné */
.deer-program__btn:not([href]){
  pointer-events: none;
  opacity: .55;
}

/* ----------------------------------------------------------
   §10  PATIČKA – "Další akce"
   ---------------------------------------------------------- */
.deer-program__foot{
  display: flex;
  margin-block-start: var(--space-4);
}

.deer-program__foot--start { justify-content: flex-start; }
.deer-program__foot--center{ justify-content: center; }
.deer-program__foot--end   { justify-content: flex-end; }

/* ----------------------------------------------------------
   §11  REDUCED MOTION
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .deer-program__card{
    transition: none;
  }
}

.deer-program__empty{
  color: var(--ev-muted);
  font-family: var(--ff-body);
}