/*
 * What's New — News/Blogs card showcase.
 * Figma: instance 1825:10891 "Blog & News Section" (1113x627, narrow
 * container). Head row = title (#021b42 / var(--tp-heading)) + a 2-tab
 * pill switcher (Blogs/News, active tab = blue pill #1977f3 /
 * var(--tp-blue)). 3-up card grid: top image (rounded top corners only)
 * + white body (border #d9d9d9, rounded bottom corners) with date,
 * headline and a "Learn More" link. Footer = divider line + pill
 * "View More" button + divider line.
 */

/* Figma sets textCase=TITLE on all 13 text nodes in this section with no
   exclusions (titlecase manifest: whats-new.txt), so the transform is
   inherited from the section root rather than repeated per element. */
.tp2026-whats-new {
	text-transform: capitalize;
}

.tp2026-whats-new__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 42px;
}

/* Figma 1820:4653 — SemiBold 40px, lineHeight 100% (=1), #021b42. */
.tp2026-whats-new__title {
	font: var(--tp-h2);
	color: var(--tp-heading);
}

/* Tabs ------------------------------------------------------------------ */

.tp2026-whats-new__tabs {
	display: inline-flex;
	align-items: center;
	/* Figma 1820:4654 — 215x62 pill; tabs at x=10 (w93) and x=113 (w92) => 10px gap. */
	gap: 10px;
	padding: 9px 10px;
	background: #e2eaf4;
	border-radius: var(--tp-radius-pill);
	flex-shrink: 0;
}

.tp2026-whats-new__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 10px 24px;
	border-radius: var(--tp-radius-pill);
	font: 700 16px/24px var(--tp-font-body);
	color: var(--tp-black);
	background: transparent;
	transition: background var(--tp-speed-fast) var(--tp-ease), color var(--tp-speed-fast) var(--tp-ease);
}

/* Figma 1825:10818 ON_HOVER (SMART_ANIMATE 300ms OUT_CUBIC) — the only
   property the target variant changes is the label fill: #131313 → #1977f3.
   The pill background stays transparent until the tab is selected. */
.tp2026-whats-new__tab:not(.is-active):hover,
.tp2026-whats-new__tab:not(.is-active):focus-visible {
	color: var(--tp-blue);
}

/* Figma 1825:10818 ON_CLICK — selected tab takes the blue fill and a white
   label; same 300ms OUT_CUBIC, carried by the transition above. */
.tp2026-whats-new__tab.is-active {
	background: var(--tp-blue);
	color: var(--tp-white);
}

/* Card grid --------------------------------------------------------------- */

.tp2026-whats-new__panel {
	width: 100%;
}

/* The ON_CLICK target swaps the whole card row. The swap itself is the
   existing JS `hidden` toggle; this only gives the incoming panel the
   300ms OUT_CUBIC fade the Figma SMART_ANIMATE implies. */
.tp2026-whats-new__panel:not([hidden]) {
	animation: tp2026-whats-new-panel-in var(--tp-speed-fast) var(--tp-ease) both;
}

@keyframes tp2026-whats-new-panel-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.tp2026-whats-new__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.tp2026-whats-new__card {
	display: flex;
	flex-direction: column;
}

/* Figma 1820:4661 — 355x209, radius "20/20//" (top corners only). The image
   fill is the post's featured image (FR-052/053), cropped to the frame. */
.tp2026-whats-new__media {
	position: relative;
	height: 209px;
	overflow: hidden;
	border-radius: 20px 20px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--tp-gray-100) 0%, var(--tp-gray-300) 100%);
	color: var(--tp-gray-500);
}

.tp2026-whats-new__media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Paired with the card hover below; see the note there. */
	transition: transform var(--tp-speed-slow) var(--tp-ease-gentle);
}

.tp2026-whats-new__media-icon svg {
	display: block;
}

/* NOT FROM THE FIGMA FILE. The file's prototype carries ON_HOVER variants for
   the tabs (1825:10818) and the View More pill (1820:4910) only — the cards
   have none, which reads as an omission now that each one is a real link to an
   article. This is the minimum affordance: the thumbnail eases in and the
   Learn More arrow steps along its own diagonal. Delete both rules if the
   design confirms the cards are meant to be inert. */
