/*
 * Italthai Stats Panel
 *
 * Geometry from Figma file c2weg7NhVbOsr1IgRzDTi6. Against the 1140px content column the
 * photo runs 0..498 (44%) and the panel 212..1140 (inset 19%), so the photo overlaps the
 * panel's left edge. Inside the panel the number column starts at 44% and the label at 72%.
 *
 * Panel: 70px radius, tinted with linear-gradient(106.5deg, transparent 33%, navy .4 92%)
 * (node 1:370). Number: Gotham Medium 100/100 white; suffix 48/50 mint; label 14px with
 * 0.84px tracking, uppercase, white (nodes 1:381, 1:382, 1:383).
 */

.itst {
	--itst-media-w: 44%;

	/* Nudge off the vertical centre. Negative lifts the photo, as with any y offset. */
	--itst-media-y: -40px;
	--itst-panel-inset: 19%;
	--itst-panel-h: 585px;
	--itst-panel-radius: 70px;
	--itst-value-col: 30%;

	--itst-panel-tint: rgba(2, 39, 76, 0.4);
	/* The edge runs mint where it fades in and Sky blue by the right side -- both are
	 * variables on the design's own node (1:370), alongside Midnight Blue for the tint. */
	--itst-panel-border: rgba(144, 210, 193, 0.85);
	--itst-panel-border-far: #387ea8;
	--itst-panel-border-w: 3px;

	/*
	 * The edge comes in solid from the right and is gone by --fade, ramping over --fade-span.
	 * The span is the part that reads: a long ramp spends its left half at an alpha too low
	 * to see, so widening it makes the line look like it stops earlier, not later.
	 */
	--itst-panel-border-fade: 38%;
	--itst-panel-border-fade-span: 18%;
	--itst-panel-glow: rgba(56, 126, 168, 0.55);
	--itst-panel-glow-size: 10px;

	/*
	 * The travelling highlight. --itst-glow-at is written by the script from how far the panel
	 * has come across the viewport, so the light runs one way down the page and back the
	 * other -- it is a position, not an animation, which is why it follows the scroll rather
	 * than looping on its own.
	 *
	 * Mint lifted towards white, not white. The edge it runs along is Mint, so a white band
	 * read as a flash crossing the line rather than the line itself brightening -- the
	 * difference between a glint and a pulse travelling down a wire. Brighter than the edge on
	 * purpose: that edge is the same hue at 0.85 alpha, so at equal brightness there would be
	 * nothing to see moving.
	 */
	--itst-glow: #bfeee2;
	--itst-glow-size: 8%;
	--itst-glow-at: 0%;

	/* Entrance: the photo fades, then the figures arrive from the right, one after another. */
	--itst-in-dur: 700ms;
	--itst-in-media-delay: 0ms;
	--itst-in-rows-delay: 450ms;
	--itst-in-stagger: 140ms;
	--itst-in-shift: 60px;

	--itst-value: #ffffff;
	--itst-affix: #90d2c1;
	--itst-label: #ffffff;
	--itst-divider: rgba(255, 255, 255, 0.45);

	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--itst-panel-h);
}

/* ---------------------------------------------------------------------------
 * Photo
 *
 * Taken out of the flow so it can sit over the panel's left edge the way the design
 * overlaps them, without the panel having to reserve exactly its width.
 *
 * Nothing here crops it. The artwork arrives with its cut corners already in it, so a
 * clip-path would shave a second shape off the first, and a fixed height with object-fit
 * cover would trim it just as surely. Width is set, height follows the file's own ratio,
 * and every pixel of the supplied image is shown.
 * ------------------------------------------------------------------------ */

.itst__media {
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 calc(-50% + var(--itst-media-y));
	z-index: 1;
	width: var(--itst-media-w);
}

/*
 * Qualified by the parent: Elementor ships ".elementor img{height:auto;max-width:100%}",
 * whose (0,1,1) outranks a bare class.
 */
.itst__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Glass panel
 * ------------------------------------------------------------------------ */

.itst__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	width: 100%;
	min-height: var(--itst-panel-h);
	margin-left: var(--itst-panel-inset);
	padding: 56px 6% 56px 32%;
	border-radius: var(--itst-panel-radius);

	/* The glass itself: near enough clear at the top-left, picking up the tint towards the
	 * bottom-right, exactly as the design's gradient does (node 1:370). */
	background-image: linear-gradient(106.5deg, transparent 33%, var(--itst-panel-tint) 92%);
}

