/* Template Showcase — frontend styles
   Scoped under .tshow-* to avoid theme collisions.
   Colors and layout are driven by CSS variables which the backend
   settings page can override (see Settings → 模板展示设置). */

:root {
	--tshow-primary: #2563eb;
	--tshow-primary-hover: #1d4ed8;
	--tshow-accent: #f0b849;
	--tshow-bg: #ffffff;
	--tshow-text: #111827;
	--tshow-muted: #6b7280;
	--tshow-border: #ececf0;
	--tshow-container: 1200px;
	--tshow-card-min: 300px;
	--tshow-card-radius: 12px;
	--tshow-card-gap: 24px;
	--tshow-card-shadow: 0 14px 30px rgba( 17, 24, 39, 0.1 );
	--tshow-card-pad: 18px;
}

.tshow-wrap {
	max-width: var( --tshow-container );
	margin: 0 auto;
	padding: 40px 20px;
	box-sizing: border-box;
}

/* Header */
.tshow-header {
	text-align: center;
	margin-bottom: 28px;
}

.tshow-header__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	color: var( --tshow-muted );
	margin: 0 0 6px;
}

.tshow-header__title {
	font-size: clamp( 1.8rem, 4vw, 2.6rem );
	margin: 0 0 8px;
	line-height: 1.15;
}

.tshow-header__subtitle {
	color: var( --tshow-muted );
	margin: 0;
	font-size: 1.05rem;
}

/* Filter bar */
.tshow-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 32px;
}

.tshow-filter__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid #e5e7eb;
	background: var( --tshow-bg );
	color: var( --tshow-text );
	text-decoration: none;
	font-size: 0.92rem;
	transition: all 0.15s ease;
}

.tshow-filter__item:hover {
	border-color: #c7cdd6;
	background: #f9fafb;
}

.tshow-filter__item.is-active {
	background: var( --tshow-primary );
	border-color: var( --tshow-primary );
	color: #fff;
}

.tshow-filter__count {
	font-size: 0.78rem;
	opacity: 0.7;
}

/* Parent category with a hover dropdown of subcategories */
.tshow-filter__group {
	position: relative;
	display: inline-flex;
}

.tshow-filter__item--parent {
	cursor: pointer;
}

/* Down-caret shown only on parents that have subcategories */
.tshow-filter__caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.7;
	transition: transform 0.15s ease;
}

.tshow-filter__group:hover .tshow-filter__caret,
.tshow-filter__group:focus-within .tshow-filter__caret {
	transform: rotate( 180deg );
}

/* The vertical dropdown menu */
.tshow-filter__submenu {
	position: absolute;
	top: calc( 100% + 8px );
	left: 0;
	z-index: 30;
	min-width: 100%;
	margin: 0;
	padding: 6px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var( --tshow-bg );
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 14px 30px rgba( 17, 24, 39, 0.14 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 4px );
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

/* Transparent bridge across the 8px gap so hover isn't lost between the
   button and the menu. */
.tshow-filter__submenu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 8px;
}

.tshow-filter__group:hover .tshow-filter__submenu,
.tshow-filter__group:focus-within .tshow-filter__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}

.tshow-filter__subitem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	white-space: nowrap;
	padding: 8px 14px;
	border-radius: 8px;
	color: var( --tshow-text );
	text-decoration: none;
	font-size: 0.9rem;
	transition: background 0.15s ease, color 0.15s ease;
}

.tshow-filter__subitem:hover,
.tshow-filter__subitem:focus-visible,
.tshow-filter__subitem.is-active {
	background: var( --tshow-primary );
	color: #fff;
}

/* Grid */
.tshow-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( var( --tshow-card-min ), 1fr ) );
	gap: var( --tshow-card-gap );
}

/*
 * When the [template_showcase] shortcode is given a columns="N" attribute it
 * sets --tshow-grid-columns on the grid; honour it as a fixed column count.
 * Without the var, the auto-fill rule above applies unchanged.
 */
.tshow-grid[style*="--tshow-grid-columns"] {
	grid-template-columns: repeat( var( --tshow-grid-columns ), minmax( 0, 1fr ) );
}

/* Card */
.tshow-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var( --tshow-bg );
	border: 1px solid var( --tshow-border );
	border-radius: var( --tshow-card-radius );
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tshow-card:hover {
	transform: translateY( -4px );
	box-shadow: var( --tshow-card-shadow );
}

.tshow-card.is-featured {
	border-color: var( --tshow-accent );
	box-shadow: 0 0 0 1px var( --tshow-accent );
}