.tp2026-whats-new__card:hover .tp2026-whats-new__media-img,
.tp2026-whats-new__card:focus-within .tp2026-whats-new__media-img {
	transform: scale(1.04);
}

.tp2026-whats-new__card:hover .tp2026-whats-new__link svg,
.tp2026-whats-new__card:focus-within .tp2026-whats-new__link svg {
	transform: translate(2px, -2px);
}

/* Figma 1820:4662 — 355x246, #ffffff, 1px #d9d9d9 stroke on all four sides,
   radius 24, 24px padding, 12px gap between date and headline. */
.tp2026-whats-new__body {
	flex: 1 1 auto;
	padding: 24px;
	background: var(--tp-white);
	border: 1px solid #d9d9d9;
	border-radius: 0 0 var(--tp-radius-lg) var(--tp-radius-lg);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tp2026-whats-new__date {
	font: 600 20px/24px var(--tp-font-body);
	color: var(--tp-gray-700);
}

.tp2026-whats-new__card-title {
	font: var(--tp-h4);
	color: var(--tp-black);
}

.tp2026-whats-new__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	/* Figma 1820:4663 gap=16 between the date/headline group and this link;
	   12px comes from the body gap, so 4px is added here. */
	padding-top: 4px;
	min-height: 44px;
	font: 700 16px/24px var(--tp-font-body);
	color: var(--tp-blue);
	align-self: flex-start;
}

.tp2026-whats-new__link svg {
	flex-shrink: 0;
	transition: transform var(--tp-speed-fast) var(--tp-ease);
}

/* Footer / View More ------------------------------------------------------ */

.tp2026-whats-new__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 24px;
}

/* Figma 1820:4741 / 1820:4747 — 428x1 rules with a linear gradient from
   #25252580 (button side) to #ffffff (outer edge); mirrored left/right. */
