/**
 * Aledink — design system repair layer
 * ====================================
 * Built: 2026-08-03
 * Scope: type scale, card-cluster alignment, vertical rhythm
 *
 * WHAT THIS IS NOT
 * Not a restyle. The brand — heavy Poppins display type, the red/yellow/
 * orange/black palette, the custom hero illustration — is the strong part of
 * this site and is left alone. Every rule below fixes an inconsistency in how
 * that brand was executed, not the brand itself.
 *
 * WHY THE SELECTORS ARE PAGE-SCOPED
 * Divi numbers its sections and modules PER PAGE. `.et_pb_section_2` is the
 * card cluster on the homepage and a completely different section on
 * /services/. Every positional rule here is therefore scoped by body class:
 *
 *   body.home           /            (also page-id-2)
 *   body.page-id-457    /services/
 *   body.page-id-458    /institutions/
 *   body.page-id-459    /contact/
 *   body.page-id-460    /faq/
 *
 * This was learned the hard way — see the regression notes in a11y.css.
 * A Divi module index is not a stable identifier for content.
 *
 * SPECIFICITY
 * Divi's dynamic stylesheet writes `#page-container ...` rules with
 * `!important`, so overrides here match that shape.
 */

/* ==========================================================================
   1. Type scale

   The site currently renders 14 distinct font sizes per page, including
   50px AND 51px, and 42px AND 45px AND 48px. Those are not decisions, they
   are per-module drift — nobody chooses a 1px type step.

   Measured before:
     home      10.5  12  14  16  17.5  18  24  28  50  51  60  98
     services  12  14  15  16  17.5  18  20  21  28  42  45  48  53  60

   Target scale (1.25 modular ratio, 16px base):
     12   14   16   20   25   31   39   49   61   98

   The 98px hero and the 60px closing statement are deliberate brand moves and
   are deliberately NOT touched. Only collisions and unreadable sizes move.
   ========================================================================== */

:root {
	--aledink-step-xs: 0.75rem;    /* 12px — micro labels */
	--aledink-step-sm: 0.875rem;   /* 14px — secondary copy */
	--aledink-step-md: 1rem;       /* 16px — body */
	--aledink-step-lg: 1.25rem;    /* 20px — lead, card headings on mobile */
	--aledink-step-xl: 1.5625rem;  /* 25px — card headings */
	--aledink-step-2xl: 1.9375rem; /* 31px — sub-section headings */
	--aledink-step-3xl: 3.0625rem; /* 49px — section headings */

	/* Vertical rhythm, 24px base unit. */
	--aledink-rhythm-tight: 3rem;   /* 48px */
	--aledink-rhythm-base: 4.5rem;  /* 72px */
	--aledink-rhythm-loose: 6rem;   /* 96px */
}

/* --- Section headings: 42 / 45 / 50 / 51 all collapse to 49 --------------
   Four sizes doing one job across two pages. Unifying them is the single
   change that most makes the site read as designed rather than assembled.

   home      .et_pb_section_2  h2  51px  "Digital Solutions That Inspire..."
   home      .et_pb_section_3  h2  50px  "Your enrollment goals..."   [see note]
   services  .et_pb_section_1  h2  42px  "Who we work with"
   services  .et_pb_section_2  h2  45px  "What We Do"
   services  .et_pb_section_4  h2  45px
   services  .et_pb_section_5  h2  45px

   NOTE on home .et_pb_section_3: measured at 50px but reported as 60px in the
   page-wide histogram because the closing CTA block contains two headings.
   Only the 50px one is retargeted here; the 60px statement is left alone. */
@media (min-width: 981px) {
	body.home #page-container .et_pb_section_2 > .et_pb_row .et_pb_text h2,
	body.page-id-457 #page-container .et_pb_section_1 .et_pb_text h2,
	body.page-id-457 #page-container .et_pb_section_2 .et_pb_text h2,
	body.page-id-457 #page-container .et_pb_section_4 .et_pb_text h2,
	body.page-id-457 #page-container .et_pb_section_5 .et_pb_text h2 {
		font-size: var(--aledink-step-3xl) !important;   /* 49px */
		line-height: 1.08 !important;
		letter-spacing: -0.02em;
		text-wrap: balance;
	}
}

/* --- Pricing tier titles: 17.5 / 17.5 / 21 all collapse to 20 ------------
   These are <h2> elements rendering SMALLER than the body copy beneath them,
   and the featured tier is 3.5px larger than its two siblings for no reason.
   Three peer tiers should be one size. */
