/* ============================================
   MASTERING IELTS CASE STUDY
   Save as css/mastering-ielts.css
   Loads AFTER caselog.css, which supplies all
   the cs-* base classes this page reuses.

   Scaled for html { font-size: 62.5% } → 1rem = 10px
   ============================================ */

/* ---------- 03 How I taught ---------- */
.mi-approach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: 3.2rem;
  margin-top: 4rem;
}

.mi-approach__item {
  padding-left: 2rem;
  border-left: 2px solid #4286f4;
}

.mi-approach__item h3 {
  margin: 0 0 0.8rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1a3662;
}

.mi-approach__item p {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.65;
  color: #555;
  max-width: 55ch;
}

/* ---------- 04 Review wall ----------
   Masonry via CSS columns: screenshots keep
   their own aspect ratio, nothing gets cropped. */
.mi-reviews {
  columns: 3;
  column-gap: 2.4rem;
  margin-top: 4rem;
}

.mi-review {
  margin: 0 0 2.4rem;
  break-inside: avoid;
  page-break-inside: avoid;
}

.mi-review__shot {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(59, 121, 220, 0.18);
  box-shadow: 0 8px 32px 0 rgba(59, 121, 220, 0.2);
  background-color: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}

.mi-review__shot:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 12px 40px 0 rgba(59, 121, 220, 0.35);
}

.mi-review__shot img {
  display: block;
  width: 100%;
  height: auto;
}

.mi-review__shot:focus-visible {
  outline: 3px solid #4286f4;
  outline-offset: 3px;
}

/* ---------- links row ---------- */
.mi-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 4rem;
}

/* ---------- responsive ---------- */
@media (max-width: 59em) {
  .mi-reviews {
    columns: 2;
    column-gap: 2rem;
    margin-top: 3.2rem;
  }
  .mi-review {
    margin-bottom: 2rem;
  }
  .mi-approach {
    gap: 2.8rem;
    margin-top: 3.2rem;
  }
}

@media (max-width: 37em) {
  .mi-reviews {
    columns: 1;
  }
  .mi-approach {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .mi-approach__item h3 {
    font-size: 1.9rem;
  }
  .mi-approach__item p {
    font-size: 1.6rem;
  }
  .mi-links {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mi-review__shot,
  .mi-review__shot:hover {
    transition: none;
    transform: none;
  }
}