/* Scroll-driven slideshow (landing + eligible pages). Behaviour: assets/landing/engine.js */

/* Slides. Without JS, with reduced motion, or below the stage's min-width they simply stack vertically. */
.rp-slide { position: relative; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 5rem 1rem 4rem; box-sizing: border-box; }
.rp-slide--hero, .rp-slide--title, .rp-slide--post, .rp-slide--nav { min-height: 100vh; }
.rp-slide--post, .rp-slide--nav { background: #0a0a12; }
.rp-slide--section { min-height: 0; }
.rp-slide--section:nth-child(odd)  { background: #0a0a12; }
.rp-slide--section:nth-child(even) { background: #12101c; }

.rp-slide--hero h1, .rp-slide--title h1 {
	font-size: clamp(2.5rem, 8vw, 6rem); letter-spacing: -0.02em; text-align: center;
	line-height: 0.95; color: #fff; position: relative; margin: 0;
}
.rp-slide--hero h1 span { font-size: 0.5em; display: block; }
.rp-reveal { position: absolute; inset: 0; background: url("https://assets.codepen.io/314556/nebula-stardust.jpg") center / cover; }

.rp-layer { position: absolute; inset: 0 -15%; background-size: cover; background-position: center; background-repeat: no-repeat; }
.rp-slide--dim .rp-layer::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.rp-content { position: relative; z-index: 1; width: 100%; max-width: 500px; padding: 2rem 1.5rem; box-sizing: border-box; text-align: center; }
.rp-content--wide { max-width: 800px; text-align: left; }
.rp-content--wide > * { margin-block: 1rem; }
.rp-content h2 {
	font-size: clamp(1.5rem, 4vw, 6rem); letter-spacing: -0.02em; text-align: center;
	line-height: 0.95; color: #fff; margin: 0 0 0.5em;
}
.rp-content--wide [class*="wp-block-gtm-"] { background: transparent !important; color: inherit; }  /* qrten boxes assume a light page */
.rp-content--wide h2 { text-align: left; font-size: clamp(1.75rem, 3vw, 3rem); }
.rp-content h2 a { color: inherit; text-decoration: none; }
.rp-meta { margin: 0 0 1rem; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.rp-readmore { display: inline-block; margin-top: 1.25rem; padding: 0.6rem 1.4rem; border: 1px solid currentColor; border-radius: 2rem; color: #fff; text-decoration: none; }
.rp-readmore:hover { background: rgba(255,255,255,0.12); }
.rp-nav { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.landing-excerpt-text {
	font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.25; color: #fff;
	margin: 0 auto; max-width: 500px; background: rgba(0,0,0,0.2); border-radius: 2rem; padding: 2rem;
}

/* Split layout (post listings): title on the left, date + excerpt + button on the right */
.rp-slide--split .rp-content {
	max-width: min(1500px, 94vw); padding-inline: clamp(1rem, 4vw, 4rem); text-align: left;
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-rows: 1fr auto auto auto 1fr; /* spacer rows keep the right column packed and centred */
	column-gap: clamp(2rem, 6vw, 6rem);
}
.rp-slide--split .rp-content h2 { grid-column: 1; grid-row: 1 / -1; align-self: center; text-align: left; font-size: clamp(3rem, min(6.2vw, 9vh), 6.5rem); line-height: 1.02; /* big, but never taller than the slide */ margin: 0; overflow-wrap: anywhere; }
.rp-slide--split .rp-meta, .rp-slide--split .landing-excerpt-text, .rp-slide--split .rp-readmore { grid-column: 2; }
.rp-slide--split .rp-meta { grid-row: 2; margin: 0 0 0.75rem; }
.rp-slide--split .landing-excerpt-text { grid-row: 3; }
.rp-slide--split .rp-readmore { grid-row: 4; }
.rp-slide--split .landing-excerpt-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; /* long excerpts get an ellipsis instead of growing the slide */
	max-width: none; margin: 0; text-align: left; font-size: clamp(1.1rem, 1.5vw, 1.5rem); line-height: 1.4; border-radius: 1.25rem; padding: 1.5rem 1.75rem; }
.rp-slide--split .rp-readmore { justify-self: start; }
@media (max-width: 900px) {
	.rp-slide--split .rp-content { display: block; text-align: center; }
	.rp-slide--split .rp-meta, .rp-slide--split .landing-excerpt-text, .rp-slide--split .rp-readmore { grid-row: auto; }
	.rp-slide--split .rp-content h2 { text-align: center; margin-bottom: 0.5em; }
	.rp-slide--split .landing-excerpt-text { text-align: center; }
}

/* The shared footer part, pinned to the bottom of every slide */
.rp-slide__footer {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; color: #fff;
	background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6));  /* readable over bright images */
}
.rp-slide__footer .wp-block-group { padding-block: 1rem; }

/* Slideshow mode (class added by the engine) */
.rp-stage.is-slideshow { height: 100vh; overflow: hidden; }
.is-slideshow .rp-track { display: flex; height: 100%; width: calc(var(--slides) * 100%); will-change: transform; }
.is-slideshow .rp-slide { flex: 0 0 calc(100% / var(--slides)); width: auto; height: 100vh; min-height: 0; overflow-y: auto; }
.is-slideshow .rp-reveal { clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 150% 100%); }
.rp-slide--dim .rp-meta { color: #e5e7eb; }  /* muted grey is hard to read over photos */