/**
 * Single Life Changing Story.
 *
 * Plain CSS (not part of the wp-scripts build) so the template can be edited and
 * deployed without a rebuild step.
 *
 * Two jobs:
 *   1. Style the hero / quote / body / related sections.
 *   2. Shim the legacy theme's presets. The imported stories were authored under
 *      the old theme and their markup still references preset tokens Kadence
 *      does not define — see the "legacy presets" section at the bottom.
 */

.ipa-story {
	--ipa-story-blue: var( --global-palette1, #3b5795 );
	--ipa-story-blue-deep: var( --global-palette2, #215387 );
	--ipa-story-ink: var( --global-palette3, #1a202c );
	--ipa-story-body: var( --global-palette4, #2d3748 );
	--ipa-story-muted: var( --global-palette6, #718096 );
	--ipa-story-tint: var( --global-palette8, #f7fafc );
	--ipa-story-line: var( --global-palette7, #edf2f7 );
	--ipa-story-display: var( --global-heading-font-family, Georgia, 'Times New Roman', serif );

	--ipa-story-max: 1180px;
	--ipa-story-pad: clamp( 20px, 5vw, 48px );
}

/* ---------------------------------------------------------------- 1. Hero -- */

.ipa-story__hero {
	background:
		radial-gradient( 120% 120% at 85% 0%, rgba( 255, 255, 255, 0.13 ) 0%, rgba( 255, 255, 255, 0 ) 55% ),
		linear-gradient( 135deg, var( --ipa-story-blue-deep ) 0%, var( --ipa-story-blue ) 100% );
	color: #fff;
	padding: clamp( 48px, 7vw, 96px ) var( --ipa-story-pad );
}

.ipa-story__hero-inner {
	max-width: var( --ipa-story-max );
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 32px, 5vw, 64px );
	align-items: center;
}

@media ( min-width: 900px ) {
	.ipa-story__hero-inner {
		/* Copy gets the wider column; the portrait stays a comfortable size. */
		grid-template-columns: 1.15fr 0.85fr;
	}
}

.ipa-story__eyebrow {
	margin: 0 0 14px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.82 );
}

.ipa-story__headline {
	margin: 0;
	font-family: var( --ipa-story-display );
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
	font-size: clamp( 2rem, 1.2rem + 2.6vw, 3.4rem );
}

.ipa-story__intro {
	margin: 20px 0 0;
	max-width: 34em;
	font-size: clamp( 1rem, 0.96rem + 0.2vw, 1.15rem );
	line-height: 1.65;
	color: rgba( 255, 255, 255, 0.9 );
}

.ipa-story__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

.ipa-story__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ipa-story__btn:hover,
.ipa-story__btn:focus-visible {
	transform: translateY( -2px );
}

.ipa-story__btn--primary {
	background: #fff;
	color: var( --ipa-story-blue-deep );
}

.ipa-story__btn--primary:hover,
.ipa-story__btn--primary:focus-visible {
	background: #fff;
	color: var( --ipa-story-ink );
}

.ipa-story__btn--ghost {
	border: 1px solid rgba( 255, 255, 255, 0.55 );
	color: #fff;
}

.ipa-story__btn--ghost:hover,
.ipa-story__btn--ghost:focus-visible {
	background: rgba( 255, 255, 255, 0.14 );
	color: #fff;
}

.ipa-story__btn-icon {
	display: inline-flex;
}

/* Portrait. Fixed aspect box so tall and wide source images agree. */
.ipa-story__figure {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	aspect-ratio: 4 / 5;
	background: rgba( 255, 255, 255, 0.12 );
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.28 );
}

@media ( min-width: 900px ) {
	.ipa-story__figure {
		aspect-ratio: 1 / 1;
	}
}

.ipa-story__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.ipa-story__figure.is-video:hover img,
.ipa-story__figure.is-video:focus-visible img {
	transform: scale( 1.04 );
}

.ipa-story__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 76px;
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --ipa-story-blue-deep );
	background: rgba( 255, 255, 255, 0.94 );
	border-radius: 50%;
	box-shadow: 0 6px 22px rgba( 0, 0, 0, 0.3 );
	transition: transform 0.25s ease, background 0.25s ease;
}

.ipa-story__play.is-sm {
	width: 52px;
	height: 52px;
}

.ipa-story__play svg {
	margin-left: 4px; /* Optically centre the triangle. */
}

.ipa-story__figure.is-video:hover .ipa-story__play,
.ipa-story__figure.is-video:focus-visible .ipa-story__play,
.ipa-story__more-card:hover .ipa-story__play,
.ipa-story__more-card:focus-visible .ipa-story__play {
	transform: scale( 1.08 );
	background: #fff;
}

/* ---------------------------------------------------------- 2. Pull quote -- */

.ipa-story__quote-wrap {
	background: var( --ipa-story-tint );
	padding: clamp( 48px, 7vw, 88px ) var( --ipa-story-pad );
}

.ipa-story__quote {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}

.ipa-story__quote-mark {
	display: block;
	font-family: var( --ipa-story-display );
	font-size: 5rem;
	line-height: 0.6;
	color: var( --ipa-story-blue );
	opacity: 0.28;
}

.ipa-story__quote blockquote {
	margin: 18px 0 0;
	padding: 0;
	border: 0;
}

.ipa-story__quote blockquote p {
	margin: 0;
	font-family: var( --ipa-story-display );
	font-size: clamp( 1.25rem, 1rem + 1.1vw, 1.85rem );
	line-height: 1.45;
	color: var( --ipa-story-ink );
}

.ipa-story__quote figcaption {
	margin-top: 22px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --ipa-story-muted );
}

/* --------------------------------------------------------- 3. Story body -- */

.ipa-story__body {
	padding: clamp( 48px, 6vw, 80px ) var( --ipa-story-pad );
}

.ipa-story__body-inner {
	max-width: 820px;
	margin: 0 auto;
	color: var( --ipa-story-body );
	line-height: 1.7;
}

.ipa-story__body-inner > :first-child {
	margin-top: 0;
}

.ipa-story__body-inner h2,
.ipa-story__body-inner h3,
.ipa-story__body-inner h4 {
	font-family: var( --ipa-story-display );
	color: var( --ipa-story-ink );
	line-height: 1.2;
}

.ipa-story__body-inner img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.ipa-story__body-inner .wp-block-columns {
	gap: clamp( 24px, 3vw, 48px );
}

/* ------------------------------------------------------- 4. More stories -- */

.ipa-story__more {
	background: var( --ipa-story-tint );
	border-top: 1px solid var( --ipa-story-line );
	padding: clamp( 48px, 6vw, 80px ) var( --ipa-story-pad );
}

.ipa-story__more-inner {
	max-width: var( --ipa-story-max );
	margin: 0 auto;
}

.ipa-story__more-title {
	margin: 0 0 32px;
	text-align: center;
	font-family: var( --ipa-story-display );
	font-weight: 400;
	color: var( --ipa-story-ink );
	font-size: clamp( 1.5rem, 1.1rem + 1.2vw, 2.1rem );
}

.ipa-story__more-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 28px;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
}

