/*
 * Italthai Post Cards Section
 *
 * The News & Updates section from Figma file c2weg7NhVbOsr1IgRzDTi6: an eyebrow and heading
 * on the left, a pill filter on the right, and a carousel of cards below that runs past the
 * right edge of the column.
 */

.itpc {
	--itpc-card-w: 566px;
	--itpc-gap: 24px;
	--itpc-card-radius: 16px;

	/* Follows the card unless the Image Radius control is given a value of its own. */
	--itpc-media-radius: var(--itpc-card-radius);

	/* Height as a multiple of Card Width. The design's card is 566.321 x 672, so at the
	 * 566px width above this lands on 672. */
	--itpc-card-ratio: 1.187;
	--itpc-card-pad: 24px;
	--itpc-text-inset: 0px; /* extra room for the copy only; the photo keeps the card padding */
	--itpc-text-top: 0px;

	/* One value for both gaps inside a card -- category to date, and date to title. The
	 * design uses 20px for each, so they are the same knob rather than two. */
	--itpc-content-gap: 20px;
	--itpc-image-ratio: 1.31;  /* 526 / 401 */
	--itpc-arrow-size: 65px;

	/* Entrance: everything fades, one after the next, --itpc-in-step apart. */
	--itpc-in-dur: 600ms;
	--itpc-in-step: 120ms;

	--itpc-card-bg: rgba(167, 169, 172, 0.09);
	--itpc-card-bg-hover: #02274c;
	--itpc-title-hover: #ffffff;

	/*
	 * The date needs a hover colour of its own. Left at its resting grey it would be
	 * #8a9099 on #02274c -- about 3.6:1, under the 4.5:1 that 11px type needs to stay
	 * legible. White at 75% clears it comfortably.
	 */
	--itpc-date-hover: rgba(255, 255, 255, 0.75);
	--itpc-eyebrow: #02274c;
	--itpc-eyebrow-icon: #90d2c1;
	--itpc-heading: #02274c;
	--itpc-category: #90d2c1;
	--itpc-date: #8a9099;
	--itpc-title: #02274c;
	--itpc-excerpt: #5c6670;
	--itpc-arrow-bg: #90d2c1;
	--itpc-arrow-fg: #ffffff;

	--itpc-pill-track: #ffffff;
	--itpc-pill: #9aa3ac;
	--itpc-pill-active-bg: #02274c;
	--itpc-pill-active: #90d2c1;

	/* The capsule's edge is a Mint-to-Sky-blue linear, both taken off the design's own node
	 * (1:148), where the active pill is Midnight Blue. */
	--itpc-pill-border-from: #90d2c1;
	--itpc-pill-border-to: #387ea8;

	--itpc-dot: rgba(2, 39, 76, 0.2);
	--itpc-dot-active: #90d2c1;
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

.itpc__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 36px;
}

.itpc__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: var(--itpc-eyebrow);
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 1.1px;
	text-transform: uppercase;
}

.itpc__eyebrow svg,
.itpc__eyebrow i {
	color: var(--itpc-eyebrow-icon);
	fill: currentColor;
	font-size: 13px;
	width: 13px;
	height: 13px;
}

/*
 * Every heading and paragraph below is qualified by an ancestor.
 *
 * The Elementor kit styles bare tags -- ".elementor-kit-N h2", "... h3", "... p" -- at
 * (0,1,1), which outranks a single class. The card title is an h3, and it was coming out at
 * the kit's 28px/34px instead of 15px: five lines of headline where the design has three,
 * and a card half again as tall as its proportion.
 */
.itpc .itpc__heading {
	margin: 0;
	color: var(--itpc-heading);
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Desktop V1 / Laptop (4676:4822, 198:23): 28 between the eyebrow and the heading, the filter
 * capsule sitting on the heading's baseline row (its foot level with the heading's), and the cards
 * 60 under the heading. */
@media (min-width: 1025px) {
	.itpc__head {
		align-items: flex-end;
		margin-bottom: 60px;
	}

	.itpc__eyebrow {
		margin-bottom: 28px;
	}
}

/* ---------------------------------------------------------------------------
 * Filter
 *
 * One capsule holding the pills, as in the design. The pills are buttons, so every
 * selector here is qualified by the parent: the Elementor kit styles bare `button` at
 * (0,1,1), which outranks a single class and would paint all of them navy.
 * ------------------------------------------------------------------------ */

