/*
 * Core blocks and GIFSA elements.
 *
 * The block library stylesheet is not loaded on the front end (inc/setup.php),
 * so every core block a page may use is styled here. Section appearance comes
 * from the class names in blocks.css (hero, services, stats...), set on each
 * Group or Columns block; this file adapts those rules to core markup.
 */

/* ---- Palette utilities (theme.json palette; global styles are not loaded) ---- */
.has-cream-color { color: var(--c-cream) !important; }
.has-black-color { color: var(--c-black) !important; }
.has-red-orange-color { color: var(--c-red-orange) !important; }
.has-orange-color { color: var(--c-orange) !important; }
.has-deep-ochre-color { color: var(--c-deep-ochre) !important; }
.has-yellow-color { color: var(--c-yellow) !important; }
.has-warm-gold-color { color: var(--c-warm-gold) !important; }
.has-sky-blue-color { color: var(--c-sky-blue) !important; }
.has-teal-color { color: var(--c-teal) !important; }
.has-deep-teal-color { color: var(--c-deep-teal) !important; }
.has-white-color { color: var(--c-white) !important; }
mark.has-inline-color { background: transparent; }

/* ---- Core layout blocks ---- */
.wp-block-columns { display: flex; flex-wrap: wrap !important; align-items: stretch; }
.wp-block-column { flex: 1 1 340px; min-width: 0; }
.wp-block-image { margin: 0; }
.wp-block-image img { height: auto; }
.wp-block-image figcaption { font-size: var(--fs-14); line-height: 1.5; margin-top: 8px; }

/* A level 2 core heading takes the section heading style (the .h2 class). Zero specificity, so section rules still win. */
:where(h2.wp-block-heading) { font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }

/* ---- Maroon Bush motif (Group setting) ---- */
.has-motif-ochre, .has-motif-white { position: relative; overflow: hidden; }
.has-motif-ochre > :not(.is-motif), .has-motif-white > :not(.is-motif) { position: relative; }
.gifsa-motif { position: absolute; right: -40px; bottom: 0; width: min(620px, 50%); height: auto; opacity: .16; pointer-events: none; }
.gifsa-motif--white { top: 0; bottom: auto; left: -60px; right: auto; width: min(600px, 48%); transform: scaleY(-1) scaleX(-1); }

/* ---- Card (gifsa/card) ---- */
.gifsa-card { position: relative; color: var(--c-black); }

/* Icon in a card or icon list item: a chip in its colour. White icon only on the dark colours (brief 4.2). */
:is(.gifsa-card, .icon-list__item) .wp-block-gifsa-icon { flex: none; display: grid; place-items: center; background: var(--card-colour); color: var(--c-black); }
:is(.gifsa-card, .icon-list__item).has-dark-colour .wp-block-gifsa-icon { color: var(--c-white); }
.wp-block-gifsa-icon svg { display: block; }
/* An uploaded icon fills the same 40px box as the built-in icons, keeping its proportions. */
.wp-block-gifsa-icon img { display: block; width: 40px; height: 40px; object-fit: contain; }

/* Service: white card, colour bar along the top, round icon. */
.gifsa-card--service {
	background: linear-gradient(var(--card-colour), var(--card-colour)) top / 100% 12px no-repeat, var(--c-white);
	border-radius: 26px 26px 26px 6px;
	padding: 34px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: clamp(340px, 26vw, 400px);
}
.gifsa-card--service .wp-block-gifsa-icon { width: 54px; height: 54px; border-radius: var(--r-pill); }
.gifsa-card--service > :is(h2, h3, h4) { font-size: var(--fs-card-title); font-weight: 700; line-height: 1.25; letter-spacing: normal; }
.gifsa-card--service > p { font-size: var(--fs-15); line-height: 1.6; }
.gifsa-card--service > .wp-block-buttons { margin-top: auto; }
.services--listing .gifsa-card--service { min-height: 0; }

