/*
 * Our Solutions — tabbed (Enterprise / Telecom / Maritime) accordion.
 * Figma ref: node 1752:4371 "Our Solutions" heading + instance 1752:4372
 * "Solutions" (component 1615:9829). Colors/radii below that aren't in
 * tokens.css (pill track #f5f8ff, active pill #2c2c2c, card border
 * #ecf1f9/#fafcff, muted desc #595959) are one-off values lifted directly
 * from the Figma component fills — see template-parts/home/solutions.php
 * for the full node-id trail.
 */

/* Node 1752:4371 — SemiBold 40/100%, #021b42, centred (x=589 of 1440).
   42px gap to the tab track (heading box bottom 4155 → tabs 4197). */
.tp2026-solutions__heading {
	font: var(--tp-h2);
	color: var(--tp-heading);
	text-align: center;
	text-transform: capitalize; /* Figma textCase TITLE */
	margin: 0 0 42px;
}

/* Tab pill track — node 1615:9742: 685x74, #f5f8ff on #eff1f6, radius 60,
   8px padding all round, 0 gap. 32px below it to the content row (1615:9749). */
.tp2026-solutions__tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 32px;
	padding: 8px;
	background: #f5f8ff;
	border: 1px solid #eff1f6;
	border-radius: 60px;
	overflow-x: auto;
}

/* Inactive pill (1615:9745/9747): 58px tall, radius 50, 20px side padding,
   Regular 20/34 #595959. */
.tp2026-solutions__tab {
	flex-shrink: 0;
	padding: 12px 20px;
	border-radius: 50px;
	font: var(--tp-body-lg);
	color: var(--tp-gray-700);
	text-transform: capitalize; /* Figma textCase TITLE — 1615:9744/9746/9748 */
	white-space: nowrap;
	/* ON_CLICK SMART_ANIMATE SPRING_PRESET_THREE (1615:9745 → 1615:9831,
	   1615:9747 → 1615:9928). Padding rides along because the active pill
	   is 24px-padded and the inactive ones are 20px. */
	transition:
		background var(--tp-speed-spring) var(--tp-ease-spring),
		color var(--tp-speed-spring) var(--tp-ease-spring),
		padding var(--tp-speed-spring) var(--tp-ease-spring);
}

.tp2026-solutions__tab:hover {
	color: var(--tp-black);
}

/* Active pill (1615:9743/9744): #2c2c2c, 24px side padding, Medium 20/34 white. */
.tp2026-solutions__tab.is-active {
	padding-left: 24px;
	padding-right: 24px;
	background: #2c2c2c;
	font-weight: 500;
	color: var(--tp-white);
}

/* Panel layout: media + accordion list */
.tp2026-solutions__panel {
	display: flex;
	align-items: flex-start;
	gap: 42px;
}

.tp2026-solutions__panel[hidden] {
	display: none;
}

/* 1615:9749 is a 1112 row of 535 + 42 gap + 535 — an exact 50/50 split. */
.tp2026-solutions__media {
	flex: 0 0 calc(50% - 21px);
	max-width: 535px;
	aspect-ratio: 535 / 467;
	border-radius: var(--tp-radius-lg);
	overflow: hidden;
}

.tp2026-solutions__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tp2026-solutions__list {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Rows: collapsed 46px tall (1615:9793 — 6px/20px padding), open 194px
   (1615:9794 — 20px padding all round). Both radius 12. */
/* Open/close ride SPRING_PRESET_THREE (1615:9793/9795, 1655:15924 —
   fill null→#fafcff, stroke null→#ecf1f9, height 46→194). The stroke is an
   inset shadow rather than a border so it can fade from transparent and so
   opening doesn't add 2px of layout height on top of Figma's 194. */
.tp2026-solutions__item {
	border-radius: 12px;
	background: transparent;
	box-shadow: inset 0 0 0 1px transparent;
	transition:
		background var(--tp-speed-spring) var(--tp-ease-spring),
		box-shadow var(--tp-speed-spring) var(--tp-ease-spring);
}

.tp2026-solutions__item.is-open {
	background: #fafcff;
	box-shadow: inset 0 0 0 1px #ecf1f9;
}

.tp2026-solutions__item-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 6px 20px;
	text-align: left;
	transition: padding var(--tp-speed-spring) var(--tp-ease-spring);
}

.tp2026-solutions__item.is-open .tp2026-solutions__item-toggle {
	padding-top: 20px;
	padding-bottom: 0;
}

/* Figma textCase TITLE — 1563:8422/8431/8452/8466. */
.tp2026-solutions__item-title {
	font: var(--tp-h4);
	font-size: 20px;
	color: var(--tp-black);
	text-transform: capitalize;
}

.tp2026-solutions__item-chevron {
	flex-shrink: 0;
	display: inline-flex;
	color: var(--tp-black);
	transition: transform var(--tp-speed-spring) var(--tp-ease-spring);
}

.tp2026-solutions__item.is-open .tp2026-solutions__item-chevron {
	transform: rotate(180deg);
}

/* 12px title→description (1563:8429 gap), 16px description→Learn More
   (1634:15842 gap), 20px to the card bottom. */
.tp2026-solutions__item-body {
	padding: 12px 20px 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	overflow: hidden;
	max-height: 320px; /* cap only — real content is ~150px */
	opacity: 1;
	transition:
		max-height var(--tp-speed-spring) var(--tp-ease-spring),
		padding var(--tp-speed-spring) var(--tp-ease-spring),
		opacity var(--tp-speed-fast) var(--tp-ease),
		visibility 0s;
}