/*
 * Sizes are the design's own, read off nodes 1:148 to 1:153: a 69px capsule holding a 55px
 * active pill inset 7px, and 30px of padding either side of every label. Those add up to
 * 495px against the design's 497px capsule, which is as close as the three real label widths
 * will land.
 */
.itpc__filter {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	/* No gap. The design's labels butt up against each other; their padding is the spacing. */
	gap: 0;
	padding: 7px;
	border-radius: 999px;
	background-color: var(--itpc-pill-track);
}

/*
 * The capsule edge, as a masked ring rather than a border.
 *
 * border-color takes a colour and the design's edge is a gradient, and the two-layer
 * background-clip trick needs an opaque fill to hide everything but the rim -- which would
 * stop being true the moment someone sets the capsule background to transparent. Masking the
 * middle out of the gradient is right whatever the fill is.
 */
.itpc__filter::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid transparent;
	background: linear-gradient(
		90deg,
		var(--itpc-pill-border-from),
		var(--itpc-pill-border-to)
	) border-box;
	-webkit-mask:
		linear-gradient(#000 0 0) padding-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) padding-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.itpc__filter .itpc-pill {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 20px 28px;
	border: 0;
	border-radius: 999px;
	background-color: transparent;
	color: var(--itpc-pill);
	font-size: 13px;

	/* 1.15 rather than 1.2 so 13px of type plus 20px above and below lands on the design's
	 * 55px pill, and the 7px capsule padding on its 69px capsule. */
	line-height: 1.15;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.itpc__filter .itpc-pill:hover {
	color: var(--itpc-pill-active-bg);
}

/*
 * The selected pill is roomier than the rest, not just filled: 35px of padding against 28px
 * (node 1:150 is 154px wide around an 83px label, where the unselected labels sit tighter).
 * The pill moves when the selection changes anyway, so the width change costs nothing.
 */
.itpc__filter .itpc-pill.is-active {
	padding-inline: 35px;
	color: var(--itpc-pill-active);
}

/*
 * The selected pill slides between tabs instead of one background fading out while another
 * fades in. It is a single element behind the labels, moved and resized onto whichever pill
 * is active -- there is only ever one of it, which is what makes the movement readable.
 *
 * translate/width/scale as separate properties rather than one transform, so the squash
 * below composes with the travel instead of overwriting it.
 */
.itpc__pill-glider {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: var(--itpc-glider-w, 0px);
	height: var(--itpc-glider-h, 0px);
	border-radius: 999px;
	background-color: var(--itpc-pill-active-bg);
	translate: var(--itpc-glider-x, 0px) var(--itpc-glider-y, 0px);
	transition:
		translate 520ms cubic-bezier(0.22, 1.16, 0.36, 1),
		width 520ms cubic-bezier(0.22, 1.16, 0.36, 1),
		scale 300ms cubic-bezier(0.34, 1.4, 0.5, 1);
	pointer-events: none;
}

/*
 * The droplet. Stretched along the direction of travel and thinned across it for the first
 * half of the move, then let go -- the same squash and stretch that makes a falling drop
 * read as liquid rather than as a sliding tile. Put on at the start of the move and taken
 * off part-way, so the easing above does the settling.
 */
.itpc__filter.is-sliding .itpc__pill-glider {
	scale: 1.07 0.9;
}

/*
 * Until the script has measured, the pill carries its own background and the glider is
 * invisible. Without this the selected tab would have no fill at all for the first frames,
 * and none ever on a page whose JavaScript failed.
 */
.itpc__filter:not(.is-ready) .itpc__pill-glider {
	opacity: 0;
}

.itpc__filter:not(.is-ready) .itpc-pill.is-active {
	background-color: var(--itpc-pill-active-bg);
}

/* Decoration, not information: a reader who asked for less motion gets the jump. */
@media (prefers-reduced-motion: reduce) {
	.itpc__pill-glider {
		transition: none;
	}

	.itpc__filter.is-sliding .itpc__pill-glider {
		scale: 1;
	}
}

.itpc__filter .itpc-pill:focus-visible {
	outline: 2px solid var(--itpc-pill-active-bg);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Carousel
 *
 * Swiper comes from Elementor, so there is nothing to load here -- only the geometry it
 * cannot know about. Slide width is a custom property so the Card Width control keeps
 * working with slidesPerView: 'auto'.
 * ------------------------------------------------------------------------ */

.itpc__viewport {
	/* Fades down while the cards are swapped over, then back up. See .is-swapping below. */
	transition: opacity 200ms ease;

	/*
	 * Out to the right edge of the window, so the cards run off the screen rather than
	 * stopping at the content column. The distance is measured in JS and arrives as this
	 * property; a negative right margin on an auto-width block widens the box by exactly
	 * that much, and Swiper's own overflow: hidden then clips at the window edge.
	 *
	 * calc(50% - 50vw) and 100vw were both wrong here: the first only lands correctly when
	 * the container happens to be centred, and vw counts the scrollbar, which shows up as a
	 * horizontal scrollbar of its own.
	 */
	margin-right: calc(-1 * var(--itpc-bleed-right, 0px));
}

.itpc-card {
	width: var(--itpc-card-w);
	max-width: 100%;

	/*
	 * The design's proportion as a floor, not a fixed size.
	 *
	 * aspect-ratio would pin the height exactly and then a five-line headline would be
	 * clipped by the card's own overflow: hidden. A min-height gives the same shape while
	 * leaving the card free to grow -- and because Swiper's wrapper is a flex row, whichever
	 * card grows takes the others with it, so the rail stays level either way.
	 */
	min-height: calc(var(--itpc-card-w) * var(--itpc-card-ratio));
	height: auto;
}

/* Qualified: Elementor's own `a` colour and text-decoration rules would otherwise win. */
.itpc__viewport .itpc-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--itpc-content-gap);
	height: 100%;
	padding: var(--itpc-card-pad);

	border-radius: var(--itpc-card-radius);
	background-color: var(--itpc-card-bg);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.3s ease;

	/* The photo runs out to the card's bottom edge, so the card does the clipping. */
	overflow: hidden;
}

