/**
 * Self-contained styles for Bridge3 block patterns.
 * Loaded on front + block/site editor so previews match landings.
 */

.editor-styles-wrapper,
.block-editor-block-list__layout,
.bridge3-pattern,
body {
	--ap-navy: #294458;
	--ap-navy-900: #192c3a;
	--ap-teal: #307c78;
	--ap-accent: #c1681b;
	--ap-ink: #1d2b2a;
	--ap-muted: #5b6b69;
	--ap-surface: #f3f3f3;
	--ap-on-dark: #f3f3f3;
	--ap-grad: linear-gradient(135deg, #307c78 0%, #294458 55%, #1d3140 100%);
	--ap-font: var(--font-sans, "Fira Sans", system-ui, sans-serif);
}

/* ---- Hero ---- */
.bridge3-pattern-hero,
.wp-block-group.bridge3-pattern-hero,
.cases-hero.bridge3-pattern-hero {
	position: relative;
	isolation: isolate;
	background: var(--ap-grad) !important;
	color: var(--ap-on-dark) !important;
	text-align: center;
	overflow: hidden;
	padding: clamp(4rem, 3rem + 6vw, 7rem) 1.5rem clamp(2.5rem, 2rem + 3vw, 4rem) !important;
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	border-radius: 0 !important;
}

.bridge3-pattern-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--bridge3-texture, none);
	background-size: cover;
	background-position: center;
	opacity: 0.12;
	pointer-events: none;
}

.bridge3-pattern-hero .cases-hero__title,
.bridge3-pattern-hero h1 {
	font-family: var(--ap-font) !important;
	font-weight: 500 !important;
	font-size: clamp(2rem, 1.4rem + 2.8vw, 3.25rem) !important;
	line-height: 1.25 !important;
	color: var(--ap-on-dark) !important;
	text-shadow: 0 4px 2px rgba(0, 0, 0, 0.22);
	margin: 0 auto 0.75rem !important;
	max-width: 54rem;
}

.bridge3-pattern-hero .cases-hero__subtitle,
.bridge3-pattern-hero p {
	font-family: var(--ap-font) !important;
	font-size: 1.125rem !important;
	line-height: 1.4 !important;
	color: rgba(243, 243, 243, 0.92) !important;
	margin: 0 auto !important;
	max-width: 40rem;
}

/* ---- Section head ---- */
.bridge3-pattern-section-head {
	padding: 3rem 1.5rem 0.5rem !important;
	max-width: 72rem !important;
	margin-inline: auto !important;
}

.bridge3-pattern-section-head h2 {
	font-family: var(--ap-font) !important;
	font-weight: 700 !important;
	font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem) !important;
	color: var(--ap-navy) !important;
	margin: 0 0 0.5rem !important;
}

.bridge3-pattern-section-head p {
	font-family: var(--ap-font) !important;
	font-size: 1.125rem !important;
	color: var(--ap-muted) !important;
	margin: 0 !important;
	max-width: 40rem;
}

/* ---- Choice cards (aprender band) ---- */
.bridge3-pattern-choice {
	position: relative;
	isolation: isolate;
	background: var(--ap-grad) !important;
	padding: 4rem 1.5rem !important;
	max-width: none !important;
	width: 100% !important;
	border-radius: 0 !important;
}

.bridge3-pattern-choice::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--bridge3-texture, none);
	background-size: cover;
	opacity: 0.2;
	mix-blend-mode: soft-light;
	pointer-events: none;
}

.bridge3-pattern-choice > h2,
.bridge3-pattern-choice .bridge3-pattern-choice__title {
	font-family: var(--ap-font) !important;
	font-weight: 700 !important;
	font-size: 2rem !important;
	text-align: center !important;
	color: var(--ap-on-dark) !important;
	margin: 0 0 0.5rem !important;
}

.bridge3-pattern-choice > p.bridge3-pattern-choice__lead {
	text-align: center !important;
	color: rgba(243, 243, 243, 0.9) !important;
	font-family: var(--ap-font) !important;
	margin: 0 auto 2.5rem !important;
	max-width: 36rem;
}

.bridge3-pattern-choice .wp-block-columns {
	max-width: 56rem;
	margin-inline: auto !important;
	gap: 1.5rem !important;
}

.bridge3-pattern-choice .wp-block-column,
.bridge3-pattern-choice .choice-card {
	background: var(--ap-surface) !important;
	border: 1px solid #76cccf !important;
	border-radius: 16px !important;
	padding: 2rem !important;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06);
}

.bridge3-pattern-choice h3 {
	font-family: var(--ap-font) !important;
	font-weight: 700 !important;
	font-size: 1.5rem !important;
	color: var(--ap-navy-900) !important;
	margin: 0 0 0.35rem !important;
}

