/* ==========================================================================
   mod_webportaly_showcase - Presentation Module Styles (self-contained)
   Covers layouts: features, pricing, team, stats, cta, hero
   All design tokens provide safe fallback values so the module works
   without template-level CSS variables. Templates can override via tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared / Base
   -------------------------------------------------------------------------- */
.wp-showcase {
	margin-bottom: var(--space-xl, 2rem);
}

.wp-showcase__heading {
	text-align: center;
	margin-bottom: var(--space-sm, 0.5rem);
	font-family: var(--font-heading, inherit);
	font-size: var(--font-size-3xl, 1.75rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-heading, #212529);
}

.wp-showcase__subheading {
	text-align: center;
	color: var(--color-text-muted, #6c757d);
	margin-bottom: var(--space-xl, 2rem);
	max-width: 600px;
	margin-inline: auto;
}

.wp-showcase__grid {
	display: grid;
	grid-template-columns: repeat(var(--showcase-cols, 3), 1fr);
	gap: var(--space-lg, 1.5rem);
}

@media (max-width: 767px) {
	.wp-showcase__grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.wp-showcase__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Features / Advantages
   -------------------------------------------------------------------------- */
.wp-showcase__feature {
	text-align: center;
	padding: var(--space-lg, 1.5rem);
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e9ecef);
	border-radius: var(--card-radius, 12px);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-showcase__feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--card-shadow-hover, 0 8px 24px rgba(0, 0, 0, 0.08));
}

.wp-showcase__icon {
	display: block;
	font-size: 2.5rem;
	margin-bottom: var(--space-md, 1rem);
	line-height: 1;
}

.wp-showcase__feature-title {
	font-family: var(--font-heading, inherit);
	font-size: 1.125rem;
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-heading, #212529);
	margin-bottom: var(--space-sm, 0.5rem);
}

.wp-showcase__feature-desc {
	color: var(--color-text-muted, #6c757d);
	font-size: var(--font-size-sm, 0.875rem);
	line-height: 1.6;
}

.wp-showcase__feature-link {
	display: inline-block;
	margin-top: var(--space-sm, 0.5rem);
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: 500;
	color: var(--color-accent, var(--color-primary, #1a68d1));
	text-decoration: none;
}

.wp-showcase__feature-link:hover {
	color: var(--color-accent-hover, var(--color-primary-hover, #1557ae));
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.wp-showcase__plan {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-xl, 2rem) var(--space-lg, 1.5rem);
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e9ecef);
	border-radius: var(--card-radius, 12px);
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-showcase__plan--highlighted {
	border-color: var(--color-primary, #1a68d1);
	border-width: 2px;
	transform: scale(1.03);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.wp-showcase__plan-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-primary, #1a68d1);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	white-space: nowrap;
}

.wp-showcase__plan-name {
	font-family: var(--font-heading, inherit);
	font-size: 1.25rem;
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-heading, #212529);
	margin-bottom: var(--space-md, 1rem);
}

.wp-showcase__plan-price {
	margin-bottom: var(--space-lg, 1.5rem);
}

.wp-showcase__price-amount {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--color-heading, #212529);
}

.wp-showcase__price-period {
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text-muted, #6c757d);
}

.wp-showcase__plan-features {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-lg, 1.5rem);
	width: 100%;
	text-align: left;
}

.wp-showcase__plan-features li {
	padding: var(--space-xs, 0.375rem) 0;
	border-bottom: 1px solid var(--color-border, #e9ecef);
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text-muted, #6c757d);
}

.wp-showcase__plan-features li:last-child {
	border-bottom: none;
}

.wp-showcase__plan .wp-btn {
	margin-top: auto;
	width: 100%;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.wp-showcase__member {
	text-align: center;
	padding: var(--space-lg, 1.5rem);
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e9ecef);
	border-radius: var(--card-radius, 12px);
}

.wp-showcase__member-photo {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto var(--space-md, 1rem);
}

.wp-showcase__member-photo--empty {
	background: var(--color-gray-200, #e9ecef);
}

.wp-showcase__member-name {
	font-family: var(--font-heading, inherit);
	font-size: 1.125rem;
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-heading, #212529);
	margin-bottom: 0.25rem;
}

.wp-showcase__member-position {
	color: var(--color-accent, var(--color-primary, #1a68d1));
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: 500;
	margin-bottom: var(--space-sm, 0.5rem);
}

.wp-showcase__member-bio {
	color: var(--color-text-muted, #6c757d);
	font-size: var(--font-size-sm, 0.875rem);
	line-height: 1.6;
}

.wp-showcase__member-links {
	display: flex;
	gap: var(--space-sm, 0.5rem);
	justify-content: center;
	margin-top: var(--space-md, 1rem);
}

.wp-showcase__member-links a {
	color: var(--color-text-muted, #6c757d);
	transition: color 0.2s ease;
}

.wp-showcase__member-links a:hover {
	color: var(--color-primary, #1a68d1);
}

/* --------------------------------------------------------------------------
   Stats / Counters
   -------------------------------------------------------------------------- */
.wp-showcase__stats-row {
	display: grid;
	grid-template-columns: repeat(var(--showcase-cols, 4), 1fr);
	gap: var(--space-lg, 1.5rem);
	text-align: center;
	padding: var(--space-xl, 2rem) var(--space-lg, 1.5rem);
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e9ecef);
	border-radius: var(--card-radius, 12px);
}

@media (max-width: 600px) {
	.wp-showcase__stats-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wp-showcase__stat-number {
	display: block;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-accent, var(--color-primary, #1a68d1));
}

.wp-showcase__stat-label {
	display: block;
	margin-top: var(--space-xs, 0.375rem);
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text-muted, #6c757d);
}

/* --------------------------------------------------------------------------
   CTA Banner (full-width image with overlay)
   -------------------------------------------------------------------------- */
.wp-showcase--cta {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4xl, 6rem) var(--space-2xl, 3rem);
	overflow: hidden;
	border-radius: var(--card-radius, 12px);
	margin-bottom: var(--space-xl, 2rem);
}

.wp-showcase__cta-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--cta-overlay, 0.5));
	z-index: 1;
}

.wp-showcase__cta-content {
	position: relative;
	z-index: 2;
	max-width: 640px;
}

.wp-showcase--cta-center .wp-showcase__cta-content {
	text-align: center;
}

.wp-showcase--cta-left .wp-showcase__cta-content {
	text-align: left;
	margin-right: auto;
}

.wp-showcase__cta-label {
	display: inline-block;
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: var(--font-weight-semibold, 600);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: var(--space-sm, 0.5rem);
}

.wp-showcase__cta-title {
	font-family: var(--font-heading, inherit);
	font-size: var(--font-size-4xl, 2.25rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-white, #fff);
	line-height: var(--line-height-tight, 1.2);
	margin-bottom: var(--space-md, 1rem);
}

.wp-showcase__cta-desc {
	font-size: var(--font-size-lg, 1.125rem);
	color: rgba(255, 255, 255, 0.9);
	line-height: var(--line-height-relaxed, 1.7);
	margin-bottom: var(--space-xl, 2rem);
}

.wp-showcase--cta .wp-btn--lg {
	padding: 1rem 2rem;
	font-size: var(--font-size-base, 1rem);
	gap: var(--space-sm, 0.5rem);
}

@media (max-width: 767px) {
	.wp-showcase--cta {
		min-height: 280px;
		padding: var(--space-2xl, 3rem) var(--space-lg, 1.5rem);
	}

	.wp-showcase__cta-title {
		font-size: var(--font-size-2xl, 1.5rem);
	}

	.wp-showcase__cta-desc {
		font-size: var(--font-size-base, 1rem);
	}
}

/* --------------------------------------------------------------------------
   Hero / Slideshow (full-width slides with auto-rotate)
   -------------------------------------------------------------------------- */
.wp-showcase--hero {
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
}

.wp-hero__track {
	position: relative;
	width: 100%;
	height: 560px;
}

.wp-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4xl, 6rem) var(--space-2xl, 3rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease, visibility 0.8s ease;
	z-index: 1;
}

.wp-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.wp-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--cta-overlay, 0.4));
	z-index: 1;
}

.wp-hero__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
	width: 100%;
}

.wp-hero__slide--center .wp-hero__content {
	text-align: center;
	margin: 0 auto;
}

.wp-hero__slide--left .wp-hero__content {
	text-align: left;
	margin-right: auto;
}

.wp-hero__overline {
	display: inline-block;
	margin-bottom: var(--space-sm, 0.5rem);
	font-size: var(--font-size-xs, 0.75rem);
	font-weight: var(--font-weight-semibold, 600);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-accent, #C5A059);
}

.wp-hero__title {
	font-family: var(--font-heading, inherit);
	font-size: var(--font-size-5xl, 3rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-white, #fff);
	line-height: var(--line-height-tight, 1.2);
	margin-bottom: var(--space-md, 1rem);
}

.wp-hero__desc {
	font-size: var(--font-size-xl, 1.25rem);
	color: rgba(255, 255, 255, 0.9);
	line-height: var(--line-height-relaxed, 1.7);
	margin-bottom: var(--space-xl, 2rem);
}

.wp-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md, 1rem);
}

.wp-hero__slide--center .wp-hero__buttons {
	justify-content: center;
}

.wp-hero__buttons .wp-btn--lg {
	padding: 1rem 2rem;
	font-size: var(--font-size-base, 1rem);
}

.wp-hero__buttons .wp-btn--light {
	background: transparent;
	color: var(--color-white, #fff);
	border-color: rgba(255, 255, 255, 0.5);
}

.wp-hero__buttons .wp-btn--light:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: var(--color-white, #fff);
	color: var(--color-white, #fff);
}

.wp-hero__nav {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--space-md, 1rem);
}

.wp-hero__arrow {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background: rgba(0, 0, 0, 0.3);
	color: var(--color-white, #fff);
	border: none;
	border-radius: var(--radius-full, 999px);
	backdrop-filter: blur(4px);
	cursor: pointer;
	transition: background var(--transition-fast, 0.15s ease);
}

.wp-hero__arrow:hover {
	background: rgba(0, 0, 0, 0.6);
}

.wp-hero__dots {
	position: absolute;
	bottom: var(--space-lg, 1.5rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: var(--space-sm, 0.5rem);
}

.wp-hero__dot {
	width: 10px;
	height: 10px;
	border-radius: var(--radius-full, 999px);
	background: rgba(255, 255, 255, 0.4);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background var(--transition-fast, 0.15s ease), transform var(--transition-fast, 0.15s ease);
}

.wp-hero__dot.is-active {
	background: var(--color-white, #fff);
	transform: scale(1.3);
}

.wp-hero__dot:hover {
	background: rgba(255, 255, 255, 0.8);
}

@media (max-width: 767px) {
	.wp-hero__track {
		height: 440px;
	}

	.wp-hero__slide {
		padding: var(--space-2xl, 3rem) var(--space-lg, 1.5rem);
	}

	.wp-hero__title {
		font-size: var(--font-size-3xl, 1.875rem);
	}

	.wp-hero__desc {
		font-size: var(--font-size-base, 1rem);
	}

	.wp-hero__arrow {
		width: 2.5rem;
		height: 2.5rem;
	}

	.wp-hero__buttons {
		flex-direction: column;
	}

	.wp-hero__buttons .wp-btn--lg {
		width: 100%;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Buttons (.wp-btn) — shared across showcase layouts
   -------------------------------------------------------------------------- */
.wp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs, 0.375rem);
	padding: 0.6rem 1.2rem;
	font-size: var(--font-size-base, 1rem);
	font-weight: var(--font-weight-medium, 500);
	border-radius: var(--btn-radius, 4px);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.15s ease;
	line-height: 1.2;
	white-space: nowrap;
}

.wp-btn--primary {
	background: var(--color-primary, #1a68d1);
	color: var(--color-on-primary, #fff);
	border-color: var(--color-primary, #1a68d1);
}

.wp-btn--primary:hover {
	background: var(--color-primary-hover, #1557ae);
	border-color: var(--color-primary-hover, #1557ae);
	color: var(--color-on-primary, #fff);
	text-decoration: none;
}

.wp-btn--outline {
	background: transparent;
	color: var(--color-primary, #1a68d1);
	border-color: var(--color-primary, #1a68d1);
}

.wp-btn--outline:hover {
	background: var(--color-primary, #1a68d1);
	color: var(--color-on-primary, #fff);
	text-decoration: none;
}

.wp-btn--light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.65);
}

.wp-btn--light:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: #fff;
	color: #fff;
}

.wp-btn--lg { padding: 0.85rem 1.75rem; font-size: 1.05rem; }
.wp-btn--sm { padding: 0.35rem 0.85rem; font-size: var(--font-size-sm, 0.875rem); }
.wp-btn--pill { border-radius: 999px; }