/*
 * Hover: the card fills with navy and the headline turns white. Still no lift and no shadow
 * -- with cards this close together a shadow spills onto its neighbours, and a card that
 * rises is the one thing in the rail not flush with the others.
 */
.itpc__viewport .itpc-card__link:hover,
.itpc__viewport .itpc-card__link:focus-visible {
	background-color: var(--itpc-card-bg-hover);
}

/* (0,3,1) against the (0,2,0) that sets the resting colour, so these win without !important. */
.itpc__viewport .itpc-card__link:hover .itpc-card__title,
.itpc__viewport .itpc-card__link:focus-visible .itpc-card__title {
	color: var(--itpc-title-hover);
}

.itpc__viewport .itpc-card__link:hover .itpc-card__date,
.itpc__viewport .itpc-card__link:focus-visible .itpc-card__date {
	color: var(--itpc-date-hover);
}

.itpc__viewport .itpc-card__link:focus-visible {
	outline: 2px solid var(--itpc-arrow-bg);
	outline-offset: 3px;
}

.itpc-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.itpc-card__meta {
	display: flex;
	flex-direction: column;
	gap: var(--itpc-content-gap);
}

.itpc-card__cat {
	color: var(--itpc-category);
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.9px;
	text-transform: uppercase;
}

.itpc-card__date {
	color: var(--itpc-date);
	transition: color 0.3s ease;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.9px;
	text-transform: uppercase;
}

.itpc-card__arrow {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--itpc-arrow-size);
	height: var(--itpc-arrow-size);
	border-radius: 50%;
	background-color: var(--itpc-arrow-bg);
	color: var(--itpc-arrow-fg);
}

.itpc-card__arrow svg {
	width: 42%;
	height: 42%;
	transition: translate 0.25s ease;
}

/*
 * The whole hover state: the arrow shifts along the diagonal it already points down, and
 * nothing else on the card moves. No lift and no shadow -- with cards this close together a
 * shadow spills onto its neighbours, and a card that rises is the one thing in the rail that
 * is not flush with the others.
 *
 * translate rather than transform, so it composes with anything Swiper puts on the card.
 */
