/**
 * Inspiring Shorts — Section + Popup
 *
 * One markup and one card design — vertical (thumbnail on top, text below)
 * at every width. Only the column count changes as the viewport narrows,
 * set explicitly at each breakpoint (desktop-first cascade, desktop
 * unqueried):
 *   Desktop (>1024px):    4 cards per row.
 *   Tablet  (769-1024px): 3 cards per row.
 *   Small   (426-768px):  2 cards per row.
 *   Mobile  (<=425px):    1 card per row.
 *
 * 1024px also switches the section into "Load More" mode (extra cards
 * hidden until revealed). NOTE: 1024px matches the project's general
 * tablet breakpoint, but 768/425 are component-specific rather than the
 * project's 601px mobile value — see [[project-breakpoint-standard]].
 *
 * inspiring-shorts.js does not repeat these numbers: it reads the rendered
 * column count off the computed grid, so "Load More" reveals exactly one
 * row at whatever the current breakpoint is. Change a column count here and
 * the reveal batch follows automatically.
 */

/* =============================================
   Section + container
   ============================================= */

.inspiring-shorts {
	width: 100%;
	padding: 3rem 0;
	background: var(--c-white, #fff);

	/* Flex, for selection painting rather than for layout. WebKit fills the gaps
	   between the blocks a selection spans at the width of their nearest common
	   ancestor block, so a drag through this section's text painted a highlight
	   the section's full width. WebKit skips gap painting inside flex containers.
	   Children are stacked with padding and no vertical margins, so nothing that
	   margin collapsing was doing is lost. See .individual-speech for the
	   measured case. */
	display: flex;
	flex-direction: column;
}

/* width + box-sizing, not the block default: the section is a flex column,
   and auto cross-axis margins switch off align-self: stretch, so this
   collapsed to fit-content. Full note in upcoming-speeches.css. */
.inspiring-shorts__container {
	width: 100%;
	box-sizing: border-box;
	max-width: 998px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* =============================================
   Header
   ============================================= */
.inspiring-shorts__header-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #e0e0e3;
}

.inspiring-shorts__header {
	font-family: "IBM Plex Sans Condensed", var(--f-ibm-plex-sans), sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--c-navy, #002d5d);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 1.26px;
	line-height: 27px;
}

.inspiring-shorts__header-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.inspiring-shorts__header-icon img {
	width: 100%;
	height: 100%;
}

/* =============================================
   Grid
   ============================================= */

/* Desktop column count; the media queries below step it down to 3, 2 and 1.
   Fixed track counts (rather than auto-fill) mean a part-full last row
   stretches its cards across the row — acceptable because inspiring-shorts.js
   reveals a whole row at a time, so rows are normally full. */
.inspiring-shorts__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

/* =============================================
   Card
   ============================================= */
.inspiring-shorts__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--c-white, #fff);
}

.inspiring-shorts__card[data-code] {
	cursor: pointer;
}

/* Only ever show the first 4 cards on desktop (JS-independent) — Load
   More only ever appears at tablet/mobile widths (see <=1024px below). */
.inspiring-shorts__card:nth-child(n + 5) {
	display: none;
}

.inspiring-shorts__card-link {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.inspiring-shorts__card-link:focus-visible {
	outline: 2px solid var(--c-blue-royal, #0257b8);
	outline-offset: 2px;
}

/* =============================================
   Thumbnail
   ============================================= */
.inspiring-shorts__thumbnail-wrapper {
	position: relative;
	display: block;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	overflow: hidden;
	border-radius: 3px;
	background-color: #1a1a2e;
}

.inspiring-shorts__thumbnail {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.inspiring-shorts__card:hover .inspiring-shorts__thumbnail {
	transform: scale(1.02);
}

/* Play overlay */
.inspiring-shorts__play-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.2);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 3;
}

.inspiring-shorts__card:hover .inspiring-shorts__play-overlay,
.inspiring-shorts__card-link:focus-visible .inspiring-shorts__play-overlay {
	opacity: 1;
}

.inspiring-shorts__play-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
}

.inspiring-shorts__play-button svg {
	margin-left: 3px;
}

/* Duration badge */
.inspiring-shorts__duration {
	position: absolute;
	bottom: 8px;
	right: 8px;
	padding: 2px 6px;
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	font-family: var(--f-ibm-plex-sans, "IBM Plex Sans"), sans-serif;
	font-size: 12px;
	font-weight: 500;
	border-radius: 3px;
	line-height: 1.2;
	z-index: 2;
}


/* =============================================
   Card content
   ============================================= */
.inspiring-shorts__card-content {
	padding: 10px;
	background: #F4F4F5;
	border-radius: 3px;
	flex: 1;

	/* Reserve enough height for a 2-line title + author + meta (computed
	   from their font sizes/line-heights/margins below) so a 1-line title
	   doesn't shrink the card — title/author/meta stay stacked tightly
	   together, and any leftover space lands after meta instead of
	   appearing as a gap under the title. */
	min-height: 76px;
}

