/* ==========================================================================
   KlepeTo — zazemi.css
   Sekce specifické pro podstránku Zázemí. Sdílené prvky (section, page-hero,
   icon-blob, cta-band, eyebrow...) jsou v global.css.
   ========================================================================== */

/* --- 2. Prostory: střídavé řádky text / obraz ---------------------------
   Jiný rytmus než dvojice karet na Průběhu dne: každý prostor dostane celý
   řádek a obraz se u druhé položky překlopí na druhou stranu. */
.space-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media text";
  gap: clamp(2.8rem, 4.5vw, 5.2rem);
  align-items: center;
}
.space-row + .space-row {
  margin-top: clamp(4rem, 6vw, 6rem);
}
.space-row--reverse {
  grid-template-areas: "text media";
}
.space-row__media {
  grid-area: media;
  margin: 0;
}
.space-row__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-photo);
}
.space-row__text {
  grid-area: text;
}
.space-row__text h3 {
  margin-bottom: 1.2rem;
  font-size: 2.2rem;
}
.space-row__text p {
  line-height: 1.55;
  max-width: var(--measure);
}
.space-row__text p + p {
  margin-top: 1.2rem;
}
@media (max-width: 820px) {
  .space-row,
  .space-row--reverse {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "media";
  }
}

/* --- 3. Co škola nabízí navíc: tři ikonové položky ---------------------- */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.4rem, 3.5vw, 3.6rem);
}
.offer-item h3 {
  margin: 1.8rem 0 0.8rem;
  font-size: 2rem;
}
.offer-item p {
  line-height: 1.55;
}
.offer-item__link {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: 1.55rem;
}
@media (max-width: 820px) {
  .offer-grid {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }
}

/* --- 4. Součást školní komunity: callout s dělicí linkou ---------------- */
.community-note {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  max-width: var(--wrap-text);
}
.community-note__claim {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.35;
  margin-bottom: 1.2rem;
}
.community-note p {
  line-height: 1.55;
}
.community-note__actions {
  display: flex;
  margin-top: var(--action-offset);
}
@media (max-width: 620px) {
  .community-note {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}