/*
 * patterns.css — Section Layout & Banding
 * Sapiens + Machines Block Theme — Batch 5 update
 * ─────────────────────────────────────────────────────────────────────────────
 * Load order : 5 of 6 (after components.css)
 * Depends on : base.css (:root alias custom properties)
 *
 * Architecture (Batch 5):
 *   Outer .sm-section / .sm-hero / .sm-cta  →  background colour ONLY.
 *                                               layout:{"type":"default"} so
 *                                               the band bleeds full viewport.
 *   Inner .sm-container                     →  max-width + horizontal padding.
 *                                               Constrains content to 1240px
 *                                               centered within the full-bleed band.
 *
 * This replaces the previous approach of using layout:{"type":"constrained"}
 * on the outer group, which let WordPress's contentSize (760px) override the
 * intended 1240px wide layout.
 *
 * Sections:
 *   1.  sm-container            — the shared inner width-control class
 *   2.  Shared Section Padding  — .sm-section (background band)
 *   3.  Hero                    — .sm-hero
 *   4.  Our Position            — .sm-section--position
 *   5.  Services Overview       — .sm-section--services, .sm-services-grid
 *   6.  How It Works            — .sm-section--process
 *   7.  Trust Strip             — .sm-trust-strip
 *   8.  CTA Sections            — .sm-cta
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── 1. sm-container ─────────────────────────────────────────────────────────── */
/*
 * Every full-bleed section has an immediate child with class sm-container.
 * This group carries all horizontal padding and the max-width cap.
 * Vertical padding lives on the outer section so the background colour
 * fills the full block height correctly.
 */

.sm-container {
	width:          100%;
	max-width:      1240px;
	margin-inline:  auto;
	padding-inline: var(--space-lg);
	box-sizing:     border-box;
}

/* ── 2. Shared Section Padding ───────────────────────────────────────────────── */
/*
 * Outer bands: background colour + vertical rhythm only.
 * Horizontal padding is handled exclusively by .sm-container children.
 */

.sm-section {
	padding-block: var(--space-2xl);
}

/* ── 3. Hero ─────────────────────────────────────────────────────────────────── */

.sm-hero {
	padding-block: var(--space-3xl) var(--space-2xl);
	padding-block-start: clamp(5.5rem, 8vw, 8.5rem);
    padding-block-end: clamp(4.5rem, 7vw, 7rem);
}

/* ── 4. Our Position ─────────────────────────────────────────────────────────── */

.sm-section--position {
	padding-block: var(--space-2xl);
}

.sm-section--position {
	background: var(--wp--preset--color--paper) !important;
	padding-top: clamp(4rem, 7vw, 7rem) !important;
	padding-bottom: clamp(2rem, 4vw, 4rem) !important;
	margin-block-start: 0 !important;
}

.sm-section--position > .sm-container,
.sm-section--position .sm-position__inner {
	max-width: 1320px;
	margin-inline: auto;
	background: var(--wp--preset--color--paper-deep);
	border-radius: clamp(1.25rem, 2vw, 2rem);
	padding: clamp(4rem, 7vw, 6rem) clamp(2rem, 6vw, 5rem);
	text-align: center;
}

