/* Homepage "Humanitarian Crisis" panel, "On the Frontline" story cards and "Latest News" list.
   Remove this file (and its enqueue/editor-style lines in functions.php) to drop the styling. */

/* ---------- Humanitarian crisis panel (dark blue) ---------- */
.crisis-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0;
	padding: clamp(1.75rem, 4vw, 3.5rem);
	border-radius: 10px;
	background-color: var(--wp--preset--color--custom-dark-blue, #0d314e);
	color: #fff;
}

.crisis-panel .crisis-eyebrow {
	margin: 0 0 0.75rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--custom-light-blue, #d9e2f7);
}

.crisis-panel .crisis-title {
	margin: 0 0 0.5rem;
	padding: 0;
	color: #fff;
}

.crisis-panel .crisis-intro {
	margin: 0 0 2rem;
	padding: 0;
	max-width: 64ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	color: #fff;
}

.crisis-panel .crisis-stats {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(217, 226, 247, 0.25);
}

.crisis-panel .crisis-stat {
	margin: 0;
	padding: 1.5rem 1.5rem 0 0;
}

.crisis-panel .crisis-stat + .crisis-stat {
	padding-left: 1.5rem;
	border-left: 1px solid rgba(217, 226, 247, 0.25);
}

.crisis-panel .crisis-number {
	margin: 0 0 0.4rem;
	padding: 0;
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--custom-orange, #ef505d);
}

.crisis-panel .crisis-label {
	margin: 0 0 0.5rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.35;
	color: #fff;
}

.crisis-panel .crisis-source {
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	color: var(--wp--preset--color--custom-light-blue, #d9e2f7);
	opacity: 0.85;
}

.crisis-panel .crisis-link {
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

.crisis-panel .crisis-link a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- Frontline stories + latest news ---------- */
.frontline {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 90px;
	margin: 20px 0 0;
	padding: 0;
}

.frontline > * {
	margin: 0;
}

.frontline .frontline-stories,
.frontline .latest-news {
	margin: 0;
	padding: 0;
}

.frontline .story-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 1.25rem 0 0;
	padding: 0;
}

.story-cards .story-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.5rem;
	border-radius: 10px;
	background-color: #f04f5c0d;
}

.story-cards .story-kicker {
	margin: 0 0 0.6rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--custom-orange, #ef505d);
}

.story-cards .story-title {
	margin: 0 0 0.6rem;
	padding: 0;
}

.story-cards .story-title a {
	color: var(--wp--preset--color--custom-dark-blue, #0d314e);
}

.story-cards .story-text {
	margin: 0 0 1.25rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.45;
}

.story-cards .story-link {
	margin: auto 0 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

.story-cards .story-link a {
	color: var(--wp--preset--color--custom-medium-blue, #3a80be);
}

/* The whole card is clickable on the live site (cards.js); the pointer cursor shows it. Links inside stay individually hoverable. */
body:not(.editor-styles-wrapper) .story-cards .story-card {
	cursor: pointer;
}

/* Latest News: full-width strip on the same three columns as the story cards */
.frontline .latest-news {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
}

.frontline .latest-news > .wp-block-heading {
	grid-column: 1;
	grid-row: 1;
}

.frontline .latest-news > .wp-block-image {
	grid-column: 1;
	grid-row: 2;
}

.frontline .latest-news .news-all {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	margin: 0;
}

.frontline .latest-news .wp-block-query {
	grid-column: 1 / -1;
	grid-row: 3;
	margin: 1.25rem 0 0;
}

.latest-news .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.latest-news .wp-block-post-template > li {
	margin: 0;
	padding: 0;
}

.latest-news .news-item {
	margin: 0;
	padding: 0;
	border: 0;
}

.latest-news .news-item .wp-block-post-date {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.1em;
}

.latest-news .news-item .wp-block-post-title {
	margin: 0;
}

.latest-news .news-item .wp-block-post-title a {
	color: var(--wp--preset--color--custom-dark-blue, #0d314e);
}

@media (prefers-reduced-motion: no-preference) {
	.story-cards .story-card {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	body:not(.editor-styles-wrapper) .story-cards .story-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 10px 24px rgba(13, 49, 78, 0.12);
	}
}

@media (max-width: 800px) {
	.frontline .story-cards,
	.latest-news .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.frontline .latest-news {
		grid-template-columns: minmax(0, 1fr);
	}

	.frontline .latest-news .news-all {
		grid-column: 1;
		grid-row: 4;
		margin-top: 1.25rem;
	}
}

@media (max-width: 700px) {
	.crisis-panel .crisis-stats {
		grid-template-columns: 1fr;
	}

	.crisis-panel .crisis-stat,
	.crisis-panel .crisis-stat + .crisis-stat {
		padding: 1.25rem 0 0;
		border-left: 0;
	}

	.crisis-panel .crisis-stat + .crisis-stat {
		margin-top: 1.25rem;
		border-top: 1px solid rgba(217, 226, 247, 0.25);
	}
}

/* Crisis panel call-to-action button */
.crisis-panel .crisis-action {
	grid-column: 2;
	grid-row: 1 / span 4;
	align-self: start;
	justify-self: end;
	margin: 0;
	padding: 0;
}

.crisis-panel .crisis-button .wp-block-button__link {
	padding: 1.1rem 2.25rem;
	border-radius: 5px;
	background-color: #fff;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--custom-dark-blue, #0d314e);
}

@media (max-width: 700px) {
	.crisis-panel .crisis-action,
	.crisis-panel .crisis-button,
	.crisis-panel .crisis-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Below 900px the panel is a single column and the button drops to the bottom */
@media (max-width: 900px) {
	.crisis-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.crisis-panel .crisis-stats {
		grid-row: 5;
		margin-bottom: 1.75rem;
	}

	.crisis-panel .crisis-action {
		grid-column: 1;
		grid-row: 6;
		justify-self: start;
	}
}

/* "All news" button: solid dark blue, same family as the other section buttons */
.latest-news .news-button .wp-block-button__link {
	padding: 0.8rem 1.4rem;
	border-radius: 5px;
	background-color: var(--wp--preset--color--custom-dark-blue, #0d314e);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

@media (max-width: 600px) {
	.frontline .latest-news .news-all,
	.latest-news .news-button,
	.latest-news .news-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Squiggle under the crisis title, like the other section titles */
.crisis-panel > .wp-block-image {
	margin: 0 0 1.1rem;
}