/* Pathway tile: cream, icon square on the left. */
.gifsa-card--pathway {
	background: var(--c-cream);
	border-radius: 26px 26px 26px 8px;
	padding: 26px 28px 26px 106px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gifsa-card--pathway:hover { background: var(--c-white); }
.gifsa-card--pathway .wp-block-gifsa-icon { position: absolute; left: 28px; top: 26px; width: 58px; height: 58px; border-radius: 18px 18px 18px 5px; }
.gifsa-card--pathway > :is(h2, h3, h4),
.gifsa-card--pathway > .pathway__title { font-family: var(--font-heading); font-size: var(--fs-tile-title); font-weight: 700; line-height: 1.25; letter-spacing: normal; }
.gifsa-card--pathway > p:not(.pathway__title) { font-size: var(--fs-15); line-height: 1.6; }
.gifsa-card--pathway .is-style-text-link > .wp-block-button__link,
.gifsa-card--pathway .is-style-text-link > .wp-block-button__link:hover { color: inherit; }
/* A tile with one link is rendered as that link (blocks/card/render.php). */
a.gifsa-card--pathway { text-decoration: none; }
a.gifsa-card--pathway:hover { color: var(--c-black); }

/* Statistic: rule above, figure in the card colour, label below. */
.gifsa-card--stat { border-top: 2px solid var(--c-line); padding-top: 16px; }
.gifsa-card--stat > p:first-child { font: 800 var(--fs-stat)/1.05 var(--font-heading); color: var(--card-colour); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.gifsa-card--stat > p + p { font-size: var(--fs-15); line-height: 1.55; }

/* Panel: filled with the card colour. A panel inside the feature, text-panel,
 * cta-banner or contact section takes that section's padding and corners from
 * blocks.css; these zero-specificity defaults cover a panel used anywhere else. */
.gifsa-card--panel { background: var(--card-colour); }
.gifsa-card--panel.has-dark-colour { color: var(--c-white); }
:where(.gifsa-card--panel) { border-radius: 36px 36px 36px 10px; padding: clamp(28px, 3.2vw, 44px); }
.wp-block-column > .gifsa-card--panel:only-child { height: 100%; }
/* The banner panel sits straight in its section, so it carries the content width itself. */
.cta-banner > .gifsa-card--panel { max-width: var(--content-max); margin: 0 auto; }

/* ---- Sections built from core blocks ----
 * Gaps, backgrounds and padding come from blocks.css; only what differs in core markup is here. */

/* Hero (inner page style: "hero hero--page", photo in a hero__media column) */
.hero__grid > .wp-block-column { flex-basis: 430px; }
.hero--page .hero__grid > .wp-block-column { flex-basis: 420px; }
.wp-block-image.hero__image { overflow: hidden; }
.wp-block-image.hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* Pathways and services grids are Groups; blocks.css already lays them out. */

/* Statistics: the tab's nub is drawn here rather than as an empty element. */
.stats__tab::after { content: ""; position: absolute; left: clamp(30px, 7%, 124px); bottom: -36px; width: 138px; height: 38px; background: var(--c-warm-gold); border-radius: 0 0 70px 70px; z-index: 2; }

/* Image and text */
.image-text__grid > .wp-block-column { flex-basis: 340px; }
.image-text__media .wp-block-image { position: absolute; inset: 0; }
.image-text__media .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }

/* Feature with image or video */
.feature__grid > .wp-block-column { flex-basis: 360px; }
.wp-block-image.feature__image { position: relative; overflow: hidden; }
.wp-block-image.feature__image img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }

/* Video with cover image (gifsa/video). The cover fills its frame; in the feature
 * section the frame is the one blocks.css gives .feature__image. The player is
 * added in place by blocks.js and covers the photo. */
.wp-block-gifsa-video { position: relative; overflow: hidden; margin: 0; }
.wp-block-gifsa-video__image { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.wp-block-gifsa-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Text with panel */
.text-panel__grid > .wp-block-column { flex-basis: 340px; }

/* Get in touch */
.contact__grid > .wp-block-column { flex-basis: 320px; }
.gifsa-offices { display: contents; }

/* Feature with photos (vehicle fleet). The text column keeps its 58ch measure on
 * its contents, so the column itself shares the row equally with the photos. */
.fleet__grid > .wp-block-column { flex-basis: 360px; }
@property --fleet-measure { syntax: "<length>"; inherits: true; initial-value: 0px; }
/* Registered, so 58ch resolves to pixels at the column's font size, as the ACF version measured it. */
.fleet__grid > .fleet__text { max-width: none; --fleet-measure: 58ch; }
.fleet__text > * { max-width: var(--fleet-measure); }
.wp-block-image.fleet__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Numbered steps: a numbered List with the "Numbered steps" style. Each step's
 * number colour is a list item setting (has-step-*); the numbers are hidden from
 * screen readers, which announce the list's own numbering. */
ol.is-style-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 880px; counter-reset: step; }
ol.is-style-steps > li {
	--step-colour: var(--c-yellow);
	counter-increment: step;
	position: relative;
	min-height: 92px;
	max-width: calc(62ch + 80px);
	padding: 15px 0 clamp(24px, 3vw, 38px) 80px;
	font-size: clamp(1.02rem, 1.3vw, 1.15rem);
	line-height: 1.7;
}
ol.is-style-steps > li:last-of-type { min-height: 58px; padding-bottom: 0; }
ol.is-style-steps > li::before {
	content: counter(step) / "";
	position: absolute;
	left: 0;
	top: 0;
	width: 58px;
	height: 58px;
	border-radius: var(--r-pill);
	display: grid;
	place-items: center;
	font: 800 1.5rem/1 var(--font-heading);
	background: var(--step-colour);
	color: var(--c-black);
}
ol.is-style-steps > li:not(:last-of-type)::after { content: ""; position: absolute; left: 27.5px; top: 66px; bottom: 8px; width: 3px; background: var(--c-rule); border-radius: var(--r-pill); }
ol.is-style-steps > li.has-step-yellow { --step-colour: var(--c-yellow); }
ol.is-style-steps > li.has-step-sky-blue { --step-colour: var(--c-sky-blue); }
ol.is-style-steps > li.has-step-teal { --step-colour: var(--c-teal); }
ol.is-style-steps > li.has-step-warm-gold { --step-colour: var(--c-warm-gold); }
ol.is-style-steps > li.has-step-orange { --step-colour: var(--c-orange); }
ol.is-style-steps > li.has-step-red-orange { --step-colour: var(--c-red-orange); }

/* Call-to-action band */
.cta-band__buttons .wp-block-button__link { padding: 0 28px; }

/* ==== Service pages ==== */

/* Photo placeholder: a dashed box until the licensed photo arrives (C2: gone before launch). */
.photo-placeholder { background: var(--c-cream); border: 2px dashed var(--c-placeholder-border); display: grid; place-items: center; padding: 16px; }
.photo-placeholder-label, .photo-placeholder > p { background: var(--c-black); color: var(--c-yellow); font: 700 .75rem/1.45 var(--font-heading); letter-spacing: .05em; padding: 10px 14px; border-radius: 14px; text-align: center; }
.hero__media > .photo-placeholder { position: absolute; inset: 0; border-radius: inherit; }
.why__media > .photo-placeholder { position: absolute; inset: 0; border-radius: 32px 32px 8px; }

