/* You Said, We Did page (templates/template-you-said-we-did.php). New classes only; nothing here overrides the theme's own rules. */

/* Hero banner: the Figma frame (605:424) crops the photo 33.7% down its overflow, not at the vertical centre,
   so the group's heads stay in view. */
.page-template-template-you-said-we-did .banner.inner-banner { background-position: center 33.7%; }

/* ---------- Introduction (Figma 605:435) ---------- */
.section.yswd-intro { padding: 80px 0; }
.yswd-intro__inner { max-width: 1268px; margin: 0 auto; }
.yswd-intro__heading_blk { padding-bottom: 0; }
.yswd-intro__heading { font-size: 36px; line-height: normal; font-weight: 700; color: #444444; margin: 0 0 40px; }
.yswd-intro__content { font-size: 22px; line-height: 32px; letter-spacing: 1.1px; color: #444444; }
.yswd-intro__content p { font-size: 22px; line-height: 32px; letter-spacing: 1.1px; margin: 0 0 20px; }
.yswd-intro__content p:last-child { margin-bottom: 0; }

/* ---------- Cards grid (Figma 605:441 to 605:636) ---------- */
.section.yswd-cards-section { padding: 10px 0 70px; }
.yswd-cards { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 14px; }
.yswd-card { display: flex; flex-direction: column; width: calc(50% - 7px); border: 0.5px solid #444444; border-radius: 20px; background-color: #fff; overflow: hidden; }

/* Card title bar */
.yswd-card__head { display: flex; align-items: center; padding: 26px 27px; background-color: #fff; }
.yswd-card__title { flex: 1 1 0; min-width: 1px; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: 1.2px; color: #444444; margin: 0; word-break: break-word; }

/* "You said" band */
.yswd-card__said { display: flex; align-items: flex-start; gap: 18px; padding: 40px 20px; background-color: #fbf9f3; }
/* "We did" band: grows to the bottom of the card so every card in a row is the same height */
.yswd-card__did { display: flex; align-items: flex-start; gap: 21px; padding: 40px 20px; background-color: #fff; flex: 1 1 auto; }

/* Icons: 50px tiles. "You said" tile is white with the megaphone drawn in the SVG itself; "We did" tile is green with the white ear glyph centred in it. */
.yswd-card__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 50px; width: 50px; height: 50px; border-radius: 10px; }
.yswd-card__icon--said { background-color: #fff; }
.yswd-card__icon--did { background-color: #0a8e48; }
.yswd-card__icon img { display: block; }
.yswd-card__icon--said img { width: 50px; height: 50px; }
.yswd-card__icon--did img { width: 24px; height: 33px; }

/* Text columns */
.yswd-card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-width: 1px; font-size: 22px; line-height: 32px; letter-spacing: 1.1px; color: #444444; word-break: break-word; }
.yswd-card__body--said { max-width: 520px; gap: 24px; }
.yswd-card__body--did { max-width: 506px; gap: 26px; }
.yswd-card__label { width: 100%; font-size: 22px; line-height: 32px; font-weight: 700; letter-spacing: 1.1px; margin: 0; }
.yswd-card__label--said { color: #d82f02; }
.yswd-card__label--did { color: #0a8e48; }
/* Editor content (paragraphs and lists from the "You said" / "We did" editors) */
.yswd-card__content { width: 100%; font-size: 22px; line-height: 32px; font-weight: 400; letter-spacing: 1.1px; color: #444444; }
.yswd-card__content p { font-size: 22px; line-height: 32px; font-weight: 400; letter-spacing: 1.1px; color: #444444; margin: 0 0 24px; }
.yswd-card__content ul, .yswd-card__content ol { list-style: none; margin: 0 0 26px; padding: 0; }
.yswd-card__content > :last-child { margin-bottom: 0; }
/* Bullet points: 10px round #444 bullets, 10px gap to the text, 26px between points */
.yswd-card__content li { position: relative; padding-left: 20px; font-size: 22px; line-height: 32px; font-weight: 400; letter-spacing: 1.1px; color: #444444; margin: 0 0 26px; }
.yswd-card__content li:last-child { margin-bottom: 0; }
.yswd-card__content ul li::before { content: ''; position: absolute; left: 0; top: 11px; width: 10px; height: 10px; border-radius: 100px; background-color: #444444; }
.yswd-card__content ol { counter-reset: yswd-ol; }
.yswd-card__content ol li { padding-left: 32px; counter-increment: yswd-ol; }
.yswd-card__content ol li::before { content: counter(yswd-ol) '.'; position: absolute; left: 0; top: 0; font-weight: 700; color: #444444; }
.yswd-card__content a { font-weight: 700; color: #d82f02; text-decoration: underline; text-decoration-skip-ink: none; text-underline-position: from-font; }
.yswd-card__content a:hover, .yswd-card__content a:focus { color: #171717; }

/* Optional red link line, 32px under the points (26px column gap + 6px) */
.yswd-card__link { display: inline-block; margin-top: 6px; font-size: 22px; line-height: 32px; font-weight: 700; letter-spacing: 1.1px; color: #d82f02; text-decoration: underline; text-decoration-skip-ink: none; text-underline-position: from-font; }
a.yswd-card__link:hover, a.yswd-card__link:focus { color: #171717; }

/* Pagination: theme's own .custom_pagination look (same as the News page); this only sets the spacing above it */
.yswd-pagination { padding-top: 45px; }

/* ---------- Responsive (no mobile frame in Figma; sizes below follow the theme's own breakpoints) ---------- */
@media (max-width: 1199px) {
	.yswd-card__head { padding: 20px 22px; }
	.yswd-card__said, .yswd-card__did { padding: 30px 20px; }
	.yswd-card__body--said, .yswd-card__body--did { max-width: none; }
}
@media (max-width: 979.98px) {
	.section.yswd-intro { padding: 60px 0; }
	.yswd-intro__heading { font-size: 30px; margin-bottom: 30px; }
	.yswd-intro__content, .yswd-intro__content p { font-size: 20px; line-height: 30px; letter-spacing: 0.5px; }
	.yswd-cards { gap: 14px; }
	.yswd-card { width: 100%; }
	.yswd-card__title { font-size: 22px; line-height: 30px; letter-spacing: 0.5px; }
	.yswd-card__body, .yswd-card__label, .yswd-card__content, .yswd-card__content p, .yswd-card__content li, .yswd-card__link { font-size: 20px; line-height: 30px; letter-spacing: 0.5px; }
	.yswd-card__content ul li::before { top: 10px; }
}
@media (max-width: 767.98px) {
	.section.yswd-intro { padding: 40px 0; }
	.yswd-intro__heading { font-size: 28px; margin-bottom: 20px; }
	.yswd-intro__content, .yswd-intro__content p { font-size: 18px; line-height: 28px; }
	.yswd-card { border-radius: 16px; }
	.yswd-card__head { padding: 16px 18px; }
	.yswd-card__title { font-size: 20px; line-height: 28px; }
	.yswd-card__said, .yswd-card__did { gap: 14px; padding: 24px 18px; }
	.yswd-card__icon { flex-basis: 44px; width: 44px; height: 44px; }
	.yswd-card__icon--said img { width: 44px; height: 44px; }
	.yswd-card__icon--did img { width: 21px; height: 29px; }
	.yswd-card__body--said { gap: 14px; }
	.yswd-card__body--did { gap: 16px; }
	.yswd-card__content p { margin-bottom: 16px; }
	.yswd-card__content ul, .yswd-card__content ol, .yswd-card__content li { margin-bottom: 16px; }
	.yswd-card__content > :last-child, .yswd-card__content li:last-child { margin-bottom: 0; }
	.yswd-card__body, .yswd-card__label, .yswd-card__content, .yswd-card__content p, .yswd-card__content li, .yswd-card__link { font-size: 18px; line-height: 28px; }
	.yswd-card__content ul li::before { top: 9px; }
	.yswd-pagination { padding-top: 30px; }
}