/* =========================================================
   Schola Ludus – Homepage (Classic Editor + GeneratePress)
   vše namespacované pod .sl-home
   ========================================================= */

.sl-home{
  --sl-max: 1180px;
  --sl-pad: clamp(14px, 2.2vw, 26px);
  --sl-gap: clamp(14px, 2vw, 22px);

  --sl-radius: 14px;
  --sl-radius-lg: 18px;

  --sl-bg: #ffffff;
  --sl-panel: #f6f7f9;
  --sl-border: rgba(0,0,0,.08);

  --sl-text: rgba(0,0,0,.86);
  --sl-muted: rgba(0,0,0,.62);

  --pg: #e7c48a;
  --ex: #cfe6b8;
  --qu: #b7cfe6;
  --as: #d7b6e3;

  color: var(--sl-text);
}

/* typografie */
.sl-home h2,
.sl-home h3{
  letter-spacing: .2px;
}
.sl-home p{
  color: var(--sl-muted);
  line-height: 1.55;
}

/* -------- Chips nav -------- */
.sl-home .sl-app-nav{
  max-width: var(--sl-max);
  margin: 0 auto;
  padding: 0 var(--sl-pad);
}

.sl-home .sl-app-nav__row{
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
}

.sl-home .sl-chip{
  flex: 1 1 auto;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--sl-border);
  background: var(--sl-panel);
  color: var(--sl-text) !important;
  text-decoration: none !important;
  font-weight: 1000;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.sl-home .sl-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.09);
  filter: brightness(1.02);
}
.sl-home .sl-chip:focus{
  outline: 3px solid rgba(0,0,0,.18);
  outline-offset: 2px;
}