/* What's included: Deep Teal band with a list of icon tiles. */
.included { background: var(--c-deep-teal); color: var(--c-white); padding: clamp(52px, 7vw, 92px) var(--gutter) clamp(60px, 7vw, 104px); }
.included h2 { color: var(--c-white); }
.included__intro { font-size: var(--fs-intro); line-height: 1.7; margin-bottom: clamp(26px, 3vw, 42px); }
.icon-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(320px, 44%)), 1fr)); gap: clamp(20px, 2.4vw, 30px); }
.icon-list__item { background: var(--c-cream); color: var(--c-black); border-radius: 26px 26px 26px 8px; padding: 26px 28px; display: flex; align-items: center; gap: 20px; }
.icon-list__item .wp-block-gifsa-icon { width: 58px; height: 58px; border-radius: 18px 18px 18px 5px; }
.icon-list__item > p { font-family: var(--font-heading); font-size: 1.06rem; font-weight: 600; line-height: 1.4; }
/* A tile with a second paragraph is a title and a description (Respite: the two types of respite). */
.icon-list__item:has(> p + p) { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 20px; row-gap: 8px; align-content: center; }
.icon-list__item:has(> p + p) > .wp-block-gifsa-icon { grid-row: 1 / span 2; align-self: center; }
.icon-list__item > p:first-of-type:not(:last-of-type) { font-size: 1.18rem; font-weight: 700; line-height: 1.25; }
.icon-list__item > p + p { font-family: var(--font-body); font-size: var(--fs-15); font-weight: 400; line-height: 1.6; }

/* Why GIFSA: photo beside text on Cream, Maroon Bush top right. */
.why { background: var(--c-cream); color: var(--c-black); padding: clamp(52px, 7vw, 92px) var(--gutter); position: relative; overflow: hidden; }
.why__motif { position: absolute; right: -40px; top: -30px; width: min(520px, 42%); height: auto; opacity: .16; transform: scaleY(-1); pointer-events: none; }
.wp-block-columns.why__grid { gap: clamp(28px, 3.4vw, 56px); }
.why__grid > .wp-block-column { flex-basis: 320px; }
.why__media { position: relative; align-self: stretch; min-height: clamp(260px, 30vw, 360px); }
.why__media .wp-block-image { position: absolute; inset: 0; }
.why__media .wp-block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 32px 32px 8px; }
.why__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.why__title { line-height: 1.12; margin-bottom: 20px; }
.why__copy { font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.8; max-width: 56ch; }

