/* ---------- Carousels ----------
   Styles the K Madang Elementor widgets add to the theme's own hero and
   identity components (home4.css), and nothing else: the slides themselves
   are styled there. Loaded with assets/js/home-carousels.js. */

/* ---- Identity carousel: one text panel per slide ----
   home-carousels.js shows the panel for the slide on screen. The panels share
   one grid cell, so the column is as tall as the longest and the page does not
   jump when the text changes. */
.identity-panels{display:grid}

.identity-panels>.identity-panel{
	grid-area:1/1;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	opacity:0;
	visibility:hidden;
	transform:translateY(12px);
	transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s;
}

.identity-panels>.identity-panel.is-active{
	opacity:1;
	visibility:visible;
	transform:none;
	transition:opacity .5s ease .15s,transform .5s ease .15s,visibility 0s;
}

/* Panels that say the same thing swap with no fade. */
.identity-panels.no-fade>.identity-panel{transition:none}

@media(prefers-reduced-motion:reduce){
	.identity-panels>.identity-panel,
	.identity-panels>.identity-panel.is-active{transform:none;transition:none}
}

/* The paragraph sits in a rich-text block, so the theme's
   `.identity-intro > p` rules are restated for it. */
.identity-panel .identity-text p{margin:0;font-size:1.12rem;line-height:1.75;color:#3e4654;max-width:650px}
.identity-panel .identity-text p+p{margin-top:1em}
.identity-panel .identity-text strong,
.identity-panel .identity-text b{color:var(--red)}

@media(max-width:980px){
	.identity-panel .identity-text p{max-width:760px}
}