/* Every width uses the same vertical card, so the 2-line wrap applies
   throughout — no per-breakpoint override needed. */
.inspiring-shorts__title {
	font-family: var(--f-ibm-plex-sans, "IBM Plex Sans"), sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-navy, #002d5d);
	margin: 0 0 0.25rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.inspiring-shorts__author {
	font-family: var(--f-ibm-plex-sans, "IBM Plex Sans"), sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: var(--c-blue-royal, #266ec1);
	margin: 0 0 0.25rem;
	line-height: 1.2;
}

.inspiring-shorts__meta {
	font-family: var(--f-ibm-plex-sans, "IBM Plex Sans"), sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: var(--c-gray-text, #7e7e7e);
	line-height: 1.2;
}

/* =============================================
   Footer / View Collection
   ============================================= */
.inspiring-shorts__footer {
	display: flex;
	justify-content: center;
}

.inspiring-shorts__view-collection {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 0 0.125rem;
	border-bottom: 1px solid var(--c-blue-royal, #266ec1);
	font-family: var(--f-ibm-plex-sans, "IBM Plex Sans"), sans-serif;
	font-size: 10px;
	font-weight: 600;
	color: var(--c-blue-royal, #266ec1);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 22px;
	transition: border-color 0.2s;
}

.inspiring-shorts__view-collection:hover {
	border-bottom-color: transparent;
}

.inspiring-shorts__view-collection svg {
	width: 12px;
	height: 12px;
	transition: transform 0.2s ease;
}

.inspiring-shorts__view-collection:hover svg {
	transform: translateX(2px);
}

/* =============================================
   Load More — hidden unless mobile (see media query)
   ============================================= */
.inspiring-shorts__load-more-wrapper {
	display: none;
	justify-content: center;
	width: 100%;
	margin: 1.5rem 0;
}

.inspiring-shorts__load-more {
	width: 100%;

	/* Half the row, matching Recent Speeches' Load More. Goes full width at
	   <=768px, where the grid drops to 2 cards per row (see below). */
	max-width: calc((100% - 1rem) / 2);
	padding: 0.875rem 1rem;
	border: none;
	border-radius: var(--brad-button-large);
	background-color: var(--c-blue-lighter);
	font-family: var(--f-ibm-plex-sans, "IBM Plex Sans"), sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-navy, #002d5d);
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: normal;
	cursor: pointer;
	transition: opacity 0.2s;
}

.inspiring-shorts__load-more:hover {
	opacity: 0.8;
}

.inspiring-shorts__load-more--hidden {
	display: none;
}

/* =============================================
   Tablet (769-1024px): 3 cards per row
   Also where the section switches into "Load More" mode.
   ============================================= */
@media (max-width: 1024px) {
	.inspiring-shorts {
		padding: 2rem 0;
	}

	.inspiring-shorts__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Undo the desktop-only hard cap (see base) — but only for cards
	   "Load More" has already un-flagged (JS removes --extra); a card
	   still carrying --extra stays hidden below regardless of position.
	   Scoping with :not() (rather than matching all nth-child(n+5) and
	   relying on source order) keeps this from ever out-specificity-ing
	   the still-hidden rule below for a still-extra card. */
	.inspiring-shorts__card:not(.inspiring-shorts__card--extra):nth-child(n + 5) {
		display: flex;
	}

	/* Extra cards are hidden until "Load More" reveals them. */
	.inspiring-shorts__card--extra {
		display: none;
	}

	.inspiring-shorts__title {
		font-size: 16px;
	}

	.inspiring-shorts__author {
		font-size: 13px;
	}

	.inspiring-shorts__load-more-wrapper {
		display: flex;
	}
}

/* =============================================
   Small (426-768px): 2 cards per row
   ============================================= */
@media (max-width: 768px) {
	.inspiring-shorts__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.inspiring-shorts__load-more {
		max-width: none;
	}
}

/* =============================================
   Mobile (<=425px): 1 card per row
   ============================================= */
@media (max-width: 425px) {
	.inspiring-shorts__grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================
   Popup / modal
   ============================================= */
.inspiring-shorts-popup {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.7);
}

.inspiring-shorts-popup.is-open {
	display: flex;
}

.inspiring-shorts-popup__dialog {
	position: relative;
	width: 100%;
	max-width: 880px;
}

.inspiring-shorts-popup__frame {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	background: #000;
	border-radius: 4px;
	overflow: hidden;
}

.inspiring-shorts-popup__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.inspiring-shorts-popup__close {
	position: absolute;
	top: -2.75rem;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s;
}

.inspiring-shorts-popup__close:hover,
.inspiring-shorts-popup__close:focus-visible {
	background: rgba(255, 255, 255, 0.3);
	outline: none;
}

/* Same 1024px boundary as the section above, so the close button moves in
   step with the layout rather than on its own. */
@media (max-width: 1024px) {
	.inspiring-shorts-popup__close {
		top: -2.5rem;
	}
}