/*
 * Italthai Services Carousel
 *
 * Geometry is taken from Figma node 1:263, where a card is 449x603. Every offset below
 * is that measurement expressed as a percentage of the card, so the layout holds at any
 * slidesPerView or viewport instead of only at the 1366px the design was drawn at.
 *
 * Default type sizes come off --itsc-card-width for the same reason: the title is 25px on
 * the design's 449px card, so it is 5.57% of whatever width is set. Container query units
 * did the same job but needed a working container context on the card; a calc against the
 * variable that already defines the width needs none. Elementor's typography controls
 * override these whenever a fixed size is wanted.
 */

.itsc {
	/* The design card is 449x603. Both dimensions are pinned rather than derived from an
	 * aspect ratio or from how many slides are on screen: Swiper runs with
	 * slidesPerView:'auto' and takes the width from here, so the number of cards visible
	 * is whatever the viewport fits. */
	--itsc-card-width: 450px;
	--itsc-card-height: 605px;
	--itsc-radius: 20px;
	/* The two colours the closed cards run through, in order. */
	--itsc-panel-a: #387ea8;
	--itsc-panel-b: #90d2c1;
	--itsc-active-bg: #ffffff;
	--itsc-panel-title: #ffffff;
	--itsc-title: #00355f;
	--itsc-desc: #58595b;
	--itsc-arrow-bg: #90d2c1;
	--itsc-arrow-fg: #ffffff;
	--itsc-bullet-active: #02274c;
	--itsc-bullet: #a7a9ac;

	--itsc-nav-size: 56px;
	--itsc-nav-fg: #90d2c1;
	--itsc-nav-border: rgba(2, 39, 76, 0.2);
	--itsc-nav-hover-bg: #90d2c1;
	--itsc-nav-hover-fg: #ffffff;

	/*
	 * Two layers: a tight one to seat the card against the page and a wide soft one for
	 * the lift. Tinted with the brand navy rather than neutral black, which keeps it from
	 * reading as grey against the white card. Reach: 56px sideways, 76px down, 36px up.
	 */
	--itsc-shadow:
		0 2px 8px rgba(2, 39, 76, 0.06),
		0 20px 56px rgba(2, 39, 76, 0.16);

	/*
	 * The open card's image mask, traced from the alpha channel of the Figma export of
	 * node 1:267 rather than by eye: a 45-degree cut off the top-left, a rectangular
	 * bite out of the bottom-left, and a second 45-degree cut off the bottom-right.
	 * Verified against the exported silhouette to within 0.3% of the image width.
	 */
	--itsc-media-clip: polygon(
		34.1% 0,
		100% 0,
		100% 66.5%,
		66.2% 100%,
		34.1% 100%,
		34.1% 66.5%,
		0 66.5%,
		0 34.2%
	);

	position: relative;
}

/*
 * The viewport is allowed to spill past the column it sits in, so the row of cards runs
 * to the edge of the screen the way it does in the design, while the first card still
 * lines up with the text above it.
 */
.itsc__viewport {
	overflow: hidden;

	/* Above the shadow stand-in below, so the cards cover its body and only its
	 * shadow is left showing. */
	position: relative;
	z-index: 1;

	/*
	 * overflow:hidden has to stay -- it is what clips the row of cards at the content
	 * edge, which is what stops the cards sliding past from appearing in the page
	 * margin. Padding buys back vertical room, where a clip would cut the shadow off
	 * mid-gradient and read as a hard seam, and the negative margins cancel it so the
	 * widget still occupies its original box.
	 *
	 * Nothing sideways: moving this clip edge left is exactly what let the passing
	 * cards show. The open card's sideways shadow comes from .itsc__lift instead.
	 */
	padding-top: 40px;
	padding-bottom: 80px;
	margin-top: -40px;
	margin-bottom: -80px;

	/*
	 * Full-bleed to the right: the row runs off the edge of the window rather than
	 * stopping at the container. The distance is measured in JS from the real window edge
	 * rather than with calc(50% - 50vw), because 100vw counts the scrollbar and would add
	 * a horizontal one of its own.
	 */
	margin-right: calc(-1 * var(--itsc-bleed-right, 0px));
}

