/*
 * @file    ubuveil/starter-sections.css
 * @package Ubuveil
 *
 * Section styles for the Ubuveil Core starter content.
 */

/*--------------------------------------------------------------
# Section frames
--------------------------------------------------------------*/
.ubv-hero,
.ubv-page-hero,
.ubv-features,
.ubv-testimonials,
.ubv-values,
.ubv-timeline,
.ubv-services,
.ubv-faq,
.ubv-contact,
.ubv-cta-banner{
	padding: 64px 0;
	position: relative;
}
.ubv-hero,
.ubv-page-hero{
	padding: 88px 0 64px;
}
.ubv-trust-strip{
	padding: 28px 0;
	border-top: 1px solid var(--ubv-line);
	border-bottom: 1px solid var(--ubv-line);
	margin: 32px 0;
}

.ubv-features,
.ubv-testimonials,
.ubv-values,
.ubv-timeline,
.ubv-services,
.ubv-faq,
.ubv-contact{
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 28px;
	padding-right: 28px;
}

@media (max-width: 640px){
	.ubv-features,
	.ubv-testimonials,
	.ubv-values,
	.ubv-timeline,
	.ubv-services,
	.ubv-faq,
	.ubv-contact{
		padding-left: 18px;
		padding-right: 18px;
	}
}

.ubv-features > h2,
.ubv-testimonials > h2,
.ubv-values > h2,
.ubv-timeline > h2,
.ubv-faq > h2{
	font-size: clamp(1.6rem, 2.6vw, 2rem);
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.ubv-section-lede{
	font-size: 15px;
	color: var(--ubv-ink-soft);
	margin: 0 0 32px;
	max-width: 62ch;
}

/*--------------------------------------------------------------
# Eyebrow
--------------------------------------------------------------*/
.ubv-eyebrow{
	display: inline-block;
	margin: 0 0 20px;
	font-family: var(--ubv-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ubv-accent-deep);
	background: rgba(30,127,224,0.12);
	border: 1px solid rgba(30,127,224,0.3);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 8px 16px;
	border-radius: var(--ubv-radius-pill);
	box-shadow: 0 2px 10px rgba(30,127,224,0.10);
}
.ubv-eyebrow strong{ font-weight: 700; }

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.ubv-hero{
	max-width: 1280px;
	margin: 0 auto;
	padding-left: 28px;
	padding-right: 28px;
	overflow: hidden;
}
.ubv-hero::before{
	content: "";
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 640px;
	background:
		radial-gradient(circle at 15% 20%, rgba(30,127,224,0.20), transparent 55%),
		radial-gradient(circle at 85% 10%, rgba(199,154,62,0.14), transparent 50%);
	z-index: 0;
	pointer-events: none;
}
.ubv-hero > *{
	position: relative;
	z-index: 1;
}
.ubv-hero h1{
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	line-height: 1.04;
	margin: 0 0 20px;
	max-width: 640px;
	letter-spacing: -0.02em;
}
.ubv-lede{
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--ubv-ink-soft);
	max-width: 520px;
	margin: 0 0 28px;
}
.ubv-hero-ctas{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

/*--------------------------------------------------------------
# Page hero
--------------------------------------------------------------*/
.ubv-page-hero{
	max-width: 1280px;
	margin: 0 auto;
	padding-left: 28px;
	padding-right: 28px;
}
.ubv-page-hero h1{
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	line-height: 1.1;
	margin: 0 0 14px;
	max-width: 720px;
	letter-spacing: -0.02em;
}
.ubv-page-hero .ubv-lede{ max-width: 640px; }

/*--------------------------------------------------------------
# Trust strip
--------------------------------------------------------------*/
.ubv-trust-strip{
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 28px;
	padding-right: 28px;
}
.ubv-trust-list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px;
}
.ubv-trust-list li{
	font-size: 13px;
	font-weight: 600;
	color: var(--ubv-ink-soft);
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
}
.ubv-trust-list li::before{
	content: "✓";
	color: var(--ubv-gold);
	font-weight: 800;
}