.itpc__viewport .itpc-card__link:hover .itpc-card__arrow svg,
.itpc__viewport .itpc-card__link:focus-visible .itpc-card__arrow svg {
	translate: 2px -2px;
}

/* The copy sits further in than the photo (Figma: text 50 in and 55 down, photo 20 in). */
.itpc-card__head {
	padding-top: var(--itpc-text-top);
}

.itpc-card__head,
.itpc__viewport .itpc-card__title,
.itpc__viewport .itpc-card__excerpt {
	padding-left: var(--itpc-text-inset);
}

.itpc__viewport .itpc-card__title {
	margin: 0;
	color: var(--itpc-title);
	transition: color 0.3s ease;
	font-size: 15px;
	line-height: 1.55;

	/* At most four lines (user, 2026-10-26); the Title Max Lines control sets it per breakpoint. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--itpc-title-lines, 4);
	line-clamp: var(--itpc-title-lines, 4);
	overflow: hidden;
}

.itpc__viewport .itpc-card__excerpt {
	margin: 0;
	color: var(--itpc-excerpt);
	font-size: 13px;
	line-height: 1.6;
}

/*
 * The photo hugs the bottom-right corner of the card.
 *
 * Its bottom edge lands on the card's bottom edge; left and right keep the card's padding,
 * so it sits centred. Only the bottom margin is cancelled.
 *
 * margin-top stays auto so a short title does not pull the photo up: every photo in the rail
 * sits on the same line, whatever the headline above it is doing.
 */
.itpc-card__media {
	margin-top: auto;
	margin-bottom: calc(-1 * var(--itpc-card-pad));

	/*
	 * The wrapper does the clipping, so the radius below actually cuts the photo.
	 *
	 * Without it the radius is drawn on a box with nothing in it -- the img paints its own
	 * square corners straight over the curve, and Elementor's ".elementor img{border-radius:0}"
	 * makes sure they stay square. The card's own overflow: hidden is no help: its curve is at
	 * the card's corners, while these two are in the middle of it.
	 */
	overflow: hidden;

	/*
	 * Rounded on top, square where it meets the bottom of the card -- the bottom corners fall
	 * well inside the card's own curve, so nothing needs clipping there.
	 *
	 * --itpc-media-radius resolves to the card's radius until the Image Radius control is
	 * moved. That control ships with no default on purpose: Elementor writes a responsive
	 * control's value whenever it has one, so a default of 16 would emit 16 and cut the link
	 * to Card Radius before anyone had asked for it.
	 */
	border-radius: var(--itpc-media-radius) var(--itpc-media-radius) 0 0;
	aspect-ratio: var(--itpc-image-ratio);
}

/* Qualified by the parent: Elementor ships ".elementor img{height:auto}" at (0,1,1). */
.itpc-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Controls
 *
 * Dots and arrows on one flex row, so the dots sit on the arrows' centre line rather
 * than wherever Swiper's absolute positioning would have put them.
 * ------------------------------------------------------------------------ */

.itpc__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	/* Under the first card, on the same line as the heading above it. */
	justify-content: flex-start;
	gap: 20px;
	margin-top: 28px;
}

/*
 * Swiper's pagination is absolutely positioned with bottom: 10px. Overriding position
 * alone is not enough -- the offset still applies to a relative element and lifts the dots
 * off the row -- so inset goes back to auto as well.
 */
.itpc__controls .itpc__pagination {
	position: relative;
	inset: auto;
	z-index: 10;
	display: flex;
	align-items: center;

	/*
	 * The spacing is on the bullets. A gap belongs to the container, so it outlives a bullet
	 * collapsing to nothing and leaves a hole where the dot was.
	 */
	gap: 0;
	width: auto;
}

/*
 * One bar and three dots, however many posts there are.
 *
 * Swiper renders one bullet per slide and they all stay clickable -- the extras are collapsed,
 * not removed, so the dots keep working as the only control in this section. The closed state is
 * a width and a margin rather than display: none, which cannot be transitioned: the leading dot
 * narrows away as the next one opens, so the row reads as sliding along.
 */
