/**
 * Story page styles (template-parts/story-page.php) - the layout shared by
 * the Prestasi and Digital Classroom pages. Named for the Prestasi page,
 * which came first. Only enqueued for the templates listed in
 * oceanwp_child_story_page_templates() in functions.php.
 */

/* ---------------------------------------------------------------
   Design tokens - see design-system/sekolah-pribadi-depok/MASTER.md.
   Scoped to #story-page for the same reason homepage.css scopes
   its copy to #homepage-custom: nothing here may leak into
   Elementor-rendered pages. The values are the same tokens; if one
   changes in MASTER.md, change it in both files.
   --------------------------------------------------------------- */
#story-page {
	--color-primary: #18a8fa;
	--color-primary-dark: #0d8fdb;
	--color-gradient-start: #0172bb;
	--color-gradient-end: #01a6a1;
	/* On-dark variants of the gradient, for text over the photo strip's dark
	   caption scrim (photo-strip.css); same values as homepage.css. */
	--color-gradient-start-on-dark: #2bb6ff;
	--color-gradient-end-on-dark: #4fe0da;
	--color-accent: #f26522;
	--color-on-primary: #ffffff;
	--color-foreground: #12233c;
	--color-foreground-alt: #1c2733;
	--color-muted-foreground: #5a6472;
	--color-surface: #ffffff;
	--color-surface-page: #f2f5f9;
	--color-surface-muted: #e9eef5;
	--color-border: rgba(18, 35, 60, 0.08);

	--elevation-1: 0 1px 3px rgba(18, 35, 60, 0.08);
	--elevation-2: 0 8px 20px rgba(18, 35, 60, 0.1);
	--elevation-3: 0 20px 40px -12px rgba(18, 35, 60, 0.18);
	--elevation-4: 0 30px 56px -14px rgba(18, 35, 60, 0.28);

	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-full: 999px;

	--motion-fast: 200ms;
	--motion-base: 250ms;
	--motion-slow: 300ms;
	--motion-reveal: 600ms;
	--ease-out-cubic: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-fade: cubic-bezier(0.4, 0, 0.2, 1);

	display: block;
	overflow-x: clip;
	background: var(--color-surface-page);
	color: var(--color-muted-foreground);
	font-family: 'Inter', sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* The .hp-* names alongside are the homepage's own classes, used by the
   shared magazine section (template-parts/magazine.php) - same values as
   homepage.css, so that section renders identically on both pages. */
#story-page .pr-container,
#story-page .hp-container {
	width: 1200px;
	max-width: 90%;
	margin: 0 auto;
}

#story-page .pr-section,
#story-page .hp-section {
	padding: 90px 0;
}

#story-page .pr-heading-accent,
#story-page .hp-heading-accent {
	background-image: linear-gradient(90deg, var(--color-gradient-start), var(--color-gradient-end));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---- Scroll reveal ----
   Same motion as the homepage (.hp-reveal in homepage.css) and driven by
   the same assets/js/scroll-reveal.js, which only flips .is-visible. The
   CSS is repeated here because homepage.css isn't loaded on this page. */
#story-page .hp-reveal {
	opacity: 0;
	translate: 0 -24px;
}

#story-page .hp-reveal.is-visible {
	animation: pr-fade var(--motion-reveal) var(--ease-fade) both,
		pr-settle var(--motion-reveal) var(--ease-out-cubic) both;
}

#story-page .hp-reveal.hp-reveal--up {
	translate: 0 56px;
}

@keyframes pr-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes pr-settle {
	to { translate: 0 0; }
}

/* ---------------------------------------------------------------
   Intro
   --------------------------------------------------------------- */
#story-page .pr-intro {
	padding-bottom: 0;
	background:
		radial-gradient(ellipse 900px 420px at 50% 0%, rgba(24, 168, 250, 0.10), transparent 70%),
		var(--color-surface-page);
}

#story-page .pr-intro-head {
	max-width: 760px;
	margin: 0 auto 48px;
	text-align: center;
}

/* No banner below it (Digital Classroom): the stories section's own top
   padding is spacing enough. */
#story-page .pr-intro-head:last-child {
	margin-bottom: 0;
}

#story-page .pr-intro-badge {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
	color: var(--color-on-primary);
	font-size: 1.35em;
	box-shadow: var(--elevation-2);
}

#story-page .pr-intro-title {
	margin: 0 0 18px;
	font-family: 'Inter', sans-serif;
	font-size: 2.9em;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.8px;
	color: var(--color-foreground);
}

#story-page .pr-intro-lede {
	margin: 0;
	font-size: 1.02em;
	line-height: 1.75;
	color: var(--color-muted-foreground);
}

#story-page .pr-intro-banner {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--elevation-4);
	aspect-ratio: 21 / 9;
}

#story-page .pr-intro-banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------
   Stories
   --------------------------------------------------------------- */
#story-page .pr-section-head {
	max-width: 700px;
	margin: 0 auto 32px;
	text-align: center;
}

#story-page .pr-section-head h2 {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 2.1em;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: var(--color-foreground);
}

