/* =========================================================================
   PF STORY GRID  -  blocks pf/story-grid + pf/story-card
   Filterable grid of flip cards. Loaded on the front end and in the editor.
   ========================================================================= */

.pf-stories {
	--st-ink: #1d1d1f;
	--st-ink-2: #0a0a0b;
	--st-grey: #86868b;
	--st-grey-2: #6e6e73;
	--st-card: #ffffff;
	--st-pill: #ececf1;
	--st-yellow: #FFCD04;
	--st-yellow-deep: #E0A800;
	--st-radius: 18px;
	--st-ease: cubic-bezier(.16, 1, .3, 1);

	box-sizing: border-box;
	width: 100%;
}

.pf-stories *,
.pf-stories *::before,
.pf-stories *::after {
	box-sizing: inherit;
}

/* ----- Section heading ----- */
.pf-stories__kicker {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--st-yellow-deep);
}

.pf-stories__title {
	margin: 0;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.08;
	color: var(--st-ink-2);
	text-wrap: balance;
}

.pf-stories__sub {
	margin: 10px 0 0;
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.45;
	color: var(--st-grey-2);
}

/* ----- Filter chips ----- */
.pf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 22px;
}

.pf-chip {
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 980px;
	background: var(--st-pill);
	color: var(--st-grey-2);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .2s var(--st-ease), color .2s var(--st-ease);
}

.pf-chip:hover {
	background: #dcdce3;
}

.pf-chip.is-active {
	background: var(--st-ink-2);
	color: #fff;
}

.pf-chip:focus-visible {
	outline: 3px solid var(--st-yellow);
	outline-offset: 2px;
}

/* ----- Grid -----
   Columns, gap and card height come from custom properties set per block, so
   one stylesheet serves every instance:
     --st-cols-d  desktop   (> 1024px)
     --st-cols-t  tablet    (768-1024px, i.e. iPad)
     --st-cols-m  mobile    (< 768px)
   The fallbacks after the comma apply if a block predates these settings. */
.pf-story-grid {
	display: grid;
	grid-template-columns: repeat(var(--st-cols-d, 4), minmax(0, 1fr));
	gap: var(--st-gap, 18px);
}

/* Tablet / iPad */
@media (max-width: 1024px) {
	.pf-story-grid {
		grid-template-columns: repeat(var(--st-cols-t, 2), minmax(0, 1fr));
	}
}

/* Mobile */
@media (max-width: 767px) {
	.pf-story-grid {
		grid-template-columns: repeat(var(--st-cols-m, 1), minmax(0, 1fr));
	}
}

/* ----- Card shell + flip ----- */
.pf-story {
	height: var(--st-card-h, 362px);
	perspective: 1400px;
	cursor: pointer;
}

.pf-story[hidden] {
	display: none;
}

.pf-story:focus-visible {
	outline: 3px solid var(--st-yellow);
	outline-offset: 3px;
	border-radius: var(--st-radius);
}

.pf-story__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform .6s var(--st-ease);
}

/* Tap/keyboard flip - works on every device. */
.pf-story.is-flipped .pf-story__inner {
	transform: rotateY(180deg);
}

/* Hover flip, pointer devices only. A second rule lets a card that was tapped
   flip BACK on hover, so the two interactions do not fight each other. */