.itpc__controls .itpc__pagination .swiper-pagination-bullet {
	/* The same indicator as the services carousel, so the two sections read as one system. */
	--itpc-dot-size: 15px;
	--itpc-dot-gap: 14px;
	--itpc-dot-bar: 83px;

	flex: 0 0 auto;
	width: 0;
	height: var(--itpc-dot-size);
	margin: 0;
	opacity: 0;
	background-color: var(--itpc-dot);
	transition:
		width 420ms cubic-bezier(0.22, 1, 0.36, 1),
		margin 420ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 340ms ease,
		background-color 250ms ease;
}

/*
 * The window follows the active bullet along the sibling chain; the :has() rule takes over near
 * the end, where fewer than three bullets are left after it -- without it the row would shrink
 * to a single marker on the last slide.
 */
.itpc__controls .itpc__pagination .swiper-pagination-bullet-active,
.itpc__controls .itpc__pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet,
.itpc__controls .itpc__pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet + .swiper-pagination-bullet,
.itpc__controls .itpc__pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet + .swiper-pagination-bullet + .swiper-pagination-bullet,
.itpc__controls .itpc__pagination:has(.swiper-pagination-bullet-active:nth-last-child(-n+3)) .swiper-pagination-bullet:nth-last-child(-n+4) {
	width: var(--itpc-dot-size);
	margin: 0 var(--itpc-dot-gap) 0 0;
	opacity: 1;
}

/* The bar. Last, so it keeps the width the rule above would otherwise hand it. */
.itpc__controls .itpc__pagination .swiper-pagination-bullet-active {
	width: var(--itpc-dot-bar);
	border-radius: 999px;
	background-color: var(--itpc-dot-active);
}

.itpc .itpc__empty {
	padding: 40px 0;
	color: var(--itpc-date);
	font-size: 14px;
}

/* ---------------------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------------------ */

/*
 * Only what no control owns.
 *
 * Card width, gap and the two arrow sizes are responsive controls, and Elementor writes
 * those to "{{WRAPPER}} .itpc" -- (0,2,0), which beats anything a media query here can say
 * about .itpc at (0,1,0). Their per-breakpoint values are tablet_default and mobile_default
 * on the controls instead. Setting them again here looked like it worked and did nothing.
 */
@media (max-width: 1024px) {
	.itpc .itpc__heading {
		font-size: 26px;
	}
}

@media (max-width: 767px) {
	.itpc__head {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 24px;
	}

	/*
	 * The eyebrow and the heading only. It goes on .itpc__intro rather than on the head, which
	 * also holds the filter pills -- they line up with the cards below and are meant to.
	 */
	.itpc__intro {
		padding-left: 18px;
	}

	/*
	 * The rail and its dots move in by the same 18px, so the cards line up under the heading
	 * rather than under the filter bar.
	 *
	 * Margin, not padding. Padding is inside the swiper's box, so the outgoing card slid into
	 * that strip and sat there half-visible instead of being clipped -- a sliver of card in the
	 * gutter. A margin moves the clipping edge itself, so there is nothing to the left of it.
	 *
	 * The negative right margin that carries the rail off the screen is a separate declaration
	 * and is untouched; the JS measures the box's right edge, which this does not move.
	 */
	.itpc__viewport {
		margin-left: 18px;
	}

	.itpc__controls {
		margin-left: 18px;
	}

	/*
	 * Shrunk to fit rather than made to scroll. An overflow-x on the capsule turns it into a
	 * scroll container, and the ring above -- absolutely positioned inside it -- would then
	 * scroll away with the pills. At this size the three labels fit across a 375px screen.
	 */
	/*
	 * Full width, so the capsule sits 18px from both screen edges whatever the screen is.
	 *
	 * Left to size itself to its three labels it came out narrower than the row and, because
	 * the head aligns its children to the start, the slack all collected on the right -- 22px
	 * on one side against 34px on the other at 428px wide.
	 */
	.itpc__filter {
		width: 100%;
		max-width: 100%;
		padding: 5px;

		/* One row, always. See the pills below for why this is safe. */
		flex-wrap: nowrap;
	}

	/*
	 * A third of the row each, whatever their labels say.
	 *
	 * flex: 1 1 auto sized them from their own text first and only then shared what was left,
	 * so on a 375px screen "Company News" and the wider selected pill together asked for more
	 * than the row had and "CSR News" dropped to a second line. A zero basis takes the text out
	 * of the sum: three equal columns, and the row cannot overflow because there is nothing to
	 * overflow with.
	 */
	.itpc__filter .itpc-pill {
		flex: 1 1 0;
		min-width: 0;
		padding: 22px 4px;

		/*
		 * Sized to the screen so the longest label always fits its third of the row.
		 *
		 * At a flat 10px "Company News" was wider than the 91px column a 320px screen leaves
		 * it, and with nowrap the overflow pushed the page sideways by 24px. 2.8vw reaches the
		 * 11px this was signed off at by 393px and holds there; below that it gives way.
		 */
		font-size: clamp(8.5px, 2.8vw, 11px);
		letter-spacing: 0.6px;
		white-space: nowrap;
	}

	/*
	 * The selected pill gives up its extra 35px of side padding here. It is a desktop flourish
	 * -- room around the label that the pill can afford -- and on a phone it is 70px taken off
	 * the two pills beside it. Same weight as the rule that sets it, further down the file.
	 */
	.itpc__filter .itpc-pill.is-active {
		padding-inline: 4px;
	}
}

