/* ==========================================================================
   "Sections" flexible-content pages: page-templates/sections.php
   (.wf-industry.wf-service.wf-sections).

   Loaded AFTER assets/css/industry.css and assets/css/service.css, which own
   every section primitive the layouts reuse (.wf-industry__section, .wf-ind-*,
   .wf-svc-grid / .wf-svc-tile / .wf-svc-benefit / .wf-svc-checklist /
   .wf-svc-prose). Only what is genuinely new to this template lives here: the
   per-row background variants, the wide prose measure, the image grid, the
   embed frame, the CTA fallback, and the testimonial cards -- those last ones
   are a scoped copy of home.css, which is only ever enqueued on the front page.

   SPECIFICITY NOTE -- Elementor's kit stylesheet ships element rules at 0-1-1
   (.elementor-kit-6 a / button / img), which beat a bare single class, so the
   scope is load-bearing, not cosmetic. industry.css re-asserts link colour and
   image radius under .wf-industry; the resets below cover this template's own
   blocks and put the radius back on the components that want one.
   ========================================================================== */

/* ---------- Scope resets ---------- */
body .wf-sections a {
	color: inherit;
	text-decoration: none;
}

body .wf-sections img {
	border-radius: 0;
	max-width: 100%;
	height: auto;
}

.wf-sections [hidden] {
	display: none !important;
}

/* Radius back on, per component (the blanket reset above is for photos in
   prose, which are square everywhere else in this theme too). */
body .wf-sections .wf-sec-gallery__img,
body .wf-sections .wf-ind-overview__media .wf-ind-overview__img {
	border-radius: var(--wf-radius-md);
}

body .wf-sections .wf-el-team__img {
	border-radius: var(--wf-radius-md);
}

/* ---------- Section rhythm + background variants ---------- */
.wf-sections .wf-industry__section.wf-sec {
	scroll-margin-top: 140px;
}

.wf-sections .wf-industry__section.wf-sec--bg-white {
	background: var(--wf-white);
	color: var(--wf-text);
}

.wf-sections .wf-industry__section.wf-sec--bg-light {
	background: var(--wf-bg);
	color: var(--wf-text);
}

.wf-sections .wf-industry__section.wf-sec--bg-navy {
	background: var(--wf-navy);
	color: var(--wf-text-offwhite);
}

.wf-sections .wf-sec--bg-navy .wf-home-head__title,
.wf-sections .wf-sec--bg-navy .wf-h2,
.wf-sections .wf-sec--bg-navy .wf-h3 {
	color: var(--wf-white);
}

.wf-sections .wf-sec--bg-navy .wf-home-head__intro,
.wf-sections .wf-sec--bg-navy .wf-svc-prose,
.wf-sections .wf-sec--bg-navy .wf-ind-overview__text,
.wf-sections .wf-sec--bg-navy .wf-ind-step__text,
.wf-sections .wf-sec--bg-navy .wf-svc-tile__text,
.wf-sections .wf-sec--bg-navy .wf-svc-benefit__text,
.wf-sections .wf-sec--bg-navy .wf-svc-checklist__text {
	color: var(--wf-text-offwhite);
}

.wf-sections .wf-sec--bg-navy .wf-eyebrow,
.wf-sections .wf-sec--bg-navy .wf-home-head__eyebrow {
	color: var(--wf-cyan);
}

.wf-sections .wf-sec--bg-navy .wf-svc-tile {
	background: var(--wf-navy-2);
	border-color: var(--wf-border-dark);
	box-shadow: none;
}

.wf-sections .wf-sec--bg-navy .wf-svc-tile__title,
.wf-sections .wf-sec--bg-navy .wf-svc-benefit__title,
.wf-sections .wf-sec--bg-navy .wf-svc-checklist__title,
.wf-sections .wf-sec--bg-navy .wf-ind-step__title {
	color: var(--wf-white);
}

.wf-sections .wf-sec--bg-navy .wf-ind-faq__item {
	border-color: var(--wf-border-dark);
}

.wf-sections .wf-sec--bg-navy .wf-ind-faq__q-text,
.wf-sections .wf-sec--bg-navy .wf-ind-faq__a {
	color: var(--wf-text-offwhite);
}

/* ---------- Text: the wide prose measure ---------- */
.wf-sections .wf-sec-prose--wide {
	max-width: 1000px;
}

/* Editor prose can hold a pull-quote; service.css styles p / h2-h4 / lists / a
   but not blockquote, so it is picked up here rather than left to the browser. */
.wf-sections .wf-svc-prose blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--wf-blue);
	font: 500 1.1875rem/1.55 var(--wf-font-body);
	color: var(--wf-text-dark);
}

.wf-sections .wf-svc-prose blockquote p {
	margin: 0;
}

.wf-sections .wf-sec--bg-navy .wf-svc-prose blockquote {
	border-left-color: var(--wf-cyan);
	color: var(--wf-white);
}

/* ---------- Text + Image ---------- */
.wf-sections .wf-sec-text-image__eyebrow {
	margin: 0 0 12px;
}

.wf-sections .wf-sec-text-image__title {
	margin: 0 0 16px;
	color: var(--wf-text-dark);
}

.wf-sections .wf-sec--bg-navy .wf-sec-text-image__title {
	color: var(--wf-white);
}

.wf-sections .wf-sec-text-image__cta {
	margin: 24px 0 0;
}