/*--------------------------------------------------------------
# Card grids
--------------------------------------------------------------*/
.ubv-feature-grid,
.ubv-testimonial-grid,
.ubv-value-grid,
.ubv-tier-grid{
	display: grid;
	gap: 20px;
	margin-top: 12px;
}
.ubv-feature-grid,
.ubv-value-grid,
.ubv-tier-grid{
	grid-template-columns: repeat(3, 1fr);
}
.ubv-testimonial-grid{
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){
	.ubv-feature-grid,
	.ubv-value-grid,
	.ubv-tier-grid{ grid-template-columns: repeat(2, 1fr); }
	.ubv-testimonial-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
	.ubv-feature-grid,
	.ubv-value-grid,
	.ubv-tier-grid{ grid-template-columns: 1fr; }
}

.ubv-feature-column,
.ubv-testimonial-column,
.ubv-value-column,
.ubv-tier-column{
	display: flex;
}

.ubv-card{
	position: relative;
	background: var(--ubv-glass-bg-strong);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid var(--ubv-glass-border);
	border-radius: var(--ubv-radius-md);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
	overflow: hidden;
	box-shadow:
		0 8px 24px -8px rgba(15,23,42,0.10),
		inset 0 1px 0 rgba(255,255,255,0.6);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ubv-card::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
	opacity: 0.8;
	pointer-events: none;
}
.ubv-card:hover{
	transform: translateY(-4px);
	box-shadow:
		0 20px 40px -12px rgba(15,23,42,0.18),
		inset 0 1px 0 rgba(255,255,255,0.7);
	border-color: rgba(30,127,224,0.35);
}
.ubv-card h3{
	font-size: 17px;
	margin: 0;
	letter-spacing: -0.01em;
	color: var(--ubv-ink);
}
.ubv-card p{
	font-size: 14px;
	line-height: 1.6;
	color: var(--ubv-ink-soft);
	margin: 0;
}

.ubv-testimonial-card blockquote{
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ubv-ink);
	font-style: normal;
	quotes: none;
}
.ubv-testimonial-meta{
	font-size: 12.5px;
	color: var(--ubv-ink-faint);
	margin: 0;
}
.ubv-testimonial-meta strong{
	color: var(--ubv-ink-soft);
	font-weight: 700;
}

/*--------------------------------------------------------------
# Timeline
--------------------------------------------------------------*/
.ubv-timeline{
	padding-top: 40px;
	padding-bottom: 40px;
}
.ubv-timeline-step{
	border-left: 2px solid var(--ubv-line);
	padding: 0 0 32px 28px;
	position: relative;
	margin-left: 6px;
}
.ubv-timeline-step:last-child{
	border-left-color: transparent;
	padding-bottom: 0;
}
.ubv-timeline-step::before{
	content: "";
	position: absolute;
	left: -8px;
	top: 4px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ubv-gold);
	box-shadow: 0 0 0 4px var(--ubv-paper);
}
.ubv-timeline-label{
	font-family: var(--ubv-font-mono);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ubv-accent);
	margin: 0 0 6px;
}
.ubv-timeline-step h3{
	font-size: 17px;
	margin: 0 0 6px;
}
.ubv-timeline-step p{
	font-size: 14px;
	color: var(--ubv-ink-soft);
	line-height: 1.6;
	margin: 0;
	max-width: 620px;
}

/*--------------------------------------------------------------
# Service tiers
--------------------------------------------------------------*/
.ubv-tier-card{
	padding: 30px;
	gap: 14px;
}
.ubv-tier-tag{
	font-family: var(--ubv-font-mono);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ubv-accent);
	margin: 0;
}
.ubv-tier-card h3{
	font-size: 20px;
	margin: 0;
}
.ubv-tier-price{
	font-size: 26px;
	font-weight: 800;
	color: var(--ubv-ink);
	margin: 0;
	letter-spacing: -0.02em;
	font-family: var(--ubv-font-mono);
}
.ubv-tier-card ul{
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ubv-tier-card li{
	font-size: 13.5px;
	color: var(--ubv-ink-soft);
	display: flex;
	gap: 8px;
	line-height: 1.5;
}
.ubv-tier-card li::before{
	content: "✓";
	color: #1F9D55;
	font-weight: 700;
	flex-shrink: 0;
}

/*--------------------------------------------------------------
# FAQ
--------------------------------------------------------------*/
.ubv-faq h3{
	font-size: 16px;
	margin: 24px 0 8px;
	letter-spacing: -0.01em;
}
.ubv-faq h3:first-of-type{ margin-top: 12px; }
.ubv-faq p{
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ubv-ink-soft);
	margin: 0 0 8px;
	max-width: 720px;
}

