/* ============================================================
   sections/what-we-teach.css
   Single bordered card with TWO areas:
     • Title area  — light tint (bg-soft), holds the title image
                     (WhatWeTeach_QuickSummary.gif, 565x315),
                     light enough for the image's black/maroon text.
     • Text area   — white, holds the summary + links.
   A divider line separates the two areas.
   Reusable on the standalone What We Teach page too.
   ============================================================ */

.wt { background: var(--bg); }   /* page-level cream; card stands out */

/* ---- The bordered card ------------------------------------- */
.wt__frame {
  max-width: 720px;
  margin-inline: auto;
  border: 1.5px solid rgba(58, 36, 23, 0.22);
  border-radius: 14px;
  overflow: hidden;                 /* clip area backgrounds to the radius */
  box-shadow: 0 24px 60px -34px rgba(58, 36, 23, 0.45);
}

/* ---- Title area (tinted) + divider ------------------------- */
.wt-title-area {
  /*background: var(--bg-soft);*/
  border-bottom: 1.5px solid rgba(58, 36, 23, 0.22);   /* the separating line */
  /*padding: clamp(1.5rem, 4vw, 2.5rem);*/
  text-align: center;
}
.wt-title-img {
  display: block;
  width: 565px; max-width: 100%; height: auto;
  margin-inline: auto;
}

/* ---- Text area (white) ------------------------------------- */
.wt__main {
  background: #ffffff;
  padding: clamp(2rem, 5vw, 3.25rem);
}
.wt__body { max-width: 52ch; margin-inline: auto; text-align: left; }
.wt__body p { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem); line-height: 1.8; color: var(--ink-soft); }
.wt__body p + p { margin-top: 1.1rem; }
.wt-key { color: var(--maroon); font-weight: 700; }

/* ---- Links ------------------------------------------------- */
.wt__actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem;
  margin-top: clamp(2rem, 5vw, 2.75rem);
}
@media (max-width: 520px) {
  .wt__actions { flex-direction: column; align-items: stretch; }
  .wt__actions .btn { justify-content: center; }
}