/* ==========================================================================
   Lessons page
   ========================================================================== */

.section--centered {
  text-align: center;
}

/* ---- Section 1: the basics ---------------------------------------------- */

.basics {
  display: flex;
  align-items: center;
  gap: 56px;
}

.basics__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 48px;
  min-width: 0;
}

.basics__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Fixed size from Figma; only shrinks on screens narrower than the photo */
.basics__photo {
  position: relative;
  flex-shrink: 0;
  width: 398.2px;
  max-width: 100%;
  aspect-ratio: 398.2 / 270.58;
  overflow: hidden;
  border: 6px solid var(--color-bg-light-blue);
  border-radius: 6.5px;
}

.basics__photo img {
  position: absolute;
  left: 0;
  top: -13.71%;
  width: 100%;
  height: 113.83%;
  max-width: none;
}

@media (max-width: 820px) {
  .basics {
    flex-direction: column;
    gap: 48px;
  }

  .basics__text {
    align-self: stretch;
  }
}

/* ---- Section 2: well-rounded education (accordion) --------------------- */

.education {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.education__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

/* ---- Section 3: photo group -------------------------------------------- */

.section--photos {
  padding-bottom: 26px;
}

/* Each photo grows in proportion to its aspect ratio, so all three share one
   height and keep their shapes as the row shrinks */
.photo-row {
  display: flex;
  gap: 24px;
}

.photo-row__item {
  position: relative;
  flex: var(--ratio) 1 0;
  min-width: 0;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  border: 7px solid var(--color-bg-light-blue);
  border-radius: var(--radius-lg);
}

.photo-row__item img {
  position: absolute;
  max-width: none;
}

.photo-row__item--awards   { --ratio: 1.0952; } /* 351.57 × 321 */
.photo-row__item--student  { --ratio: 1.0748; } /* 345 × 321 */
.photo-row__item--keyboard { --ratio: 0.7583; } /* 243.42 × 321 */

.photo-row__item--awards img   { left: -11.87%; top: -24.32%; width: 123.97%; height: 170.27%; }
.photo-row__item--student img  { left: 0;       top: -23.59%; width: 100%;    height: 129.32%; }
.photo-row__item--keyboard img { left: -1.87%;  top: -10.63%; width: 110.65%; height: 113.39%; }

@media (max-width: 700px) {
  .photo-row {
    flex-direction: column;
    gap: 20px;
  }

  .photo-row__item {
    flex: none;
    width: 100%;
  }
}

/* ---- Section 4: benefits ------------------------------------------------ */

.benefits {
  display: flex;
  flex-direction: column;
  gap: 33px;
}

.benefits__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

/* Two columns while each card can be at least 400px wide, then one */
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 36px 40px;
  padding: 0;
  list-style: none;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 212px;
  padding: 36px 20px;
  border-radius: var(--radius-lg);
}

.benefit-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-link);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-heading);
}

.benefit-card--tan        { background: var(--color-accent-tan); }
.benefit-card--light-blue { background: var(--color-bg-light-blue); }
.benefit-card--blue       { background: var(--color-bg-blue-brighter); }
.benefit-card--peach      { background: var(--color-accent-peach); }

@media (max-width: 700px) {
  .benefits__grid {
    gap: 20px;
  }

  .benefit-card {
    min-height: 0;
    padding-block: 28px;
  }
}

/* ---- Section 5: policies ------------------------------------------------ */

.policies-teaser {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.policies-teaser__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Section 6: call to action ----------------------------------------- */

.lessons-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}