/**
 * Diwan Kids: the row of age circles, and the tabs under it.
 *
 * The circles are the only thing on the page that is coloured by what it is.
 * Every other control is black on white, because the shelves are the colour of
 * the site; a child's age is a way in rather than a shelf, and the brand's four
 * colours are exactly four, which is how many age bands a children's catalogue
 * has. Each band holds its own colour in a pair of custom properties, so the
 * hover state is written once for all of them.
 *
 * The tabs themselves are Elementor's, styled from the panel rather than here,
 * with two exceptions below that the panel has no control for.
 */

.diwan-kids-ages {
	/* Overwritten by the widget's own size control; a value here so the row is
	   still a row if the control is ever cleared. */
	--diwan-kids-circle: 70px;

	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	justify-content: center;
	margin: 0 0 14px;
}

.diwan-kids-ages__band {
	--diwan-kids-fill: var(--diwan-black, #000000);
	--diwan-kids-ink: var(--diwan-white, #ffffff);

	align-items: center;
	color: var(--diwan-text, #000000);
	display: flex;
	flex-direction: column;
	gap: 7px;
	text-align: center;
	text-decoration: none;
}

.diwan-kids-ages__circle {
	align-items: center;
	background: var(--diwan-white, #ffffff);
	block-size: var(--diwan-kids-circle);
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: 50%;
	/* A range of numbers climbs left to right in both languages. Without this
	   the Arabic page reads "0 - 3" back to front: the digits are an LTR run,
	   the dash between them is neutral, and the paragraph around them is not. */
	direction: ltr;
	display: flex;
	font-size: 15px;
	font-weight: 600;
	inline-size: var(--diwan-kids-circle);
	justify-content: center;
	line-height: 1;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
	unicode-bidi: isolate;
}

.diwan-kids-ages__word {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* One colour per age. Papyrus is the pale one and takes the brand's brown for
   its text; the other three are dark enough to carry white. */
.diwan-kids-ages__band--papyrus {
	--diwan-kids-fill: var(--diwan-papyrus, #e0b070);
	--diwan-kids-ink: var(--diwan-wood, #3b0f00);
}

.diwan-kids-ages__band--blue {
	--diwan-kids-fill: var(--diwan-blue, #246b8f);
}

.diwan-kids-ages__band--taupe {
	--diwan-kids-fill: var(--diwan-taupe, #ab9169);
}

.diwan-kids-ages__band--wood {
	--diwan-kids-fill: var(--diwan-wood, #3b0f00);
}

/* Focus is treated as hover rather than left to the outline alone: the circle
   is the control, and somebody arriving by keyboard should see the same thing
   change that a pointer changes. */
.diwan-kids-ages__band:hover,
.diwan-kids-ages__band:focus-visible {
	color: var(--diwan-text, #000000);
}

.diwan-kids-ages__band:hover .diwan-kids-ages__circle,
.diwan-kids-ages__band:focus-visible .diwan-kids-ages__circle {
	background: var(--diwan-kids-fill);
	border-color: var(--diwan-kids-fill);
	color: var(--diwan-kids-ink);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.diwan-kids-ages__circle {
		transition: none;
	}

	.diwan-kids-ages__band:hover .diwan-kids-ages__circle,
	.diwan-kids-ages__band:focus-visible .diwan-kids-ages__circle {
		transform: none;
	}
}

@media (max-width: 767px) {
	.diwan-kids-ages {
		gap: 16px;
	}

	.diwan-kids-ages__word {
		font-size: 11px;
	}
}

/*
 * The tab panels hold one carousel each and nothing else, so they have no
 * height of their own to keep. Elementor's own minimum would otherwise leave a
 * gap under the shortest of the three.
 */
.elementor-widget-n-tabs.diwan-kids__tabs .e-n-tabs-content > .e-con {
	min-block-size: 0;
}

/*
 * A tab bar is a list of choices, and on a narrow screen it scrolls sideways.
 * Elementor gives it the scroll; the shadow at the edge is what tells a reader
 * there is more of it, and there is no control for that.
 */
@media (max-width: 767px) {
	.elementor-widget-n-tabs.diwan-kids__tabs .e-n-tabs-heading {
		mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
	}
}

/* A laptop screen no taller than 760 pixels holds the whole band, the
   circles, the tabs and the covers, with the next band showing (Diwan,
   October 2026): the circles come in a little, and the room under them. */
@media (min-width: 1025px) and (max-height: 760px) {
	.diwan-kids-ages {
		--diwan-kids-circle: 54px !important;

		margin-block-end: 4px;
	}

	.diwan-kids-ages__band {
		gap: 4px;
	}
}