/* The GIFSA Difference: the statistics layout, five across from 860px (mockup). */
.trust .stats__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.4vw, 34px) clamp(18px, 1.8vw, 26px); }
@media (min-width: 600px) { .trust .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .trust .stats__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.trust .gifsa-card--stat > p:first-child { font-size: clamp(1.32rem, 2.4vw, 2.5rem); line-height: 1.1; }

/* Participant story: one wide card (Testimonial cards, Featured layout). */
.stories--feature .stories__head { margin-bottom: clamp(26px, 3.4vw, 40px); }
.stories--feature .stories__title { line-height: 1.12; letter-spacing: -.02em; }
.stories__grid--feature { grid-template-columns: minmax(0, 1fr); }
.stories__grid--feature .story-card { border-radius: 36px 36px 36px 12px; }
.stories__grid--feature .story-card__body { padding: clamp(26px, 3vw, 40px); justify-content: center; }
.stories__grid--feature .story-card__summary { font-size: var(--fs-body); }
.stories__grid--feature .story-card__quote { padding: 22px 26px 20px; }
.stories__grid--feature .story-card__glyph { font-size: 3.25rem; }
.stories__grid--feature .story-card__words { font-size: clamp(1.1rem, 1.35vw, 1.28rem); }
.stories__grid--feature .story-card__cite { font-size: var(--fs-body); }

/* FAQ accordion. */
.faqs { background: var(--c-cream); padding: clamp(52px, 7vw, 92px) var(--gutter); }
.faqs__title { line-height: 1.12; margin-bottom: clamp(24px, 3vw, 38px); }
/* Straight after the Cream participant story (no fleet band between, as on Skill-Building) the FAQ drops its top padding, as the mockup does. */
.stories + .faqs { padding-top: 0; }
.faq { display: flex; flex-direction: column; gap: 12px; }
/* No overflow: hidden here: it clipped the toggle's focus ring (drawn outside the button) to nothing (A13). */
.faq__item { border: 1px solid var(--c-faq-border); border-radius: 22px 22px 22px 6px; background: var(--c-white); }
.faq__item:has([aria-expanded="true"]) { border-color: var(--c-deep-teal); }
.faq__question { margin: 0; }
.faq__toggle { width: 100%; background: transparent; border: 0; cursor: pointer; text-align: left; font: 700 clamp(1.02rem, 1.3vw, 1.15rem)/1.45 var(--font-heading); color: var(--c-black); min-height: 64px; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq__toggle:focus-visible { border-radius: 22px 22px 22px 6px; }
.faq__icon { flex: none; width: 40px; height: 40px; border-radius: var(--r-pill); border: 2px solid var(--c-black); color: var(--c-black); display: grid; place-items: center; font-size: 1.375rem; line-height: 1; }
.faq__icon::before { content: "+"; }
[aria-expanded="true"] > .faq__icon { background: var(--c-deep-teal); border-color: var(--c-deep-teal); color: var(--c-white); font-size: 1.625rem; }
[aria-expanded="true"] > .faq__icon::before { content: "\2212"; }
.faq__answer { border-top: 1px solid var(--c-line-soft); margin: 0 22px; padding: 18px 0 22px; font-size: var(--fs-16); line-height: 1.7; } /* full width of the card (Simon, 8 Oct; mockup had max-width: 70ch) */
.faq__answer > * + * { margin-top: 12px; }
.faq__answer[hidden] { display: none; }

/* "Is this in my NDIS plan?" callout: a Warm Gold panel with its button to the right. */
.callout { background: var(--c-cream); padding: 0 var(--gutter) clamp(52px, 7vw, 92px); }
:where(.callout) .gifsa-card--panel {
	max-width: var(--content-max);
	margin: 0 auto;
	border-radius: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 52px) clamp(28px, 4vw, 52px) 12px;
	padding: clamp(30px, 3.4vw, 46px) clamp(28px, 3.4vw, 48px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(22px, 3vw, 44px);
	align-items: center;
	justify-content: space-between;
}
.callout__text { flex: 1 1 520px; min-width: min(100%, 320px); }
.callout__title { line-height: 1.12; margin-bottom: 16px; }
.callout__copy { font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.75; max-width: 72ch; }
.callout .wp-block-buttons { flex: none; margin-left: auto; gap: 12px; max-width: 100% !important; }
/* .callout .wp-block-button__link { white-space: nowrap; } */

/* "You might also be interested in": service cards after the callout, no top padding. */
.services--related .services__title { line-height: 1.12; margin-bottom: clamp(24px, 3vw, 38px); }

/* A tile band with no intro line (Skill-Building's "at a glance"): the list keeps the intro's spacing. */
.included h2 + .icon-list { margin-top: clamp(26px, 3vw, 42px); }

/* The programs (Skill-Building): Service cards without an icon or link, no minimum height. */
.programs { background: var(--c-cream); padding: clamp(52px, 7vw, 92px) var(--gutter); }
.programs__title { line-height: 1.12; margin-bottom: 10px; }
.programs__intro { font-size: var(--fs-intro); line-height: 1.7; max-width: 70ch; margin-bottom: clamp(24px, 3vw, 38px); }
.programs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.programs .gifsa-card--service { min-height: 0; }

/* A second tile list under a sub-heading (The Activity Hub: "Outdoors & Active"). */
.included__subtitle { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 700; color: var(--c-white); margin: clamp(30px, 3.6vw, 48px) 0 18px; }

/* Virtual tour (The Activity Hub): text beside placeholder boxes, named for screen readers as the mockup does. */
.tour { background: var(--c-cream); padding: clamp(52px, 7vw, 92px) var(--gutter); }
.wp-block-columns.tour__grid { gap: clamp(24px, 3vw, 40px); align-items: center; }
.tour__grid > .wp-block-column { flex-basis: 320px; }
.tour__copy { font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.8; max-width: 56ch; }
.tour__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); align-content: start; }
.tour__photos > .photo-placeholder { border-radius: 24px 24px 24px 6px; aspect-ratio: 4 / 3; }
.tour__photos > .photo-placeholder:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.tour__photos .photo-placeholder > p { font-size: .6875rem; padding: 9px 13px; }

/* Our Story: a hero intro with no buttons after it keeps no bottom margin; the
 * "still community-driven" section follows the Cream hero with no top padding;
 * buttons under the Why text sit 30px below it (all as mocked). */
.hero__intro:last-child { margin-bottom: 0; }
.hero + .why { padding-top: 0; }
.why__text .wp-block-buttons { margin-top: 30px; }

/* Purpose, Vision & Values: a Warm Gold panel after a dark band keeps its top
 * padding (Children's Safety Statement, as mocked). */
.is-dark + .callout { padding-top: clamp(52px, 7vw, 92px); }

/* ==== Our Team & Board ====
 * Sections follow the Cream hero and each other with no top padding, as mocked.
 * Cards come from the Team members block (blocks/team). */
