/*
 * BizSiteBuilder, feature-v2.css
 * Feature deep-dive page styles. Jimdo-style two-column hero,
 * step cards, benefits grid, related-feature cards, placeholder.
 */

/* ============================================================
   FEATURE HERO (Jimdo two-column, bigger than homepage rows)
   ============================================================ */
.sb-feat-hero {
	position: relative;
	padding-block: 3.5rem 4.5rem;
	background: #FFFFFF;
	overflow: hidden;
	isolation: isolate;
}
@media (min-width: 900px) { .sb-feat-hero { padding-block: 5rem 6rem; } }

.sb-feat-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}
@media (min-width: 900px) {
	.sb-feat-hero__grid { grid-template-columns: 1.05fr 1fr; gap: 4.5rem; }
}

.sb-feat-hero__crumb {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--muted-foreground);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 1.25rem;
	transition: color .18s ease;
}
.sb-feat-hero__crumb:hover { color: var(--primary); }
.sb-feat-hero__crumb svg { width: 0.85rem; height: 0.85rem; }

.sb-feat-hero__title {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	font-weight: 800;
	color: var(--foreground);
	margin-bottom: 0.9rem;
}

.sb-feat-hero__tagline {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	color: var(--primary);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-bottom: 1.25rem;
}

.sb-feat-hero__sub {
	font-size: 1.05rem;
	color: var(--text);
	line-height: 1.6;
	margin-bottom: 1.75rem;
	max-width: 34rem;
}

.sb-feat-hero__bullets {
	list-style: none; padding: 0; margin: 0 0 2rem;
	display: flex; flex-direction: column; gap: 0.7rem;
}
.sb-feat-hero__bullets li {
	display: flex; align-items: flex-start; gap: 0.6rem;
	font-size: 0.98rem; color: var(--text); font-weight: 500;
}
.sb-feat-hero__bullets li svg {
	width: 1.1rem; height: 1.1rem;
	color: var(--primary);
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.sb-feat-hero__ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Visual frame, same recipe as sb-feature__visual but larger and pastel-scoped */
.sb-feat-hero__visual {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	aspect-ratio: 4/3;
	box-shadow: 0 30px 60px -22px rgba(10, 18, 48, 0.20);
}
.sb-feat-hero__visual svg { width: 100%; height: 100%; display: block; }
.sb-feat-hero__visual--blue     { background: var(--pastel-blue); }
.sb-feat-hero__visual--mint     { background: var(--pastel-mint); }
.sb-feat-hero__visual--lavender { background: var(--pastel-lavender); }
.sb-feat-hero__visual--peach    { background: var(--pastel-peach); }
.sb-feat-hero__visual--cream    { background: var(--pastel-cream); }
.sb-feat-hero__visual--pink     { background: var(--pastel-pink); }

.sb-feat-hero__badge {
	position: absolute;
	right: 1rem; bottom: 1rem;
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.5rem 0.85rem;
	border-radius: var(--radius);
	background: #FFFFFF;
	box-shadow: 0 8px 24px -8px rgba(10, 18, 48, 0.25);
	font-size: 0.78rem; font-weight: 700; color: var(--foreground);
}
.sb-feat-hero__badge svg {
	width: 0.9rem; height: 0.9rem;
	color: var(--primary);
}

/* ============================================================
   LONG INTRO (rich narrative block)
   ============================================================ */
.sb-feat-intro { padding-block: 4.5rem; }
.sb-feat-intro__inner {
	max-width: 780px;
	margin-inline: auto;
}
.sb-feat-intro__title {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--foreground);
	margin: 1rem 0 1.5rem;
	max-width: 42ch;
}
.sb-feat-intro__inner p {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--text);
	margin-bottom: 1.25rem;
}
.sb-feat-intro__inner p:last-child { margin-bottom: 0; }

/* ============================================================
   HOW IT WORKS steps
   ============================================================ */
.sb-feat-steps { padding-block: 5rem; }

.sb-feat-steps__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 3rem;
}
@media (min-width: 700px) { .sb-feat-steps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sb-feat-steps__grid { grid-template-columns: repeat(4, 1fr); } }

.sb-feat-step {
	background: #FFFFFF;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.75rem 1.5rem;
	position: relative;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sb-feat-step:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px -16px rgba(10, 18, 48, 0.15);
}
.sb-feat-step__num {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 2.4rem; height: 2.4rem;
	border-radius: 10px;
	background: var(--primary);
	color: #FFFFFF;
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: -0.02em;
	margin-bottom: 1rem;
}
.sb-feat-step h3 {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--foreground);
	letter-spacing: -0.01em;
	margin-bottom: 0.5rem;
	line-height: 1.3;
}
.sb-feat-step p {
	font-size: 0.9rem;
	color: var(--muted-foreground);
	line-height: 1.55;
}

