/**
 * 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 page's text painted a highlight the
	   full width of this wrapper rather than of the text column. WebKit skips gap
	   painting inside flex containers. The child sets width/box-sizing explicitly
	   because its auto margins would otherwise opt it out of stretching. 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;

	/* Tracks the header's content edge. .top-half-header caps itself at
	   calc(100% - 2 * (max(3%, 50% - 515px) + 1rem)) and carries no side
	   padding, so its content starts at max(3%, 50% - 515px) + 1rem. This
	   box does have 1rem of side padding, so its cap omits that 1rem and the
	   two content edges land on the same pixel. Below 1025px both fall back
	   to a flat 1.25rem inset. Change alongside header.css. */
	max-width: calc(100% - 2 * max(3%, 50% - 515px));
	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;
	}
}

/* Below the desktop breakpoint the header drops to a flat 1.25rem inset, so
   this does too: full width, with the inset carried entirely by the padding.
   This runs all the way down, so the section stays flush with the header on
   phones as well as tablets. Side longhands rather than the shorthand, so each
   section keeps whatever top/bottom padding its own mobile rules set. */
@media (max-width: 1024px) {

	.inspiring-shorts__container {
		max-width: 100%;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}