.team { background: var(--c-cream); color: var(--c-black); padding: 0 var(--gutter) clamp(52px, 7vw, 92px); }
.team__title { line-height: 1.12; margin-bottom: clamp(24px, 3vw, 38px); }
.team__title:has(+ .team__intro) { margin-bottom: 10px; }
.team__intro { font-size: var(--fs-intro); line-height: 1.7; max-width: 70ch; margin-bottom: clamp(24px, 3vw, 38px); }
.team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.team__grid--board { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.team-card { --card-colour: var(--c-teal); background: var(--c-white); color: var(--c-black); border-radius: 26px 26px 26px 6px; overflow: hidden; display: flex; flex-direction: column; }
.team-card__bar { flex: none; height: 12px; background: var(--card-colour); }
.team-card__body { flex: 1 1 0%; padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.team__grid--board .team-card__body { gap: 6px; }
.team-card__photo { width: 100%; aspect-ratio: 1 / 1; border-radius: 24px 24px 24px 6px; }
img.team-card__photo { height: auto; object-fit: cover; }
.team-card__photo.photo-placeholder > p { font-size: .6875rem; padding: 9px 13px; }
.team-card__name { font-size: var(--fs-card-title); font-weight: 700; line-height: 1.25; }
.team-card__meta, .team-card__bio { font-size: var(--fs-15); line-height: 1.6; }
.team-card__bio > * + * { margin-top: 12px; }
.team-card__role { font-family: var(--font-heading); font-weight: 600; }
.team__grid--management .team-card__role, .team-card__email { color: var(--c-deep-teal); }
/* A 44px target (A9), as the mockup's breadcrumb links are; the mockup's email link was text height. */
.team-card__email { display: inline-flex; align-items: center; min-height: 44px; }

/* ==== Shared by the Who We Are pages ==== */

/* Links inside running text and tiles are 44px targets (A9), as the mockup draws them. */
.icon-list__item a, .callout__copy a, .contact-cards .gifsa-card--service > p a, .key-docs .gifsa-card--service > :is(p, ul) a { display: inline-flex; align-items: center; min-height: 44px; }
.icon-list__item a { color: var(--c-black); }
.callout__copy a[href^="tel:"] { white-space: nowrap; }

/* Download link (blocks/download): the "Learn more" treatment. Hidden until a file is chosen. */
.download__link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font: 700 var(--fs-15)/1.45 var(--font-ui); text-transform: uppercase; text-decoration: underline; color: var(--c-black); }
.download__arrow { flex: none; }
.is-dark .download__link { color: var(--c-white); }
.is-dark .download__link:hover { color: var(--c-yellow); }

/* A heading and copy on Cream, no panel (Feedback & Complaints). Sections follow
 * each other with no top padding; a text section after a dark band keeps it. */
.prose { background: var(--c-cream); color: var(--c-black); padding: 0 var(--gutter) clamp(52px, 7vw, 92px); }
.prose:has(+ .prose) { padding-bottom: clamp(34px, 4vw, 54px); }
.is-dark + .prose { padding-top: clamp(52px, 7vw, 92px); }
.prose__title { line-height: 1.12; margin-bottom: 16px; }
.prose__copy { font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.8; max-width: 72ch; }
.prose__copy + .prose__copy { margin-top: 14px; }

/* ==== Our Impact ==== */
.hero + .stories { padding-top: 0; }
.stories__heading { line-height: 1.12; margin-bottom: clamp(24px, 3vw, 38px); }
/* Careers: Career Spotlight's heading sits a little further from its card, as mocked. */
.stories--spotlight .stories__heading { margin-bottom: clamp(26px, 3.4vw, 40px); }
.stories--spotlight .stories__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); } /* Careers team quotes (6): three across at desktop, as the homepage stories */
/* Story and quote card rows with 4+ cards as a carousel (GIFSA, 8 Oct): set up by blocks.js. One row that scrolls sideways,
 * three per view at desktop, two at tablet, one (with the next peeking) on mobile. Padding keeps the card
 * shadows and the focus ring inside the scroll area. */
.stories__grid.is-carousel { --per: 3; --gap: clamp(18px, 2vw, 26px); display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 8px 44px; margin: -8px -8px -44px; scroll-padding-inline: 8px; }
.stories__grid.is-carousel::-webkit-scrollbar { display: none; }
.stories__grid.is-carousel > .story-card { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align: start; }
.stories__grid.is-carousel:focus-visible { outline: 3px solid var(--c-deep-teal); outline-offset: 2px; border-radius: 24px; }
@media (max-width: 1023.98px) { .stories__grid.is-carousel { --per: 2; } }
@media (max-width: 639.98px) { .stories__grid.is-carousel { --per: 1.12; } }
.quote-carousel__nav { position: relative; display: flex; justify-content: flex-end; gap: 12px; margin-top: clamp(18px, 2.2vw, 26px); }
.quote-carousel__nav[hidden] { display: none; }
.quote-carousel__btn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--c-black); background: transparent; color: var(--c-black); display: grid; place-items: center; cursor: pointer; }
.quote-carousel__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.quote-carousel__btn:hover { background: var(--c-nav-hover); }
.quote-carousel__btn:focus-visible { outline: 3px solid var(--c-deep-teal); outline-offset: 3px; }
.quote-carousel__btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.quote-carousel__btn[aria-disabled="true"]:hover { background: transparent; }

/* ==== Key Information: one white card per document ==== */
.key-docs { background: var(--c-cream); padding: 0 var(--gutter) clamp(52px, 7vw, 92px); }
.key-docs__list { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 28px); }
.key-docs .gifsa-card--service { min-height: 0; padding: 38px 28px 30px; gap: 14px; }
.key-docs .gifsa-card--service > h2 { font-size: var(--fs-h2); line-height: 1.25; }
.key-docs .gifsa-card--service > h3 { font-size: 1.05rem; line-height: 1.7; margin-top: 6px; }
.key-docs .gifsa-card--service > p { font-size: var(--fs-16); line-height: 1.7; max-width: 72ch; }
.key-docs .gifsa-card--service > ul { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-16); line-height: 1.7; max-width: 72ch; }
.key-docs .gifsa-card--service > .wp-block-buttons { margin-top: 0; }
.key-docs .download { margin-top: 6px; }

/* A callout with a list and its buttons on their own row (Key Information: Additional Information). */
.callout__list { margin: 14px 0; padding-left: 1.25em; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px 40px; font-size: var(--fs-16); line-height: 1.7; }
.callout .wp-block-buttons.callout__buttons { flex: 1 1 100%; margin-left: 0; gap: 12px; }