.sl-home .sl-chip.is-projectgen{ background: color-mix(in srgb, var(--pg) 70%, #fff 30%); }
.sl-home .sl-chip.is-explorium{ background: color-mix(in srgb, var(--ex) 70%, #fff 30%); }
.sl-home .sl-chip.is-questin{   background: color-mix(in srgb, var(--qu) 70%, #fff 30%); }
.sl-home .sl-chip.is-assessin{  background: color-mix(in srgb, var(--as) 70%, #fff 30%); }

@media (max-width: 860px){
  .sl-home .sl-app-nav__row{ flex-wrap: wrap; }
}
@media (max-width: 420px){
  .sl-home .sl-app-nav__row{ flex-direction: column; }
}

/* -------- App sections -------- */
.sl-home .sl-app{
  max-width: var(--sl-max);
  margin: 0 auto;
  padding: 0 var(--sl-pad);
}

/* KARTA: 2 sloupce (obrázek + text), žádný třetí prázdný sloupec */
.sl-home .sl-app__card{
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--sl-gap);

  align-items: stretch;

  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-lg);
  padding: var(--sl-gap);
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;

  position: relative;
  overflow: hidden;
  margin: 18px 0;
}

/* vnitřní boxy ať berou šířku sloupce a nedeformují grid */
.sl-home .sl-app__card > *{
  width: 100%;
  min-width: 0;
}

.sl-home .sl-app__card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 54px rgba(0,0,0,.09);
  border-color: rgba(0,0,0,.12);
}

/* barevný nádech podle apky */
.sl-home .sl-app.is-projectgen .sl-app__card::before,
.sl-home .sl-app.is-explorium .sl-app__card::before,
.sl-home .sl-app.is-questin .sl-app__card::before,
.sl-home .sl-app.is-assessin .sl-app__card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
}
.sl-home .sl-app.is-projectgen .sl-app__card::before{ background: linear-gradient(90deg, var(--pg), transparent 60%); }
.sl-home .sl-app.is-explorium .sl-app__card::before{  background: linear-gradient(90deg, var(--ex), transparent 60%); }
.sl-home .sl-app.is-questin .sl-app__card::before{    background: linear-gradient(90deg, var(--qu), transparent 60%); }
.sl-home .sl-app.is-assessin .sl-app__card::before{   background: linear-gradient(90deg, var(--as), transparent 60%); }

/* pokud někde v markup pořád existuje .sl-app__shot, na HOME ho schovej */
.sl-home .sl-app__shot{
 }

/* LEFT HERO: obrázek přes celou výšku boxu */
.sl-home .sl-app__hero{
  position: relative;
  height: 100%;
  min-height: 150px;
  border-radius: var(--sl-radius);
  overflow: hidden;
  background: #F3E2BE;
  align-self: stretch;
}

.sl-home .sl-app__hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* badge: bez overlay, jen text */
.sl-home .sl-app__badge{
  position: absolute;
  left: 12px;
  top: 12px;

  padding: 0;
  background: transparent;
  color: #fff;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 14px;

  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

/* BODY */
.sl-home .sl-app__body{
  height: 100%;
  background: var(--sl-panel);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: clamp(12px, 1.8vw, 18px);
  position: relative;
  align-self: stretch;
}

.sl-home .sl-app__body h3{
  margin: 0 0 8px;
  font-size: 18px;
}

/* CTA */
.sl-home .sl-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 18px;
  text-decoration: none !important;
  font-weight: 800;
  border: 1px solid var(--sl-border);
  background: #fff;
  color: var(--sl-text) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sl-home .sl-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.09);
}

.sl-home .sl-app.is-projectgen .sl-cta{ background: color-mix(in srgb, var(--pg) 45%, #fff 55%); }
.sl-home .sl-app.is-explorium .sl-cta{  background: color-mix(in srgb, var(--ex) 45%, #fff 55%); }
.sl-home .sl-app.is-questin .sl-cta{    background: color-mix(in srgb, var(--qu) 45%, #fff 55%); }
.sl-home .sl-app.is-assessin .sl-cta{   background: color-mix(in srgb, var(--as) 45%, #fff 55%); }

.sl-home .sl-cta--big{
  min-height: 48px;
  padding: 12px 18px;
  font-size: 15px;
}

/* responsive */
@media (max-width: 920px){
  .sl-home .sl-app__card{
    grid-template-columns: 1fr;
  }
  .sl-home .sl-app__hero{
    min-height: 220px;
  }
}

/* -------- FAQ -------- */
.sl-home .sl-faq{
  max-width: var(--sl-max);
  margin: 26px auto 10px;
  padding: 0 var(--sl-pad);
}
.sl-home .sl-faq__card{
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-lg);
  padding: clamp(16px, 2.2vw, 26px);
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
}
.sl-home .sl-faq__card h2{
  margin: 0 0 10px;
  font-size: 20px;
}
.sl-home .sl-faq__card details{
  border-top: 1px solid var(--sl-border);
  padding: 12px 0;
}
.sl-home .sl-faq__card details:first-of-type{ border-top: 0; }
.sl-home .sl-faq__card summary{
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.sl-home .sl-faq__card summary::-webkit-details-marker{ display:none; }

.sl-home .sl-faq__cta{
  margin-top: 16px;
}

/* -------- bottom note -------- */
.sl-home .sl-note{
  max-width: var(--sl-max);
  margin: 20px auto 0;
  padding: 0 var(--sl-pad) var(--sl-pad);
}
.sl-home .sl-note__card{
  background: var(--sl-panel);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-lg);
  padding: clamp(16px, 2.2vw, 26px);
}

/* -------- drobnosti pro GeneratePress / Classic Editor -------- */
.sl-home .wp-block-group,
.sl-home .wp-block{
  max-width: none;
}

/* audio widget na home */
.sl-home .sl-audio{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  margin-top:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.sl-home .sl-audio-btn{
  width:38px;
  height:38px;
  border-radius:999px;
  border:0;
  background:#2F6BFF;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:16px;
  line-height:1;
}
.sl-home .sl-audio-title{ font-size:13px; font-weight:700; line-height:1.2; }
.sl-home .sl-audio-sub{ font-size:12px; opacity:.75; line-height:1.2; }



/* =========================================================
   HOME layout – fixy podle aktuálního HTML
   ========================================================= */

/* 0) bezpečnost proti přetékání */
.sl-home, 
.sl-home * ,
.sl-home *::before,
.sl-home *::after{
  box-sizing: border-box;
}

/* 1) Chips: centrovat + větší font */
.sl-home .sl-app-nav__row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.sl-home .sl-chip{
  font-size: 14.5px;
  padding: 10px 14px;
  border-radius: 12px;
text-align: center;           /* ← text na střed */
  justify-content: center;      /* ← když je chip inline-flex */
  align-items: center;          /* ← vertikálně na střed */
  display: inline-flex;         /* ← jistota, že center funguje */
  min-height: 46px;             /* ← aby text nebyl “nízko” */
  line-height: 1;               /* ← zamezí posunu baseline */
}

/* 2) Výchozí karta = 3 sloupce (pro sekce jako #projectgen, #explorium...) */
.sl-home .sl-app__card{
  display: grid;
  grid-template-columns: 
minmax(0, 260px) 
minmax(0, 1fr) 
minmax(0, 180px);
  gap: var(--sl-gap, 20px);
  align-items: stretch;
}

/* grid itemy nesmí “tlačit” šířku ven */
.sl-home .sl-app__card > *{
  min-width: 0;
  width: 100%;
}

/* 3) HERO karta = 2 sloupce (pouze .sl-hero-2col) */
.sl-home .sl-app__card.sl-hero-2col{
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
}

/* v hero kartě žádný třetí sloupec (pro jistotu) */
.sl-home .sl-app__card.sl-hero-2col .sl-app__shot{
  display: none !important;
}

/* 4) HERO + ostatní: obrázek vyplní celý box (řeší <a> uvnitř) */
.sl-home .sl-app__hero{
  position: relative;
  overflow: hidden;
  border-radius: var(--sl-radius, 16px);
  height: 100%;
  min-height: 220px; /* aby to mělo “hero” výšku i když je málo textu */
  padding: 0 !important;
}

/* <a> natáhnout přes celý box */
.sl-home .sl-app__hero > a{
  position: absolute;
  inset: 0;
  display: block;
}

/* img natáhnout přes celý box */
.sl-home .sl-app__hero > a > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* 5) Badge bez tmavého overlay (jen text) */
.sl-home .sl-app__badge{
  position: absolute;
  left: 12px;
  top: 12px;

  background: transparent !important;
  padding: 0 !important;

  color: #fff;
  font-weight: 900;
  letter-spacing: .9px;
  text-transform: uppercase;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

/* 6) Textový box: zabránit “přetečení” a dorovnat výšku */
.sl-home .sl-app__body{
  height: 100%;
  max-width: 100%;
  overflow: hidden;              /* když někde uteče dlouhé slovo */
  overflow-wrap: anywhere;
  border-radius: var(--sl-radius, 16px);
}

/* 7) Responsive: na užších šířkách to složit */
@media (max-width: 920px){
  /* hero karta stack */
  .sl-home .sl-app__card.sl-hero-2col{
    grid-template-columns: 1fr;
  }

  /* ostatní karty: 2 sloupce (hero + body), shot pod tím */
  .sl-home .sl-app__card{
    grid-template-columns: 1fr;
  }
  .sl-home .sl-app__shot{
    order: 3;
border: 1px solid 
rgba(0,0,0,.10);
  background: #fff;
box-shadow: 0 10px 22px rgba(0,0,0,.05);
margin: 0;
  text-align: center;
  line-height: 1.35;
  }

  .sl-home .sl-app__hero{
    min-height: 240px;
  }
}
/* shot boxy: defaultně zobrazit */
.sl-home .sl-app__shot{
  display: block !important;
}

/* ale v hero kartě skrýt */
.sl-home .sl-app__card.sl-hero-2col .sl-app__shot{
  display: none !important;
}