@media (hover: hover) {
	.pf-story:hover .pf-story__inner,
	.pf-story.is-focused .pf-story__inner {
		transform: rotateY(180deg);
	}

	.pf-story.is-flipped:hover .pf-story__inner {
		transform: rotateY(0);
	}

	.pf-story__hint {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pf-story__inner {
		transition: none;
	}
}

/* ----- Faces ----- */
.pf-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--st-radius);
	background: var(--st-card);
	box-shadow: 0 14px 36px -24px rgba(0, 0, 0, .34);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.pf-face--back {
	transform: rotateY(180deg);
	justify-content: space-between;
	padding: 22px 20px;
	background: var(--st-back-bg, linear-gradient(165deg, #fff, #f6f6fb));
}

/* ----- Front ----- */
.pf-story__media {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 208px;
	padding: 15px;
	color: #fff;
	background-size: cover;
	background-position: center;
}

/* Colour presets - used when no photo is set. */
.pf-palette--kids   { background-image: linear-gradient(160deg, #4ED18E 0%, #22A06B 45%, #0F5F42 100%); }
.pf-palette--brand  { background-image: linear-gradient(160deg, #FFE27A 0%, #FFCD04 45%, #C99B00 100%); color: #1d1d1f; }
.pf-palette--blue   { background-image: linear-gradient(160deg, #6FB1FF 0%, #2F6FD0 45%, #16386F 100%); }
.pf-palette--purple { background-image: linear-gradient(160deg, #B79BFF 0%, #7B52D3 45%, #3D2472 100%); }
.pf-palette--dark   { background-image: linear-gradient(160deg, #3A3A42 0%, #1E1E24 45%, #0A0A0B 100%); }

/* A photo replaces the gradient, with a scrim so the text stays readable. */
.pf-story__media.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.10) 35%, rgba(0,0,0, calc(var(--st-overlay, .55) * 1.1)) 100%);
}

/* Lift the content above the scrim.
   z-index ONLY - setting `position: relative` here would override the
   `position: absolute` on the goal badge and the icon, dropping them into
   normal flow: the badge fell to the bottom of the tile and pushed the stat
   across to the right. Flex items honour z-index without being positioned. */
.pf-story__media.has-image > * {
	z-index: 1;
}

.pf-story__goal {
	position: absolute;
	top: 13px;
	left: 13px;
	z-index: 1;
	padding: 5px 11px;
	border-radius: 980px;
	background: var(--st-badge-bg, rgba(0, 0, 0, .32));
	color: var(--st-badge-color, #fff);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.pf-story__icon {
	position: absolute;
	top: 13px;
	right: 13px;
	z-index: 1;
	width: var(--st-icon-size, 44px);
	height: var(--st-icon-size, 44px);
	object-fit: contain;
}

.pf-story__metric {
	font-size: var(--st-metric-size, 36px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
	color: var(--st-metric, inherit);
	text-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}

.pf-story__metric small {
	margin-left: 2px;
	font-size: 15px;
	font-weight: 700;
}

.pf-story__info {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	padding: 14px 16px;
}

.pf-story__info b {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--st-name, var(--st-ink));
}

.pf-story__info span {
	margin-top: 2px;
	font-size: 13px;
	color: var(--st-meta, var(--st-grey));
}

.pf-story__hint {
	position: absolute;
	right: 14px;
	bottom: 12px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--st-grey);
}

/* ----- Back ----- */
.pf-story__stars {
	color: var(--st-star, var(--st-yellow-deep));
	font-size: 14px;
	letter-spacing: 2px;
}

.pf-story__quote {
	margin: 10px 0 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.4;
	color: var(--st-quote, var(--st-ink));
}

.pf-story__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}

.pf-story__tags span {
	padding: 5px 10px;
	border-radius: 980px;
	background: var(--st-tag-bg, rgba(255, 205, 4, .16));
	color: var(--st-tag-color, var(--st-yellow-deep));
	font-size: 11.5px;
	font-weight: 600;
}

.pf-story__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 13px;
	background: var(--st-cta-bg, var(--st-ink-2));
	color: var(--st-cta-color, #fff);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: transform .2s var(--st-ease);
}

.pf-story__cta:hover {
	transform: translateY(-2px);
	color: var(--st-cta-color, #fff);
}

.pf-story__cta svg {
	flex: none;
	width: 15px;
	height: 15px;
}

/* ----- Empty state ----- */
.pf-stories__empty {
	margin-top: 18px;
	padding: 44px 24px;
	border: 1px dashed rgba(0, 0, 0, .12);
	border-radius: var(--st-radius);
	background: var(--st-card);
	text-align: center;
}

.pf-stories__empty[hidden] {
	display: none;
}

.pf-stories__empty b {
	font-size: 18px;
	font-weight: 700;
}

.pf-stories__empty p {
	max-width: 46ch;
	margin: 8px auto 0;
	font-size: 15px;
	color: var(--st-grey-2);
}

/* =========================================================================
   Editor preview
   The flip cannot be previewed usefully in the editor, so both faces are
   stacked and the card grows to fit.
   ========================================================================= */

.pf-stories--editor .pf-stories__notice {
	margin: 12px 0 18px;
	padding: 10px 14px;
	border-radius: 8px;
	background: #f0f0f1;
	color: #50575e;
	font-size: 13px;
}

/* The editor renders the real card, so it inherits every front-end rule.
   Only the interaction differs. */
.pf-story--editor {
	min-height: 320px;   /* never collapse, even if --st-card-h is unset */
	cursor: default;
}

/* Gutenberg inserts its own wrappers between the grid and each card. They must
   stretch, or the absolutely positioned faces have nothing to fill. */
.pf-stories--editor .block-editor-inner-blocks,
.pf-stories--editor .block-editor-block-list__layout {
	display: contents;
}

/* Hover must NOT flip while editing - the mouse is over the card constantly.
   The explicit switch button drives .is-flipped instead. */
@media (hover: hover) {
	.pf-story--editor:hover .pf-story__inner,
	.pf-story--editor.is-focused .pf-story__inner {
		transform: none;
	}

	.pf-story--editor.is-flipped:hover .pf-story__inner,
	.pf-story--editor.is-flipped .pf-story__inner {
		transform: rotateY(180deg);
	}

	/* The front-end hint is hover-only; in the editor there is no hover flip,
	   so hide it to match what a visitor with a mouse actually sees. */
	.pf-story--editor .pf-story__hint {
		display: none;
	}
}

/* Front / Back switch */
.pf-story__switch {
	position: absolute;
	bottom: 10px;
	left: 50%;
	z-index: 5;
	transform: translateX(-50%);
}

.pf-story__switch .components-button {
	height: 30px;
	padding: 0 14px;
	border-radius: 980px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
	font-size: 12px;
}

/* Shown on the back when the CTA is incomplete. */
.pf-story__cta-missing {
	display: block;
	margin-top: 12px;
	padding: 8px 10px;
	border-left: 3px solid #d63638;
	background: #fcf0f1;
	color: #8a2424;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.4;
}

/* The block's own selected/hover outline should sit outside the card, not
   clip against the rotated faces. */
.pf-story--editor.is-selected,
.pf-story--editor:focus-within {
	outline: 2px solid var(--wp-admin-theme-color, #3858e9);
	outline-offset: 4px;
	border-radius: var(--st-radius);
}

/* Inspector helper text */
.pf-panel-note {
	margin: 0 0 12px;
	color: #757575;
	font-size: 12px;
	font-style: italic;
	line-height: 1.5;
}

.pf-panel-warn {
	margin: 8px 0 0;
	padding: 8px 10px;
	border-left: 3px solid #d63638;
	background: #fcf0f1;
	color: #8a2424;
	font-size: 12px;
	line-height: 1.5;
}

/* Sub-headings inside an inspector panel */
.pf-panel-rule {
	height: 0;
	margin: 18px 0 12px;
	border: 0;
	border-top: 1px solid #e0e0e0;
}

.pf-panel-label {
	margin: 0 0 8px;
	color: #1e1e1e;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Media picker in the inspector */
.pf-media-field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 16px;
}

.pf-media-field__preview {
	max-width: 100%;
	max-height: 90px;
	padding: 4px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	object-fit: contain;
}