.sm-section--position .sm-label {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.sm-section--position .sm-position__headline {
	letter-spacing: -0.04em;
	max-width: 980px;
	margin-inline: auto;
	margin-bottom: 0;
}

/* ── 5. Services Overview ────────────────────────────────────────────────────── */

.sm-section--services {
	padding-block: 0;
}

.sm-section--services > .sm-container {
	padding-block-start: clamp(3rem, 5vw, 5rem);
	padding-block-end: clamp(4rem, 6vw, 5.5rem);
}

.sm-section--services .sm-section__header {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sm-section--services .sm-section__header .sm-label {
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.sm-section--services .sm-section__header h2 {
	margin: 0;
}

.sm-services-grid {
	gap: var(--space-md) !important;
	margin-top: 0;
}

.sm-services-grid > .wp-block-column {
	min-width: 180px;
}

/* ── 6. Process / How We Work ───────────────────────────────────────────────── */

.sm-section--process {
	padding-top: clamp(3.5rem, 5vw, 5.5rem) !important;
	padding-bottom: clamp(4.5rem, 7vw, 6.5rem) !important;
	margin-block-start: 0 !important;
}

.sm-section--process .sm-section__header {
	margin-bottom: clamp(2.5rem, 4vw, 3.5rem) !important;
}

.sm-stage-grid {
	gap: clamp(2rem, 5vw, 5rem) !important;
	margin-top: 0 !important;
}

.sm-stage-card {
	padding: 0;
}

.sm-stage-label {
	font-family: var(--font-mono);
	font-size: clamp(0.72rem, 0.8vw, 0.82rem)!important;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8C5A2E!important;
	margin: 0 0 0.85rem;
}

.sm-stage-title {
	font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.5vw, 1.5rem)!important;
	line-height: 1;
	letter-spacing: -0.035em;
	margin: 0 0 1rem;
}

.sm-stage-text {
	max-width: 25rem;
	font-size: clamp(1rem, 1.2vw, 1.15rem);
	line-height: 1.55;
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
}



/* ── 7. Trust Strip ──────────────────────────────────────────────────────────── */

.sm-trust-strip {
	padding-block-start: clamp(3rem, 5vw, 4.5rem);
	padding-block-end: clamp(3rem, 5vw, 4.5rem);
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.sm-trust-strip .sm-container {
	align-items:center;
}

.sm-trust-strip__logos {
	margin-top: clamp(1.5rem, 3vw, 2.25rem) !important;
	gap: clamp(2rem, 4vw, 4rem) !important;
	align-items: center;
}

/* ── 8. CTA Sections ─────────────────────────────────────────────────────────── */

.sm-cta {
	padding-block-start: clamp(3.5rem, 6vw, 5.5rem);
	padding-block-end: clamp(4rem, 7vw, 6rem);
	margin-block-start: 0 !important;
}

.sm-cta--dark {
	padding-block-start: clamp(4rem, 7vw, 6rem);
	padding-block-end: clamp(4rem, 7vw, 6rem);
	margin-block-start: 0 !important;
	background: #11100f !important;
}

.sm-cta--dark .sm-cta__headline,
.sm-cta--dark h2 {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 4vw, 2.25rem);
	line-height: 0.95;
	letter-spacing: -0.04em;
	max-width: 900px;
	margin-inline: auto;
	color: var(--wp--preset--color--paper);
}

/* ==========================================================================
   Service Detail Page — Section Layout
   Additions for: patterns/service-detail-*.php
   Scope: layout/spacing only. Component visuals live in components.css.
   Note: .sm-section, .sm-container, .sm-label, .sm-section__header, .sm-cta,
   .sm-cta--dark, .sm-button, .sm-stage-label, .sm-stage-title, .sm-stage-text
   are assumed to already exist from the homepage build and are intentionally
   NOT redefined here.

   Architecture: every section below is an alignfull outer group with
   layout type "default" (no WP contentSize/wideSize constraint applied),
   containing a single .sm-container inner wrapper. All max-width comes
   from the existing .sm-container class, not from WP's layout system —
   this keeps sections full-bleed at the section level while still lining
   content up with the homepage grid.
   ========================================================================== */

/* 01 — Header */
.sm-section--header .sm-container {
	padding-top: var(--space-2xl, 72px);
	padding-bottom: var(--space-lg, 32px);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm, 16px);
	width: 100%;
}

/* 02 — Intro */
.sm-section--intro .sm-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm, 16px);
	padding-top: var(--space-lg, 32px);
	padding-bottom: var(--space-lg, 32px);
	max-width: 760px;
}

/* 03 — Benefits (tint background section) */
.sm-section--tint .sm-container {
	padding-top: var(--space-2xl, 72px);
	padding-bottom: var(--space-2xl, 72px);
	display: flex;
	flex-direction: column;
	gap: var(--space-md, 24px);
}

.sm-benefits-grid {
	gap: 40px;
	margin-top: 0;
}

.sm-benefits-grid > .sm-benefit-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs, 8px);
}

/* 04 — Capabilities */
.sm-section--capabilities .sm-container {
	padding-top: var(--space-lg, 32px);
	padding-bottom: var(--space-lg, 32px);
	display: flex;
	flex-direction: column;
	gap: var(--space-md, 24px);
}

/* 05 — Process (grid gap only; card visuals are the existing homepage styles) */
.sm-section--process .sm-container {
	padding-top: var(--space-lg, 32px);
	padding-bottom: var(--space-lg, 32px);
	display: flex;
	flex-direction: column;
	gap: var(--space-md, 24px);
}

.sm-section--process .sm-stage-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	width: 100%;
}

@media (max-width: 767px) {
	.sm-section--process .sm-stage-grid {
		grid-template-columns: 1fr;
		gap: var(--space-md, 24px);
	}
}

/* 06 — Industries Served (tint background section, reuses .sm-section--tint) */
.sm-section--tint .sm-tag-row {
	gap: 12px;
	margin-top: var(--space-2xs, 8px);
}

/* 07 — Case Study Spotlight */
.sm-section--case-study .sm-container {
	padding-top: var(--space-lg, 32px);
	padding-bottom: var(--space-lg, 32px);
	display: flex;
	flex-direction: column;
	gap: var(--space-md, 24px);
}

.sm-case-study {
	gap: var(--space-md, 24px);
	align-items: flex-start;
}

.sm-case-study__stats {
	gap: 24px;
	margin-top: var(--space-xs, 12px);
}