.tshow-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var( --tshow-accent );
	color: #3a2c00;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 999px;
}

.tshow-card__media {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	background: #f3f4f6;
	overflow: hidden;
}

/*
 * Card media holds the desktop screenshot (.tshow-card__img--primary,
 * full-bleed) and, when a second gallery image exists, a phone mockup
 * (.tshow-card__phone) layered on top. The mockup is hidden until the
 * card is hovered, then the desktop shot fades out and the phone rises
 * into view holding the mobile screenshot.
 */
.tshow-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Phone mockup overlay (only rendered on cards with a second image). */
.tshow-card__phone {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.35s ease;
	/* Soft cool stage so the device reads as floating, not pasted on. */
	background: radial-gradient( 120% 95% at 50% 8%, #f5f8fc 0%, #dde6f2 52%, #c5d2e4 100% );
}

/* Reveal on whole-card hover; desktop shot fades out beneath the phone. */
.tshow-card:hover .tshow-card__media.has-hover .tshow-card__img--primary {
	opacity: 0;
}

.tshow-card:hover .tshow-card__media.has-hover .tshow-card__phone {
	opacity: 1;
}

/* Phone body: near-black device with layered shadow + thin inner rim. */
.tshow-card__phone-body {
	position: relative;
	height: 88%;
	aspect-ratio: 9 / 19.5;
	box-sizing: border-box;
	padding: 5px;
	background: #101114;
	/* Percentage radii tuned to the 9:19.5 body so corners stay visually
	   circular at any rendered card size. */
	border-radius: 13% / 6%;
	box-shadow:
		0 18px 32px -12px rgba( 15, 23, 42, 0.5 ),
		0 6px 14px -6px rgba( 15, 23, 42, 0.35 ),
		inset 0 0 0 1.5px rgba( 255, 255, 255, 0.06 );
	transform: translateY( 8px ) scale( 0.96 );
	transition: transform 0.35s ease;
}

.tshow-card:hover .tshow-card__media.has-hover .tshow-card__phone-body {
	transform: translateY( 0 ) scale( 1 );
}

/* Screen: clips the screenshot to rounded glass. */
.tshow-card__phone-screen {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 11% / 5%;
	background: #000;
}

.tshow-card__phone-shot {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center; /* Keep the mobile status bar / header in view. */
	display: block;
	/* Round the image's own corners too. The screen wrapper already clips
	   via overflow:hidden, but matching the radius here guarantees all four
	   corners stay curved even where a parent's clip is imperfect (some
	   browsers don't clip rounded corners cleanly under an opacity/transform
	   layer). Matches the screen's 11% / 5% radius. */
	border-radius: 11% / 5%;
}

/* Dynamic-island notch. */
.tshow-card__phone-screen::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX( -50% );
	width: 30%;
	height: 5px;
	background: #000;
	border-radius: 999px;
	z-index: 2;
}

/* Side buttons. */
.tshow-card__phone-body::before { /* power, right edge */
	content: "";
	position: absolute;
	right: -1.5px;
	top: 32%;
	width: 2px;
	height: 14%;
	background: #2a2e35;
	border-radius: 0 2px 2px 0;
}

.tshow-card__phone-body::after { /* volume, left edge */
	content: "";
	position: absolute;
	left: -1.5px;
	top: 26%;
	width: 2px;
	height: 11%;
	background: #2a2e35;
	border-radius: 2px 0 0 2px;
}

/* Cards without a second image keep the original subtle zoom on hover. */
.tshow-card:hover .tshow-card__media:not(.has-hover) .tshow-card__img--primary {
	transform: scale( 1.04 );
}

@media ( prefers-reduced-motion: reduce ) {
	.tshow-card__img,
	.tshow-card__phone-body {
		transition: opacity 0.35s ease;
	}

	.tshow-card__phone-body {
		transform: none;
	}

	.tshow-card:hover .tshow-card__media:not(.has-hover) .tshow-card__img--primary {
		transform: none;
	}
}

.tshow-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #9ca3af;
	font-size: 0.9rem;
}

.tshow-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var( --tshow-card-pad );
	flex: 1;
}

.tshow-card__title {
	font-size: 1.2rem;
	margin: 0;
	line-height: 1.3;
}

.tshow-card__title a {
	color: var( --tshow-text );
	text-decoration: none;
}

.tshow-card__title a:hover {
	color: var( --tshow-primary );
}

.tshow-card__desc {
	color: var( --tshow-muted );
	font-size: 0.94rem;
	margin: 0;
	line-height: 1.5;
}