/* ---- Filter chips ---- */
#story-page .pr-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 auto 56px;
}

#story-page .pr-filters[hidden] {
	display: none;
}

#story-page .pr-filter {
	padding: 11px 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	color: var(--color-foreground);
	font-family: 'Inter', sans-serif;
	font-size: 0.88em;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: var(--elevation-1);
	transition: background-color var(--motion-base) ease,
		color var(--motion-base) ease,
		box-shadow var(--motion-base) ease,
		transform var(--motion-base) ease;
}

#story-page .pr-filter:hover {
	color: var(--color-primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--elevation-2);
}

#story-page .pr-filter:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

#story-page .pr-filter.is-active {
	border-color: transparent;
	background: var(--color-primary);
	color: var(--color-on-primary);
	box-shadow: var(--elevation-2);
}

/* ---- Story carousel ----
   The rushd.sch.id achievements format, by direction: one story at a time,
   photo on the left half and the write-up on the right, with round arrow
   buttons on the card's sides to step to the next/previous story in the
   active category (assets/js/prestasi-filter.js). On phones the photo
   stacks above the text and the arrows move below the card. Without JS
   the arrows stay hidden and the stories simply stack. */
#story-page .pr-carousel {
	position: relative;
}

#story-page .pr-story-list {
	display: grid;
	gap: 32px;
}

#story-page .pr-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 480px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: var(--elevation-2);
}

#story-page .pr-story[hidden] {
	display: none;
}

#story-page .pr-story-media {
	position: relative;
	min-height: 360px;
	overflow: hidden;
	background: var(--color-surface-muted);
}

/* Arrow buttons: brand-blue circles (MASTER.md keeps orange off button
   fills, unlike the reference), straddling the card's left/right edges at
   its vertical centre. */
#story-page .pr-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 3px solid var(--color-surface-page);
	border-radius: var(--radius-full);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-size: 1.05em;
	cursor: pointer;
	box-shadow: var(--elevation-3);
	translate: 0 -50%;
	transition: background-color var(--motion-base) ease, transform var(--motion-base) ease;
}

#story-page .pr-nav[hidden] {
	display: none;
}

#story-page .pr-nav--prev {
	left: -26px;
}

#story-page .pr-nav--next {
	right: -26px;
}

#story-page .pr-nav:hover {
	background: var(--color-primary-dark);
	transform: scale(1.06);
}

#story-page .pr-nav:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

/* The whole photo is shown (contain), not cropped to fill the frame:
   cropping portrait photos into a landscape frame read as far too zoomed
   in. The space either side is filled by a blurred, enlarged copy of the
   same photo (::before, fed by --pr-photo from the template) so the frame
   never shows flat empty bars. No hover zoom, for the same reason. */
#story-page .pr-story-media::before {
	content: '';
	position: absolute;
	inset: -24px;
	background-image: var(--pr-photo);
	background-position: center;
	background-size: cover;
	filter: blur(18px) saturate(1.1);
	opacity: 0.55;
}

#story-page .pr-story-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Interactive 3D model (a story with 'model' in the data): fills the picture
   area, transparent so the card shows through. Horizontal drags rotate it;
   vertical ones are left to the page so it never traps scrolling on a phone. */
#story-page .pr-story-model {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	--poster-color: transparent;
	--progress-bar-color: var(--color-primary);
	cursor: grab;
}

#story-page .pr-story-model > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The fallback picture is for when <model-viewer> never starts. Once it is
   defined the element renders its own canvas, and this light-DOM child would
   otherwise sit on top of it: a still image that swallows every drag. */
#story-page .pr-story-model:defined > img {
	display: none;
}

#story-page .pr-story-model:active {
	cursor: grabbing;
}

#story-page .pr-story-model:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -4px;
	border-radius: var(--radius-md);
}

/* 'fill' => 'plain' in the data: cut-out product/portrait shots on white or
   transparent backgrounds. A plain white frame instead of the blurred fill,
   and some inset so the object doesn't touch the card edges. */
#story-page .pr-story-media--plain {
	background: var(--color-surface);
}

#story-page .pr-story-media--plain::before {
	content: none;
}

#story-page .pr-story-media--plain img {
	inset: 24px;
	width: calc(100% - 48px);
	height: calc(100% - 48px);
}

/* The write-up panel carries a faint brand-blue wash that fades down from
   the photo - the same idea as the reference's tinted text panel, kept to
   the site's blue rather than a second warm colour. */
#story-page .pr-story-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 64px 48px 52px;
	background: linear-gradient(90deg, transparent 40%, rgba(24, 168, 250, 0.08)), var(--color-surface);
}

#story-page .pr-story-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

#story-page .pr-story-tags li {
	padding: 5px 12px;
	border-radius: var(--radius-full);
	background: var(--color-surface-muted);
	color: var(--color-gradient-start);
	font-size: 0.74em;
	font-weight: 600;
	letter-spacing: 0.2px;
}

#story-page .pr-story-title {
	margin: 0 0 10px;
	font-family: 'Inter', sans-serif;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.3px;
	color: var(--color-foreground);
}