/*
 * More categories than fit (user, 2026-10-26): the tabs scroll sideways inside the ring, on
 * desktop and phone alike. The ring stays on .itpc__filter; the track inside it scrolls, and the
 * glider lives in the track so it scrolls with the tab it sits under. No visible scrollbar --
 * swipe, trackpad, or the mouse wheel (mapped sideways in the script).
 */
.itpc__filter {
	flex-wrap: nowrap;
	max-width: 100%;
}

.itpc__filter-track {
	position: relative;
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-radius: 999px;
}

.itpc__filter-track::-webkit-scrollbar {
	display: none;
}

.itpc__filter .itpc-pill {
	flex-shrink: 0;
}

/* Phone: the tabs still share the row when they fit, but no longer squeeze to fit -- past that
 * the row scrolls. */
@media (max-width: 767px) {
	.itpc__filter-track {
		flex: 1 1 auto;
	}
}

/* ---------------------------------------------------------------------------
 * Entrance
 *
 * Gated behind .is-anim, which the script adds when it takes charge, so a page whose
 * JavaScript never arrives shows the section complete rather than blank. .is-in is added
 * when the section reaches the viewport and never removed: this plays once.
 *
 * Opacity only. The cards are Swiper slides and Swiper owns their transform -- animating
 * one here would be overwritten mid-flight, and fighting it is not worth a fade.
 *
 * Note where the transitions live: on the shown state, not the hidden one. Declared on the
 * hidden state, adding .is-anim would fade the section OUT first, before the fade in had
 * been asked for. Hiding is instant; only the arrival is animated.
 * ------------------------------------------------------------------------ */

.itpc.is-anim .itpc__eyebrow,
.itpc.is-anim .itpc__heading,
.itpc.is-anim .itpc__filter,
.itpc.is-anim .itpc-card,
.itpc.is-anim .itpc__controls {
	opacity: 0;
}

.itpc.is-anim.is-in .itpc__eyebrow,
.itpc.is-anim.is-in .itpc__heading,
.itpc.is-anim.is-in .itpc__filter,
.itpc.is-anim.is-in .itpc-card,
.itpc.is-anim.is-in .itpc__controls {
	opacity: 1;
	transition: opacity var(--itpc-in-dur) ease;
}

.itpc.is-anim.is-in .itpc__eyebrow {
	transition-delay: 0ms;
}

.itpc.is-anim.is-in .itpc__heading {
	transition-delay: calc(1 * var(--itpc-in-step));
}

.itpc.is-anim.is-in .itpc__filter {
	transition-delay: calc(2 * var(--itpc-in-step));
}

/*
 * The cards count forward from whichever slide Swiper has made active, not from the first
 * one in the markup: with the loop on, the markup starts with clones sitting off to the
 * left, so a stagger keyed to document order would spend itself on cards nobody can see.
 */
.itpc.is-anim.is-in .itpc-card {
	transition-delay: calc(3 * var(--itpc-in-step));
}

.itpc.is-anim.is-in .swiper-slide-active + .itpc-card {
	transition-delay: calc(4 * var(--itpc-in-step));
}

