/**
 * CDW Donor Reviews
 *
 * Ported from the designer's mockup. Two deliberate changes:
 *  - Native CSS nesting is flattened (Safari < 16.5 drops nested rules whole).
 *  - Selectors are prefixed .cdw- so Divi's global rules don't collide.
 */

/* Tokens live at :root, not on .cdw-reviews. The story page and the modal
   render outside that wrapper, and a var() that resolves to nothing makes the
   whole declaration invalid -- which is what turned the donate button into
   plain text until hover. */
:root {
	--cdw-blue: #284a63;
	--cdw-poppy: #f05661;
	--cdw-poppy-dark: #d9434e;
	--cdw-border: #e9ecef;
	--cdw-muted: #666666;
	--cdw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cdw-reviews {
	font-family: var(--cdw-font);
	line-height: 1.5;
	color: #111111;
}

.cdw-reviews .cdw-heading {
	font-family: var(--cdw-font);
	color: #284a63;
	color: var(--cdw-blue, #284a63);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 1.5rem;
	padding: 0;
}

/* Grid ------------------------------------------------------------------ */

.cdw-reviews .cdw-grid {
	display: grid;
	/* auto-fill with a 280px floor yielded 3 columns inside Divi's 1080px row.
	   Column counts are set explicitly so the desktop grid matches the mockup's
	   four-across layout. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	/* Cards size to their own content. Stretching them to the tallest in the
	   row meant one story card inflated every photo-only card beside it, which
	   left big empty gaps above the dates. */
	align-items: start;
}

@media (max-width: 1100px) {
	.cdw-reviews .cdw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.cdw-reviews .cdw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.cdw-reviews .cdw-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Fewer than four cards -------------------------------------------------
   Grid columns are fixed, so one to three cards fill from the left and the
   unused tracks stay reserved on the right. Flex instead, so the cards sit
   centred while keeping exactly the width they would have had in the
   four-column grid (gap is 1.5rem, so three gaps = 4.5rem). */
.cdw-reviews .cdw-grid--few {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.cdw-reviews .cdw-grid--few .cdw-card {
	flex: 0 1 calc((100% - 4.5rem) / 4);
	max-width: calc((100% - 4.5rem) / 4);
	min-width: 260px;
}

@media (max-width: 1100px) {
	.cdw-reviews .cdw-grid--few .cdw-card {
		flex-basis: calc((100% - 3rem) / 3);
		max-width: calc((100% - 3rem) / 3);
	}
}

@media (max-width: 860px) {
	.cdw-reviews .cdw-grid--few .cdw-card {
		flex-basis: calc((100% - 1.5rem) / 2);
		max-width: calc((100% - 1.5rem) / 2);
	}
}

@media (max-width: 520px) {
	.cdw-reviews .cdw-grid--few .cdw-card {
		flex-basis: 100%;
		max-width: 100%;
		min-width: 0;
	}
}

.cdw-reviews .cdw-card {
	background: #ffffff;
	border: 1px solid var(--cdw-border);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.cdw-reviews .cdw-card.has-story {
	border-color: #ced4da;
}

/* The image + title block is one control. Reset the button so it doesn't
   inherit form styling, and keep both variants visually identical. */
.cdw-reviews .cdw-card-trigger {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	font: inherit;
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.cdw-reviews .cdw-card-trigger.is-static { cursor: default; }

.cdw-reviews .cdw-card-trigger:focus-visible {
	outline: 2px solid var(--cdw-blue);
	outline-offset: 2px;
}

.cdw-reviews .cdw-card-media { display: block; }

/* Both are spans so they can nest inside the <a>/<button> trigger; without an
   explicit display they'd be inline and drop their vertical padding. */
.cdw-reviews .cdw-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0.75rem 0.75rem 1.25rem;
}

/* Keeps the date below the title block. With cards sized to content this is
   mostly a no-op, but it holds the layout together if a card is ever given a
   fixed height. */
.cdw-reviews .cdw-card-foot {
	display: block;
	margin-top: auto;
}

/* One orchestrated entrance on load, not a per-card hover effect. */
@media (prefers-reduced-motion: no-preference) {
	.cdw-reviews .cdw-card {
		opacity: 0;
		transform: translateY(16px);
		animation: cdwCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}
	.cdw-reviews .cdw-card:nth-child(1)  { animation-delay: 0.03s; }
	.cdw-reviews .cdw-card:nth-child(2)  { animation-delay: 0.06s; }
	.cdw-reviews .cdw-card:nth-child(3)  { animation-delay: 0.09s; }
	.cdw-reviews .cdw-card:nth-child(4)  { animation-delay: 0.12s; }
	.cdw-reviews .cdw-card:nth-child(5)  { animation-delay: 0.15s; }
	.cdw-reviews .cdw-card:nth-child(6)  { animation-delay: 0.18s; }
	.cdw-reviews .cdw-card:nth-child(7)  { animation-delay: 0.21s; }
	.cdw-reviews .cdw-card:nth-child(8)  { animation-delay: 0.24s; }
	.cdw-reviews .cdw-card:nth-child(9)  { animation-delay: 0.27s; }
	.cdw-reviews .cdw-card:nth-child(10) { animation-delay: 0.30s; }
	.cdw-reviews .cdw-card:nth-child(11) { animation-delay: 0.33s; }
	.cdw-reviews .cdw-card:nth-child(12) { animation-delay: 0.36s; }
}

@keyframes cdwCardIn {
	to { opacity: 1; transform: translateY(0); }
}

.cdw-reviews .cdw-card-media img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	background-color: var(--cdw-border);
	/* CDW's global stylesheet caps img at max-width:70%; override locally. */
	max-width: 100%;
}

.cdw-reviews .cdw-card-body h3,
.cdw-reviews .cdw-card-body h3 a {
	font-family: var(--cdw-font);
	color: var(--cdw-blue);
	line-height: 1.2;
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	padding: 0;
	letter-spacing: -0.01em;
	/* Reserve three lines. Most titles are three; the long charity + city ones
	   run to four and push into the reserved gap rather than past it. */
	min-height: calc(3 * 1.2em);
}

.cdw-reviews .cdw-stars-card {
	display: block;
	width: 92px;
	height: auto;
	max-width: 92px;
	margin: 0 0 0.4rem;
}

.cdw-reviews .cdw-date-tag {
	display: block;
	margin-block: 0.5rem;
	font-family: var(--cdw-font);
	font-size: 0.775rem;
	font-weight: 600;
	color: var(--cdw-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cdw-card-link,
.cdw-reviews .cdw-card-link {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--cdw-font);
	font-size: 0.9375rem;
	color: var(--cdw-poppy);
	/* The theme underlines every anchor; the mockup does not. */
	text-decoration: none;
	box-shadow: none;
}

.cdw-reviews .cdw-card-trigger:hover .cdw-card-link,
.cdw-reviews .cdw-card-trigger:focus-visible .cdw-card-link {
	color: #d9434e;
	text-decoration: underline;
}

.cdw-reviews .cdw-card-link:focus-visible,
.cdw-reviews .cdw-nav-link:focus-visible {
	outline: 2px solid var(--cdw-blue);
	outline-offset: 2px;
}

/* Pagination ------------------------------------------------------------ */

.cdw-reviews .cdw-pagination {
	padding: 1.5rem 0;
	margin-top: 2rem;
	border-top: 1px solid var(--cdw-border);
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
}

.cdw-reviews .cdw-page-count {
	display: block;
	text-align: center;
	font-family: var(--cdw-font);
	color: #718096;
	font-size: 0.875rem;
}

.cdw-reviews .cdw-text-right { text-align: right; }

.cdw-reviews .cdw-nav-link {
	font-family: var(--cdw-font);
	color: var(--cdw-blue);
	font-size: 0.9rem;
	text-decoration: none;
	box-shadow: none;
}

.cdw-reviews a.cdw-nav-link:hover { color: var(--cdw-poppy); }

.cdw-reviews .cdw-nav-link.is-disabled {
	color: #cbd5e0;
	cursor: not-allowed;
}

.cdw-reviews .cdw-empty {
	color: var(--cdw-muted);
}

/* Modal ----------------------------------------------------------------- */

/* While the modal is open the body is pinned in place, with its scroll offset
   held in an inline top value set by the script. Without this the page behind
   scrolls, and in some browsers jumps to the top. */
body.cdw-modal-open {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

.cdw-modal {
	border: none;
	border-radius: 8px;
	padding: 0;
	max-width: 720px;
	width: calc(100% - 2rem);
	max-height: 85vh;
	overflow: auto;
	position: relative;
}

.cdw-modal::backdrop {
	background: rgba(17, 17, 17, 0.6);
}

.cdw-modal-close {
	position: sticky;
	top: 0;
	float: right;
	margin: 0.5rem 0.5rem 0 0;
	background: #ffffff;
	border: 1px solid var(--cdw-border);
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--cdw-blue);
	cursor: pointer;
	z-index: 1;
}

.cdw-modal-content { padding: 1.5rem; }

/* Story body (shared by modal and story page) --------------------------- */

.cdw-story-title {
	font-family: var(--cdw-font);
	color: #284a63;
	color: var(--cdw-blue, #284a63);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	padding: 0;
}

.cdw-stars-story {
	display: block;
	width: 150px;
	max-width: 150px;
	height: auto;
	margin: 0 0 0.75rem;
}

.cdw-story-date {
	font-family: var(--cdw-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-size: 0.775rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #666666;
	margin: 0 0 1rem;
}

.cdw-story-photo {
	margin: 0 0 1.25rem;
	text-align: center;
}

.cdw-story-photo img {
	max-width: 100%;
	width: auto;
	height: auto;
	/* Portrait selfies are roughly 3:4, so a width-filling image ran well past
	   the viewport and pushed the story below the fold. Capping height keeps
	   the photo and the first lines of the story on screen together. */
	max-height: 42vh;
	object-fit: contain;
	border-radius: 6px;
	display: inline-block;
	vertical-align: middle;
}

/* The story page column is 820px wide, which made a landscape selfie fill the
   screen and push the story below the fold. Cap both axes so the photo reads
   as an illustration of the story rather than the whole page. */
.cdw-story-page .cdw-story-photo img {
	max-height: 50vh;
	max-width: 620px;
}

/* Fill the modal's column. The earlier 68ch cap, combined with the theme's
   own paragraph sizing, left the text noticeably narrower than the photo. */
.cdw-story-text p {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.65;
	max-width: none;
}

.cdw-story-thanks {
	font-weight: 700;
	color: var(--cdw-blue);
}

.cdw-story-charity {
	color: var(--cdw-muted);
	font-size: 0.9rem;
	line-height: 1.6;
	max-width: 68ch;
}

.cdw-story-actions {
	margin: 1.5rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.cdw-btn,
a.cdw-btn {
	display: inline-block;
	background-color: #f05661;
	background-color: var(--cdw-poppy, #f05661);
	color: #ffffff !important; /* Divi sets a global anchor colour */
	font-family: var(--cdw-font);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
	text-decoration: none;
	padding: 0.85rem 2rem;
	border-radius: 4px;
	box-shadow: none;
}

.cdw-btn:hover,
a.cdw-btn:hover {
	background-color: #d9434e;
	color: #ffffff !important;
}

.cdw-btn:active { transform: translateY(1px); }

.cdw-story-more {
	font-family: var(--cdw-font);
	color: #284a63;
	color: var(--cdw-blue, #284a63);
}

.cdw-story-page {
	max-width: 820px;
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
	font-family: var(--cdw-font);
	color: #111111;
}

/* Belt and braces against the theme's single-post chrome: the sidebar divider
   is drawn as a :before on the container, and CDW's own CSS adds a left border
   to #left-area. Neither belongs on this page. */
.cdw-story-template #main-content .container:before { display: none !important; }
.cdw-story-template #left-area {
	float: none !important;
	width: 100% !important;
	padding: 0 !important;
	border-left: 0 !important;
}
.cdw-story-template #sidebar { display: none !important; }

.cdw-story-back { margin-top: 2rem; }

@media (max-width: 600px) {
	.cdw-reviews .cdw-pagination {
		grid-template-columns: 1fr;
		gap: 0.75rem;
		text-align: center;
	}
	.cdw-reviews .cdw-text-right { text-align: center; }
	.cdw-modal-content { padding: 1rem; }
}