a.sm-case-study__link {
	font-family: "Work Sans", sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: var(--ink, #1b1916);
	text-decoration: none;
}
a.sm-case-study__link:hover {
	text-decoration: underline;
}

/* 08 — FAQ */
.sm-section--faq .sm-container {
	padding-top: var(--space-lg, 32px);
	padding-bottom: var(--space-lg, 32px);
	display: flex;
	flex-direction: column;
	gap: var(--space-md, 24px);
}

.sm-faq-list {
	display: flex;
	flex-direction: column;
}

/* 09 — Related Services */
.sm-section--related .sm-container {
	padding-top: var(--space-lg, 32px);
	padding-bottom: var(--space-xl, 48px);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm, 16px);
}

.sm-related-links {
	gap: 12px;
}

/* CTA inner centering (structure only — color/backgrounds come from .sm-cta) */
.sm-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-sm, 16px);
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* Service detail full-width page content fix */

body.page .wp-block-post-content {
	max-width: none !important;
	width: 100% !important;
}

body.page .wp-block-post-content > .alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

body.page .wp-block-post-content > .alignfull > .sm-container {
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
}

/* ==========================================================================
   About Page — Section Layout
   Additions for: patterns/about-*.php
   ========================================================================== */

/* 02 — Origin Story (reuses .sm-section--intro, adds the label row above it) */
.sm-section--intro .sm-label {
	margin-bottom: var(--space-2xs, 8px);
}

/* 04 — Team */
.sm-section--team .sm-container {
	padding-top: var(--space-2xl, 72px);
	padding-bottom: var(--space-2xl, 72px);
	display: flex;
	flex-direction: column;
	gap: var(--space-md, 24px);
}

.sm-team-grid {
	gap: 48px;
}

.sm-team-grid > .sm-team-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-md, 24px);
}

@media (max-width: 767px) {
	.sm-team-grid > .sm-team-card {
		flex-direction: column;
	}
}

/* 05 — By The Numbers (reuses .sm-section--tint) */
.sm-section--tint .sm-stats-row {
	gap: var(--space-2xl, 72px);
	margin-top: var(--space-2xs, 8px);
}

/* ==========================================================================
   Contact Page — Section Layout
   Additions for: patterns/contact-*.php
   ========================================================================== */

.sm-section--contact-form .sm-container {
	padding-top: var(--space-lg, 32px);
	padding-bottom: var(--space-2xl, 72px);
}

.sm-contact-layout {
	gap: var(--space-xl, 48px);
	align-items: flex-start;
	width: 100%;
}

.sm-contact-form-col {
	flex: 1 1 480px;
	max-width: 680px;
	min-width: 0;
}

.sm-info-panel {
	flex: 1 1 380px;
	max-width: 512px;
	min-width: 0;
}

@media (max-width: 680px) {
	.sm-contact-form-col,
	.sm-info-panel {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* ==========================================================================
   Start a Conversation Page — Section Layout
   Additions for: patterns/start-a-conversation-*.php
   ========================================================================== */

/* 01 — Header (centered, narrower reading width) */
.sm-sac-header {
	align-items: center;
	text-align: center;
	padding-top: var(--space-2xl, 72px);
	padding-bottom: var(--space-lg, 32px);
}

.sm-sac-header .sm-contact-h1 {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.sm-sac-header .sm-service-lede {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* 02 — Trust Strip */
.sm-trust-strip {
	border-top: 1px solid var(--line, #d7d0bc);
	border-bottom: 1px solid var(--line, #d7d0bc);
}

.sm-trust-strip__inner {
	gap: var(--space-2xl, 72px);
	padding-top: var(--space-md, 24px);
	padding-bottom: var(--space-md, 24px);
}

.sm-trust-item {
	width: 320px;
	max-width: 100%;
	align-items: center;
	text-align: center;
	gap: var(--space-3xs, 4px);
}

/* 04 — FAQ (centered variant) */
.sm-sac-faq .sm-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm, 16px);
}

.sm-sac-faq-heading {
	font-family: "Fraunces", serif;
	font-weight: 600;
	font-size: 36px;
	line-height: 1.1;
	letter-spacing: -0.36px;
	color: var(--ink, #1b1916);
	margin: 0;
}

.sm-faq-list--centered {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* ==========================================================================
   Insights / Single Article — Section Layout
   Additions for: templates/single.html
   ========================================================================== */


.sm-section--related-articles {
	border-top: 1px solid #d7d0bc;
}

.sm-article-narrow {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.sm-section--article-header .sm-container {
	padding-top: var(--space-2xl, 72px);
	padding-bottom: var(--space-lg, 32px);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm, 16px);
}

.sm-section--article-toc .sm-container {
	padding-bottom: var(--space-lg, 32px);
}

.sm-section--article-body .sm-container {
	padding-bottom: var(--space-2xl, 72px);
	display: flex;
	flex-direction: column;
	gap: var(--space-lg, 32px);
}

.sm-section--related-articles .sm-container {
	padding-top: var(--space-lg, 32px);
	padding-bottom: var(--space-2xl, 72px);
	display: flex;
	flex-direction: column;
	gap: var(--space-md, 24px);
}

.sm-article-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

@media (max-width: 900px) {
	.sm-article-card-grid {
		grid-template-columns: 1fr;
	}
}