/* ==== Feedback & Complaints ==== */
.feedback-form { background: var(--c-deep-teal); color: var(--c-white); padding: clamp(52px, 7vw, 92px) var(--gutter) clamp(60px, 7vw, 104px); }
.feedback-form__title { font-size: clamp(1.85rem, 6.2vw, 2.8rem); color: var(--c-white); margin-bottom: clamp(24px, 3vw, 38px); }
:where(.feedback-form) .gifsa-card--panel { border-radius: 36px 36px 36px 8px; padding: clamp(24px, 3vw, 36px); }
.feedback-form .download { margin-top: 22px; }
.feedback-form .gform_wrapper.gravity-theme .gform_fields { row-gap: 28px; }
:is(.feedback-form, .referral) .gform_wrapper.gravity-theme :is(.gfield--type-radio, .gfield--type-checkbox) legend.gfield_label { font: 700 1.3rem/1.7 var(--font-heading); margin-bottom: 8px; }
:is(.feedback-form, .referral) .gform_wrapper.gravity-theme .gform_footer { margin-top: 28px; }
:is(.feedback-form, .referral) .gform_wrapper.gravity-theme :is(.gfield_radio, .gfield_checkbox) { display: flex; flex-direction: column; gap: 12px; }
:is(.feedback-form, .referral) .gform_wrapper.gravity-theme .gchoice { display: flex; align-items: center; gap: 12px; min-height: 44px; }
:is(.feedback-form, .referral) .gform_wrapper.gravity-theme .gchoice input:is([type="radio"], [type="checkbox"]) { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--c-deep-teal); }
:is(.feedback-form, .referral) .gform_wrapper.gravity-theme .gchoice label { font: 400 var(--fs-16)/1.4 var(--font-body); margin: 0; min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.gform_wrapper.gravity-theme ::placeholder { color: var(--c-hint-text); opacity: 1; }

/* Other ways to provide feedback: Service cards with a heading and contact lines. */
.contact-cards { margin-top: clamp(24px, 3vw, 38px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.contact-cards .gifsa-card--service { min-height: 0; gap: 10px; }

/* ==== NDIS Made Simple ==== */

/* New to the NDIS: "The Basics", Service cards with a heading, text and a link, then two lines of small print. */
.basics { background: var(--c-cream); padding: 0 var(--gutter) clamp(52px, 7vw, 92px); }
.basics__title { line-height: 1.12; margin-bottom: clamp(24px, 3vw, 38px); }
.basics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.basics .gifsa-card--service { min-height: 0; }
.basics .gifsa-card--service > p { flex: 1 1 0%; }
.basics__note { margin-top: 10px; font-size: var(--fs-14); line-height: 1.7; color: var(--c-note); max-width: 72ch; }
.basics__grid + .basics__note { margin-top: 18px; }
.basics__note a { color: var(--c-deep-ochre); display: inline-flex; align-items: center; min-height: 44px; } /* 44px target (A9) */
.basics__note a:hover { color: var(--c-black); }

/* A text link straight on the Deep Teal band (Understanding Your NDIS Plan). */
.included .icon-list + .wp-block-buttons { margin-top: 26px; }
.included > .container > .wp-block-buttons .is-style-text-link > .wp-block-button__link { color: var(--c-white); }
.included > .container > .wp-block-buttons .is-style-text-link > .wp-block-button__link:hover { color: var(--c-yellow); }

/* Numbered steps on the Deep Teal band (How to Start): light connector. */
.included h2 + ol.is-style-steps { margin-top: clamp(26px, 3vw, 42px); }
.is-dark ol.is-style-steps > li:not(:last-of-type)::after { background: var(--c-rule-light); }

/* ==== News & Stories (inc/news.php) ==== */
.news { background: var(--c-cream); padding: 0 var(--gutter) clamp(52px, 7vw, 92px); }
.news-list { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.news-pill { align-self: flex-start; background: var(--pill-colour); color: var(--c-black); font: 700 .75rem/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border-radius: var(--r-pill); }
.news-pill--dark { color: var(--c-white); }
.news-date { font-size: var(--fs-14); color: var(--c-muted); }
.news-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font: 700 var(--fs-15)/1.45 var(--font-ui); text-transform: uppercase; text-decoration: underline; color: var(--c-black); }
.news-more svg { flex: none; }
.news-empty { font-size: var(--fs-copy); }

/* Featured: image beside the text on a wide white card. */
.news-feature { background: var(--c-white); border-radius: 36px 36px 36px 12px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(320px, 45%)), 1fr)); box-shadow: var(--shadow-card); }
.news-feature__media { padding: 14px; display: flex; flex-direction: column; }
.news-feature__image { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.news-feature__body { padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.news-feature__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 700; line-height: 1.2; }
.news-feature__excerpt { font-size: var(--fs-16); line-height: 1.7; }

/* Cards */
/* auto-fill, not the mockup's auto-fit: identical with a full grid, and a lone card keeps its column width instead of stretching across the page. */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(18px, 2vw, 26px); }
.news-card { background: var(--c-white); border-radius: 26px 26px 26px 6px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
.news-card__media { padding: 14px 14px 0; }
.news-card__image { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; }
.news-card__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 0%; }
.news-card__title { font-size: var(--fs-card-title); font-weight: 700; line-height: 1.3; }
.news-card__excerpt { font-size: var(--fs-15); line-height: 1.6; flex: 1 1 0%; }
.news-list .photo-placeholder > p { font-size: .6875rem; padding: 9px 13px; }

/* Community Events: a Cream panel on Deep Teal holding the calendar (a placeholder until open questions 17 and 36 are answered). */
.events { background: var(--c-deep-teal); color: var(--c-white); padding: clamp(52px, 7vw, 92px) var(--gutter) clamp(60px, 7vw, 104px); }
.events__title { color: var(--c-white); margin-bottom: clamp(24px, 3vw, 38px); }
:where(.events) .gifsa-card--panel { border-radius: 28px 28px 28px 8px; padding: 14px; }
.events .photo-placeholder { aspect-ratio: 21 / 9; border-radius: 20px; }
.events .photo-placeholder > p { font-size: .6875rem; padding: 9px 13px; }

