/* ==========================================================================
   KlepeTo — prubeh-dne.css
   Sekce specifické pro podstránku Průběh dne. Sdílené prvky (section, card,
   page-hero, cta-band, eyebrow...) jsou v global.css.
   ========================================================================== */

/* --- 2. Časová osa běžného dne -----------------------------------------
   Svislá osa: číslo v barevném kolečku vlevo, obsah vpravo, kroky spojené
   tenkou linkou. Dominantní vizuální systém sekce jsou čísla, proto tu
   nejsou žádné ikony ani karty. */
.day-timeline {
  --day-gap: clamp(2.8rem, 4vw, 3.6rem);
  display: grid;
  gap: var(--day-gap);
  max-width: var(--wrap-text);
}
.day-step {
  position: relative;
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  column-gap: 2rem;
}
/* spojnice vede od spodní hrany značky k značce dalšího kroku,
   proto se do výšky připočítává mezera mřížky */
.day-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(2.2rem - 1px);
  top: 5.2rem;
  height: calc(100% - 5.2rem + var(--day-gap));
  width: 2px;
  background: var(--color-line-strong);
}
.day-step__marker {
  margin-bottom: 0;
}
.day-step:nth-child(1) .day-step__marker { --marker-tint: var(--tint-sage); }
.day-step:nth-child(2) .day-step__marker { --marker-tint: var(--tint-sky); }
.day-step:nth-child(3) .day-step__marker { --marker-tint: var(--tint-gold); }
.day-step:nth-child(4) .day-step__marker { --marker-tint: var(--tint-rose); }

/* hlavička kroku má výšku značky, aby nadpis seděl na její ose */
.day-step__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  min-height: 4.4rem;
  margin-bottom: 0.8rem;
}
.day-step__head h3 {
  font-size: 2.1rem;
}
/* ověřený čas se ukazuje jen tam, kde ho známe */
.day-step__time {
  display: inline-flex;
  align-items: center;
  /* inline-flex ruší bílé znaky mezi „od“ a časem, mezeru dělá gap */
  gap: 0.4rem;
  padding: 0.4rem 1.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  white-space: nowrap;
}
.day-step p {
  line-height: 1.55;
  max-width: var(--measure);
}

/* můstek na odpolední provoz — callout s vlastní dělicí linkou,
   proto si rozestup řídí sám, ne přes --action-offset */
.day-outro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2.4rem;
  max-width: var(--wrap-text);
  margin-top: clamp(3.2rem, 5vw, 4rem);
  padding-top: 2.4rem;
  border-top: 1px solid var(--color-line-strong);
}
.day-outro p {
  flex: 1 1 28rem;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 520px) {
  .day-step {
    grid-template-columns: 3.8rem minmax(0, 1fr);
    column-gap: 1.4rem;
  }
  .day-step:not(:last-child)::before {
    left: calc(1.9rem - 1px);
  }
  .day-step__marker {
    width: 3.8rem;
    height: 3.8rem;
    font-size: 1.6rem;
  }
}

/* --- 3. Týdenní rytmus: dvě velké karty s fotkou -----------------------
   Fotka nese důkaz tvrzení, frekvenční štítek přesahuje přes její spodní
   hranu, aby dvojice nepůsobila jako obyčejná mřížka obrázků. */
.week-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.8rem, 4vw, 4rem);
}
.week-card__media {
  position: relative;
}
.week-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-photo);
}
.week-card__badge {
  position: absolute;
  left: 2rem;
  bottom: -1.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: var(--shadow-card);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
}
.week-card__badge::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: var(--blob);
  background: var(--badge-tint, var(--tint-sage));
  flex: none;
}
.week-card:nth-child(2) .week-card__badge {
  --badge-tint: var(--tint-violet);
}
.week-card__body {
  margin-top: 3.8rem;
}
.week-card__body h3 {
  margin-bottom: 1rem;
  font-size: 2.2rem;
}
.week-card__body p {
  line-height: 1.55;
}
.week-card__body p + p {
  margin-top: 1.2rem;
}
.week-card__note {
  position: relative;
  margin-top: 1.6rem;
  padding-left: 1.9rem;
  font-size: 1.55rem;
  line-height: 1.5;
}
.week-card__note::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: var(--blob);
  background: var(--color-primary);
}

@media (max-width: 780px) {
  .week-cards {
    grid-template-columns: 1fr;
    gap: clamp(4rem, 8vw, 5rem);
  }
}

/* --- 4. Co den umožňuje: tři pedagožky + rámec osnov -------------------- */
.support-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.8rem, 4.5vw, 5.2rem);
  align-items: center;
}
.support-grid__number {
  width: 6.4rem;
  height: 6.4rem;
  font-size: 2.8rem;
  --marker-tint: var(--tint-sun);
}
.support-grid__main h3 {
  margin-bottom: 1rem;
  font-size: 2.2rem;
}
.support-grid__main p {
  line-height: 1.55;
  max-width: var(--measure);
}
.support-grid__actions {
  display: flex;
  margin-top: var(--action-offset);
}
/* vedlejší poznámka: bílý box bez rámečku a stínu dle DESIGN-SYSTEM.md */
.support-note {
  background: var(--color-paper);
  border-radius: var(--radius-hero);
  padding: 3rem clamp(2.6rem, 3.5vw, 3.6rem);
}
.support-note h3 {
  margin-bottom: 1rem;
  font-size: 1.9rem;
}
.support-note p {
  font-size: 1.6rem;
  line-height: 1.55;
}

@media (max-width: 780px) {
  .support-grid {
    grid-template-columns: 1fr;
  }
}