/* Post Showcase Carousel — frontend styles */

.psc-wrap {
	position: relative;
	--psc-radius: 14px;
	--psc-gap: 18px;
	--psc-card-bg: #fff;
	--psc-title-color: #1a1a1a;
	--psc-text-color: #4a4a4a;
	--psc-overlay-rgba: rgba(0, 0, 0, 0.45);
	--psc-shadow: 0 6px 20px rgba(0,0,0,0.10);
	--psc-shadow-hover: 0 16px 34px rgba(0,0,0,0.18);
	--psc-line-color: #dcdce2;
	--psc-dot-color: #fff;
	box-sizing: border-box;
}
.psc-wrap * { box-sizing: border-box; }

/* ---------- Track layouts ---------- */

.psc-vertical .psc-track {
	display: grid;
	grid-template-columns: repeat(var(--psc-columns, 3), 1fr);
	gap: var(--psc-gap);
}
@media (max-width: 900px) {
	.psc-vertical .psc-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.psc-vertical .psc-track { grid-template-columns: 1fr; }
}

.psc-horizontal .psc-track {
	display: flex;
	gap: var(--psc-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 6px 4px 18px;
	scrollbar-width: thin;
}
.psc-horizontal .psc-track::-webkit-scrollbar { height: 8px; }
.psc-horizontal .psc-track::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 8px; }

.psc-horizontal .psc-card {
	flex: 0 0 auto;
	width: min(var(--psc-card-w, 300px), 78vw);
	scroll-snap-align: start;
}

/* ---------- Image size presets ---------- */

.psc-size-small  { --psc-card-w: 200px; --psc-image-max-h: 150px; }
.psc-size-medium { --psc-card-w: 260px; --psc-image-max-h: 240px; }
.psc-size-large  { --psc-card-w: 340px; --psc-image-max-h: 340px; }

/* ---------- Timeline: horizontal (scrolling line with date markers) ---------- */

.psc-timeline-horizontal .psc-track {
	display: flex;
	align-items: flex-start;
	gap: var(--psc-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 76px 4px 18px;
	scrollbar-width: thin;
}
.psc-timeline-horizontal .psc-track::-webkit-scrollbar { height: 8px; }
.psc-timeline-horizontal .psc-track::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 8px; }

.psc-timeline-horizontal .psc-timeline-item {
	position: relative;
	flex: 0 0 auto;
	width: min(var(--psc-card-w, 260px), 72vw);
	scroll-snap-align: start;
}

.psc-timeline-horizontal .psc-timeline-marker {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 8px;
	line-height: 1.2;
}
.psc-timeline-horizontal .psc-timeline-item:not(:last-child) .psc-timeline-marker::after {
	content: '';
	position: absolute;
	bottom: 6.5px;
	left: 7px;
	width: calc(100% + var(--psc-gap));
	height: 3px;
	background: var(--psc-line-color);
	z-index: 0;
}
.psc-timeline-horizontal .psc-timeline-date {
	display: block;
	font-size: var(--psc-date-size, .82rem);
	font-weight: 700;
	color: var(--psc-date-color, var(--psc-title-color));
}
.psc-timeline-horizontal .psc-timeline-dot {
	position: relative;
	z-index: 1;
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--psc-dot-color);
	border: 3px solid var(--psc-date-color, var(--psc-title-color));
}

/* ---------- Timeline: vertical (alternating left/right) ---------- */

.psc-timeline-vertical .psc-track {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 44px;
	padding: 12px 0;
}
.psc-timeline-vertical .psc-track::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--psc-line-color);
	transform: translateX(-50%);
}
.psc-timeline-vertical .psc-timeline-item {
	position: relative;
	width: calc(50% - 34px);
}
.psc-timeline-vertical .psc-timeline-item:nth-child(odd) {
	margin-right: auto;
}
.psc-timeline-vertical .psc-timeline-item:nth-child(even) {
	margin-left: auto;
}
.psc-timeline-vertical .psc-timeline-marker {
	position: absolute;
	top: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.2;
}
/* Odd cards sit left of the line: dot lands on the line, date extends
   RIGHT into the empty half (never over the card/image). */