.ipa-story__more-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ipa-story__more-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10px;
	background: var( --ipa-story-line );
	box-shadow: 0 6px 20px rgba( 15, 23, 42, 0.12 );
}

.ipa-story__more-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.ipa-story__more-card:hover .ipa-story__more-media img,
.ipa-story__more-card:focus-visible .ipa-story__more-media img {
	transform: scale( 1.05 );
}

.ipa-story__more-name {
	display: block;
	margin-top: 14px;
	font-family: var( --ipa-story-display );
	font-size: 1.05rem;
	line-height: 1.35;
	color: var( --ipa-story-ink );
}

/* ------------------------------------------------------- legacy presets -- */

/*
 * The imported stories were authored under the previous theme, whose theme.json
 * defined a `quote` and `h3` font size and a spacing scale. Kadence defines
 * neither, so without these the body renders with a collapsed type scale and
 * zero horizontal padding. Shimming the handful of tokens here is far safer than
 * rewriting the block markup inside 22 posts.
 */
.ipa-story__body-inner {
	--wp--preset--spacing--20: clamp( 12px, 2vw, 20px );
	--wp--preset--spacing--30: clamp( 16px, 3vw, 30px );
	--wp--preset--spacing--40: clamp( 20px, 4vw, 40px );
	--wp--preset--spacing--50: clamp( 28px, 5vw, 50px );
}

.ipa-story__body-inner .has-quote-font-size {
	font-family: var( --ipa-story-display );
	font-size: clamp( 1.2rem, 0.95rem + 1vw, 1.7rem );
	line-height: 1.45;
	color: var( --ipa-story-blue-deep );
}

.ipa-story__body-inner .has-h-3-font-size {
	font-size: clamp( 1.3rem, 1.05rem + 0.9vw, 1.8rem );
}

/*
 * The legacy group blocks carry their own horizontal padding, which double-pads
 * inside an already-constrained column. Neutralise it and let the container own
 * the measure.
 */
.ipa-story__body-inner > .wp-block-group {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*
 * Video stories with no feature image fall back to the YouTube thumbnail, whose
 * 4:3 JPEG already letterboxes the frame. Give those a 16:9 box so the picture
 * fills it instead of being cropped into the black bars.
 */
/* Two classes, so this outranks the plain .ipa-story__figure rules at every
   breakpoint regardless of source order. */
.ipa-story__figure.is-yt-thumb {
	aspect-ratio: 16 / 9;
}

/*
 * A story with no feature image has nothing for the second column, which would
 * otherwise leave the hero visibly lopsided. Collapse to one centred column.
 */
.ipa-story__hero-inner.is-textonly {
	grid-template-columns: 1fr;
	max-width: 820px;
	text-align: center;
}

.ipa-story__hero-inner.is-textonly .ipa-story__intro {
	margin-left: auto;
	margin-right: auto;
}

.ipa-story__hero-inner.is-textonly .ipa-story__actions {
	justify-content: center;
}