.tshow-card__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.tshow-card__tags a {
	font-size: 0.78rem;
	color: #6b7280;
	text-decoration: none;
	background: #f3f4f6;
	padding: 2px 8px;
	border-radius: 6px;
}

.tshow-card__tags a:hover {
	background: #e5e7eb;
}

.tshow-card__actions {
	display: flex;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
}

/* Templates are a catalogue, not blog posts: suppress any post date or
   comments meta a theme might inject into the card markup. The first block
   covers the bundled .tshow-card; the body-scoped block covers themes that
   render the archive with their own card wrapper instead of .tshow-card. */
.tshow-card .entry-meta,
.tshow-card .posted-on,
.tshow-card .entry-date,
.tshow-card .post-date,
.tshow-card .comments-link,
.tshow-card .entry-comments,
.tshow-card time.published,
.tshow-card time.updated,
body.post-type-archive-template_demo .entry-meta,
body.post-type-archive-template_demo .posted-on,
body.post-type-archive-template_demo .entry-date,
body.post-type-archive-template_demo .post-date,
body.post-type-archive-template_demo .comments-link,
body.post-type-archive-template_demo .entry-comments,
body.post-type-archive-template_demo time.published,
body.post-type-archive-template_demo time.updated {
	display: none !important;
}

/* Buttons */
.tshow-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all 0.15s ease;
}

.tshow-btn--primary {
	background: var( --tshow-primary );
	color: #fff;
}

.tshow-btn--primary:hover {
	background: var( --tshow-primary-hover );
	color: #fff;
}

.tshow-btn--ghost {
	background: transparent;
	border-color: #d1d5db;
	color: #374151;
}

.tshow-btn--ghost:hover {
	border-color: #9ca3af;
	background: #f9fafb;
}

/* "Preview Template" button — outlined in the accent colour, fills in on hover */
.tshow-btn--preview {
	background: transparent;
	border-color: var( --tshow-primary );
	color: var( --tshow-primary );
}

.tshow-btn--preview:hover,
.tshow-btn--preview:focus-visible {
	background: var( --tshow-primary );
	border-color: var( --tshow-primary );
	color: #fff;
}

.tshow-btn--lg {
	padding: 12px 22px;
	font-size: 1rem;
}

.tshow-btn--block {
	width: 100%;
}

/* Pagination */
.tshow-pagination {
	margin-top: 36px;
	text-align: center;
}

.tshow-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 3px;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
	color: #374151;
	text-decoration: none;
}

.tshow-pagination .page-numbers.current {
	background: var( --tshow-primary );
	border-color: var( --tshow-primary );
	color: #fff;
}

/* Empty state */
.tshow-empty {
	text-align: center;
	color: var( --tshow-muted );
	padding: 60px 0;
	font-size: 1.1rem;
}

/* ---------- Single template detail ---------- */
.tshow-breadcrumb {
	font-size: 0.875rem;
	color: var( --tshow-muted );
	margin-bottom: 22px;
	display: flex;
	gap: 8px;
	align-items: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tshow-breadcrumb a {
	color: var( --tshow-primary );
	text-decoration: none;
	font-weight: 600;
}

.tshow-breadcrumb a:hover {
	text-decoration: underline;
}

/* 70 / 30 detail grid */
.tshow-detail {
	display: grid;
	grid-template-columns: minmax( 0, 70% ) minmax( 0, 30% );
	gap: 36px;
	align-items: start;
}

/* LEFT — gallery column */
.tshow-detail__gallery {
	min-width: 0;
}

.tshow-gallery-view {
	margin: 0;
}

.tshow-gallery-view__main {
	position: relative;
	border-radius: var( --tshow-card-radius );
	overflow: hidden;
	background: #0f1620;
	border: 1px solid var( --tshow-border );
	box-shadow: var( --tshow-card-shadow );
}

.tshow-gallery-view__main img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

/* Prev / next buttons over the main image */
.tshow-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba( 17, 24, 39, 0.55 );
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, background 0.15s ease, visibility 0.18s ease;
	z-index: 2;
}

.tshow-gallery-nav--prev {
	left: 14px;
}

.tshow-gallery-nav--next {
	right: 14px;
}

.tshow-gallery-nav:hover {
	background: rgba( 17, 24, 39, 0.8 );
}

.tshow-gallery-nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Reveal the buttons on hover / keyboard focus within the image area */
.tshow-gallery-view__main--has-nav:hover .tshow-gallery-nav,
.tshow-gallery-view__main--has-nav:focus-within .tshow-gallery-nav {
	opacity: 1;
	visibility: visible;
}