/* The JS toggles the `hidden` attribute; keeping the body in flow at zero
   height (rather than display:none) is what lets the 46↔194 height change
   animate at all. visibility:hidden keeps it out of the a11y tree and is
   delayed on close so the collapse stays visible while it runs. */
.tp2026-solutions__item-body[hidden] {
	display: flex;
	visibility: hidden;
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	transition:
		max-height var(--tp-speed-spring) var(--tp-ease-spring),
		padding var(--tp-speed-spring) var(--tp-ease-spring),
		opacity var(--tp-speed-fast) var(--tp-ease),
		visibility 0s var(--tp-speed);
}

/* 1563:8434 carries NO textCase — stays exactly as authored even though the
   title above it and the "Learn More" link below it are both title-cased. */
.tp2026-solutions__item-desc {
	font: var(--tp-body);
	color: var(--tp-gray-700);
	text-transform: none;
	margin: 0;
}

/* 1634:15837/15838 — 119x44 hit area, Bold 16/24 #1977f3, 8px icon gap. */
.tp2026-solutions__item-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	font: var(--tp-btn);
	color: var(--tp-blue);
	text-transform: capitalize; /* Figma textCase TITLE — 1634:15838 */
}

/* Responsive breakpoints reference (Figma frame = 1440):
   1440 desktop / 1024 small-desktop / 768 tablet / 425,375,320 mobile. */
@media (max-width: 1024px) {
	.tp2026-solutions__panel {
		gap: 28px;
	}

	.tp2026-solutions__media {
		flex-basis: 42%;
	}
}

/* ---------------------------------------------------------------------
 * Mobile — Figma 2486:9918 on the 360 frame:
 *
 *   heading    20,3884  340x34   28/34 SemiBold #021b42, centred on 340
 *   pill track 20,3942  525x61   window 340 wide, runs to the screen edge
 *     active   28,3948.5 184x48  #2c2c2c, 12/24 padding, 14/24 SemiBold
 *     others           162/163   12/20 padding, 14/24 Regular #595959
 *   image      20,4027  320x160  radius 20
 *   accordion  20,4199  320x184  4 rows of 40, 8px apart, radius 12
 *
 * The column is 340 wide, not 320: the pill track deliberately overhangs
 * the right gutter so the third pill reads as scrollable, and the heading
 * is centred on that same box — which is why it sits 10px right of the
 * page centre. The image and the accordion below stay at 320.
 * --------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* The accordion bottoms out at y4383 and "Our Products" is at y4447;
	   that section supplies 40 of the 64px gap. */
	.tp2026-solutions {
		padding-bottom: 24px;
	}

	.tp2026-solutions__heading,
	.tp2026-solutions__tabs-window {
		margin-right: -20px;
	}

	.tp2026-solutions__heading {
		font-size: 28px;
		line-height: 34px;
		margin-bottom: 24px;
	}

	.tp2026-solutions__tabs-window {
		margin-bottom: 24px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.tp2026-solutions__tabs-window::-webkit-scrollbar {
		display: none;
	}

	/* The track keeps its own 525px width inside that window, so its right
	   rounded end stays off-screen exactly as drawn. */
	/* Figma's 1px stroke is inside the 61x525 track, so the 6.5/8 padding it
	   reports is measured from the outer edge and the CSS border eats 1 of
	   each. */
	.tp2026-solutions__tabs {
		width: max-content;
		max-width: none;
		margin: 0;
		padding: 5.5px 7px;
		overflow: visible;
	}

	.tp2026-solutions__tab {
		padding: 12px 20px;
		font: 400 14px/24px var(--tp-font-body);
	}

	.tp2026-solutions__tab.is-active {
		padding-left: 24px;
		padding-right: 24px;
		font-weight: 600;
	}

	.tp2026-solutions__panel {
		flex-direction: column;
		align-items: stretch; /* the column is 320 wide, not shrink-to-fit */
		gap: 12px;
	}

	/* Figma 2283:4245 — 320x160, radius 20. The fill is the same photograph
	   at full width (1070x934 scales to 320x279.3), cropped 30.09% down. */
	.tp2026-solutions__media {
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
		aspect-ratio: 2 / 1;
		border-radius: 20px;
	}

	.tp2026-solutions__media img {
		object-position: center 30.09%;
	}

	/* Figma 2283:4418 — 320x40 rows, radius 12, 6/20 padding around a 28px
	   content line; the 24px label is centred against the 28px chevron. */
	.tp2026-solutions__list {
		gap: 8px;
	}

	.tp2026-solutions__item-toggle {
		gap: 7px;
		padding: 6px 20px;
	}

	.tp2026-solutions__item-title {
		font: 600 14px/24px var(--tp-font-heading);
	}

	/* Figma's glyph is a 14.85x9.07 filled chevron in a 28px frame. It points
	   up on every collapsed row there, which is the opposite of what a
	   collapsed row means everywhere else on this site — the size is matched,
	   the direction follows the desktop convention (down = closed). */
	.tp2026-solutions__item-chevron {
		width: 28px;
		height: 28px;
		align-items: center;
		justify-content: center;
	}

	.tp2026-solutions__item-chevron svg {
		width: 28px;
		height: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tp2026-solutions__tab,
	.tp2026-solutions__item,
	.tp2026-solutions__item-toggle,
	.tp2026-solutions__item-chevron,
	.tp2026-solutions__item-body {
		transition: none;
	}

	/* No height animation to run, so the body may as well leave the flow
	   entirely on close rather than sit at max-height 0. */
	.tp2026-solutions__item-body[hidden] {
		display: none;
		transition: none;
	}
}