.psc-timeline-vertical .psc-timeline-item:nth-child(odd) .psc-timeline-marker {
	left: calc(100% + 26px);
	flex-direction: row;
}
/* Even cards sit right of the line: date extends LEFT into the empty half. */
.psc-timeline-vertical .psc-timeline-item:nth-child(even) .psc-timeline-marker {
	right: calc(100% + 26px);
	flex-direction: row-reverse;
}
.psc-timeline-vertical .psc-timeline-dot {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--psc-dot-color);
	border: 3px solid var(--psc-date-color, var(--psc-title-color));
}
.psc-timeline-vertical .psc-timeline-date {
	white-space: nowrap;
	font-size: var(--psc-date-size, .82rem);
	font-weight: 700;
	color: var(--psc-date-color, var(--psc-title-color));
}
@media (max-width: 700px) {
	.psc-timeline-vertical .psc-track::before { left: 18px; }
	.psc-timeline-vertical .psc-timeline-item,
	.psc-timeline-vertical .psc-timeline-item:nth-child(odd),
	.psc-timeline-vertical .psc-timeline-item:nth-child(even) {
		width: calc(100% - 54px);
		margin-left: 54px;
		margin-right: 0;
	}
	.psc-timeline-vertical .psc-timeline-item:nth-child(odd) .psc-timeline-marker,
	.psc-timeline-vertical .psc-timeline-item:nth-child(even) .psc-timeline-marker {
		left: -44px;
		right: auto;
		flex-direction: row;
	}
	/* Narrow gutter can't fit horizontal text beside the dot; show the
	   date inside the card instead. */
	.psc-timeline-vertical .psc-timeline-date { display: none; }
	.psc-timeline-vertical .psc-card-date { display: block; }
}

/* In-card date label for timeline items: hidden by default, enabled where
   the on-line date can't fit (vertical timeline on small screens). */
.psc-card-date {
	display: none;
	font-size: var(--psc-date-size, .78rem);
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--psc-date-color, var(--psc-title-color));
	margin-bottom: 4px;
}

/* ---------- Card ---------- */

.psc-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: var(--psc-radius);
	background: var(--psc-card-bg);
	box-shadow: var(--psc-shadow);
	overflow: hidden;
	transform-style: preserve-3d;
	transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
	will-change: transform;
}

/* Timeline items carry markers positioned outside the card box, so the
   clipping that rounds the image corners moves to .psc-card-inner. */
.psc-timeline .psc-card {
	overflow: visible;
	background: transparent;
	box-shadow: none;
}
.psc-timeline .psc-card-inner {
	border-radius: var(--psc-radius);
	background: var(--psc-card-bg);
	box-shadow: var(--psc-shadow);
	overflow: hidden;
	transition: box-shadow .35s ease;
}
.psc-timeline .psc-card:hover .psc-card-inner {
	box-shadow: var(--psc-shadow-hover);
}

.psc-card-inner {
	display: block;
}

.psc-image-wrap {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--psc-image-ratio, 16 / 10);
	max-height: var(--psc-image-max-h, none);
	overflow: hidden;
	background: #e9e9ec;
	perspective: 900px;
}

.psc-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.02);
	transition: transform .6s cubic-bezier(.2,.7,.3,1), filter .6s ease;
}

.psc-image-placeholder {
	background: linear-gradient(135deg, #d8dbe3, #eef0f4);
}

.psc-image-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--psc-overlay-rgba), rgba(0,0,0,0) 55%);
	opacity: 0;
	transition: opacity .35s ease;
}

.psc-content {
	display: block;
	padding: 14px 16px 18px;
}

.psc-title {
	display: block;
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.35;
	margin-bottom: 6px;
	color: var(--psc-title-color);
}

.psc-excerpt {
	display: block;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--psc-text-color);
}

