/* ============================================================
   bodka. — Program (podstránka /program)
   Zoznam programov: obrázok | popis | tlačidlo (pod sebou).
   Mobile-first.
   ============================================================ */

/* Hero podstránky — rovnaké odsadenie pod fixným menu ako ostatné podstránky
   (.sub-hero / .crumbs žijú v cvicenia.css, sem ich preto kopírujeme, nech je
   stránka sebestačná aj bez cvicenia.css). */
.sub-hero{padding-top:clamp(120px,16vw,180px);padding-bottom:clamp(12px,2.4vw,28px);position:relative}
.sub-hero h1{font-size:clamp(2.8rem,7vw,5.6rem)}
.sub-hero .lead{margin-top:22px}
.crumbs{display:flex;gap:.5em;align-items:center;font-family:var(--display);font-weight:500;font-size:.9rem;color:var(--ink-soft)}
.crumbs a:hover{color:var(--orange)}

/* sekcia so zoznamom — kotva pre paralaxové dekorácie v pozadí */
.program-section{position:relative}
.program-section > .wrap{position:relative;z-index:1}

.program-list{
  display:flex;
  flex-direction:column;
  gap:clamp(1rem, 2.4vw, 1.6rem);
  margin-top:clamp(0.6rem, 1.6vw, 1.2rem);
}

/* --- jeden program --- */
.program-item{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(0.9rem, 2vw, 1.4rem);
  align-items:center;
  background:var(--milk);
  border:2px solid color-mix(in srgb, var(--cocoa) 9%, transparent);
  border-radius:var(--r-xl);
  padding:clamp(0.9rem, 1.8vw, 1.4rem);
  box-shadow:var(--shadow-md);
}

/* obrázok vľavo */
.program-item__media{
  width:100%;
}
.program-item__media img{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:calc(var(--r-xl) - 0.4rem);
  display:block;
}
.program-item__ph{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:16 / 10;
  border-radius:calc(var(--r-xl) - 0.4rem);
  background:color-mix(in srgb, var(--orange) 12%, var(--milk));
  color:color-mix(in srgb, var(--cocoa) 45%, transparent);
}
.program-item__ph svg{width:38px; height:38px;}

/* popis v strede */
.program-item__body{min-width:0;}

/* štítky (dátum + čas konania) */
.program-item__meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-bottom:0.65rem;
}
.program-pill{
  display:inline-flex;
  align-items:center;
  gap:0.4em;
  padding:0.34em 0.8em;
  background:color-mix(in srgb, var(--orange) 14%, var(--milk));
  color:var(--cocoa);
  border:1px solid color-mix(in srgb, var(--orange) 26%, transparent);
  border-radius:var(--r-pill);
  font-family:var(--display);
  font-weight:600;
  font-size:0.84rem;
  line-height:1.1;
  white-space:nowrap;
}
.program-pill__ic{font-size:0.95em;line-height:1;}

.program-item__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
  line-height:1.12;
  color:var(--cocoa);
  margin:0;
}
.program-item__desc{
  margin:0.5rem 0 0;
  color:var(--ink-soft);
  font-size:clamp(0.98rem, 0.95rem + 0.2vw, 1.075rem);
  line-height:1.55;
}

/* tlačidlo vpravo */
.program-item__action{
  display:flex;
  justify-content:flex-start;
}
.program-cta{white-space:nowrap;}

/* "Pripravujeme" — neaktívne, nedá sa kliknúť */
.program-cta--soon{
  background:color-mix(in srgb, var(--cocoa) 12%, var(--milk));
  color:color-mix(in srgb, var(--cocoa) 55%, transparent);
  box-shadow:none;
  cursor:default;
  pointer-events:none;
  border:2px dashed color-mix(in srgb, var(--cocoa) 22%, transparent);
}
.program-cta--soon::before{content:none;}

/* ============================================================
   Prázdny stav — keď nie je žiaden program
   ============================================================ */
.program-empty{
  text-align:center;
  max-width:34rem;
  margin:clamp(1.6rem, 4vw, 3rem) auto;
  padding:clamp(2rem, 4vw, 3.2rem) clamp(1.4rem, 3vw, 2.4rem);
  background:color-mix(in srgb, var(--orange) 8%, var(--milk));
  border:2px solid color-mix(in srgb, var(--orange) 22%, transparent);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
}
.program-empty__ic{
  display:inline-grid;
  place-items:center;
  width:64px; height:64px;
  border-radius:50%;
  background:var(--orange);
  color:#fff;
  margin-bottom:1.1rem;
}
.program-empty__ic svg{width:30px; height:30px;}
.program-empty__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  color:var(--cocoa);
  margin:0 0 0.6rem;
}
.program-empty__text{
  color:var(--ink-soft);
  font-size:clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  line-height:1.6;
  margin:0 0 1.6rem;
}

/* ============================================================
   Desktop layout — obrázok | popis | tlačidlo v jednom riadku
   ============================================================ */
@media (min-width:768px){
  .program-item{
    grid-template-columns:clamp(150px, 18vw, 230px) 1fr auto;
    gap:clamp(1.2rem, 2.4vw, 2.2rem);
  }
  .program-item__action{justify-content:flex-end;}
}

@media (min-width:1920px){
  .program-item{
    grid-template-columns:240px 1fr auto;
    padding:1.6rem;
  }
}