body.page-id-457 #page-container .et_pb_pricing_table .et_pb_pricing_title {
	font-size: var(--aledink-step-lg) !important;   /* 20px */
	line-height: 1.3 !important;
	letter-spacing: 0;
}

/* --- Small-copy snaps ---------------------------------------------------
   17.5px -> 18px (hero supporting paragraph)
   15px   -> 16px (footer contact line on /services/) */
body.home #page-container .et_pb_section_0 .et_pb_text_inner p {
	font-size: 1.125rem !important;   /* 18px */
	line-height: 1.6 !important;
}

body.page-id-457 #page-container .et_pb_section_5 .et_pb_text_inner {
	font-size: var(--aledink-step-md) !important;   /* 16px */
}

/* ==========================================================================
   2. The homepage card cluster

   THE MOST VISIBLE CRAFT PROBLEM ON THE SITE, and it is arithmetic rather
   than taste. Measured at 1440px:

     row_3  display:flex   [heading 1/2, 524px @ x=180]
                           [Colleges    1/4, 246px @ x=736]
                           [Trade       1/4, 246px @ x=1014]

     row_4  display:block  [Summer      1/3, 251px @ x=460]
                           [Learning    1/3, 251px @ x=735]
                           [EMPTY       1/3, 251px @ x=1009]   <- phantom

   Three separate defects:
     1. The rows use different column systems — 1/4 (246px) against 1/3
        (251px). The cards are 5px different in width and 1-5px out of
        vertical alignment with each other.
     2. row_4 contains an empty third column. That is the dead space on the
        right of the cluster; it is not a layout choice, it is an empty div.
     3. Card heights run 304 / 304 / 206 / 230.

   The design intent is obvious once measured: a heading block on the left and
   a 2x2 grid of the four audience segments on the right. The fix is to make
   row_4 honour the geometry row_3 already establishes.

   Percentages below are derived from the measured row_3 layout:
     card width  246 / 1080 = 22.7778%
     gutter       32 / 1080 =  2.9630%
   Placing them in a 3-track grid puts the two cards at exactly x=736 and
   x=1014 — pixel-identical to the row above.
   ========================================================================== */

@media (min-width: 981px) {
	body.home #page-container .et_pb_section_2 .et_pb_row_4 {
		display: grid;
		grid-template-columns: 1fr 22.7778% 22.7778%;
		column-gap: 2.9630%;
		align-items: stretch;    /* equal card heights within the row */

		/*
		 * THE ACTUAL BUG, and it took a measurement to find.
		 *
		 * row_4 carries `padding-left: 280px`. Somebody nudged the second card
		 * row rightwards by hand to fake alignment under the heading block,
		 * rather than fixing the column widths. That padding is why the
		 * "Summer Camps" card sat at x=460 instead of lining up at x=736.
		 *
		 * It also silently broke the first version of this grid: percentage
		 * tracks resolve against the CONTENT box, so 22.7778% measured against
		 * 1080-280=800px produced 182px cards at x=872 instead of 246px cards
		 * at x=736. The percentages were right; the box they resolved against
		 * was not.
		 *
		 * With the padding removed the content box is the full 1080px and the
		 * tracks compute to 524 / 246 / 246 with 32px gutters — pixel-identical
		 * to row_3 above.
		 */
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.home #page-container .et_pb_section_2 .et_pb_row_4 > .et_pb_column {
		width: auto;
		margin: 0;
		float: none;
	}

	/* Explicit placement so the cards land in tracks 2 and 3, never track 1. */
	body.home #page-container .et_pb_section_2 .et_pb_row_4 > .et_pb_column_10 {
		grid-column: 2;
	}

	body.home #page-container .et_pb_section_2 .et_pb_row_4 > .et_pb_column_11 {
		grid-column: 3;
	}

	/* The phantom column. Empty, invisible, and the reason the cluster looked
	   lopsided. */
	body.home #page-container .et_pb_section_2 .et_pb_row_4 > .et_pb_column_12 {
		display: none;
	}

	/* Match row_3's cards to the same stretch behaviour. */
	body.home #page-container .et_pb_section_2 .et_pb_row_3 {
		align-items: stretch;
	}

	/* Pull the second card row up so the 2x2 reads as one block rather than
	   two unrelated rows. Divi's default row margin is 30px. */
	body.home #page-container .et_pb_section_2 .et_pb_row_4 {
		margin-top: 1.75rem;   /* 28px — matches the horizontal gutter */
	}
}

