/* ═════════════════════════════════════════════════════════════════
   SECTION 3 — SEGMENT SELECTOR
   (Credit Unions. Banks. Finance Companies.)
   Two-column layout: stacked selector cards on the left,
   detail panel on the right.
   ═════════════════════════════════════════════════════════════════ */

/* overflow: clip (instead of hidden) clips the decorative .segments-object
   without creating a scroll container — so `position: sticky` on the
   right-column detail panel still works. */
.segments { position: relative; overflow: clip; }
.segments-object {
	position: absolute;
	top: -40dvw;
    right: -25vw;
    width: 100%;
	height: auto;
	pointer-events: none;
	z-index: 0;
	opacity: 1;
	will-change: transform;
	-webkit-mask-image: linear-gradient(to top right, transparent 15%, black 55%);
	mask-image:         linear-gradient(to top right, transparent 15%, black 55%);
}
.segments-object img { width: 100%; height: auto; }
.segments-head { max-width: 100%; position: relative; z-index: 1; margin-bottom: clamp(56px, 6vw, 100px); }
.segments-head .display { text-transform: uppercase; letter-spacing: -.02em; line-height: .92; }

/* ── Two-column layout ── */
.seg-layout {
	display: grid;
	/* Left column is fixed at 620px to match the design-spec card width;
	   the right column takes the remaining space. Collapses to a single
	   column at ≤1024px (see responsive block at the bottom of this file). */
	grid-template-columns: 620px 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
	position: relative;
	z-index: 1;
}

/* ── Left column: selector cards ──
   Extra padding-bottom extends the grid row height so the sticky right
   column stays pinned long enough for the last card to reach the active
   threshold. */
.seg-tabs {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-bottom: clamp(240px, 60vh, 720px);
}

.seg-card {
	/* Inactive state — muted cream fill. */
	background: #F5F3EF;
	color: var(--ink);
	border: 1px solid var(--rule);
	border-radius: 20px;
	/* Fixed design width + interior padding. Clamp prevents overflow on
	   narrow viewports where the grid column is < 560px. */
	width: 100%;
	max-width: 620px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	cursor: pointer;
	transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
	/* Clip the full-width .seg-label header to the card's rounded corners. */
	overflow: hidden;
}
.seg-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
/* Active state — lighter, translucent white fill (set by JS on click). */
.seg-card.active {
	background: rgba(255, 255, 255, 0.60);
	box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

/* Full-width coloured header — extends to the card edges via negative
   margins that cancel out the card's internal padding. The card has
   overflow:hidden + border-radius so the label's straight corners are
   clipped to the rounded top corners automatically. */
.seg-label {
	display: block;
	/* Cancel out the card's 30px padding on top/left/right so the
	   header strip reaches the card edges. */
	margin: -30px -30px 0;
	/* Internal padding for the header text itself. */
	padding: 10px 30px ;
	/* Typography — spec: 26 / 40 / 500, cream text. */
	font-family: var(--f-sans);
	font-size: 26px;
	font-weight: 500;
	line-height: 40px;
	letter-spacing: 0;
	color: #F5F3EF;
	background: var(--ink); /* default — modifier classes override */
	border-radius: 0;       /* card's overflow:hidden clips the corners */
}
.seg-card--green .seg-label  { background: var(--green); }
.seg-card--orange .seg-label { background: var(--orange); }
.seg-card--dark .seg-label   { background: var(--ink); }

/* Title — spec: 42 / 46 / 500, ink. */
.seg-card h3 {
	font-family: var(--f-sans);
	font-size: 42px;
	font-weight: 500;
	line-height: 46px;
	letter-spacing: 0;
	white-space: pre-line;
	color: #1A1A1A;
	margin: 0;
}
/* Body text — spec: 22 / 34 / 400, ink @ 75% alpha. */
.seg-card p {
	font-family: var(--f-sans);
	font-size: 22px;
	font-weight: 400;
	line-height: 34px;
	color: rgba(26, 26, 26, 0.75);
	margin: 0;
}

/* Tags as inline bullet list — spec: 22 / normal / 500, ink.
   Figma: 24px gap between tags, 10px gap between bullet and text. */
.seg-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 2px;
	font-family: var(--f-sans);
	font-size: 22px;
	font-weight: 500;
	line-height: normal;
	color: #1A1A1A;
}
.seg-tag {
	display: inline-flex;
	align-items: center;
}
.seg-tag::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin: 0 10px 0 0;
	background: var(--ink); /* default — overridden by modifier classes below */
	flex-shrink: 0;
}
/* Bullet colour matches the card-header colour for each modifier. */
.seg-card--green  .seg-tag::before { background: var(--green); }
.seg-card--orange .seg-tag::before { background: var(--orange); }
.seg-card--dark   .seg-tag::before { background: var(--ink); }

