/*
 * Italthai Value Cards
 *
 * A row of plain cards on a carousel: icon, short title, a line or two of copy, and the house
 * dot indicator underneath -- one bar and three dots however many cards there are.
 */

.itvc {
	--itvc-card-h: 195px;
	--itvc-card-radius: 16px;
	--itvc-card-pad-x: 28px;
	--itvc-card-pad-y: 56px;

	--itvc-card-bg: #f4f5f7;
	--itvc-card-bg-hover: #eceff2;
	--itvc-title: #02274c;
	--itvc-text: #58595b;

	--itvc-icon-size: 40px;
	--itvc-icon-gap: 26px;
	--itvc-title-gap: 12px;

	--itvc-dot: rgba(2, 39, 76, 0.2);
	--itvc-dot-active: #02274c;
	--itvc-dot-size: 8px;
	--itvc-dot-bar: 44px;
	--itvc-dot-gap: 10px;
	--itvc-dot-top: 32px;

	position: relative;
}

/* Swiper measures its slides from this box, so it needs no height of its own. */
.itvc__viewport {
	overflow: hidden;
}

/*
 * Equal heights without a fixed one.
 *
 * Swiper's wrapper is a flex row, so stretching the slides makes every card as tall as the
 * tallest -- which is what keeps the row level when one card carries an extra line. The
 * minimum height below is a floor for the short ones, not a ceiling.
 */
.itvc__slide {
	display: flex;
	height: auto;
}

.itvc-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: var(--itvc-card-justify, center);
	width: 100%;
	min-height: var(--itvc-card-h);
	padding: var(--itvc-card-pad-y) var(--itvc-card-pad-x);
	border-radius: var(--itvc-card-radius);
	background-color: var(--itvc-card-bg);
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

/* Only when the card is a link -- a plain card has nothing to respond to. */
a.itvc-card:hover,
a.itvc-card:focus-visible {
	background-color: var(--itvc-card-bg-hover);
}

.itvc-card__icon {
	display: block;
	margin-bottom: var(--itvc-icon-gap);
	line-height: 0;
}

/*
 * Qualified by the parent: Elementor ships ".elementor img{height:auto;max-width:100%}", whose
 * (0,1,1) outranks a bare class and would leave the icon at its natural size.
 */
.itvc-card__icon img {
	display: block;
	width: var(--itvc-icon-size);
	height: var(--itvc-icon-size);
	object-fit: contain;
}

/*
 * Both of these are qualified by their element rather than by an ancestor class, and that is
 * deliberate: at (0,1,1) they beat the Elementor kit, which styles bare h3 and p at the same
 * weight and loses on order, while still losing to anything the Typography controls generate.
 * A ".itvc .itvc-card__title" would be (0,2,0) and would beat the control inside the editor,
 * where Elementor writes it without the page prefix -- the panel would then appear to do
 * nothing until the page was published.
 */
h3.itvc-card__title {
	margin: 0 0 var(--itvc-title-gap);
	color: var(--itvc-title);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

p.itvc-card__text {
	margin: 0;
	color: var(--itvc-text);
	font-size: 15px;
	line-height: 1.65;
}

/* ---------------------------------------------------------------------------
 * The dots
 *
 * One bar and three dots, whatever the card count, and the extras are collapsed rather than
 * hidden: display cannot be transitioned, so a hidden dot vanishes between frames and the row
 * reads as a fault. A width and a margin animate, and the leading dot narrows away as the next
 * one opens at the far end.
 * ------------------------------------------------------------------------ */

.itvc__pagination.swiper-pagination {
	position: relative;
	inset: auto;
	display: flex;
	align-items: center;
	justify-content: 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;
	margin-top: var(--itvc-dot-top);
}

.itvc__pagination.swiper-pagination .swiper-pagination-bullet {
	flex: 0 0 auto;
	width: 0;
	height: var(--itvc-dot-size);
	margin: 0;
	border-radius: 999px;
	background-color: var(--itvc-dot);
	opacity: 0;
	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.
 */
.itvc__pagination.swiper-pagination .swiper-pagination-bullet-active,
.itvc__pagination.swiper-pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet,
.itvc__pagination.swiper-pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet + .swiper-pagination-bullet,
.itvc__pagination.swiper-pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet + .swiper-pagination-bullet + .swiper-pagination-bullet,
.itvc__pagination.swiper-pagination:has(.swiper-pagination-bullet-active:nth-last-child(-n+3)) .swiper-pagination-bullet:nth-last-child(-n+4) {
	width: var(--itvc-dot-size);
	margin: 0 var(--itvc-dot-gap) 0 0;
	opacity: 1;
}

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

/* The movement is decoration; the carousel still works without it. */
@media (prefers-reduced-motion: reduce) {
	.itvc__pagination.swiper-pagination .swiper-pagination-bullet,
	.itvc-card {
		transition-duration: 0.01ms;
	}
}