/* Page-specific CSS for Early Learning. Shared design tokens/utilities live in layout.css. */
.page-academics-early-learning {
    min-height: 0;
}

@media (max-width: 768px) {
    .page-academics-early-learning {
        min-height: 0;
    }
}

/* ---------------------------------------------------------------------------
   Numbered cards for the five key areas of learning.

   One reusable structure shared by all five cards: a two-column grid with the
   badge in a fixed-width column and every piece of text - intro sentence,
   subpoint list and concluding paragraph - inside a single content column, so
   they all share one left edge. Spacing is driven by the owl selector below
   rather than per-card margins.
   --------------------------------------------------------------------------- */
.area-card {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Fixed-size circle. Written as real CSS rather than w-11/h-11 utilities because a grid or flex
   child with only a height set collapses to its digit width and stretches vertically. */
.area-badge {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* minmax(0, 1fr) above plus min-width here stop long unbroken strings from widening the column
   and forcing the card to overflow. */
.area-content {
    min-width: 0;
}

/* Drop the browser's default margins on the children so spacing comes from one rule, not from
   whatever each element happens to default to. */
.area-content > * {
    margin: 0;
}

.area-content > * + * {
    margin-top: 1.25rem;
}

/* No `margin` reset here: it would have the same specificity as the spacing rule above and, coming
   later, would cancel the gap between the intro sentence and the list. `.area-content > *` already
   zeroes the browser default. */
.area-list {
    list-style: none;
    padding: 0;
}

.area-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.area-list li + li {
    margin-top: 0.5rem;
}

/* A fixed icon column keeps every list item's text on the same left edge, whatever glyph the icon
   font renders. line-height matches the adjacent text so the icon sits on the first line. */
.area-list li i {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    text-align: center;
    line-height: 1.25rem;
}

@media (max-width: 480px) {
    .area-card {
        gap: 0.75rem;
    }
}