/*
 * The edge.
 *
 * Drawn as a masked ring rather than with the background-clip trick used on the ISO pills.
 * That trick paints the border-box layer across the whole element and relies on an opaque
 * fill to hide everything but the rim -- fine for a solid white pill, wrong here, where the
 * panel is glass: the mint layer came through the transparent fill and washed the entire
 * panel in a pale haze.
 *
 * Masking cuts the middle out of the gradient instead, so only the rim is ever painted and
 * the fill underneath stays as transparent as it should be.
 */
.itst__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var(--itst-panel-border-w);
	/*
	 * Two layers on the same ring: the travelling highlight on top, the edge itself
	 * underneath. The highlight is a band of light with nothing either side of it, so
	 * wherever it is not, the edge below shows through unchanged.
	 *
	 * Both are level rather than on the tint's 106.5deg axis. A tilted axis reaches the
	 * bottom edge earlier than the top one, so the two long sides faded out at different
	 * points -- and on a 1089x585 panel the top edge never got to full strength at all, its
	 * far corner landing at 86% of the gradient. Straight across, both sides match.
	 */
	background-image:
		linear-gradient(
			90deg,
			transparent calc(var(--itst-glow-at) - var(--itst-glow-size)),
			var(--itst-glow) var(--itst-glow-at),
			transparent calc(var(--itst-glow-at) + var(--itst-glow-size))
		),
		linear-gradient(
			90deg,
			transparent var(--itst-panel-border-fade),
			var(--itst-panel-border) calc(var(--itst-panel-border-fade) + var(--itst-panel-border-fade-span)),
			var(--itst-panel-border-far) 100%
		);

	/*
	 * The highlight only gets the stretch of ring that is actually drawn.
	 *
	 * Its layer is sized to start where the edge below reaches full strength -- the fade
	 * point plus its ramp -- and pinned to the right. Before this it was full width, so the
	 * band went on travelling out across the left of the panel where the edge has already
	 * faded to nothing, and read as a bar of light floating in mid-air.
	 *
	 * Deriving it from the two fade controls rather than a number of its own means moving
	 * the edge's fade moves where the light starts, which is the only sane relationship
	 * between the two.
	 */
	background-size:
		calc(100% - (var(--itst-panel-border-fade) + var(--itst-panel-border-fade-span))) 100%,
		100% 100%;
	background-position: right top, left top;

	/* Required now that the first layer is narrower than the element: left to repeat, it
	 * would tile the band back across the faded side. */
	background-repeat: no-repeat;

	/* The glow. drop-shadow runs after the mask, so it traces the ring rather than the
	 * pseudo-element's box -- which is what box-shadow would have lit up. */
	filter: drop-shadow(0 0 var(--itst-panel-glow-size) var(--itst-panel-glow));
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Figures
 * ------------------------------------------------------------------------ */

.itst-stat {
	display: grid;
	grid-template-columns: var(--itst-value-col) 1fr;
	align-items: center;
	gap: 24px;
}

/*
 * The rule between rows: brightest at the middle and fading out at both ends, as in the
 * design. Painted as a 1px-tall background rather than a border, because border-color
 * takes a colour and not a gradient, and as a background rather than a pseudo-element
 * because the row is already here to hang it on.
 */
.itst-stat + .itst-stat {
	padding-top: 40px;
	background-image: linear-gradient(
		90deg,
		transparent 0%,
		var(--itst-divider) 50%,
		transparent 100%
	);
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: 0 0;
}

.itst-stat__value {
	display: flex;
	align-items: flex-start;
	white-space: nowrap;
}

.itst-stat__number {
	color: var(--itst-value);
	font-size: 100px;
	line-height: 1;
	text-transform: uppercase;

	/* Digits are different widths in most faces, so a counter running to its target jitters
	 * as it climbs. Tabular figures hold the column still. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.itst-stat__affix {
	color: var(--itst-affix);
	font-size: 48px;
	line-height: 1.04; /* 50 / 48 */
}

/*
 * Right-hand end of the column, and a set width so both labels start on the same x as well.
 *
 * The width is what makes it work. Each row is its own grid, so the columns do not line up
 * across rows on their own -- shrink-wrapped to their text, the two labels ended together but
 * started 42px apart, and left-aligned they started together but sat well short of the right.
 * A shared width gives them the same box in both directions, with the text set from its left
 * edge inside. Set it wide enough for the longest label; below that the label wraps early.
 */
