/**
 * JMeks Staggered Cards styles.
 *
 * An intro and a descending stair of glass cards over a photograph. The root is
 * a two-column grid; the intro holds row 1 column 1 and each card takes a new
 * row, alternating sides.
 *
 * The cards live in a wrapper so the slider runtime has something to take over
 * on small screens, and that wrapper is display: contents so its children still
 * count as grid items of the root. Without it the cards would be laid out
 * inside the wrapper and the stair could not interleave with the intro.
 *
 * Their coordinates come from PHP as custom properties rather than from
 * :nth-child, because auto-placement puts an item given only a column into the
 * first row where that column is free — which is row 1, beside the intro,
 * exactly where the first card must not go.
 *
 * When the slider activates it sets display: block on the wrapper, which
 * overrides display: contents; the cards become slides and the grid placement
 * goes inert on its own. The intro was never inside the wrapper, so it stays
 * where it is.
 *
 * Custom properties:
 *   --jmeks-stagger-row / -col    a card's grid coordinates (from PHP)
 *   --jmeks-stagger-min-row       how tall an empty stair row stands
 *   --jmeks-stagger-peek / -gap   slider peek and gap, mirrored from PHP
 *   --jmeks-stagger-dots-top      gap between the cards and the dots (20px)
 *   --jmeks-stagger-gutter        floor for the aligned outer padding;
 *                                 defaults to the shared --jmeks-gutter
 *   --jmeks-stagger-border        card border width, mirrored from the control
 *   --jmeks-stagger-copy-max      widest each piece of copy runs (580px)
 * Dots use the shared --jmeks-dot-* properties from jmeks-slider.css.
 */

.elementor-widget-jmeks_staggered_cards {
	width: 100%;
}

/*
 * minmax( 0, 1fr ), not 1fr: a plain 1fr track may not shrink below its
 * content's min-content width, and a sliding row's min-content is every card
 * side by side. Each card added widened the widget past the screen, so the
 * slider measured itself too wide and the last card stopped short of the edge.
 */
.jmeks-stagger {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	width: 100%;
	color: #fff;
	isolation: isolate;
}

/*
 * The photograph and its scrim are taken out of flow, so they cover the whole
 * widget without becoming grid items and disturbing the stair.
 */
