/* Program band — Grant Program header with a figures rail, plus the Grant Tour
   panel (video, lockup, copy and links). Everything hangs off .srw-grant. */

/* ---------- the hairline that opens the band ---------- */
/* The layout tab's "Hairline on top" paints a full-bleed line the width of the
   window. The approved layout draws it inside the container instead, fading out
   at both ends. Restated here under this widget's own root class, so the switch
   keeps its plain behaviour on every other section. */
.srweb .srw-grant.srw-bg-rule { box-shadow: none; }
.srweb .srw-grant.srw-bg-rule::before {
	content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: min(100% - 2 * var(--srw-wrap-pad, 1.25rem), var(--srw-wrap-max, 1200px) - 2 * var(--srw-wrap-pad, 1.25rem));
	height: 1px; pointer-events: none;
	background: linear-gradient(90deg, rgba(36, 67, 120, 0) 0%, rgba(36, 67, 120, .16) 14%, rgba(36, 67, 120, .16) 86%, rgba(36, 67, 120, 0) 100%);
}

/* ---------- header + figures rail ---------- */
.srweb .srw-grant-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.srweb .srw-grant-txt { min-width: 0; }
.srweb .srw-grant-txt > *:last-child { margin-bottom: 0; }
/* This band opens on the page's largest heading, a step above the section h2 the
   pack sets by default. */
.srweb .srw-grant-txt > :is(h1, h2, h3, h4, h5, h6) { font-size: clamp(1.85rem, 3.3vw, 2.95rem); line-height: 1.06; letter-spacing: -.028em; }
/* The standfirst: bigger than body copy and in the soft ink, so the eye reads it
   before the figures. Only the prose — the eyebrow keeps its own type. The
   measure is capped here rather than on the column, so the heading still has the
   whole width and stays on one line. */
.srweb .srw-grant-txt > p:not(.eyebrow) { font-size: 1.1rem; line-height: 1.6; color: var(--c-text-soft); max-width: 38em; }

.srweb .srw-grant-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-lg); min-width: 0; margin: 0; }
/* The rule on the left is what turns two loose numbers into a rail. */
.srweb .srw-grant-stat { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding-left: 1rem; border-left: 3px solid var(--c-glow); }
.srweb .srw-grant-stat--hot { border-left-color: var(--c-accent); }
.srweb .srw-grant-stat-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: .95; letter-spacing: -.035em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.srweb .srw-grant-stat--hot .srw-grant-stat-v { color: var(--c-accent); }
.srweb .srw-grant-stat-l { font-size: .95rem; line-height: 1.4; color: var(--c-text-soft); }

/* ---------- panel ---------- */
/* No shadow: the panel is a tinted plane on the page, not a card lifted off it. */
.srweb .srw-grant-panel { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1rem, 1.8vw, 1.5rem); border: 1px solid var(--c-border); border-radius: var(--r-xl); background: linear-gradient(150deg, #fff, var(--c-glow-soft)); box-shadow: none; overflow: hidden; }
.srweb .srw-grant-panel--split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: center; }
.srweb .srw-grant-media { min-width: 0; }
.srweb .srw-grant-media > img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-card); }

/* ---------- the video ---------- */
/* A poster-first facade: the frame is painted by CSS and nothing is fetched from
   the player until the module is near the screen, so a page nobody scrolls to
   the bottom of never pays for it. */
.srweb .srw-grant-video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: var(--c-ink-deep); box-shadow: var(--sh-card); }
.srweb .srw-grant-video > img,
.srweb .srw-grant-video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; border-radius: 0; box-shadow: none; }
.srweb .srw-grant-video > img { object-fit: cover; }
/* Every state is restated: both the theme and the Elementor kit paint their own
   background and padding on a bare <button>. */