/* The article template (single.php): hero, then the post's text in the site's styles. */
.article__date { margin-top: -8px; }
.hero__text > .news-pill { margin-bottom: 16px; }
.article__body { background: var(--c-cream); padding: 0 var(--gutter) clamp(52px, 7vw, 92px); }
.article__content > * { max-width: 72ch; }
.article__content > * + * { margin-top: 18px; }
.article__content > p, .article__content > ul, .article__content > ol { font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.8; }
.article__content > :is(ul, ol) { padding-left: 1.25em; }
.article__content > h2 { margin-top: clamp(32px, 4vw, 48px); line-height: 1.12; }
.article__content > h3 { margin-top: 28px; font-size: var(--fs-card-title); line-height: 1.3; }
.article__content > .wp-block-image { max-width: 100%; }
.article__content > .wp-block-image img { border-radius: 24px 24px 24px 6px; }
.article__content a:not(.wp-block-button__link):not(.download__link) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } /* A9 */
/* Quotes in a post take the story-card quote style (white panel on the cream article, ochre glyphs). */
.article__content > .wp-block-quote { margin: 26px 0 0; background: var(--c-white); border-radius: 24px 24px 24px 6px; padding: 22px 26px 20px; border: 0; }
.article__content > .wp-block-quote::before, .article__content > .wp-block-quote p:last-of-type::after { display: block; font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-quote-glyph); color: var(--c-deep-ochre); }
.article__content > .wp-block-quote::before { content: "\201C"; height: .34em; line-height: .34; }
.article__content > .wp-block-quote p:last-of-type::after { content: "\201D"; text-align: right; height: .5em; line-height: .5; margin-top: .1em; }
.article__content > .wp-block-quote p { font-size: clamp(1.1rem, 1.35vw, 1.28rem); line-height: 1.6; font-weight: 600; }
.article__content > .wp-block-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: var(--fs-body); line-height: 1.7; font-weight: 700; color: var(--c-black); }

/* ==== Friends & Partners ==== */
.partners { background: var(--c-cream); padding: 0 var(--gutter) clamp(52px, 7vw, 92px); }
.partners__title { line-height: 1.12; margin-bottom: clamp(24px, 3vw, 38px); }
.partners__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(14px, 1.8vw, 20px); }
.partner { aspect-ratio: 1 / 1; border-radius: 24px 24px 24px 6px; display: grid; place-items: center; padding: 16px; }
.partner:not(.photo-placeholder) { background: var(--c-white); }
.partner.photo-placeholder > p { font-size: .6875rem; padding: 9px 13px; }
.partner__link { display: grid; place-items: center; width: 100%; height: 100%; }
.partner__logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ==== For Professionals ==== */

/* Refer a Participant: the referral form on a Cream panel, Deep Teal band, the page's Maroon Bush top right. */
.referral { background: var(--c-deep-teal); color: var(--c-white); padding: clamp(56px, 7vw, 100px) var(--gutter); position: relative; overflow: hidden; }
.referral__motif { position: absolute; right: -40px; top: -30px; width: min(560px, 44%); height: auto; opacity: .14; transform: scaleY(-1); pointer-events: none; }
.referral__title { color: var(--c-white); margin-bottom: clamp(24px, 3vw, 38px); }
:where(.referral) .gifsa-card--panel { border-radius: 36px 36px 36px 8px; padding: clamp(24px, 3vw, 36px); }
.referral .gform_wrapper.gravity-theme .gform_fields { row-gap: 14px; column-gap: 16px; }
/* Each group starts 28px below the last, as the mockup's fieldsets do. */
.referral .gform_wrapper.gravity-theme :is(.gsection, .gfield--type-checkbox) { margin-top: 14px; }
.referral .gform_wrapper.gravity-theme .gsection { padding: 0; border: 0; margin-bottom: -6px; }
.referral .gform_wrapper.gravity-theme .gsection_title { font: 700 1.3rem/1.7 var(--font-heading); margin: 0; }
.referral .gform_wrapper.gravity-theme .gfield_checkbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0 24px; }
.consent_box .gfield_checkbox{display: block !important;}
.referral .gform_wrapper.gravity-theme .gfield textarea.small { height: 105px; } /* three rows, as mocked */
.referral .gform_wrapper.gravity-theme .gfield--type-radio .gfield_radio { gap: 2px; }

/* Allied Health: the hero's three buttons stacked, as mocked. */
.hero__text .wp-block-buttons.is-stacked { flex-direction: column; align-items: flex-start; gap: 12px; }
.referral .gform_wrapper.gravity-theme .gchoice input:is([type="radio"], [type="checkbox"]) { width: 22px; height: 22px; }
/* Support Coordinators: the hero buttons are narrower (22px sides), so both fit on one row, as mocked. */
.wp-block-buttons.is-compact > .wp-block-button > .wp-block-button__link { padding: 0 22px; }
/* Support Coordinators: "Our Referral Pathway" has even padding and a tighter heading gap than the Services steps, as mocked. */
.steps--pathway { padding-bottom: clamp(52px, 7vw, 92px); }
.steps--pathway .steps__title { line-height: 1.1; margin-bottom: clamp(24px, 3vw, 38px); }