/* ---------- Image Grid ---------- */
.wf-sections .wf-sec-gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 700px) {
	.wf-sections .wf-sec-gallery--2,
	.wf-sections .wf-sec-gallery--3,
	.wf-sections .wf-sec-gallery--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1040px) {
	.wf-sections .wf-sec-gallery--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.wf-sections .wf-sec-gallery--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.wf-sections .wf-sec-gallery__img {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- Testimonials ----------
   A scoped copy of the .wf-home-quote rules in assets/css/home.css: that file
   is only enqueued on the front page, and duplicating ~40 lines here is
   cheaper than loading the whole homepage stylesheet on every Sections page.
   .wf-home-head, .wf-home-pill and .wf-home-star already come from
   industry.css, so only the rail and the cards are restated. */
.wf-sections .wf-sec--testimonials .wf-home-testimonials__rail {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	padding-block: 4px 20px;
}

.wf-sections .wf-sec--testimonials .wf-home-testimonials__track {
	display: flex;
	gap: 20px;
	align-items: stretch;
	width: max-content;
	max-width: none;
}

.wf-sections .wf-sec--testimonials .wf-home-quote {
	flex: none;
	display: flex;
	flex-direction: column;
	width: min(420px, 85vw);
	margin: 0;
	padding: 28px;
	background: var(--wf-navy-2);
	border: 1px solid var(--wf-border-dark);
	border-radius: var(--wf-radius-md);
	scroll-snap-align: start;
}

.wf-sections .wf-sec--testimonials .wf-home-quote__stars {
	display: flex;
	gap: 2px;
	margin: 0 0 16px;
}

.wf-sections .wf-sec--testimonials .wf-home-quote__text {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font: 400 1rem/1.65 var(--wf-font-body);
	color: var(--wf-white);
}

.wf-sections .wf-sec--testimonials .wf-home-quote__text p {
	margin: 0 0 .85em;
}

.wf-sections .wf-sec--testimonials .wf-home-quote__text p:last-child {
	margin-bottom: 0;
}

.wf-sections .wf-sec--testimonials .wf-home-quote__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--wf-border-dark);
}

.wf-sections .wf-sec--testimonials .wf-home-quote__name {
	font: 700 .9375rem/1.3 var(--wf-font-body);
	color: var(--wf-white);
}

.wf-sections .wf-sec--testimonials .wf-home-quote__meta {
	font: 400 .8125rem/1.4 var(--wf-font-body);
	color: var(--wf-text-mute);
}

.wf-sections .wf-sec--testimonials .wf-home-quote__source {
	margin-top: 6px;
	background: rgba(0, 180, 216, .14);
	color: var(--wf-cyan);
}

/* ---------- Plans / CTA ----------
   Both elements ship their own full-width band and .wf-container, so the
   wrapper's container and vertical padding are dropped to avoid nesting one
   container inside another (double gutters, halved max-width). */
.wf-sections .wf-industry__section.wf-sec--plans,
.wf-sections .wf-industry__section.wf-sec--cta {
	padding-block: 0;
	background: transparent;
}

.wf-sections .wf-sec--plans > .wf-container,
.wf-sections .wf-sec--cta > .wf-container {
	max-width: none;
	padding-inline: 0;
}

.wf-sections .wf-sec-cta__eyebrow {
	max-width: var(--wf-container);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 72px) var(--wf-gutter) 0;
	text-align: center;
}

/* ---------- Form / Embed ---------- */
.wf-sections .wf-sec-embed {
	max-width: 820px;
	margin-inline: auto;
}

.wf-sections .wf-sec-embed .wpforms-form input[type="text"],
.wf-sections .wf-sec-embed .wpforms-form input[type="email"],
.wf-sections .wf-sec-embed .wpforms-form input[type="tel"],
.wf-sections .wf-sec-embed .wpforms-form input[type="url"],
.wf-sections .wf-sec-embed .wpforms-form input[type="number"],
.wf-sections .wf-sec-embed .wpforms-form select,
.wf-sections .wf-sec-embed .wpforms-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius-sm);
	background: var(--wf-white);
	font: 400 1rem/1.5 var(--wf-font-body);
	color: var(--wf-text-dark);
}

.wf-sections .wf-sec-embed .wpforms-form input:focus-visible,
.wf-sections .wf-sec-embed .wpforms-form select:focus-visible,
.wf-sections .wf-sec-embed .wpforms-form textarea:focus-visible {
	outline: 2px solid var(--wf-cyan);
	outline-offset: 2px;
}

.wf-sections .wf-sec-embed .wpforms-form .wpforms-field-label {
	font: 600 .9375rem/1.4 var(--wf-font-body);
	color: var(--wf-text-dark);
}

.wf-sections .wf-sec-embed .wpforms-form button.wpforms-submit,
.wf-sections .wf-sec-embed .wpforms-form input.wpforms-submit {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: 13px 21px;
	border: 0;
	border-radius: var(--wf-radius-sm);
	background: linear-gradient(90deg, var(--wf-blue) 0%, var(--wf-cyan) 100%);
	color: var(--wf-white);
	font: 600 1rem/1 var(--wf-font-body);
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background var(--wf-dur) var(--wf-ease), color var(--wf-dur) var(--wf-ease);
}

.wf-sections .wf-sec-embed .wpforms-form button.wpforms-submit:hover,
.wf-sections .wf-sec-embed .wpforms-form input.wpforms-submit:hover {
	background: var(--wf-gold);
	color: var(--wf-navy);
}

.wf-sections .wf-sec--bg-navy .wf-sec-embed .wpforms-form .wpforms-field-label {
	color: var(--wf-white);
}