/* ==========================================================================
   Strona plan.html. Korzysta z tokenow i komponentow z style.css.
   Harmonogram podany kartami zamiast jedna szeroka tabela: rodzic szuka
   swojej grupy, a nie porownuje wszystkich naraz.
   ========================================================================== */

.plan-page{background:var(--ink)}
.plan{position:relative;padding-top:clamp(140px,12vw,190px)}
.plan > .shell{position:relative;z-index:1}
.plan .section__brand img{left:auto;right:-8%;top:6%;width:min(38vw,520px);opacity:.06}
.plan .section__brand::before{left:auto;right:-16%;top:0}

.plan__head{max-width:900px;margin-bottom:clamp(52px,5.5vw,80px)}
.plan__head h1{font-size:clamp(44px,4.4vw,74px);font-weight:900;margin:26px 0 28px}

/* --- Karty grup ----------------------------------------------------------- */
.plan__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.slot{background:var(--ink-2);padding:clamp(28px,2.6vw,38px);position:relative;overflow:hidden}
.slot::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease)}
.slot.is-in::after{transform:scaleX(1)}

.slot__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.slot__name{font-family:var(--font-display);font-weight:900;font-stretch:100%;
  font-size:clamp(22px,1.9vw,28px);line-height:1;letter-spacing:-.025em;
  text-transform:uppercase;color:var(--bone)}
.slot__who{font-family:var(--font-display);font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel);text-align:right}

.slot__times{display:flex;flex-direction:column;gap:16px}
.slot__time{display:grid;grid-template-columns:104px 118px 1fr;gap:18px;align-items:baseline}
.slot__day{font-family:var(--font-display);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.slot__hour{font-family:var(--font-display);font-weight:800;font-stretch:100%;
  font-size:16px;color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
.slot__where{font-size:14px;line-height:1.5;color:var(--bone-dim)}
.slot__where span{display:block;font-size:12px;color:var(--steel-dark);margin-top:2px}

.slot__note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.6;color:var(--steel)}

/* Siodma karta zostawalaby sama w rzedzie przy dwoch kolumnach,
   wiec zajmuje cala szerokosc */
.slot--wide{grid-column:1 / -1}
.slot--wide .slot__times{flex-direction:row;flex-wrap:wrap;gap:16px 60px}

/* --- Obiekty -------------------------------------------------------------- */
.venues{margin-top:clamp(56px,6vw,90px)}
.venues h2{font-size:clamp(24px,2.2vw,34px);margin-bottom:28px}
.venues__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.venue{background:var(--ink-2);padding:26px 24px 30px}
.venue__no{display:block;font-family:var(--font-display);font-size:10px;font-weight:700;
  letter-spacing:.24em;color:var(--orange);margin-bottom:18px}
.venue__name{font-family:var(--font-display);font-weight:800;font-stretch:100%;
  font-size:16px;line-height:1.25;text-transform:uppercase;letter-spacing:-.005em;
  color:var(--bone);margin-bottom:8px}
.venue__addr{font-size:13.5px;line-height:1.55;color:var(--steel)}

/* --- Wezwanie na dole ----------------------------------------------------- */
.plan__cta{margin-top:clamp(56px,6vw,90px);padding:clamp(34px,3.4vw,52px);
  border:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:36px;flex-wrap:wrap}
.plan__cta h2{font-size:clamp(24px,2.3vw,36px);margin-bottom:10px}
.plan__cta p{font-size:15px;color:var(--steel);max-width:52ch}
.plan__footer{margin-top:clamp(80px,7vw,120px)}

/* --- Tablet i telefon ----------------------------------------------------- */
@media (max-width:1100px){
  .plan{padding-top:clamp(112px,13vw,160px)}
  .venues__grid{grid-template-columns:repeat(2,1fr)}
  .plan .section__brand{display:none}
}

@media (max-width:760px){
  .plan{padding-top:104px}
  .plan__head{margin-bottom:38px}
  .plan__head h1{font-size:clamp(31px,8.4vw,40px);margin:20px 0 22px}
  .plan-page .nav .btn--ghost{display:none}

  .plan__grid{grid-template-columns:1fr}
  .slot--wide{grid-column:auto}
  .slot--wide .slot__times{flex-direction:column;gap:16px}
  .slot{padding:24px 20px 26px}
  .slot__head{padding-bottom:16px;margin-bottom:16px}
  .slot__who{font-size:10px;letter-spacing:.14em}
  /* Dzien i godzina obok siebie, miejsce w nowej linii */
  .slot__time{grid-template-columns:90px 1fr;gap:6px 14px}
  .slot__where{grid-column:1 / -1;margin-top:2px}

  .venues__grid{grid-template-columns:1fr}
  .venue{padding:22px 20px 24px}
  .plan__cta{flex-direction:column;align-items:stretch;gap:22px;padding:28px 22px}
  .plan__cta .btn{justify-content:center}
  .plan__footer{margin-top:56px}
}