/* ---------- Image slider (per-post showcase gallery) ---------- */

.psc-has-slider .psc-slide {
	opacity: 0;
	transition: opacity .9s ease;
}
.psc-has-slider .psc-slide.psc-slide-active {
	opacity: 1;
}

/* ---------- Hover: tilt + zoom (industry-standard combo) ---------- */

.psc-anim-tilt .psc-card,
.psc-anim-both .psc-card {
	transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0);
}
.psc-anim-tilt .psc-card:hover,
.psc-anim-both .psc-card:hover {
	box-shadow: var(--psc-shadow-hover);
}
.psc-anim-tilt .psc-card:hover .psc-image,
.psc-anim-both .psc-card:hover .psc-image {
	transform: scale(1.12);
}
.psc-anim-tilt .psc-card:hover .psc-image-overlay,
.psc-anim-both .psc-card:hover .psc-image-overlay {
	opacity: 1;
}

/* Fallback for touch / reduced-motion / animation=none: gentle zoom only */
.psc-anim-none .psc-card:hover .psc-image {
	transform: scale(1.04);
}

/* ---------- Showpiece hover animations ---------- */

/* Flip: image does a full 3D Y-axis spin on hover. */
.psc-anim-flip .psc-image {
	transition: transform .8s cubic-bezier(.3,.6,.3,1);
}
.psc-anim-flip .psc-card:hover .psc-image {
	transform: rotateY(360deg) scale(1.06);
}

/* Spin: image rotates a full turn in-plane; extra scale keeps the
   corners covered while it turns. */
.psc-anim-spin .psc-image {
	transition: transform .9s cubic-bezier(.3,.6,.3,1);
}
.psc-anim-spin .psc-card:hover .psc-image {
	transform: rotate(360deg) scale(1.45);
}

/* Ken Burns: slow, continuous cinematic drift; speeds subtly on hover. */
@keyframes psc-kenburns {
	from { transform: scale(1.06) translate(0, 0); }
	to   { transform: scale(1.2) translate(-2.5%, 2%); }
}
.psc-anim-kenburns .psc-image {
	animation: psc-kenburns 14s ease-in-out infinite alternate;
}
.psc-anim-kenburns .psc-card:hover .psc-image {
	animation-duration: 6s;
}

/* Showpiece modes also get the gradient overlay + shadow lift on hover. */
.psc-anim-flip .psc-card:hover .psc-image-overlay,
.psc-anim-spin .psc-card:hover .psc-image-overlay,
.psc-anim-kenburns .psc-card:hover .psc-image-overlay {
	opacity: 1;
}
.psc-anim-flip .psc-card:hover,
.psc-anim-spin .psc-card:hover,
.psc-anim-kenburns .psc-card:hover {
	box-shadow: var(--psc-shadow-hover);
}

/* ---------- Scroll reveal ---------- */

.psc-anim-reveal .psc-card,
.psc-anim-both .psc-card,
.psc-anim-flip .psc-card,
.psc-anim-spin .psc-card,
.psc-anim-kenburns .psc-card {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.psc-anim-reveal .psc-card.psc-visible,
.psc-anim-both .psc-card.psc-visible,
.psc-anim-flip .psc-card.psc-visible,
.psc-anim-spin .psc-card.psc-visible,
.psc-anim-kenburns .psc-card.psc-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.psc-card, .psc-image, .psc-image-overlay {
		transition: none !important;
		transform: none !important;
		animation: none !important;
	}
	.psc-anim-reveal .psc-card, .psc-anim-both .psc-card,
	.psc-anim-flip .psc-card, .psc-anim-spin .psc-card, .psc-anim-kenburns .psc-card {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Arrows ---------- */

.psc-arrow {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.92);
	box-shadow: 0 4px 14px rgba(0,0,0,0.18);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, transform .2s ease;
}
.psc-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.psc-arrow-prev { left: -6px; }
.psc-arrow-next { right: -6px; }
@media (max-width: 640px) {
	.psc-arrow { display: none; }
}