/* ==========================================================================
   Eleganz Kids International Preschool — Facilities page
   Loads after style.css. The page banner, the section head, the tint system
   and the closing CTA band are shared components and live there; the
   infrastructure cards and the pill cloud are defined here.

   Both are built to the approved reference (kinderkidsalaya.com): a row of
   photo-topped cards with an icon tile overhanging the bottom-left of the
   picture and a warm cream body, then a centred cloud of outlined pills.
   ========================================================================== */

/* This page's opening paragraph runs longer than the 720px .section-head gives
   it, and at that width it breaks to five short lines. */
.section-head--wide { max-width: 860px; }

/* ------------------------------------------------------ infrastructure grid */
/* Five cards, so the grid is laid out three-then-two rather than four-then-one,
   which would leave a single card marooned under a full row. Each breakpoint
   uses twice the columns it wants cards, with every card spanning two — that
   is what lets the short last row start half a card in and centre itself. A
   plain three-column grid would hang the last two at the left edge. */
.infra-grid {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(36px, 4vw, 56px);
}

.infra-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  /* One warm cream for every card, as in the reference — the per-card colour
     is carried by the icon tile and the art panel, not by seven different
     card backgrounds, which would turn the row into a paint chart. */
  background: var(--peach-50);
  border: 1.5px solid var(--peach-100);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.infra-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px var(--tint-glow);
  border-color: var(--tint-deep);
}

/* Where the photograph goes. The dotted tint stays underneath as the fallback
   that shows while the image loads, or if it ever 404s — the card is never
   left with a blank panel. Swap in real campus photography by replacing the
   file each <img> points at; nothing here needs to change.
   No overflow here: the icon tile hangs past the bottom edge on purpose, and
   .infra-card already clips the rounded corners for any image inside. */
.infra-art {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(var(--tint-deep) 2.2px, transparent 2.3px) 0 0 / 32px 32px,
    radial-gradient(var(--tint-deep) 1.6px, transparent 1.7px) 16px 16px / 32px 32px,
    var(--tint);
}
.infra-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Solid accent tile straddling the seam between picture and body, exactly as
   the reference places it. --tint-ink is the one shade in each ramp that
   clears AA against white, so the icon inside stays legible. */
.infra-icon {
  position: absolute;
  left: var(--sp-5);
  bottom: -20px;
  z-index: var(--z-content);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--tint-ink);
  color: #fff;
  box-shadow: 0 8px 18px var(--tint-glow);
  transition: transform var(--t-base) var(--ease-spring);
}
.infra-icon svg { width: 23px; height: 23px; }
.infra-card:hover .infra-icon { transform: rotate(-7deg) scale(1.07); }

/* Top padding clears the tile hanging into this block. */
.infra-body {
  flex: 1;
  padding: calc(var(--sp-8) + 2px) var(--sp-5) var(--sp-6);
}
.infra-body h3 {
  margin-bottom: var(--sp-3);
  font-size: 19px;
  line-height: 1.3;
}
.infra-card:hover h3 {
  color: var(--tint-ink);
  transition: color var(--t-base) var(--ease-out);
}
.infra-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-muted);
}

/* One column by default; the spans below only exist inside their breakpoints,
   so each layout states itself in full rather than unpicking the last one.
   Both layouts use twice the columns they want cards, with every card
   spanning two — that is what lets a short last row start half a card in and
   centre itself. A plain grid would hang the odd one at the left edge.
   Five cards. */

/* Two across: 2 + 2, then the fifth alone and centred. */
@media (min-width: 621px) {
  .infra-grid { grid-template-columns: repeat(4, 1fr); }
  .infra-card { grid-column: span 2; }
  .infra-card:nth-child(5) { grid-column: 2 / span 2; }
}

/* Three across. Starting the fourth card one column in puts the last two in
   the middle four columns, centred under the three above. */
@media (min-width: 1081px) {
  /* Capped below the 1280px shell: three across the full width would give
     ~390px cards, and a card carrying a title and one line of copy starts
     looking half-empty well before that. */
  .infra-grid {
    grid-template-columns: repeat(6, 1fr);
    max-width: 1080px;
    margin-inline: auto;
  }
  .infra-card:nth-child(5) { grid-column: auto / span 2; }
  .infra-card:nth-child(4) { grid-column: 2 / span 2; }
}

/* -------------------------------------------- homely & caring environment */
/* No panel. A rounded, bordered, gradient-filled box around a short piece of
   prose only drew a frame around it — the words are the whole section, and
   they read better as a plain centred passage on the section's own tint. */
.homely {
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
}
/* Held tighter than the copy so the heading breaks into two balanced lines.
   Wide enough to stay at two: below roughly 28ch the display size tips it to
   three, which buries the section's one big statement. */
.homely h2 { max-width: 30ch; margin-inline: auto; }
.homely p {
  margin-top: var(--sp-5);
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink-soft);
}

/* The dot rule above the closing line is .dot-rule in style.css — the
   thank-you page uses it too, so it is not this page's to own. */

/* The closing belief, set as a pull-quote rather than a third paragraph — it
   is the sentence the whole section exists to land on. Two classes so it
   outweighs the `.homely p` rules above without reaching for !important. */
.homely .homely-creed {
  max-width: 24ch;
  margin-top: var(--sp-5);
  margin-inline: auto;
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--teal-700);
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 620px) {
  .infra-icon { left: var(--sp-4); }
  .infra-body { padding: calc(var(--sp-8) + 2px) var(--sp-5) var(--sp-5); }

  /* The eyebrow's mobile size is handled on the component in style.css now —
     Admissions grew an even longer one and needed the same treatment. */
  .homely p { font-size: 16px; line-height: 1.8; }
  .homely .homely-creed { font-size: 18.5px; }
}