/* Full-width CTA button inside card — 30px gap above the tag row
   (via margin-top, overriding the card's default flex `gap: .75rem`).
   Shared cream + outlined style across all card variants (from Figma). */
.seg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;                      /* space between text and arrow */
	width: 100%;
	margin-top: 30px;
	padding: 20px 40px 22px;        /* 20 top / 22 bottom / 40 sides (Figma) */
	border: 1px solid rgba(26, 26, 26, 0.15);
	border-radius: 14px;
	background: #F5F3EF;
	font-family: var(--f-sans);
	font-size: 26px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.01em;
	color: #1A1A1A;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.seg-btn:hover  { background: #fff; transform: translateY(-1px); }
.seg-btn:active { transform: translateY(0); }

/* Disable the hover effect on the active card's button. */
.seg-card.active .seg-btn:hover,
.seg-card.active .seg-btn:active {
	background: #F5F3EF;
	transform: none;
}

.seg-btn-text  { display: inline-block; }
.seg-btn-arrow {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: block;
}
.seg-btn-arrow--up                { display: none; }
.seg-card.active .seg-btn-arrow--right { display: none; }
.seg-card.active .seg-btn-arrow--up    { display: block; }

/* ── Right column: detail panels ──
   Sticks to the top of the viewport (below the nav) while the left-column
   cards scroll past. Fixed height + overflow-y:auto lets the user scroll
   the active panel's full content independently of the page.
   Only the active panel is shown (display:none on others keeps scroll
   height accurate to the current content). Switching panels resets the
   column scroll to the top (done in JS). */
.seg-details-col {
	position: sticky;
	top: clamp(96px, 12vh, 140px);
	align-self: start;
	height: calc(100vh - clamp(96px, 12vh, 140px) - 48px);
	overflow-y: auto;
	scrollbar-width: none;
}
.seg-details-col::-webkit-scrollbar { display: none; }

.seg-detail {
	display: none;
	padding-bottom: 48px;
}
.seg-detail.active {
	display: block;
	animation: seg-fadein .2s ease;
}
@keyframes seg-fadein {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.seg-detail.active { animation: none; }
}

.seg-detail-head { margin-bottom: clamp(28px, 3vw, 48px); }
.seg-detail-head h3 {
	font-size: var(--fs-xl-label);   /* 42px max — matches SVG exactly */
	font-weight: 500;
	line-height: 1.1;
	color: var(--ink);
	letter-spacing: -.01em;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.seg-detail-title {
	display: block;
	font-family: var(--f-sans);
	font-weight: 500;
	color: var(--ink);
}
.seg-detail-head .it-tail {
	display: block;
	font-size: var(--fs-xl-label);
	transform: none !important;   /* no parallax drift in this context */
	margin-top: 0;
}

.seg-detail-grid {
	display: flex;
	flex-direction: column;
	gap: 34px;
}
.seg-detail-row h4 {
	font-size: clamp(15px, 1.8056vw, 26px);
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 8px;
}
.seg-detail-row p {
	font-size: clamp(13px, 1.5278vw, 22px);
	color: var(--ink-soft);
	line-height: 1.6;
	margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
	.seg-layout { grid-template-columns: 1fr; }
	.seg-tabs   { padding-bottom: 0; }
	/* Right column is hidden on mobile — detail content is injected
	   inline into the active card by JS (see initSegmentTabs). */
	.seg-details-col { display: none; }

	/* Inline detail panel created by JS on first click of each card. */
	.seg-inline-detail {
		display: none;
		padding-top: 24px;
		margin-top: 8px;
		border-top: 1px solid var(--rule);
	}
	.seg-card.active .seg-inline-detail { display: block; }
}

@media (max-width: 899px) {
	.seg-label  { font-size: 12px; }
	.seg-card p { font-size: 14px; }
	.seg-tags { font-size: 16px; }
	.seg-layout .seg-tabs .seg-card button .seg-btn-text { font-size: 16px !important; }
	.segments-object { top: -50px; }
}