/*--------------------------------------------------------------
# Contact grid
--------------------------------------------------------------*/
.ubv-contact-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 12px;
}
@media (max-width: 860px){
	.ubv-contact-grid{ grid-template-columns: 1fr; }
}
.ubv-contact-info,
.ubv-contact-form{
	padding: 28px;
	gap: 14px;
}
.ubv-contact-info h3,
.ubv-contact-form h3{
	font-size: 17px;
	margin: 0 0 8px;
}
.ubv-contact-info ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ubv-contact-info li{
	font-size: 14px;
	line-height: 1.55;
	color: var(--ubv-ink-soft);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ubv-line);
}
.ubv-contact-info li:last-child{
	border-bottom: none;
	padding-bottom: 0;
}
.ubv-contact-info li strong{
	color: var(--ubv-ink);
	font-weight: 700;
	display: inline-block;
	min-width: 80px;
}

/*--------------------------------------------------------------
# Map placeholder
--------------------------------------------------------------*/
.ubv-map-placeholder{
	max-width: 1280px;
	margin: 0 auto 40px;
	padding: 0 28px;
}
.ubv-map-caption{
	background: repeating-linear-gradient(
		45deg,
		var(--ubv-paper-deep),
		var(--ubv-paper-deep) 10px,
		var(--ubv-white) 10px,
		var(--ubv-white) 20px
	);
	border: 1px solid var(--ubv-line);
	border-radius: var(--ubv-radius-md);
	padding: 60px 24px;
	text-align: center;
	font-family: var(--ubv-font-mono);
	font-size: 12.5px;
	color: var(--ubv-ink-faint);
	margin: 0;
}

/*--------------------------------------------------------------
# CTA banner — generic-bg.png behind blue gradient
--------------------------------------------------------------*/
.ubv-cta-banner{
	position: relative;
	max-width: 1280px;
	margin: 40px auto;
	padding: 56px 48px;
	border-radius: var(--ubv-radius-lg);
	background:
		linear-gradient(120deg, rgba(18,32,58,0.90), rgba(30,127,224,0.80)),
		url('https://probestsa.co.za/wp-content/uploads/2026/09/generic-bg.png') center / cover no-repeat;
	display: grid;
	gap: 14px;
	align-items: center;
	box-shadow: 0 24px 60px -20px rgba(30,127,224,0.5);
	overflow: hidden;
}

.ubv-cta-banner::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
	pointer-events: none;
}

.ubv-cta-banner h2{
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	margin: 0;
	color: var(--ubv-gold);
	letter-spacing: -0.01em;
	text-shadow: 0 2px 8px rgba(0,0,0,0.3);
	position: relative;
	z-index: 1;
}
.ubv-cta-banner p{
	font-size: 15px;
	margin: 0;
	max-width: 620px;
	line-height: 1.6;
	color: rgba(255,255,255,0.94);
	text-shadow: 0 1px 4px rgba(0,0,0,0.25);
	position: relative;
	z-index: 1;
}
.ubv-cta-buttons{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
	position: relative;
	z-index: 1;
}
.ubv-cta-banner .wp-block-button__link{
	background: #fff;
	color: #0B0F14 !important;
	font-weight: 800;
}
.ubv-cta-banner .wp-block-button__link:hover{
	background: var(--ubv-gold) !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}
.ubv-cta-banner .is-style-outline .wp-block-button__link,
:root[data-ubv-theme="dark"] .ubv-cta-banner .is-style-outline .wp-block-button__link{
	background: transparent !important;
	border: 2px solid rgba(255,255,255,0.7) !important;
	color: #fff !important;
}
.ubv-cta-banner .is-style-outline .wp-block-button__link:hover,
:root[data-ubv-theme="dark"] .ubv-cta-banner .is-style-outline .wp-block-button__link:hover{
	background: var(--ubv-gold) !important;
	border-color: var(--ubv-gold) !important;
	color: #0B0F14 !important;
}

/*--------------------------------------------------------------
# Blog intro
--------------------------------------------------------------*/
.ubv-page-hero--blog{ padding-bottom: 32px; }