.tp2026-whats-new__divider {
	flex: 1 1 auto;
	height: 1px;
	max-width: 428px;
	background: linear-gradient(90deg, rgba(37, 37, 37, 0.5) 0%, #ffffff 100%);
}

.tp2026-whats-new__divider:first-child {
	background: linear-gradient(90deg, #ffffff 0%, rgba(37, 37, 37, 0.5) 100%);
}

.tp2026-whats-new__view-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 44px;
	padding: 10px 24px;
	min-width: 153px;
	border: 1px solid var(--tp-black);
	border-radius: var(--tp-radius-pill);
	font: 700 16px/24px var(--tp-font-body);
	color: var(--tp-black);
	transition: background var(--tp-speed-fast) var(--tp-ease), border-color var(--tp-speed-fast) var(--tp-ease), color var(--tp-speed-fast) var(--tp-ease);
}

/* Figma 1820:4910 ON_HOVER (SMART_ANIMATE 300ms OUT_CUBIC) — outline pill
   inverts: fill null → #131313, stroke #131313 → null, label → #ffffff.
   This instance has no icon child, so the shared icon-pill slide from
   base.css does not apply here — colour inversion only, same size. */
.tp2026-whats-new__view-more:hover,
.tp2026-whats-new__view-more:focus-visible {
	background: var(--tp-black);
	border-color: transparent;
	color: var(--tp-white);
}

@media (prefers-reduced-motion: reduce) {
	.tp2026-whats-new__tab,
	.tp2026-whats-new__view-more,
	.tp2026-whats-new__media-img,
	.tp2026-whats-new__link svg {
		transition: none;
	}

	/* Colour still inverts on hover; only the movement is dropped. */
	.tp2026-whats-new__card:hover .tp2026-whats-new__media-img,
	.tp2026-whats-new__card:focus-within .tp2026-whats-new__media-img,
	.tp2026-whats-new__card:hover .tp2026-whats-new__link svg,
	.tp2026-whats-new__card:focus-within .tp2026-whats-new__link svg {
		transform: none;
	}

	.tp2026-whats-new__panel:not([hidden]) {
		animation: none;
	}
}

/* Responsive breakpoints reference (Figma frame = 1440):
   1440 desktop / 1024 small-desktop / 768 tablet / 425 mobile */

/* The row is always exactly three cards (FR-052), so a 2-up step would strand
   the third one alone on a second row. 984px of container still gives three
   312px cards here — wide enough to keep the Figma layout — so the grid holds
   at 3 columns and drops straight to a single column at 768. */
@media (max-width: 1024px) {
	.tp2026-whats-new__title {
		font-size: 32px;
	}

	.tp2026-whats-new__media {
		height: 180px;
	}

	.tp2026-whats-new__body {
		padding: 20px;
	}
}

/* ---------------------------------------------------------------------------
   Mobile — Figma 2308:2653 on the 360 frame:

     title      92,6441  177x34   28/34 SemiBold #021b42, centred
     tab track  84,6491  193x58   radius 88, #e2eaf4, two 92x44 pills
     cards      20,6573  320x574  12 apart, radius 20, 1px #d9d9d9, 20 padding
       date             280x18    14/17.64 SemiBold #595959
       title            280x78/52 18/26 SemiBold #131313
       Learn More       102x36    14/24 Bold #1977f3 + an 18px arrow
     View More  20,7167  320x44   outlined #131313, full width

   The featured image is not on the mobile card at all — the whole thing is
   date / headline / link, which is what makes it a flat 192 (or 166 where the
   headline runs to two lines rather than three).
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* The View More pill bottoms out at y7211 and "Our Valued Partners" is at
	   y7275; that section supplies 40 of the 64px gap. */
	.tp2026-whats-new {
		padding-bottom: 24px;
	}

	.tp2026-whats-new__head {
		flex-direction: column;
		align-items: center;
		gap: 16px;
		margin-bottom: 24px;
	}

	.tp2026-whats-new__title {
		font-size: 28px;
		line-height: 34px;
		text-align: center;
	}

	/* 2308:2587 — 58px track, the two pills sitting flush against each other
	   inside a 7px inset rather than the desktop 9/10 with a 10px gap. */
	.tp2026-whats-new__tabs {
		gap: 0;
		padding: 7px 4px;
		border-radius: 88px;
	}

	.tp2026-whats-new__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* 2308:2630 — no thumbnail on the mobile card, so the body *is* the card
	   and takes the full radius and border back. */
	.tp2026-whats-new__media {
		display: none;
	}

	/* 19 rather than 20: Figma's 1px stroke is inside the card, so the padding
	   it reports is measured from the outer edge. Gap 8 is the date-to-headline
	   step; the extra 4 that takes the headline-to-link step to 12 rides on the
	   link itself. */
	.tp2026-whats-new__body {
		padding: 19px;
		border-radius: 20px;
		gap: 8px;
	}

	.tp2026-whats-new__date {
		font: 600 14px/18px var(--tp-font-body);
	}

	.tp2026-whats-new__card-title {
		font: 600 18px/26px var(--tp-font-heading);
	}

	/* 2308:2625 — 36px tall on a 6px vertical inset, 14/24 label beside an
	   18px arrow. Figma draws a 2px blue stroke around it that its own render
	   does not show, so it stays a plain text link as on desktop. */
	.tp2026-whats-new__link {
		min-height: 36px;
		padding-top: 0;
		margin-top: 4px; /* 8 body gap + 4 = Figma's 12 under the headline */
		font: 700 14px/24px var(--tp-font-body);
	}

	.tp2026-whats-new__link svg {
		width: 18px;
		height: 18px;
	}

	.tp2026-whats-new__footer {
		margin-top: 20px;
	}

	.tp2026-whats-new__divider {
		display: none;
	}

	.tp2026-whats-new__view-more {
		flex: 1 1 auto;
		width: 100%;
		padding: 10px 16px;
		border-radius: 59px;
	}
}

@media (max-width: 425px) {
	.tp2026-whats-new__tabs {
		max-width: 100%;
	}

	/* The 20/28 headline this used to set is superseded by Figma 2308:2605,
	   which keeps 18/26 the whole way down the mobile range. */
	.tp2026-whats-new__footer {
		flex-direction: column;
	}
}