/* ==========================================================================
   Eleganz Kids International Preschool — Admissions page
   Loads after style.css. The page banner, the enquiry block and the shared
   components live there; only the requirement cards are defined here.
   ========================================================================== */

/* ------------------------------------------------------- requirements */
.requirements-section { position: relative; }

.requirements-head {
  max-width: 760px;
  margin: 0 auto clamp(38px, 4.5vw, 60px);
  text-align: center;
}
.requirements-head h2 {
  margin-top: var(--sp-5);
  font-size: clamp(27px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.24;
}
.requirements-head p {
  margin-top: var(--sp-4);
  font-size: 17px;
  color: var(--ink-muted);
}

.requirement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.requirement-card {
  position: relative;
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 2px solid var(--tint-deep);
  box-shadow: var(--shadow-sm);
}
.requirement-card h3 { margin-bottom: var(--sp-3); }
.requirement-card p { font-size: 15.5px; color: var(--ink-muted); }

/* Numbered counter in the top-right corner, so the three documents read as
   the numbered list they are without the numbers crowding the headings. */
.requirement-index {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--tint-ink);
  font-size: 15px;
  font-weight: 800;
}

/* Three parts on one line: icon, a two-line prompt, and the number as its own
   pill. Splitting the sentence keeps the number out of the running text, where
   it was both hard to spot and liable to break mid-digit-group. */
.requirements-note {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  max-width: 900px;
  margin: clamp(30px, 3.5vw, 44px) auto 0;
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 2px dashed var(--teal-300);
}

.note-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--teal-100);
  color: var(--teal-700);
}
.note-icon svg { width: 22px; height: 22px; }

.note-copy { flex: 1; min-width: 0; }
.note-copy b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--green-900);
}
.note-copy span {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Solid teal pill, so the number reads as the thing to act on. teal-700 is the
   text-safe shade — white on it is 5.2:1. */
.note-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex: none;
  min-height: 50px;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  background: var(--teal-700);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(31, 122, 101, .26);
  transition: background var(--t-base) var(--ease-out);
}
.note-phone svg { width: 18px; height: 18px; flex: none; }
.note-phone:hover { background: var(--green-800); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 880px) {
  .requirement-grid { grid-template-columns: 1fr; }
  .requirement-card { padding-right: calc(var(--sp-8) + 28px); }
}

/* The prompt and the number stop fitting side by side, so the note stacks and
   the number spans the full width rather than shrinking. */
@media (max-width: 760px) {
  .requirements-note {
    flex-wrap: wrap;
    gap: var(--sp-4);
    padding: var(--sp-6);
  }
  .note-copy { flex: 1 1 60%; }
  .note-phone { flex: 1 0 100%; }
}

@media (max-width: 620px) {
  .requirements-head p { font-size: 16px; }
}