.itpc.is-anim.is-in .swiper-slide-active + .itpc-card + .itpc-card {
	transition-delay: calc(5 * var(--itpc-in-step));
}

.itpc.is-anim.is-in .swiper-slide-active + .itpc-card + .itpc-card + .itpc-card {
	transition-delay: calc(6 * var(--itpc-in-step));
}

.itpc.is-anim.is-in .itpc__controls {
	transition-delay: calc(7 * var(--itpc-in-step));
}

@media (prefers-reduced-motion: reduce) {
	.itpc.is-anim .itpc__eyebrow,
	.itpc.is-anim .itpc__heading,
	.itpc.is-anim .itpc__filter,
	.itpc.is-anim .itpc-card,
	.itpc.is-anim .itpc__controls,
	.itpc.is-anim.is-in .itpc__eyebrow,
	.itpc.is-anim.is-in .itpc__heading,
	.itpc.is-anim.is-in .itpc__filter,
	.itpc.is-anim.is-in .itpc-card,
	.itpc.is-anim.is-in .itpc__controls {
		opacity: 1;
		transition: none;
	}
}

/*
 * The filter swap.
 *
 * The rail is emptied and refilled in one synchronous step, which on its own reads as a
 * flick. Held at zero opacity for the length of the fade, the rebuild lands unseen and the
 * cards simply appear as the rail comes back up.
 */
.itpc.is-swapping .itpc__viewport {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.itpc__viewport,
	.itpc.is-swapping .itpc__viewport {
		opacity: 1;
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Laptop (1025 to 1366), Figma frame 198:23: the title 48 under the eyebrow's top and the
 * cards 69 under the title.
 * ------------------------------------------------------------------------ */

@media (min-width: 1025px) and (max-width: 1366px) {
	.itpc__eyebrow {
		margin-bottom: 32px;
	}

	.itpc__head {
		margin-bottom: 64px;
	}
}

/* Mobile V1 (Figma 4651:3047, 430 wide), after the rules above:
 * - the filter is a 401 ring across the screen (15 in), its pills 55 tall in Medium 14, the
 *   inactive ones at half strength;
 * - in the card (358 x 490, radius 30, padding 28 -- set on the widget) the copy starts 32 down, the
 *   arrow sits 9 from the top-right corner, and the photo widens to 332 (13 in from the card's edges)
 *   and stays on its foot;
 * - no dots under the rail. */
@media (max-width: 767px) {
	.itpc__filter {
		width: calc(100% + 7px);
		max-width: none;
		margin-left: -3px;
	}

	.itpc__filter .itpc-pill {
		flex: 1 0 auto; /* share the row when they fit; past that the track scrolls */
		padding: 21px 9px;
		font-size: clamp(11px, 3.26vw, 14px);
		font-weight: 500;
		letter-spacing: 0.7px;
	}

	.itpc__viewport .itpc-card__link {
		position: relative;
		padding-top: 32px;
	}

	.itpc-card__arrow {
		position: absolute;
		top: 9px;
		right: 9px;
	}

	.itpc-card__media {
		margin-right: -15px;
		margin-left: -15px;
	}

	.itpc__controls {
		display: none;
	}

	/* The heading 47 under the eyebrow's top, the filter 42 under the heading, the cards 43 under the filter. */
	.itpc__eyebrow {
		margin-bottom: 25px; /* the heading 44 under the eyebrow's top (measured text by text) */
	}

	.itpc__head {
		gap: 45px;
		margin-bottom: 41px;
	}
}

/* Mobile V1 (Figma 4651:3047): the eyebrow icon 21, 12 from its label. */
@media (max-width: 767px) {
	.itpc__eyebrow {
		gap: 12px;
	}

	.itpc__eyebrow svg,
	.itpc__eyebrow i {
		width: 21px;
		height: 21px;
		font-size: 21px;
	}
}

/* Home phone (Figma 4651:3047): tracking as drawn -- eyebrow .7, heading none, card meta .84. */
@media (max-width: 767px) {
	.itpc .itpc__eyebrow {
		letter-spacing: 0.7px;
	}

	.itpc .itpc__heading {
		letter-spacing: 0;
	}

	.itpc .itpc-card__cat,
	.itpc .itpc-card__date {
		letter-spacing: 0.84px;
	}
}