/* Unidos In Power — carousel
   ---------------------------------------------------------------------------
   Styling only. The behaviour is GoodLayers Core's flexslider, configured from
   uip_carousel() through data attributes — autoplay, one slide per move, and an
   endless wrap-round so the track is never left blank after the last slide.

   GoodLayers writes inline width and margin on each slide, so nothing here may
   set those: the slider's transform maths depends on the values it computed. */

.uip-carousel {
	position: relative;
}

/* ---- slide width: let the gutter be padding, never margin -----------------
   GoodLayers derives the slide width from the first slide's margin-right
   (doubled) and then writes its own margin-right onto every slide. Feeding it a
   margin therefore mixes our value with its own and the third slide ends up
   wider than the room left for it — it was being cut off at the right edge.

   With no margin at all the arithmetic is exact: itemMargin is 0, so each slide
   is a clean third of the track. The gutter and the room for the cards' drop
   shadow come from padding on the slide instead, which the slider accounts for
   through boxPadding, so the three still add up to the full width. */
.uip-carousel .slides > li {
	margin-right: 0;
	padding: 4px 18px 10px 4px;
}

/* ---- equal heights: the rule for every carousel on the site ----------------
   Every slide must be the same height; unequal ones read as lopsided.

   This cannot be done by stretching the row. The slider floats the slides and
   writes an inline width on each, with `width: 99999px` on the track — making
   the track a flex or grid container would let the slides shrink and break the
   transform maths it runs on. So nothing here may set display, width or margin
   on the track.

   Instead the cards are identical by construction. Capping the variable parts is
   not enough on its own: -webkit-line-clamp sets a maximum, so a one-line
   summary still produced a short card. Each variable part gets a matching
   min-height as well, so the headline always occupies two lines' worth of space
   and the summary three, whatever they actually contain. The em values track
   each element's own font-size and line-height.

   Both carousels share this shell, so the rule holds for any carousel added
   later without it needing anything of its own. */
.uip-news-card h3,
.uip-news-card > :last-child > p,
.uip-carousel-slide figcaption {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.uip-news-card h3 {
	-webkit-line-clamp: 2;
	min-height: calc(2 * 1.3em); /* matches the inline line-height:1.3 */
}

.uip-news-card > :last-child > p {
	-webkit-line-clamp: 3;
	min-height: calc(3 * 1.55em); /* matches the inline line-height:1.55 */
}

.uip-carousel-slide figcaption {
	-webkit-line-clamp: 2;
	min-height: calc(2 * 1.45em); /* matches the inline line-height:1.45 */
}

.uip-carousel-slide a:hover figcaption,
.uip-carousel-slide a:focus-visible figcaption {
	color: var(--uip-coral-600);
}

/* ---- arrows ----
   Injected by GoodLayers into .gdlr-core-flexslider-nav because uip_carousel()
   passes data-nav-parent. Restyled here to the design's round indigo buttons. */

.uip-carousel .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.uip-carousel .flex-direction-nav li {
	list-style: none;
	margin: 0;
}

.uip-carousel .flex-prev,
.uip-carousel .flex-next {
	position: absolute;
	top: calc((100% - 34px) / 2);
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--uip-indigo);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	box-shadow: var(--shadow-md);
	transition: background var(--dur-base) var(--ease-standard);
	z-index: 2;
}

.uip-carousel .flex-prev:hover,
.uip-carousel .flex-next:hover {
	background: var(--uip-indigo-600);
	color: #fff;
}

.uip-carousel .flex-prev { left: -22px; }
.uip-carousel .flex-next { right: -22px; }

@media (max-width: 1400px) {
	.uip-carousel .flex-prev { left: 8px; }
	.uip-carousel .flex-next { right: 8px; }
}

/* GoodLayers' own doMath() drops the carousel to one slide per view below
   767px, so the arrows move out of the image's way there rather than over it. */
@media (max-width: 767px) {
	.uip-carousel {
		padding: 0 44px;
	}

	.uip-carousel .flex-prev { left: 0; }
	.uip-carousel .flex-next { right: 0; }
}

/* No prefers-reduced-motion rule here on purpose: the movement is now a JS
   slideshow, not CSS scrolling, so honouring that preference means calling the
   slider's pause() — CSS cannot reach it. */

/* ---- category badge on the cards ------------------------------------------
   Three variants, assigned by uip_card_badge_variant(): green for news, the
   mark's orange for Dímelo Talks!, and an outlined one — white, indigo border
   and indigo text — for everything else. Was inline style on the span, which
   left no way to express the third one's border. */

.uip-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid transparent;
	line-height: 1.4;
}

.uip-card-badge.is-green {
	background: var(--uip-green);
	border-color: var(--uip-green);
	color: #23400a;
}

.uip-card-badge.is-orange {
	background: var(--uip-coral);
	border-color: var(--uip-coral);
	color: #fff;
}

.uip-card-badge.is-outline {
	background: #fff;
	border-color: var(--uip-indigo);
	color: var(--uip-indigo);
}