/* Touch devices have no hover — keep the arrows visible there */
@media ( hover: none ) {
	.tshow-gallery-view__main--has-nav .tshow-gallery-nav {
		opacity: 1;
		visibility: visible;
	}
}

.tshow-gallery-view__main--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	background: #f3f4f6;
	color: var( --tshow-muted );
	font-size: 0.95rem;
}

/* Thumbnail strip: a single horizontal row that scrolls when it overflows */
.tshow-gallery-view__thumbs-wrap {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: 14px;
}

.tshow-gallery-view__thumbs {
	list-style: none;
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

.tshow-gallery-view__thumbs::-webkit-scrollbar {
	display: none; /* WebKit */
}

.tshow-gallery-view__thumbs > li {
	flex: 0 0 110px;
}

.tshow-thumb {
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: #f3f4f6;
	width: 100%;
	aspect-ratio: 16 / 10;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.tshow-thumb:hover {
	transform: translateY( -2px );
}

.tshow-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tshow-thumb.is-active {
	border-color: var( --tshow-primary );
}

/* Circular left/right scroll buttons for the thumbnail strip */
.tshow-thumbs-scroll {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var( --tshow-border );
	border-radius: 999px;
	background: var( --tshow-bg );
	color: var( --tshow-text );
	cursor: pointer;
	box-shadow: 0 2px 6px rgba( 17, 24, 39, 0.12 );
	transition: background 0.15s ease, border-color 0.15s ease;
}

.tshow-thumbs-scroll:hover {
	background: #f9fafb;
	border-color: #c7cdd6;
}

.tshow-thumbs-scroll:focus-visible {
	outline: 2px solid var( --tshow-primary );
	outline-offset: 2px;
}

.tshow-thumbs-scroll[hidden] {
	display: none;
}

.tshow-thumbs-scroll--prev {
	margin-right: 10px;
}

.tshow-thumbs-scroll--next {
	margin-left: 10px;
}

/* Long description under the gallery */
.tshow-detail__desc {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var( --tshow-border );
}

.tshow-detail__desc-title {
	font-size: 1.4rem;
	margin: 0 0 16px;
	position: relative;
	padding-left: 16px;
	line-height: 1.3;
}

.tshow-detail__desc-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 4px;
	border-radius: 2px;
	background: var( --tshow-accent );
}

.tshow-single__desc {
	color: #374151;
	line-height: 1.8;
}

.tshow-single__desc h2,
.tshow-single__desc h3 {
	margin-top: 1.4em;
}

/* RIGHT — sticky info card column */
.tshow-detail__aside {
	min-width: 0;
	/* Fill the full height of the (taller) left column so the sticky
	   card inside has vertical room to travel as the page scrolls. The
	   grid stretches this track to match the gallery + description height;
	   without this the aside would shrink-wrap to the card and the card
	   would have nowhere to stick. */
	align-self: stretch;
	height: 100%;
}

.tshow-infocard {
	position: sticky;
	top: 24px;
	background: var( --tshow-bg );
	border: 1px solid var( --tshow-border );
	border-radius: var( --tshow-card-radius );
	padding: 28px;
	box-shadow: var( --tshow-card-shadow );
}

.tshow-infocard__badge {
	display: inline-block;
	background: var( --tshow-accent );
	color: #3a2c00;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.tshow-infocard__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

.tshow-infocard__title {
	font-size: clamp( 1.5rem, 2.2vw, 2rem );
	line-height: 1.2;
	margin: 0 0 14px;
	color: var( --tshow-text );
}

.tshow-infocard__desc {
	color: var( --tshow-muted );
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 0 22px;
}

.tshow-infocard__cta {
	gap: 8px;
}

.tshow-infocard__cta-icon {
	flex: 0 0 auto;
}

.tshow-infocard__section {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var( --tshow-border );
}

.tshow-infocard__section-title {
	margin: 0 0 12px;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --tshow-muted );
}

/* Chips (category pills) */
.tshow-chip {
	font-size: 0.82rem;
	background: #eef2ff;
	color: #4338ca;
	padding: 4px 12px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
}

.tshow-chip:hover {
	background: #e0e7ff;
}

/* Responsive: stack to single column, drop sticky */
@media ( max-width: 880px ) {
	.tshow-detail {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.tshow-detail__aside {
		order: -1; /* show the info card above the gallery on mobile */
		height: auto;
	}

	.tshow-infocard {
		position: static;
	}
}