/* --- Card interior: one type treatment for all four ----------------------
   Body copy measured 10.5px on three cards and 16px on the fourth. 10.5px is
   below any reasonable reading floor and was the main reason the cluster read
   as unfinished. All four now share one heading size and one body size. */
body.home #page-container .et_pb_section_2 .et_pb_column_8 .et_pb_text_inner,
body.home #page-container .et_pb_section_2 .et_pb_column_9 .et_pb_text_inner,
body.home #page-container .et_pb_section_2 .et_pb_column_10 .et_pb_text_inner,
body.home #page-container .et_pb_section_2 .et_pb_column_11 .et_pb_text_inner {
	font-size: var(--aledink-step-sm) !important;    /* 14px */
	line-height: 1.55 !important;
}

body.home #page-container .et_pb_section_2 .et_pb_column_8 .et_pb_text_inner p,
body.home #page-container .et_pb_section_2 .et_pb_column_9 .et_pb_text_inner p,
body.home #page-container .et_pb_section_2 .et_pb_column_10 .et_pb_text_inner p,
body.home #page-container .et_pb_section_2 .et_pb_column_11 .et_pb_text_inner p {
	font-size: var(--aledink-step-sm) !important;    /* 14px */
	line-height: 1.55 !important;
	margin-bottom: 0;
}

body.home #page-container .et_pb_section_2 .et_pb_column_8 h3,
body.home #page-container .et_pb_section_2 .et_pb_column_9 h3,
body.home #page-container .et_pb_section_2 .et_pb_column_10 h3,
body.home #page-container .et_pb_section_2 .et_pb_column_11 h3 {
	font-size: var(--aledink-step-xl) !important;    /* 25px */
	line-height: 1.15 !important;
	letter-spacing: -0.015em;
	margin-bottom: 0.75rem;
	text-wrap: balance;
}

/* Consistent interior padding — measured at "30px 20px 0px" on one card and
   "30px 20px 20px" on the others. */
body.home #page-container .et_pb_section_2 .et_pb_column_8,
body.home #page-container .et_pb_section_2 .et_pb_column_9,
body.home #page-container .et_pb_section_2 .et_pb_column_10,
body.home #page-container .et_pb_section_2 .et_pb_column_11 {
	padding: 1.75rem 1.5rem !important;   /* 28px 24px */
}

/* ==========================================================================
   3. Vertical rhythm

   Section padding measured at 16 / 54 / 72 / 80 — four values with no common
   unit. Normalised onto a 24px base: 48 / 72 / 96.

   The homepage hero keeps its deliberately tight 16px; it is doing something
   specific and looks correct.
   ========================================================================== */

@media (min-width: 981px) {
	#page-container .et_pb_section {
		padding-top: var(--aledink-rhythm-base) !important;      /* 72px */
		padding-bottom: var(--aledink-rhythm-base) !important;
	}

	/* Hero: intentionally tight, left as authored. */
	body.home #page-container .et_pb_section_0 {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}

	/* Page-opening and page-closing sections get the loose step, so the page
	   breathes at its edges and tightens between related content. */
	body.page-id-457 #page-container .et_pb_section_0,
	body.page-id-457 #page-container .et_pb_section_5 {
		padding-top: var(--aledink-rhythm-loose) !important;     /* 96px */
		padding-bottom: var(--aledink-rhythm-loose) !important;
	}
}

/* ==========================================================================
   4. Mobile

   Below 981px Divi stacks every column, so the grid rules above are scoped
   out. What matters on small screens is that the cards keep the corrected
   type and do not inherit desktop padding.
   ========================================================================== */

@media (max-width: 980px) {
	/* The phantom column must stay hidden at every width — it renders as
	   50px of empty space in the stack. */
	body.home #page-container .et_pb_section_2 .et_pb_row_4 > .et_pb_column_12 {
		display: none;
	}

	#page-container .et_pb_section {
		padding-top: var(--aledink-rhythm-tight) !important;     /* 48px */
		padding-bottom: var(--aledink-rhythm-tight) !important;
	}

	body.home #page-container .et_pb_section_0 {
		padding-top: 1rem !important;
		padding-bottom: 1.5rem !important;
	}
}