.srweb .srw-grant-play,
.srweb button.srw-grant-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; -webkit-appearance: none; appearance: none; cursor: pointer; background: linear-gradient(160deg, rgba(14, 29, 65, .28), rgba(14, 29, 65, .5)); transition: background var(--t-micro) var(--ease-out); }
.srweb .srw-grant-play:hover,
.srweb .srw-grant-play:focus,
.srweb .srw-grant-play:active,
.srweb button.srw-grant-play:hover,
.srweb button.srw-grant-play:focus,
.srweb button.srw-grant-play:active { background: linear-gradient(160deg, rgba(14, 29, 65, .18), rgba(14, 29, 65, .4)); border: 0; box-shadow: none; }
.srweb .srw-grant-play > span { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 12px 30px rgba(14, 29, 65, .4); transition: transform var(--t-micro) var(--ease-out); }
.srweb .srw-grant-play:hover > span,
.srweb .srw-grant-play:focus-visible > span { transform: scale(1.06); }
.srweb .srw-grant-play svg { width: 24px; height: 24px; margin-left: 3px; fill: var(--c-ink-deep); }
.srweb .srw-grant-play[hidden] { display: none; }
/* On the dark frame the default ring disappears; the cyan is the system's own
   focus colour. */
.srweb .srw-grant-video :focus-visible { outline: 2px solid var(--c-glow); outline-offset: 2px; }

/* The lockup scales with THIS box, not with the window: inside a two-column
   panel the copy column is far narrower than the screen and vw units cut the
   wordmark off. */
.srweb .srw-grant-info { min-width: 0; container-type: inline-size; }
/* Direct children only. The lockup's own two lines are <p>s as well, and a
   descendant rule here outranks their type rules and shrank the wordmark to
   body size. */
.srweb .srw-grant-info > p { font-size: .99rem; line-height: 1.65; color: var(--c-text-soft); max-width: 40em; }
.srweb .srw-grant-info > *:last-child { margin-bottom: 0; }
.srweb .srw-grant-panel-h { margin: 0 0 var(--sp-md); }

/* ---------- the lockup ---------- */
/* The proportions are fixed by the longest line ("Supporting the Emily Whitehead
   Foundation"): the block measures roughly 60em, so 1.6cqw always keeps it in.
   The vw line before it is the fallback where container units are missing. */
.srweb .srw-grant-lock { display: inline-flex; align-items: center; gap: 1.5em; max-width: 100%; margin-bottom: var(--sp-md); font-family: var(--font-display); line-height: 1; font-size: clamp(6px, .85vw, 9px); font-size: clamp(4px, 1.6cqw, 9px); }
.srweb .srw-grant-lock-img { display: block; width: auto; height: 9.5em; flex: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.srweb .srw-grant-lock-txt { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
/* Ink and cyan of the client's mark, deliberately literal: these are the logo's
   own colours and must not drift with the theme tokens. */
.srweb .srw-grant-lock .srw-grant-lock-t { margin: 0 0 .18em; font-family: inherit; font-size: 6em; font-weight: 700; line-height: .9; letter-spacing: -.015em; color: #204075; white-space: nowrap; }
.srweb .srw-grant-lock .srw-grant-lock-s { margin: 0; font-family: inherit; font-size: 2.3em; font-weight: 600; line-height: 1.1; letter-spacing: .01em; color: #31c8d8; white-space: nowrap; }
/* At 6em the body-copy ® would read as a second word; this one is sized and
   lifted to sit on the cap height of the wordmark. The pack's default hangs the
   mark off the baseline, which on a 54px wordmark drops it half a cap height too
   low; the approved layout anchors it to the top of the line box instead and
   then pushes it back down by .4em. Restated in full, because the pack sets
   vertical-align on every sup.sr-reg. */
.srweb .srw-grant-lock .srw-grant-lock-t sup.sr-reg { font-size: .6em; line-height: 0; vertical-align: top; top: .4em; margin-left: -.03em; }

/* ---------- links ---------- */
.srweb .srw-grant-cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-lg); margin-top: var(--sp-md); }
/* Long CTA labels sit in a column narrower than the screen, so they are allowed
   to wrap here — the pack's default keeps them on one line. */
.srweb .srw-grant-cta .btn-lbl { white-space: normal; }

/* Underlined text link, the quiet half of a pair of CTAs. The pack owns no such
   button, so this widget brings its own — under its own prefix, never as a bare
   .btn-line, which would repaint that class on every page this stylesheet
   reaches. Every state is restated because both the theme and the Elementor kit
   paint `a:hover` with their own colour. */
.srweb .srw-grant-line,
.srweb a.srw-grant-line { display: inline-flex; align-items: center; gap: .5em; padding: 0 0 .25em; font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--c-ink); background: none; border: 0; border-bottom: 1px solid var(--c-border); border-radius: 0; text-decoration: none; cursor: pointer; transition: border-color var(--t-micro), color var(--t-micro); }
.srweb .srw-grant-line:hover,
.srweb .srw-grant-line:focus,
.srweb .srw-grant-line:active,
.srweb a.srw-grant-line:hover,
.srweb a.srw-grant-line:focus,
.srweb a.srw-grant-line:active { color: var(--c-ink); border-bottom-color: var(--c-ink); }
.srweb .srw-grant-line .arr { display: inline-block; transition: transform var(--t-micro) var(--ease-out); }
.srweb .srw-grant-line:hover .arr { transform: translateX(3px); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.srweb .srw-grant-panel--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
	.srweb .srw-grant-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
	/* The two figures stay side by side on a phone: stacking them threw away
	   half the width and pushed everything below the fold. They are short —
	   «$42M», «304» — so two narrow columns read fine. */
	.srweb .srw-grant-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-md); }
	.srweb .srw-grant-stat-v { font-size: clamp(1.9rem, 8vw, 2.6rem); }
	.srweb .srw-grant-stat-l { font-size: .85rem; }
	.srweb .srw-grant-cta { gap: var(--sp-md); }
}