.itst-stat__label {
	justify-self: end;
	width: var(--itst-label-w, 230px);
	text-align: left;
	color: var(--itst-label);
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.84px;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Small screens: the photo stops overlapping and sits above the panel. At phone
 * widths an overlap leaves the numbers nowhere to go.
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	/*
	 * The section wrapping this widget carries 100px of side padding -- a desktop value with no
	 * phone one -- which left the panel 193px of a 393px screen and the numbers running 98px out
	 * past its right edge. It was not the widget that was wrong, it had nowhere to go.
	 *
	 * Elementor writes that padding as --padding-left/right at (0,3,0); this rule outweighs it
	 * at (0,6,0) (a :has() takes the weight of its argument) and reaches exactly one element:
	 * the section whose only content, three levels down, is this panel. Verified against the
	 * live page -- one match, and it is that section. Below 768px only.
	 *
	 * If you would rather own this in Elementor, set that container's mobile side padding and
	 * delete this block; nothing else depends on it.
	 */
	.e-con:has(> .e-con-inner > .e-con > .elementor-element > .elementor-widget-container > .itst) {
		--padding-left: 20px;
		--padding-right: 20px;
	}

	/*
	 * Panel first, photo after it. The markup order is the desktop one -- photo, then panel --
	 * and column-reverse turns it round without moving anything, which keeps the entrance
	 * animation and the reading order as they are.
	 */
	.itst {
		flex-direction: column-reverse;
		gap: 0;
		min-height: 0;
	}

	/*
	 * Pulled up under the panel so the two overlap, as the design has them.
	 *
	 * The second term matches the panel's extra bottom padding exactly, so growing the panel
	 * moves the photo not at all -- the panel simply runs further down behind it. Both are
	 * percentages of the same width, which is what keeps them in step at any screen size.
	 */
	.itst__media {
		position: static;
		translate: none;
		width: 100%;
		margin-top: calc(-48px - 40%);
	}

	.itst__panel {
		min-height: 0;
		margin-left: 0;

		/*
		 * The bottom padding carries an extra 40% of the panel's width, which is what takes the
		 * two side borders on down past the figures and behind the photo. It is empty space by
		 * design: nothing sits in it but the edges.
		 */
		padding: 40px 24px calc(64px + 40%);
		gap: 28px;

		/* Open at the bottom: the panel runs on under the photo rather than closing above it. */
		border-radius: var(--itst-panel-radius) var(--itst-panel-radius) 0 0;
	}

	/*
	 * The edge runs down the sides instead of across, so its fade turns with it: full strength
	 * along the top and gone by roughly three quarters of the way down.
	 *
	 * The travelling highlight is dropped here. It is driven by scroll position across the
	 * panel's width, and on a tall narrow panel it has no width left to travel.
	 */
	.itst__panel::before {
		/*
		 * Back to a colour fade -- the mask version was the wrong answer -- but over a far
		 * longer run than the first attempt.
		 *
		 * That one held full strength to 30% and was gone by 76%, and the eye landed on the
		 * point where it stopped. The ramp here starts sooner and runs all the way to the
		 * panel's bottom edge, so the line is already too faint to follow long before it
		 * actually ends, and there is no stop to see.
		 */
		background-image: linear-gradient(
			180deg,
			var(--itst-panel-border-far) 0%,
			var(--itst-panel-border) 18%,
			transparent 100%
		);
		background-size: 100% 100%;
		background-position: left top;
	}

	.itst-stat {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	/*
	 * Indented, but only the figures and their labels.
	 *
	 * The margin goes on the two children rather than on the row, because the divider between
	 * rows is a background on the row itself -- indent the row and the rule moves in with it,
	 * and the design keeps that line where it is.
	 */
	.itst-stat__value,
	.itst-stat__label {
		margin-left: 40px;
	}

	/* One column now, so a set width would only push the label off the narrow side. */
	.itst-stat__label {
		justify-self: start;
		width: auto;
	}

	.itst-stat + .itst-stat {
		padding-top: 28px;
	}

	/*
	 * Five classes, all of them this widget's own, because the Number typography control writes
	 * ".elementor-2 .elementor-element.elementor-element-xxxx .itst-stat__number" at (0,4,0)
	 * with no phone value -- so its 100px/100px reached the phone too and a plain
	 * .itst-stat__number here never got near it. Nothing is !important; this simply weighs more.
	 */
	.itst .itst__panel .itst-stat .itst-stat__value .itst-stat__number {
		font-size: 60px;
		line-height: 1;
	}

	.itst .itst__panel .itst-stat .itst-stat__value .itst-stat__affix {
		font-size: 30px;
	}
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 *
 * The travelling light is decoration. Someone who has asked for less of it keeps the edge
 * and loses the highlight, rather than getting a band parked at whatever position the page
 * happened to load at.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.itst {
		--itst-glow: transparent;
	}
}

/* ---------------------------------------------------------------------------
 * Entrance
 *
 * Gated behind .is-anim, which the script adds the moment it takes charge. Nothing is
 * hidden by the stylesheet on its own, so a page whose JavaScript never arrives shows the
 * panel complete rather than blank -- the animation is an addition, not a prerequisite.
 *
 * .is-in is added when the panel comes into view and is never taken off: this plays once on
 * the way past, not every time the section is scrolled back to.
 * ------------------------------------------------------------------------ */

/*
 * The photo fades and does not move. Its translate is already carrying the vertical centring
 * and the Image Vertical Offset control, so animating it here would fight both.
 */
/*
 * Note where the transition lives: on the shown state, not the hidden one.
 *
 * Declared on the hidden state instead, adding .is-anim would animate the panel from
 * visible to invisible -- a 700ms fade OUT the moment the script loaded, before the fade in
 * had even been asked for. Hiding has to be instant; only the arrival is animated.
 */
.itst.is-anim .itst__media {
	opacity: 0;
}

.itst.is-anim.is-in .itst__media {
	opacity: 1;
	transition: opacity var(--itst-in-dur) ease var(--itst-in-media-delay);
}

/*
 * The figures come in from the right, each waiting on the one above it. --itst-i is the row
 * index, already on every row for this kind of thing.
 */
.itst.is-anim .itst-stat {
	opacity: 0;
	translate: var(--itst-in-shift) 0;
}

.itst.is-anim.is-in .itst-stat {
	opacity: 1;
	translate: 0 0;
	transition:
		opacity var(--itst-in-dur) ease,
		translate var(--itst-in-dur) cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(
		var(--itst-in-rows-delay) + var(--itst-i, 0) * var(--itst-in-stagger)
	);
}

@media (prefers-reduced-motion: reduce) {
	.itst.is-anim .itst__media,
	.itst.is-anim .itst-stat,
	.itst.is-anim.is-in .itst__media,
	.itst.is-anim.is-in .itst-stat {
		opacity: 1;
		translate: 0 0;
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Laptop (1025 to 1366), Figma frame 198:23: the figures 153 apart (40 + 40 on desktop) and
 * starting 411 into the 928 panel.
 * ------------------------------------------------------------------------ */

@media (min-width: 1025px) and (max-width: 1366px) {
	.itst__panel {
		gap: 26px;
		padding-left: 36.05%; /* 411 of the 1140 row (the % reads off the row, not the 928 panel) */
	}

	.itst-stat + .itst-stat {
		padding-top: 27px;
	}
}

/* Mobile V1 (Figma 4651:3047, 430 wide), after the phone rules above: the panel's figures 45 down,
 * the numbers Medium 74/74 with a Book 48/50 mint affix, 56 in from the panel's edge (x92), the
 * label straight under them; 30 either side of the divider; the photo 348 wide, centred. */
@media (max-width: 767px) {
	/* The panel's lift fades out down its length (about 5% white, gone by three quarters), so it
	 * never ends in a hard line across the photo below, as sampled from the design. */
	.itst__panel {
		padding-top: 45px;
		gap: 0;
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 78%);
	}

	.itst-stat {
		gap: 0;
	}

	.itst-stat__value,
	.itst-stat__label {
		margin-left: 32px;
	}

	.itst-stat + .itst-stat {
		padding-top: 60px;
	}

	.itst .itst__panel .itst-stat .itst-stat__value .itst-stat__number {
		font-size: 74px;
		line-height: 74px;
	}

	.itst .itst__panel .itst-stat .itst-stat__value .itst-stat__affix {
		font-size: 48px;
		line-height: 50px;
	}

	.itst__media {
		width: 348px;
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
	}
}

/* Narrow phones (under 400): less indent, so the longest label stays inside the ring at 375. */
@media (max-width: 399px) {
	.itst-stat__value,
	.itst-stat__label {
		margin-left: 12px;
	}
}

/* Phone: the labels on a 20 line, as drawn. */
@media (max-width: 767px) {
	.itst .itst-stat__label {
		line-height: 20px;
	}
}

/* Desktop V1 (4676:4767, 1920 frame): on the 1068 panel the numbers start 433 in and the labels
 * end 141 short of the right edge (labels at x1229, 230 wide). */
@media (min-width: 1367px) {
	.itst__panel {
		padding-left: 433px;
		padding-right: 141px;
	}
}