.jmeks-stagger__bg,
.jmeks-stagger__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.jmeks-stagger .jmeks-stagger__bg {
	/* Two classes: Elementor's `.elementor img{height:auto}` is (0,1,1). */
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

.jmeks-stagger__scrim {
	background-color: #05001c;
	opacity: 0.55;
}

.jmeks-stagger__intro {
	grid-row: 1;
	grid-column: 1;
	/* Horizontal padding is the site gutter; see jmeks-gutter.css. */
	padding: 40px var( --jmeks-stagger-gutter, var( --jmeks-gutter, 32px ) );
}

/*
 * Two classes on the headings' inherit: the kit writes heading colours as
 * `.elementor-kit-N h2` (0,1,1), which would beat one class and paint the
 * heading in the site's heading colour instead of the widget's text colour.
 */
.jmeks-stagger .jmeks-stagger__intro-heading {
	margin: 0 0 16px;
	color: inherit;
}

/*
 * Each piece of copy stops at a readable line length; the intro and the cards
 * keep their full width. Children are capped rather than their parent, so the
 * text stays on the content line and the button still sizes to its label.
 */
.jmeks-stagger__intro > *,
.jmeks-stagger__card > * {
	max-width: var( --jmeks-stagger-copy-max, 580px );
}

.jmeks-stagger__body > :first-child {
	margin-top: 0;
}

.jmeks-stagger__body > :last-child {
	margin-bottom: 0;
}

.jmeks-stagger__cards {
	display: contents;
}

.jmeks-stagger__card {
	grid-row: var( --jmeks-stagger-row, auto );
	grid-column: var( --jmeks-stagger-col, auto );
	display: flex;
	flex-direction: column;
	/*
	 * Children stretch across the card: text blocks should fill the content
	 * box, not shrink-wrap their words, or a short line would sit in a narrow
	 * box and the copy's right edge would not be where the padding puts it.
	 * The button keeps its own align-self so it still hugs its label.
	 */
	align-items: stretch;
	min-height: var( --jmeks-stagger-min-row, 220px );
	padding: 40px var( --jmeks-stagger-gutter, var( --jmeks-gutter, 32px ) );
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	/* A hairline and a hint of lightening: the photograph should still read
	   through the card, not sit behind frosted glass. */
	background-color: rgba( 255, 255, 255, 0.04 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
}

.jmeks-stagger .jmeks-stagger__card-title {
	margin: 0 0 16px;
	color: inherit;
}

/* A button with a phone label carries both; one shows at a time. */
.jmeks-stagger__label--mobile {
	display: none;
}

@media ( max-width: 767px ) {
	.jmeks-stagger__button .jmeks-stagger__label {
		display: none;
	}

	.jmeks-stagger__button .jmeks-stagger__label--mobile {
		display: inline;
	}
}

/*
 * Two designs, chosen per card. Both share the pill shape; the colours come
 * from custom properties the panel sets, one set per design and state:
 *   --jmeks-stagger-<ghost|full>-<color|bg|border>[-hover|-focus]
 *
 * Normal differs per design (outlined: white text and border, no fill;
 * solid: white fill, primary text). Hover is the same for both, the accent
 * fill with primary text, and Focus falls back to Hover, so an empty Focus
 * field means "same as hover". A border with no colour of its own follows
 * that state's fill (or, outlined at rest, the text).
 *
 * Two classes plus the state, so Hello Elementor's `a:hover { color: #336 }`
 * (0,1,1) never repaints the label.
 */
.jmeks-stagger__button {
	align-self: flex-start;
	margin-top: 30px;
	border: 1px solid;
	border-radius: 40px;
	padding: 14px 28px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.jmeks-stagger .jmeks-stagger__button--ghost {
	color: var( --jmeks-stagger-ghost-color, #fff );
	background-color: var( --jmeks-stagger-ghost-bg, transparent );
	border-color: var( --jmeks-stagger-ghost-border, currentColor );
}

.jmeks-stagger .jmeks-stagger__button--ghost:hover {
	color: var( --jmeks-stagger-ghost-color-hover, var( --e-global-color-primary, #05001c ) );
	background-color: var( --jmeks-stagger-ghost-bg-hover, var( --e-global-color-secondary, #ded57d ) );
	border-color: var( --jmeks-stagger-ghost-border-hover, var( --jmeks-stagger-ghost-bg-hover, var( --e-global-color-secondary, #ded57d ) ) );
}

.jmeks-stagger .jmeks-stagger__button--ghost:focus-visible {
	color: var( --jmeks-stagger-ghost-color-focus, var( --jmeks-stagger-ghost-color-hover, var( --e-global-color-primary, #05001c ) ) );
	background-color: var( --jmeks-stagger-ghost-bg-focus, var( --jmeks-stagger-ghost-bg-hover, var( --e-global-color-secondary, #ded57d ) ) );
	border-color: var( --jmeks-stagger-ghost-border-focus, var( --jmeks-stagger-ghost-border-hover, var( --jmeks-stagger-ghost-bg-focus, var( --jmeks-stagger-ghost-bg-hover, var( --e-global-color-secondary, #ded57d ) ) ) ) );
}

.jmeks-stagger .jmeks-stagger__button--full {
	color: var( --jmeks-stagger-full-color, var( --e-global-color-primary, #05001c ) );
	background-color: var( --jmeks-stagger-full-bg, #fff );
	border-color: var( --jmeks-stagger-full-border, var( --jmeks-stagger-full-bg, #fff ) );
}

.jmeks-stagger .jmeks-stagger__button--full:hover {
	color: var( --jmeks-stagger-full-color-hover, var( --e-global-color-primary, #05001c ) );
	background-color: var( --jmeks-stagger-full-bg-hover, var( --e-global-color-secondary, #ded57d ) );
	border-color: var( --jmeks-stagger-full-border-hover, var( --jmeks-stagger-full-bg-hover, var( --e-global-color-secondary, #ded57d ) ) );
}

.jmeks-stagger .jmeks-stagger__button--full:focus-visible {
	color: var( --jmeks-stagger-full-color-focus, var( --jmeks-stagger-full-color-hover, var( --e-global-color-primary, #05001c ) ) );
	background-color: var( --jmeks-stagger-full-bg-focus, var( --jmeks-stagger-full-bg-hover, var( --e-global-color-secondary, #ded57d ) ) );
	border-color: var( --jmeks-stagger-full-border-focus, var( --jmeks-stagger-full-border-hover, var( --jmeks-stagger-full-bg-focus, var( --jmeks-stagger-full-bg-hover, var( --e-global-color-secondary, #ded57d ) ) ) ) );
}

/* A keyboard ring as well as the Focus colours, outside the pill. */
.jmeks-stagger .jmeks-stagger__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/*
 * Content-grid alignment. The copy starts on the same line as the rest of the
 * page while the cards, their glass and the photograph all keep their full
 * width — only the padding moves.
 *
 * The arithmetic differs from Split Panels and the difference matters.
 * For a grid item the containing block is its GRID AREA, so 100% here is half
 * the widget, not all of it. The page gutter is therefore `100% - C/2`, not
 * `(100% - C)/2`.
 *
 * --container-max-width is used directly and --content-width deliberately is
 * not: --content-width is `min(100%, var(--container-max-width))`, and that
 * 100% re-resolves against the grid area when a card reads it, so the
 * subtraction collapses to zero and the max() quietly hands back the fallback
 * gutter instead of the real one. It looks right in the stylesheet and is wrong
 * on the page.
 *
 * Which side a card is on comes from PHP as a modifier class, decided in the
 * same place as its column. The inner edge keeps a plain gutter.
 *
 * The border width is subtracted because a border sits outside the padding: a
 * bordered card's text would start that much further in than the unbordered
 * intro above it, and the two edges would not line up.
 *
 * These selectors are heavier than they look, on purpose. Elementor writes a
 * control's CSS as `.elementor-<post> .elementor-element.elementor-element-<id>
 * .target` — four classes — into a cached per-page file. Conditioning the
 * four-sided padding controls off stops NEW rules being written, but every page
 * built before that still has the old ones in its cached file and they would
 * win. Five classes for the intro (the repeated class is there only to add
 * weight) and six for a card put these above anything generated, so a page laid
 * out before this existed is right without being re-saved.
 *
 * :not( .jmeks-slider-active ) keeps this to the two-column layout; a stacked
 * or sliding card has no half to align to.
 */
@media ( min-width: 768px ) {
	/* The intro carries no border, so it subtracts nothing. */
	.elementor .jmeks-stagger.jmeks-stagger--align .jmeks-stagger__intro.jmeks-stagger__intro {
		padding-left: max( var( --jmeks-stagger-gutter, var( --jmeks-gutter, 32px ) ), calc( 100% - var( --container-max-width, 1140px ) / 2 ) );
		padding-right: var( --jmeks-stagger-gutter, var( --jmeks-gutter, 32px ) );
	}

	.elementor .jmeks-stagger.jmeks-stagger--align .jmeks-stagger__cards:not( .jmeks-slider-active ) .jmeks-stagger__card--left {
		padding-left: max( var( --jmeks-stagger-gutter, var( --jmeks-gutter, 32px ) ), calc( 100% - var( --container-max-width, 1140px ) / 2 - var( --jmeks-stagger-border, 1px ) ) );
		padding-right: var( --jmeks-stagger-gutter, var( --jmeks-gutter, 32px ) );
	}

	.elementor .jmeks-stagger.jmeks-stagger--align .jmeks-stagger__cards:not( .jmeks-slider-active ) .jmeks-stagger__card--right {
		padding-right: max( var( --jmeks-stagger-gutter, var( --jmeks-gutter, 32px ) ), calc( 100% - var( --container-max-width, 1140px ) / 2 - var( --jmeks-stagger-border, 1px ) ) );
		padding-left: var( --jmeks-stagger-gutter, var( --jmeks-gutter, 32px ) );
	}
}

/*
 * Slide width. The shared slider takes only the peek off, which is right when
 * slides sit flush. These are spaced, and Swiper advances by slide width plus
 * gap, so a gap the same size as the peek would leave nothing showing. Taking
 * both off makes the control honest. Five classes, so it beats the shared rule.
 */
.jmeks-stagger .jmeks-stagger__cards.jmeks-slider-active > .jmeks-slider .swiper-slide {
	width: calc( 100% - var( --jmeks-stagger-peek, 0px ) - var( --jmeks-stagger-gap, 0px ) );
}

/*
 * Dots. They follow the cards rather than the widget: the peek and the gap are
 * taken off the slide, so the card's right edge sits inboard of the slider's by
 * exactly that much, and dots aligned to the slider would drift into the space
 * beside the card. Twenty pixels below, matching Split Panels.
 */
.jmeks-stagger .jmeks-stagger__cards.jmeks-slider-active > .jmeks-slider > .jmeks-slider__dots {
	justify-content: flex-end;
	margin: var( --jmeks-stagger-dots-top, 20px ) 0 0;
	padding-inline-end: calc( var( --jmeks-stagger-peek, 0px ) + var( --jmeks-stagger-gap, 0px ) );
}

/*
 * Sliding. The wrapper stops being display: contents, so the cards are laid out
 * by the runtime instead of the grid, and their coordinates no longer apply.
 * The wrapper spans both columns because the intro keeps the row above.
 */
.jmeks-stagger .jmeks-stagger__cards.jmeks-slider-active {
	grid-row: 2;
	grid-column: 1 / -1;
	min-width: 0;
}

/*
 * Every slide stretches to the tallest, and the Card min height control still
 * applies (its mobile value, when set), so a short set of cards can be made
 * taller on phones too.
 */
.jmeks-stagger .jmeks-stagger__cards.jmeks-slider-active .jmeks-stagger__card {
	height: 100%;
}

/*
 * Stacked. One column, intro first, cards after it — which is also what a
 * browser running no JavaScript falls back to.
 */
@media ( max-width: 767px ) {
	.jmeks-stagger {
		grid-template-columns: minmax( 0, 1fr );
	}

	.jmeks-stagger__intro,
	.jmeks-stagger__card {
		grid-column: 1;
	}

	.jmeks-stagger__card {
		grid-row: auto;
	}

	/* Intro > Hide heading / Hide text on mobile. */
	.jmeks-stagger--hide-heading-mobile .jmeks-stagger__intro-heading,
	.jmeks-stagger--hide-text-mobile .jmeks-stagger__intro > .jmeks-stagger__body {
		display: none;
	}

	/* Both hidden and no button: the block goes too, padding and all. */
	.jmeks-stagger--hide-intro-mobile .jmeks-stagger__intro {
		display: none;
	}
}