/*
 * The cards behind the open one: a soft shadow so a white card still reads as a card on the
 * white page (user, 2026-10-27). The Closed Card Shadow control overrides it. A hovered card
 * keeps the full lift shadow below.
 */
.itsc__slide:not(.swiper-slide-active):not(.is-open) .itsc-card:not(:hover) {
	box-shadow:
		0 2px 6px rgba(2, 39, 76, 0.06),
		0 8px 24px rgba(2, 39, 76, 0.1);
}

/* ---------------------------------------------------------------------------
 * The open card's shadow.
 *
 * Cast by a stand-in rather than by the card itself. The card lives inside the
 * clipped viewport, and that clip has to sit exactly on the content edge -- move it
 * outwards and the cards sliding past start showing in the page margin, leave it
 * there and it shears the shadow off flat down the card's left side. Neither is
 * acceptable, and one overflow box cannot do both at once.
 *
 * So this element sits outside the clip, is positioned over the open card by the JS,
 * paints no background of its own, and does nothing but cast the shadow. It renders
 * below the viewport, so the opaque card covers its body while the shadow spreads out
 * past the clip on every side.
 * ------------------------------------------------------------------------ */

.itsc__lift {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: var(--itsc-card-width, 450px);
	height: var(--itsc-card-height, 605px);
	border-radius: var(--itsc-radius);
	box-shadow: var(--itsc-shadow);
	pointer-events: none;

	/* Hidden until the JS has measured a real card to sit under, and hidden again
	 * while the row is moving -- the active slide changes partway through a
	 * transition, which would otherwise make the shadow jump ahead of the card. */
	opacity: 0;
	transition: opacity 0.2s ease;
}

.itsc.is-settled .itsc__lift {
	opacity: 1;
}

/*
 * Qualified by the parent: Swiper's own ".swiper-slide{width:100%}" has the same
 * specificity, and with slidesPerView:'auto' the slide width here is what decides
 * the card size, so it must not come down to stylesheet order.
 */