/* ---------- the seam ----------
   The approved layout draws a hairline on the boundary with the block above:
   as wide as the text column, fading out at both ends. It is not the shared
   "Hairline on top" of the Layout tab, which runs the full width of the window
   and is solid. Living inside .wrap is what gives it the column's exact width
   at every breakpoint; it is then lifted back through the section's own top
   padding so it lands on the boundary instead of hanging above the block. */
.srweb .srw-grant-seam {
	display: block;
	position: relative;
	height: 1px;
	/* Ink at 16%: the same wash the approved layout uses over a light page. */
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(36, 67, 120, .16) 14%,
		rgba(36, 67, 120, .16) 86%,
		transparent 100%);
	/* Its own pixel is given back so the block below does not shift down. */
	margin-bottom: -1px;
}


/* ---------- the section's own breathing room ----------
   The approved layout gives every section «padding: clamp(3.4rem, 7vw, 5.4rem)»
   of its own — 86px at a desktop width — and some of them open a little tighter,
   at «clamp(2.6rem, 5vw, 4rem)» = 64px. The Layout tab's spacing steps top out
   at 40px, so a section built only from those reads visibly more cramped than
   the design. The padding lives here, and those steps are then set to "None"
   in the page content so the two do not add up. */
.srweb .srw-grant { padding-block: clamp(3.4rem, 7vw, 5.4rem); }
.srweb .srw-grant--tight { padding-top: clamp(2.6rem, 5vw, 4rem); }


/* The seam sits inside .wrap, which the section's top padding has already
   pushed down, so it has to climb back exactly that far to land on the
   boundary between the blocks instead of just above the eyebrow. The travel
   is read from a custom property the padding sets, so the two can never
   drift apart: change one and the other follows. */
.srweb .srw-grant { --srw-seam-lift: clamp(3.4rem, 7vw, 5.4rem); }
.srweb .srw-grant--tight { --srw-seam-lift: clamp(2.6rem, 5vw, 4rem); }

/* This seam sits in the flow inside .wrap, which the section's top padding
   has already pushed down, so it climbs back exactly that far to land on the
   boundary. Read from the same custom property the padding sets, so the two
   cannot drift apart. Two of the six seams are anchored instead and need no
   travel at all — check which before touching this. */
.srweb .srw-grant-seam { top: calc(-1 * var(--srw-seam-lift, 0px)); }