#story-page .pr-story-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin: 0 0 18px;
}

/* Names get the warm accent - MASTER.md reserves orange for exactly this. */
#story-page .pr-story-name {
	font-size: 1em;
	font-weight: 700;
	color: var(--color-accent);
}

#story-page .pr-story-date {
	font-size: 0.82em;
	font-style: italic;
	font-weight: 500;
	color: var(--color-muted-foreground);
}

#story-page .pr-story-text p {
	margin: 0 0 14px;
	font-size: 1em;
	line-height: 1.75;
	color: var(--color-foreground-alt);
}

/* 'compact' => true in a page's data (Digital Classroom): its pictures are
   small product shots / 3D models on white, which left a lot of empty space
   beside the text in the half-and-half card. Text gets ~60% of the width and
   the card is shorter; the picture area stays tall enough for the models. */
@media (min-width: 768px) {
	#story-page.pr-compact .pr-story {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		min-height: 0;
	}

	#story-page.pr-compact .pr-story-media {
		min-height: 340px;
	}

	#story-page.pr-compact .pr-story-body {
		padding: 36px 48px 36px 36px;
	}
}

/* 'text_align' => 'justify' in a page's data (Digital Classroom). Hyphenation
   keeps the word gaps from stretching in the narrow text column. */
#story-page.pr-justify .pr-story-text p {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

#story-page .pr-story-text p:last-child {
	margin-bottom: 0;
}

#story-page .pr-story-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-top: 24px;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--color-primary-dark);
	text-decoration: none;
	transition: color var(--motion-base) ease, gap var(--motion-base) ease;
}

#story-page .pr-story-link:hover,
#story-page .pr-story-link:focus-visible {
	gap: 12px;
	color: var(--color-gradient-start);
}

#story-page .pr-story-link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: 4px;
}

#story-page .pr-story-link i {
	font-size: 1.15em;
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
/* List mode (one_at_a_time => false, Prestasi): all of a category's stories
   at once, two cards per row, each with its photo above the write-up. */
@media (min-width: 768px) {
	#story-page .pr-carousel[data-pr-list] .pr-story-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}

	#story-page .pr-carousel[data-pr-list] .pr-story {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		min-height: 0;
	}

	#story-page .pr-carousel[data-pr-list] .pr-story-media {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	#story-page .pr-carousel[data-pr-list] .pr-story-body {
		padding: 28px 28px 32px;
	}
}

@media (max-width: 1024px) {
	#story-page .pr-intro-title {
		font-size: 2.4em;
	}
}

/* Phones. */
@media (max-width: 767px) {
	#story-page .pr-section,
	#story-page .hp-section {
		padding: 56px 0;
	}

	#story-page .pr-intro {
		padding-bottom: 0;
	}

	#story-page .pr-intro-title {
		font-size: 1.9em;
	}

	#story-page .pr-intro-lede {
		font-size: 0.96em;
	}

	#story-page .pr-intro-banner {
		aspect-ratio: 4 / 3;
	}

	#story-page .pr-section-head h2 {
		font-size: 1.6em;
	}

	/* One scrollable row of chips instead of a tall wrapped block that
	   pushes the first story below the fold. */
	#story-page .pr-filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		margin: 0 -5.5% 36px;
		padding: 4px 5.5% 10px;
		scrollbar-width: none;
	}

	#story-page .pr-filters::-webkit-scrollbar {
		display: none;
	}

	#story-page .pr-filter {
		flex: 0 0 auto;
	}

	#story-page .pr-story-list {
		gap: 28px;
	}

	/* Stacked: photo above the write-up. */
	#story-page .pr-story {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	#story-page .pr-story-media {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	#story-page .pr-story-body {
		padding: 26px 22px 30px;
		background: linear-gradient(180deg, rgba(24, 168, 250, 0.08), transparent 45%), var(--color-surface);
	}

	/* No room at the card's sides on a phone: the arrows sit in a row under
	   the card instead, room for a thumb, with the list leaving space. */
	#story-page .pr-carousel.has-nav {
		padding-bottom: 76px;
	}

	#story-page .pr-nav {
		top: auto;
		bottom: 0;
		translate: none;
	}

	#story-page .pr-nav--prev {
		left: calc(50% - 64px);
	}

	#story-page .pr-nav--next {
		right: calc(50% - 64px);
	}

	#story-page .pr-story-title {
		font-size: 1.2em;
	}

	#story-page .pr-story-text p {
		font-size: 0.96em;
	}
}

@media (prefers-reduced-motion: reduce) {
	#story-page .hp-reveal,
	#story-page .hp-reveal.hp-reveal--up {
		opacity: 1;
		translate: none;
	}

	#story-page .hp-reveal.is-visible {
		animation: none;
	}

	#story-page .pr-filter,
	#story-page .pr-story,
	#story-page .pr-story-link,
	#story-page .pr-nav {
		transition: none;
	}

	#story-page .pr-nav:hover {
		transform: none;
	}
}