/* ============================================================
   DEMO SECTION (big screenshot / placeholder)
   ============================================================ */
.sb-feat-demo { padding-block: 5rem; }
.sb-feat-demo__frame {
	max-width: 1000px;
	margin: 3rem auto 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: 0 40px 80px -20px rgba(10, 18, 48, 0.25);
	background: #FFFFFF;
}

/* ============================================================
   BENEFITS GRID (6 cards)
   ============================================================ */
.sb-feat-benefits { padding-block: 5rem; }
.sb-feat-benefits__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 3rem;
}
@media (min-width: 700px) { .sb-feat-benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sb-feat-benefits__grid { grid-template-columns: repeat(3, 1fr); } }

.sb-feat-benefit {
	background: #FFFFFF;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.75rem 1.5rem;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sb-feat-benefit:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px -16px rgba(10, 18, 48, 0.12);
}
.sb-feat-benefit .icon-tile {
	width: 2.5rem; height: 2.5rem;
	border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--accent);
	color: var(--primary);
	margin-bottom: 1rem;
}
.sb-feat-benefit .icon-tile svg { width: 1.1rem; height: 1.1rem; }
.sb-feat-benefit h3 {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--foreground);
	letter-spacing: -0.01em;
	margin-bottom: 0.4rem;
	line-height: 1.3;
}
.sb-feat-benefit p {
	font-size: 0.9rem;
	color: var(--muted-foreground);
	line-height: 1.55;
}

/* ============================================================
   PAIRS WELL WITH (related feature cards)
   ============================================================ */
.sb-feat-related { padding-block: 5rem; }
.sb-feat-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: 3rem;
}
@media (min-width: 900px) { .sb-feat-related__grid { grid-template-columns: repeat(3, 1fr); } }

.sb-feat-related a.sb-tcard {
	transition: transform .2s ease, box-shadow .2s ease;
}
.sb-feat-related a.sb-tcard:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -16px rgba(10, 18, 48, 0.15);
}
.sb-feat-related .sb-tcard .icon-tile {
	width: 2.5rem; height: 2.5rem;
	border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--primary);
}
.sb-feat-related .sb-tcard .icon-tile svg { width: 1.15rem; height: 1.15rem; }

/* ============================================================
   PLACEHOLDER IMAGE (drop-in replacement for photos)
   ============================================================ */
.sb-placeholder {
	background: repeating-linear-gradient(45deg, #FAF6F3, #FAF6F3 12px, #EBEBF2 12px, #EBEBF2 24px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	position: relative;
	width: 100%;
}
.sb-placeholder__inner {
	background: rgba(255, 255, 255, 0.92);
	border: 1.5px dashed var(--border);
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	text-align: center;
	max-width: 80%;
	backdrop-filter: blur(4px);
}
.sb-placeholder__icon {
	display: inline-flex;
	color: var(--muted-foreground);
	margin-bottom: 0.5rem;
}
.sb-placeholder__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--foreground);
	letter-spacing: -0.005em;
	margin-bottom: 0.25rem;
}
.sb-placeholder__file {
	display: block;
	font-family: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", monospace;
	font-size: 0.72rem;
	color: var(--muted-foreground);
	letter-spacing: -0.005em;
}

/* ============================================================
   REAL FEATURE IMAGE WRAPPER
   Renders when a placeholder filename has a real screenshot mapped
   in bizsb_feature_image_map(). Fills its parent frame, preserves
   the inherited border-radius, and applies a subtle background so
   image loads never flash grey against the pastel section.
   ============================================================ */
.sb-feature-img {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: inherit;
	background: linear-gradient(135deg, #FDF9F6 0%, #F3E5EC 100%);
}
.sb-feature-img img {
	transition: transform .6s ease;
}
.sb-feature__visual .sb-feature-img,
.sb-feat-demo__frame .sb-feature-img {
	height: 100%;
}
/* Slight zoom on hover for the alternating showcase rows only, so the
   demo screenshot stays still and the smaller cards feel a little alive. */
.sb-feature__visual:hover .sb-feature-img img {
	transform: scale(1.03);
}

/* Abstract fallback placeholder (print-studio, ecommerce). Kept subtle
   so the "no shot yet" slots do not look broken next to real screenshots. */
.sb-placeholder--abstract {
	background: none;
	overflow: hidden;
	border-radius: inherit;
	padding: 0;
}
.sb-placeholder--abstract svg {
	border-radius: inherit;
}