/* ==========================================================================
   Eleganz Kids International Preschool — About Us page
   Loads after style.css. Same tokens, same components; the page banner and
   the label pill are shared and live in style.css.
   ========================================================================== */

/* ------------------------------------------------------------ core values */
/* The section sits on plain white, as the reference does, and deliberately has
   no `overflow: hidden`: every decoration is inset, and clipping would cut the
   cards' hover glow at the edges. `.section` is already position: relative,
   which is all the confetti needs to anchor to. */

/* --- section heading block ------------------------------------------------ */
.values-head {
  position: relative;
  z-index: var(--z-content);
  max-width: 840px;
  margin-inline: auto;
  text-align: center;
}

/* Dotted square tucked behind the top-left of the heading block. Mint rather
   than pink so it stays quiet behind the pill. */
.values-dots {
  position: absolute;
  top: -16px;
  left: 22px;
  z-index: -1;
  width: 122px;
  height: 80px;
  background-image: radial-gradient(var(--teal-300) 2.6px, transparent 2.7px);
  background-size: 19px 19px;
}

.values-head h2 {
  margin-top: var(--sp-5);
  font-size: clamp(29px, 3.8vw, 46px);
  font-weight: 800;
  line-height: 1.24;
}

.values-head p {
  margin: var(--sp-5) auto 0;
  max-width: 800px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-muted);
}

/* --- confetti ------------------------------------------------------------- */
.values-confetti { position: absolute; inset: 0; z-index: var(--z-decor); pointer-events: none; }
.values-confetti .cf { position: absolute; display: block; }

.cf--star     { width: 19px; height: 19px; top: 74px;  left: 4.5%;  color: var(--pink-400); }
.cf--sparkle  { width: 15px; height: 15px; top: 46%;   left: 11%;   color: var(--teal-400); }
.cf--cross    { width: 17px; height: 17px; bottom: 9%; left: 3%;    color: var(--amber-500); }
.cf--plus     { width: 34px; height: 34px; top: 22%;   right: 8.5%; color: var(--amber-300); rotate: 8deg; }
.cf--triangle { width: 27px; height: 27px; top: 58%;   right: 13%;  color: var(--peach-200); rotate: -6deg; }
.cf--chip     { width: 24px; height: 24px; top: 74%;   right: 8%;   background: var(--pink-300); border-radius: 8px; }

/* Three cards across, mirroring the three photo frames in the reference. */
.values-grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: clamp(36px, 4vw, 56px);
}

.value-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Each card carries its own tint, so the row reads as three colours rather
     than three identical white boxes. */
  background: var(--tint-soft);
  border-color: var(--tint-deep);
  box-shadow: 0 14px 30px rgba(7, 72, 61, .10);
}
.value-card h3 { margin-bottom: var(--sp-3); }
.value-card p { flex: 1; color: var(--ink-soft); }

/* A fixed alternating tilt, so the row reads like the reference's pinned
   photographs. Static — it does not move on hover. */
.value-card:nth-child(odd)  { rotate: -1.4deg; }
.value-card:nth-child(even) { rotate:  1.4deg; }

/* Solid colour bar along the top edge — always on, not a hover reveal. */
.value-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--tint-ink);
}

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

.founders-head {
  max-width: 820px;
  margin: 0 auto clamp(34px, 4vw, 56px);
  text-align: center;
}
.founders-head h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.24;
}

/* Each founder card carries a .tint--* class, so the portrait disc, the
   credential chips and the pull-quote all pick up that founder's colour
   instead of every card repeating the same pink. */
.founder-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(30px, 4.5vw, 64px);
  padding: clamp(26px, 3.6vw, 56px);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 2px solid var(--tint-deep);
  box-shadow: var(--shadow-lg);
}

.founder-card + .founder-card { margin-top: clamp(28px, 4vw, 52px); }

/* portrait -------------------------------------------------------------- */
.founder-photo {
  position: relative;
  width: clamp(200px, 25vw, 296px);
  aspect-ratio: 1;
  flex: none;
}

/* Offset pink disc behind the portrait. The headshot has a white studio
   background, so on a white card it needs something to sit against. */
.founder-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--tint-deep);
  transform: translate(13px, 15px);
}

/* Dashed ring outside the photo, so the circle reads as a designed element. */
.founder-photo::after {
  content: "";
  position: absolute;
  inset: -15px;
  z-index: 2;
  border-radius: 50%;
  border: 2px dashed var(--tint-deep);
}

/* Positioned + z-indexed so it paints above ::before, which is also absolute. */
.founder-photo picture {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
}
.founder-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 7px solid var(--tint);
  box-shadow: var(--shadow-md);
}

/* Second founder's headshot is a bare <img> with no <picture> wrapper, so it
   has to be lifted above ::before itself. It is also taller than it is wide —
   anchoring the crop to the top keeps the headroom the circle would eat. */
.founder-photo--top img {
  position: relative;
  z-index: 1;
  object-position: center top;
}

/* body ------------------------------------------------------------------ */
/* The names are h3 because the section now carries its own h2. They keep the
   old h2 scale, which the default h3 size would not give them. */
.founder-body h3 {
  margin-bottom: var(--sp-2);
  font-size: clamp(26px, 2.9vw, 36px);
}

.founder-role {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tint-ink);
}

.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.credentials li {
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--tint-soft);
  border: 1.5px solid var(--tint-deep);
  font-size: 13px;
  font-weight: 600;
  color: var(--green-800);
}

.founder-body p {
  margin-top: var(--sp-5);
  font-size: 16.5px;
  color: var(--ink-muted);
}

.founder-quote {
  position: relative;
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-6);
  border-left: 5px solid var(--tint-deep);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--tint-soft);
  font-family: "Poppins", sans-serif;
  font-size: clamp(16px, 1.55vw, 19.5px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.55;
  color: var(--green-900);
}

/* ------------------------------------------------------------- responsive */
/* The confetti only works while there is margin outside the 1280px shell for
   it to sit in. Below that it would land on the cards, so the four pieces
   flanking the grid go first, then the two beside the narrower heading. */
@media (max-width: 1400px) {
  .cf--sparkle, .cf--cross, .cf--triangle, .cf--chip { display: none; }
}
@media (max-width: 1020px) {
  .cf--star, .cf--plus { display: none; }
}

/* Three columns get too narrow for a heading plus three lines of copy here, so
   the grid drops to two and the odd third card runs the full width. */
@media (max-width: 880px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid > li:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .founder-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .founder-photo { width: clamp(176px, 46vw, 240px); }
  .credentials { justify-content: center; }
  .founder-body p { text-align: left; }
  .founder-quote { text-align: left; }
}

@media (max-width: 620px) {
  .values-dots { display: none; }
  .values-head p { font-size: 16px; line-height: 1.75; }

  .values-grid { grid-template-columns: 1fr; }

  /* The tilt costs horizontal room a single-column card cannot spare. */
  .value-card:nth-child(odd),
  .value-card:nth-child(even) { rotate: 0deg; }

  .founder-quote {
    padding-inline: var(--sp-4);
    font-size: 17px;
  }
}