.itsc__viewport .itsc__slide {
	width: var(--itsc-card-width, 450px);
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Card, resting state: a solid colour panel with the title at the top and the
 * image sitting in the lower two thirds.
 * ------------------------------------------------------------------------ */

.itsc-card {
	position: relative;
	display: block;
	height: var(--itsc-card-height, 605px);
	border-radius: var(--itsc-radius);
	overflow: hidden;
	text-decoration: none;
	/*
	 * Odd-numbered cards take the second colour, so a carousel of any length alternates on
	 * its own -- see .is-alt below.
	 *
	 * --itsc-panel-bg is still written inline per card, but only when that card's Panel Colour
	 * has actually been given a value. Left empty, which is now the default, the card falls
	 * back to whichever of the two colours its position calls for.
	 */
	background-color: var(--itsc-panel-bg, var(--itsc-panel-a));
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/*
 * Scoped to the closed cards by :not(), not left to outrank the open card's white.
 *
 * Weight was tried first and it is the wrong tool here: three classes beat the two of
 * .swiper-slide-active .itsc-card, so the front card came up mint, and answering with a fourth
 * class only moves the argument. The alternating colour simply does not describe the card at the
 * front, or a hovered one, so it no longer matches them and nothing has to win.
 *
 * The class is server-rendered rather than worked out in CSS with nth-child, because with the
 * loop on, Swiper's clones sit in front of the real slides and shift every position: the
 * fourth child of the wrapper is not the fourth card. A class travels with the clone.
 */
.itsc__slide.is-alt:not(.swiper-slide-active):not(.is-open) .itsc-card:not(:hover) {
	background-color: var(--itsc-panel-bg, var(--itsc-panel-b));
}

.itsc-card__panel-title {
	position: absolute;
	top: 7.8%;    /* 47 / 603 */
	left: 7.6%;   /* 34 / 449 */
	right: 7.6%;
	margin: 0;
	color: var(--itsc-panel-title);
	font-size: calc(var(--itsc-card-width, 450px) * 0.0535); /* 24 / 449 */
	line-height: 1.29; /* 31 / 24 */
	text-transform: uppercase;
	transition: opacity 0.3s ease;
}

.itsc-card__media {
	position: absolute;
	left: 4.23%;   /* 19 / 449 */
	top: 33%;      /* 199 / 603 */
	width: 91.98%; /* 413 / 449 */
	height: 67%;   /* 404 / 603 */
	overflow: hidden;
	border-radius: 20px 20px 10px 10px;
	transition: inset 0.4s ease, width 0.4s ease, height 0.4s ease, border-radius 0.4s ease;
}

/*
 * Qualified by the parent on purpose. Elementor ships
 * ".elementor img{height:auto;max-width:100%}", and that (0,1,1) selector outranks a
 * bare ".itsc-card__img" (0,1,0), which left the photo at its natural ratio -- 390x260
 * inside a 390x408 box, so the mask had a strip of empty space along the bottom.
 */
.itsc-card__media .itsc-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hidden until the card reaches the front. */
.itsc-card__body {
	position: absolute;
	left: 6.24%;   /* 28 / 449 */
	right: 6.24%;
	bottom: 3.98%; /* 603 - (483 + 96) */
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 9.8%; /* 44 / 449 */
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.itsc-card__text {
	min-width: 0;
}

.itsc-card__title {
	margin: 0;
	color: var(--itsc-title);
	font-size: calc(var(--itsc-card-width, 450px) * 0.0557); /* 25 / 449 */
	line-height: 1;
	text-transform: uppercase;
}

.itsc-card__desc {
	margin: calc(var(--itsc-card-width, 450px) * 0.022) 0 0;
	color: var(--itsc-desc);
	font-size: calc(var(--itsc-card-width, 450px) * 0.0356); /* 16 / 449 */
	line-height: 1.63; /* 26 / 16 */
}

/* Two lines each at most (controls), so long service copy can't climb into the photo. */
.itsc-card__title,
.itsc-card__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.itsc-card__title {
	-webkit-line-clamp: var(--itsc-title-lines, 2);
	line-clamp: var(--itsc-title-lines, 2);
}

.itsc-card__desc {
	-webkit-line-clamp: var(--itsc-desc-lines, 2);
	line-clamp: var(--itsc-desc-lines, 2);
}

.itsc-card__arrow {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--itsc-arrow-size, 65px);
	height: var(--itsc-arrow-size, 65px);
	border-radius: 50%;
	background-color: var(--itsc-arrow-bg);
	color: var(--itsc-arrow-fg);
	transition: transform 0.25s ease;
}

.itsc-card__arrow-icon {
	width: 42%;
	height: 42%;
}

.itsc-card:hover .itsc-card__arrow {
	transform: translate(2px, -2px);
}

/* ---------------------------------------------------------------------------
 * Card, open state: the card turns white, the image moves up and takes the
 * notched mask, and the title/description/arrow fade in beneath it.
 *
 * Three triggers, styled identically:
 *
 *   .swiper-slide-active  the front card once Swiper is running
 *   .is-open              put on the first slide by the PHP and taken off again by the
 *                         JS once Swiper owns the state, so the first card is already
 *                         correct before any script runs instead of depending on one
 *   :hover                previews the same state on any other card, so the row reads
 *                         as a set of things you can open
 * ------------------------------------------------------------------------ */

/* No box-shadow on the active card: .itsc__lift casts it from outside the clip,
 * because the clip sits exactly on that card's left edge. Doubling it up would
 * darken every part both elements can reach. */
/*
 * Every selector here carries .itsc__slide, and it has to: the alternating colour above is
 * .itsc__slide.is-alt .itsc-card at (0,3,0), and .swiper-slide-active .itsc-card on its own is
 * (0,2,0). It lost, so the front card came up in its closed colour instead of white -- and so
 * did a hovered one, from (0,1,1). Weight, not order, was the problem.
 */
.itsc__slide.swiper-slide-active .itsc-card,
.itsc__slide.is-open .itsc-card,
.itsc__slide .itsc-card:hover {
	background-color: var(--itsc-active-bg);
}

/*
 * A hovered card does get its own shadow, unlike the active one. Nothing else is
 * needed here: only the front card sits flush against the clip edge, so any card
 * that can be hovered has room for its shadow inside the viewport already.
 */
.swiper-slide:not(.swiper-slide-active) .itsc-card:hover {
	box-shadow: var(--itsc-shadow);
}

.swiper-slide-active .itsc-card__panel-title,
.itsc__slide.is-open .itsc-card__panel-title,
.itsc-card:hover .itsc-card__panel-title {
	opacity: 0;
}

.swiper-slide-active .itsc-card__media,
.itsc__slide.is-open .itsc-card__media,
.itsc-card:hover .itsc-card__media {
	left: 6.24%;   /* 28 / 449 */
	top: 5.97%;    /* 36 / 603 */
	width: 87.48%; /* 392.772 / 449 */
	height: 68.32%; /* 412 / 603 */
	border-radius: 0;
	clip-path: var(--itsc-media-clip);
}

.swiper-slide-active .itsc-card__body,
.itsc__slide.is-open .itsc-card__body,
.itsc-card:hover .itsc-card__body {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Every card is clickable -- clicking one brings it to the front. */
.itsc-card {
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Controls: the dots, then the two arrows.
 * ------------------------------------------------------------------------ */

/*
 * relative with a z-index, not static. The viewport's 80px of bottom padding is pulled
 * back over this row by its negative margin, and whichever of the two paints last wins
 * the click. z-index settles it -- but z-index is ignored on a static element, which is
 * how the dots ended up unclickable while still responding to a scripted click.
 */
.itsc__controls {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 48px; /* 651 - 603 */
}

/*
 * inset:auto matters as much as the flex alignment. Swiper positions this element for its
 * own absolute layout -- "bottom: 10px; left: 0" -- and those offsets still apply once it
 * is position:relative, shifting it 10px up out of the row. align-items centred it
 * correctly and then Swiper's offset moved it again.
 */
.itsc__pagination.swiper-pagination {
	position: relative;
	inset: auto;
	display: flex;
	align-items: center;

	/*
	 * The spacing is on the bullets, not here. A gap belongs to the container, so it outlives a
	 * bullet collapsing to nothing -- which left a 14px hole where the dot had been and made the
	 * indicator jump as the window moved along. As a margin it goes with its dot.
	 */
	gap: 0;
	width: auto;
	margin: 0;
}

.itsc__pagination.swiper-pagination .swiper-pagination-bullet {
	--itsc-bullet-size: 15px;
	--itsc-bullet-gap: 14px;
	--itsc-bullet-bar: 83px;

	/*
	 * Outside the window by default, and collapsed rather than hidden.
	 *
	 * display: none was the first version of this and it read as a fault: the leading dot was
	 * simply not there on the next frame, with nothing to say the row had moved. Width and
	 * margin animate. display does not.
	 */
	flex: 0 0 auto;
	width: 0;
	height: var(--itsc-bullet-size);

	/* Swiper's own margin: 0 4px, overridden -- a collapsed dot has to take no space at all. */
	margin: 0;
	border-radius: 999px;
	background-color: var(--itsc-bullet);
	opacity: 0;
	transition:
		width 480ms cubic-bezier(0.22, 1, 0.36, 1),
		margin 480ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 380ms ease,
		background-color 300ms ease;
}

/* ---------------------------------------------------------------------------
 * Arrows.
 *
 * Every rule qualified by .itsc__nav: these are real <button> elements, and the
 * Elementor kit styles bare buttons as well as .elementor-button, emitting
 * ".elementor-kit-N button{...}" whose (0,1,1) outranks a plain class. Left
 * unqualified, both arrows take the kit's navy fill, 48px radius and 26px padding.
 * ------------------------------------------------------------------------ */

.itsc__nav {
	display: flex;
	align-items: center;
	gap: 13px;
}

.itsc__nav .itsc-nav {
	display: grid;
	place-items: center;
	width: var(--itsc-nav-size, 56px);
	height: var(--itsc-nav-size, 56px);
	padding: 0;
	border: 1px solid var(--itsc-nav-border);
	border-radius: 50%;
	background-color: transparent;
	color: var(--itsc-nav-fg);
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/*
 * The supplied arrow is 28x15, not square, so it is sized by width and left to take its
 * height from the viewBox. Setting both to the same percentage squashed it flat. 41% of
 * the button matches the design's 26px arrow inside a 64px control.
 */
.itsc__nav .itsc-nav__icon {
	width: 41%;
	height: auto;
	aspect-ratio: 28 / 15;
}

/*
 * Outlined at rest, filled on hover -- the same treatment for both arrows, so neither
 * reads as the primary action while the row can be driven either way. Keyboard focus gets
 * the same fill, because a focus ring on its own is easy to lose against a busy row.
 */
.itsc__nav .itsc-nav:not(.swiper-button-disabled):hover,
.itsc__nav .itsc-nav:not(.swiper-button-disabled):focus-visible {
	border-color: var(--itsc-nav-hover-bg);
	background-color: var(--itsc-nav-hover-bg);
	color: var(--itsc-nav-hover-fg);
}

/* Swiper's own disabled class, not :disabled -- the Navigation module sets a class
 * rather than the attribute. With rewind on, it never applies. */
.itsc__nav .itsc-nav.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

.itsc__nav .itsc-nav:focus-visible {
	outline: 2px solid var(--itsc-nav-hover-bg);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Small screens: the carousel switches to centred slides (see the JS), so the
 * open card is the one in the middle with a slice of its neighbours either side.
 * The row bleeds to both window edges for that to be visible.
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.itsc {
		/*
		 * Scaled to fit: the centred card leaves 48px of screen either side, less than the
		 * desktop shadow's 56px reach. Reach here is 28px sideways and 38px down, which
		 * clears the room available, and a 56px blur was out of proportion on a card this
		 * size regardless.
		 */
		--itsc-shadow:
			0 2px 6px rgba(2, 39, 76, 0.06),
			0 10px 28px rgba(2, 39, 76, 0.16);
	}

	/*
	 * The left bleed went with the centring. It was there so the card before the open one could
	 * reach the screen edge and be seen at all; with the rail starting from the left there is no
	 * card before it, and the bleed only pulled the open card out under the section's margin.
	 * The right still bleeds, so the next card runs off the edge as the design draws it.
	 */

	/* ---------------------------------------------------------------------------
	 * The open card on a phone
	 *
	 * It keeps its own colour and turns its text white, instead of going white with navy text
	 * as it does on a desktop. At this size the card is most of the screen, and a white card on
	 * a white page loses its edges -- the design gives the phone the coloured panel instead.
	 * ------------------------------------------------------------------------ */

	/* Mint on every slide, as on the desktop (user, 2026-10-27); a card's own Panel Colour still wins. */
	.itsc__slide.swiper-slide-active .itsc-card,
	.itsc__slide.is-open .itsc-card,
	.itsc__slide .itsc-card:hover {
		background-color: var(--itsc-panel-bg, var(--itsc-panel-b));
	}

	.itsc__slide.is-alt.swiper-slide-active .itsc-card,
	.itsc__slide.is-alt.is-open .itsc-card,
	.itsc__slide.is-alt .itsc-card:hover {
		background-color: var(--itsc-panel-bg, var(--itsc-panel-b));
	}

	/*
	 * ...and the cards behind it turn white, the other way round from a desktop.
	 *
	 * The first selector is character for character the alternating rule further up, which is
	 * (0,6,0) once its three :not()s are counted -- the plain (0,4,0) version below lost to it
	 * and the mint cards stayed mint. Repeating it here wins on order instead, since a media
	 * query adds no weight of its own and this block comes later. The :not()s keep both away
	 * from the open card, whichever of the two classes is marking it.
	 */
	.itsc__slide.is-alt:not(.swiper-slide-active):not(.is-open) .itsc-card:not(:hover),
	.itsc__slide:not(.swiper-slide-active):not(.is-open) .itsc-card {
		background-color: var(--itsc-active-bg);
	}

	/* Its heading was white for the coloured panel and would vanish on the white one. */
	.itsc__slide:not(.swiper-slide-active):not(.is-open) .itsc-card__panel-title {
		color: var(--itsc-title);
	}

	.itsc-card__title,
	.itsc-card__desc {
		color: var(--itsc-panel-title);
	}

	/*
	 * 9.8% of a 312px card is 31px of empty space between the text and the arrow, which the
	 * narrower card cannot spare -- the design leaves about half that.
	 */
	.itsc-card__body {
		gap: 5%;
	}

	/*
	 * No disc behind the arrow. Mint on mint is invisible anyway, which is what the design
	 * shows, and on the blue card a mint disc would be the one loud thing on the panel.
	 */
	.itsc-card__arrow {
		background-color: transparent;
		color: var(--itsc-panel-title);
	}

	/*
	 * Eight dots and two arrows do not fit across a phone: the row measured 503px against a
	 * 375px screen and pushed a horizontal scrollbar onto the whole page. The dots wrap and
	 * shrink, the arrows keep their size and stay on one line.
	 */
	.itsc__controls {
		flex-wrap: wrap;
		gap: 16px;
		margin-top: 28px;
	}

	.itsc__pagination.swiper-pagination {
		flex-wrap: wrap;
		gap: 0;
		min-width: 0;
	}

	/* Sizes only -- the open and closed states read them from here. */
	.itsc__pagination.swiper-pagination .swiper-pagination-bullet {
		--itsc-bullet-size: 12px;
		--itsc-bullet-gap: 10px;
		--itsc-bullet-bar: 48px;
	}

	.itsc__nav {
		--itsc-nav-size: 44px;
		flex-shrink: 0;
	}
}

/* Respect a reduced-motion preference: state still changes, it just does not slide. */
@media (prefers-reduced-motion: reduce) {
	.itsc-card,
	.itsc-card__media,
	.itsc-card__body,
	.itsc-card__panel-title,
	.itsc-card__arrow,
	.itsc__pagination.swiper-pagination .swiper-pagination-bullet {
		transition-duration: 0.01ms;
	}
}

/* ---------------------------------------------------------------------------
 * The pagination window
 *
 * The design's indicator is one bar and three dots (nodes 1:310 to 1:313) however long the
 * carousel is, so only four markers are ever open.
 *
 * Swiper still renders one bullet per slide and every one of them stays clickable -- the extras
 * are collapsed, not removed. Dropping them would mean taking over Swiper's pagination
 * wholesale, and with the arrows gone the dots are the only control left.
 *
 * The window follows the active bullet along the sibling chain, and the :has() rule takes over
 * near the end, where fewer than three bullets remain after it. Without that second rule the
 * indicator would shrink to a single marker on the last slide.
 *
 * The closed state is a width and a margin rather than a display, so the leading dot narrows
 * away over the same beat as the one opening at the far end: the row reads as sliding along
 * rather than blinking. The 480ms above is deliberately longer than the slide itself -- the
 * movement has to still be going when the card lands, or it is over before it is noticed.
 * ------------------------------------------------------------------------ */

.itsc__pagination.swiper-pagination .swiper-pagination-bullet-active,
.itsc__pagination.swiper-pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet,
.itsc__pagination.swiper-pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet + .swiper-pagination-bullet,
.itsc__pagination.swiper-pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet + .swiper-pagination-bullet + .swiper-pagination-bullet,
.itsc__pagination.swiper-pagination:has(.swiper-pagination-bullet-active:nth-last-child(-n+3)) .swiper-pagination-bullet:nth-last-child(-n+4) {
	width: var(--itsc-bullet-size);
	margin: 0 var(--itsc-bullet-gap) 0 0;
	opacity: 1;
}

/* The bar. Last, so it keeps the width the rule above would otherwise hand it. */
.itsc__pagination.swiper-pagination .swiper-pagination-bullet-active {
	width: var(--itsc-bullet-bar);
	background-color: var(--itsc-bullet-active);
}

/* Mobile V1 (Figma 4651:3604, a 312 x 416 card): the open card's photo 252 x 263, 30 in and 16 down;
 * the copy from 294 down, 19 in -- title 16/20, text 14/20 and 220 wide, 10 under it -- with the
 * arrow (54, the widget's phone value) ending 13 short of the right edge. After the rules above. */
@media (max-width: 767px) {
	.swiper-slide-active .itsc-card__media,
	.itsc__slide.is-open .itsc-card__media,
	.itsc-card:hover .itsc-card__media {
		left: 9.74%;
		top: 3.85%;
		width: 80.77%;
		height: 63.22%;
	}

	.itsc-card__body {
		top: 70.67%;
		right: 4.17%;
		bottom: auto;
		left: 6.24%;
	}

	.itsc-card__title {
		font-size: 16px;
		line-height: 20px;
	}

	.itsc-card__desc {
		max-width: 220px;
		margin-top: 10px;
		font-size: 14px;
		line-height: 20px;
	}

	/* The copy runs the full 280 and the arrow sits over its end, as drawn -- the text stops at 220. */
	.itsc-card__body {
		gap: 0;
	}

	.itsc-card__text {
		flex: 1 1 auto;
		margin-right: -54px;
	}
}

/* Home phone (user request, Figma 4651:3047): the next card carries the same soft shadow as the
 * open one, so its white edge reads against the white page. */
@media (max-width: 767px) {
	/* Figma's shadow: neutral grey, about 17% at the card's foot and 7% at its sides, gone by
	 * about 60 below -- wider and softer than the phone default above. */
	.itsc {
		--itsc-shadow: 0 26px 60px -6px rgba(0, 0, 0, 0.25);
	}

	.itsc__slide:not(.swiper-slide-active):not(.is-open) .itsc-card {
		box-shadow: var(--itsc-shadow);
	}
}

/* Mobile V1, the closed card's heading as drawn (Figma 4651:3612): Book 16/20 dark grey, 26 in and
 * centred in a 36 row 32 down -- its line 40 down. */
@media (max-width: 767px) {
	.itsc__slide:not(.swiper-slide-active):not(.is-open) .itsc-card__panel-title {
		top: 40px;
		left: 26px;
		right: 20px;
		color: #58595b;
		font-size: 16px;
		line-height: 20px;
	}
}

/* Desktop V1 / Laptop (4676:4578, 198:23), as on the phone: the open card keeps its colour with
 * white copy and an arrow without a disc; the cards behind it are white with the heading in dark
 * grey. (The earlier design had it the other way round -- white open card, coloured closed ones.) */
@media (min-width: 768px) {
	/* Mint for every card when open, not blue on every other one (user, 2026-10-27). A card's own
	 * Panel Colour, when set, still wins. */
	.itsc__slide.swiper-slide-active .itsc-card,
	.itsc__slide.is-open .itsc-card,
	.itsc__slide .itsc-card:hover {
		background-color: var(--itsc-panel-bg, var(--itsc-panel-b));
	}

	.itsc__slide.is-alt.swiper-slide-active .itsc-card,
	.itsc__slide.is-alt.is-open .itsc-card,
	.itsc__slide.is-alt .itsc-card:hover {
		background-color: var(--itsc-panel-bg, var(--itsc-panel-b));
	}

	.itsc__slide.is-alt:not(.swiper-slide-active):not(.is-open) .itsc-card:not(:hover),
	.itsc__slide:not(.swiper-slide-active):not(.is-open) .itsc-card {
		background-color: var(--itsc-active-bg);
	}

	.itsc__slide:not(.swiper-slide-active):not(.is-open) .itsc-card__panel-title {
		color: #58595b;
	}

	/*
	 * A hovered card behind the open one goes mint (user, 2026-10-26), whichever colour its place
	 * gives it. The white rule above is four classes and outranked the plain :hover, so the
	 * hovered card stayed white and its white copy vanished; five here.
	 */
	.itsc__slide:not(.swiper-slide-active):not(.is-open) .itsc-card:hover {
		background-color: var(--itsc-hover-bg, var(--itsc-panel-b));
	}

	.itsc-card__title,
	.itsc-card__desc {
		color: var(--itsc-panel-title);
	}

	.itsc-card__arrow {
		background-color: transparent;
		color: var(--itsc-panel-title);
	}

	/* The title runs 366 wide over the arrow's column and the text stops at 280, as drawn. */
	.itsc-card__text {
		margin-right: calc(var(--itsc-card-width, 450px) * -0.1826); /* 82 / 449 */
	}

	.itsc-card__desc {
		max-width: calc(var(--itsc-card-width, 450px) * 0.6236); /* 280 / 449 */
	}
}