.bridge3-pattern-choice .wp-block-column p {
	font-family: var(--ap-font) !important;
	color: var(--ap-ink) !important;
	font-size: 1rem !important;
}

.bridge3-pattern-choice ul {
	font-family: var(--ap-font) !important;
	color: var(--ap-ink) !important;
}

.bridge3-pattern-choice .wp-block-button__link {
	background: var(--ap-accent) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-family: var(--ap-font) !important;
	font-weight: 600 !important;
	padding: 0.7em 1.35em !important;
	text-decoration: none !important;
	border: none !important;
}

/* ---- Features / pilares ---- */
.bridge3-pattern-features {
	background: #fff !important;
	padding: 4rem 1.5rem !important;
	max-width: none !important;
}

.bridge3-pattern-features > h2 {
	font-family: var(--ap-font) !important;
	font-weight: 700 !important;
	font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem) !important;
	color: var(--ap-navy) !important;
	text-align: center !important;
	margin: 0 0 2rem !important;
}

.bridge3-pattern-features .wp-block-columns {
	max-width: 64rem;
	margin-inline: auto !important;
	gap: 1.5rem !important;
}

.bridge3-pattern-features .wp-block-column {
	background: var(--ap-surface) !important;
	border-radius: 12px !important;
	padding: 1.5rem !important;
	border-top: 4px solid var(--ap-teal) !important;
}

.bridge3-pattern-features h3 {
	font-family: var(--ap-font) !important;
	font-weight: 700 !important;
	color: var(--ap-navy) !important;
	margin: 0 0 0.5rem !important;
}

.bridge3-pattern-features p {
	font-family: var(--ap-font) !important;
	color: var(--ap-muted) !important;
	margin: 0 !important;
}

/* ---- CTA band ---- */
.bridge3-pattern-cta {
	position: relative;
	isolation: isolate;
	background: var(--ap-grad) !important;
	padding: 4rem 1.5rem !important;
	text-align: center !important;
	max-width: none !important;
	width: 100% !important;
	border-radius: 0 !important;
}

.bridge3-pattern-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--bridge3-texture, none);
	background-size: cover;
	opacity: 0.15;
	pointer-events: none;
}

.bridge3-pattern-cta h2 {
	font-family: var(--ap-font) !important;
	font-weight: 700 !important;
	font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem) !important;
	color: var(--ap-on-dark) !important;
	margin: 0 0 0.75rem !important;
}

.bridge3-pattern-cta > p {
	font-family: var(--ap-font) !important;
	color: rgba(243, 243, 243, 0.92) !important;
	margin: 0 auto 1.5rem !important;
	max-width: 36rem;
}

.bridge3-pattern-cta .wp-block-buttons {
	justify-content: center !important;
	gap: 0.75rem !important;
}

.bridge3-pattern-cta .wp-block-button__link {
	background: var(--ap-accent) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-family: var(--ap-font) !important;
	font-weight: 600 !important;
	padding: 0.75em 1.5em !important;
	border: none !important;
}

.bridge3-pattern-cta .is-style-outline .wp-block-button__link,
.bridge3-pattern-cta .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: #fff !important;
	border: 2px solid #fff !important;
}

/* ---- Form split ---- */
.bridge3-pattern-form-split {
	padding: 3rem 1.5rem !important;
	max-width: 64rem !important;
	margin-inline: auto !important;
	gap: 2rem !important;
}

.bridge3-pattern-form-split h2 {
	font-family: var(--ap-font) !important;
	font-weight: 700 !important;
	color: var(--ap-navy) !important;
	margin: 0 0 0.75rem !important;
}

.bridge3-pattern-form-split p {
	font-family: var(--ap-font) !important;
	color: var(--ap-muted) !important;
}

.bridge3-pattern-form-split .bridge3-pattern-form-box {
	background: var(--ap-surface) !important;
	border: 1px dashed var(--ap-teal) !important;
	border-radius: 12px !important;
	padding: 1.5rem !important;
}

/* ---- Callout ---- */
.bridge3-pattern-callout,
.wp-block-group.is-style-bridge3-callout.bridge3-pattern-callout {
	background: var(--ap-grad) !important;
	color: var(--ap-on-dark) !important;
	border-radius: 16px !important;
	padding: 1.75rem 2rem !important;
	max-width: 48rem !important;
}

.bridge3-pattern-callout h3,
.bridge3-pattern-callout p {
	font-family: var(--ap-font) !important;
	color: var(--ap-on-dark) !important;
}

.bridge3-pattern-callout h3 {
	margin: 0 0 0.5rem !important;
	font-weight: 700 !important;
}

.bridge3-pattern-callout p {
	margin: 0 !important;
	opacity: 0.95;
}

/* ---- Page patterns wrapper ---- */
.bridge3-pattern-page {
	font-family: var(--ap-font);
}