/* ==== Contact Us ==== */
/* The hero's email address: bold link with an envelope, as mocked (the envelope is drawn in CSS, so the paragraph stays plain editable text). */
.hero__email { margin-top: 22px; }
.hero__email a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 var(--fs-18)/1 var(--font-heading); color: var(--c-black); text-underline-offset: 3px; }
.hero__email a::before { content: ""; flex: none; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--icon-mail) center / contain no-repeat; mask: var(--icon-mail) center / contain no-repeat; }
.hero__email a:hover { color: var(--c-deep-ochre); }
:root { --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5.6' width='16.8' height='12.8' rx='2.4'/%3E%3Cpath d='M4.4 7.2 12 13l7.6-5.8'/%3E%3C/svg%3E"); }

/* Our Two Locations: the page's Maroon Bush top right; office cards grow to fill the column, each with its map. */
.contact__motif { position: absolute; right: -40px; top: -30px; width: min(560px, 44%); height: auto; opacity: .14; transform: scaleY(-1); pointer-events: none; }
.contact--page .contact__details { justify-content: flex-start; }
.contact--page .office-card { flex: 1 1 auto; }
.office-card__map { margin-top: 16px; aspect-ratio: 16 / 9; border-radius: 24px 24px 24px 6px; overflow: hidden; background: var(--c-white); }
.office-card__map iframe { display: block; width: 100%; height: 100%; border: 0; }
/* The message box stretches so the form panel matches the offices column, as mocked. */
.contact--page .gifsa-card--panel { height: 100%; }
.contact--page .gform_wrapper, .contact--page .gform_wrapper form, .contact--page .gform-body { flex: 1 1 auto; display: flex; flex-direction: column; }
/* One column here, so the fields stack as a flex column and the message field can take the spare height. */
.contact--page .gform_wrapper.gravity-theme .gform_fields { flex: 1 1 auto; display: flex; flex-direction: column; }
.contact--page .gfield--type-textarea { flex: 1 1 auto; }
.contact--page .gfield--type-textarea { display: flex; flex-direction: column; }
.contact--page .gfield--type-textarea .ginput_container { flex: 1 1 auto; display: flex; flex-direction: column; }
body .contact--page .gform_wrapper.gravity-theme .gfield textarea.medium { height: 130px; min-height: 104px !important; flex: 1 1 130px; } /* four rows, as mocked; grows to fill the panel beside the offices */ /* outranks the 130px in forms.css */
.hero__intro:has(+ .hero__email) { margin-bottom: 0; }

/* ==== Search results (search.php): not designed, built from existing parts (decision 93) ==== */
.hero--search .hero__grid > .hero__text { flex-basis: 100%; max-width: 760px; }
.hero--search .search-form--page { width: 100%; max-width: 640px; margin-top: 22px; }
.hero--search .hero__intro { margin-bottom: 0; }
.search-results .news-card:not(:has(.news-card__media)) .news-card__body { padding-top: 26px; } /* no image area above */
/* 404 (404.php): the search page's hero, plus the hero buttons below the search form. */
.hero--404 .search-form--page + .wp-block-buttons { margin-top: 32px; } /* the same 32px as the gap above every other hero's buttons */
.search-pagination { margin-top: clamp(28px, 4vw, 44px); }
.search-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); font: 700 var(--fs-15)/1 var(--font-ui); color: var(--c-black); text-decoration: underline; }
.search-pagination .page-numbers.current { background: var(--c-black); color: var(--c-cream); text-decoration: none; }
.search-pagination .page-numbers:hover:not(.current) { color: var(--c-deep-ochre); }
/* News & Stories: First, Previous, Next and Last are icon buttons, outlined so they read as buttons. */
.search-pagination .page-numbers:has(> svg) { width: 44px; padding: 0; border: 2px solid currentColor; }
.search-pagination .page-numbers > svg { flex: none; }

/* ==== Upcoming events (blocks/events): not designed, built from the card styles (decision 96) ====
 * One event per row (lead, 28 Sep): the date on the left, then name, place and
 * details, then the link. On narrow screens each row stacks. */
.events__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.event-card { background: var(--c-white); color: var(--c-black); border-radius: 20px 20px 20px 6px; padding: 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 768px) {
	.event-card { grid-template-columns: 220px minmax(0, 1fr) auto; column-gap: 28px; align-items: center; }
	.event-card__link { justify-self: end; }
}
@media (max-width: 600px) {
	.partners__grid  {
    	grid-template-columns: repeat(2, minmax(0, 1fr));
  	}
}
.event-card__date { font: 700 var(--fs-16)/1.4 var(--font-heading); color: var(--c-deep-teal); display: flex; flex-direction: column; }
.event-card__time { font: 400 var(--fs-15)/1.5 var(--font-body); color: var(--c-black); }
.event-card__body { display: flex; flex-direction: column; gap: 4px; }
.event-card__title { font-size: var(--fs-card-title); font-weight: 700; line-height: 1.3; }
.event-card__where { font-size: var(--fs-14); color: var(--c-muted); }
.event-card__details { font-size: var(--fs-15); line-height: 1.6; max-width: 72ch; }

/* Body text runs the full width of its container site-wide (Simon, 9 Oct 2026). The mockup capped these at
 * 56-72 characters per line; the designed panels (CTA bands, stats tabs, step lists) keep their widths. */
.article__content > *,
.prose__copy,
.callout__copy,
.services__intro,
.stories__intro,
.programs__intro,
.team__intro,
.basics__note,
.key-docs .gifsa-card--service > p,
.key-docs .gifsa-card--service > ul { max-width: none; }

/* Phones (9 Oct 2026): service cards stack one per row, so the equal-height minimum only left gaps above "Learn more". */
@media (max-width: 639.98px) { .gifsa-card--service { min-height: 0; } }