/*
 * Defaults for every --ocs-* custom property are supplied as the second
 * argument of var() at each usage site below, NOT as a block declared here
 * on .ocs-carousel/.ocs-card. Elementor's per-instance Style tab overrides
 * are written to the *ancestor* .elementor-element-{id} wrapper so they can
 * cascade down via inheritance; declaring a same-named default directly on
 * a descendant element would take precedence over the inherited value at
 * that exact element regardless of the ancestor rule's specificity,
 * silently breaking every custom-property-based Style control on this
 * widget. Do not add a defaults block here.
 */

/*
 * Row 2 uses two 1fr spacer columns flanking the auto-sized
 * prev/pagination/next cluster so the controls sit centered as a tight
 * group (matching the design) instead of the arrows being pushed out to
 * the far edges of the full-width carousel. The spacer columns are empty
 * cells ('.') - grid-template-areas' native syntax for "no item here".
 */
.ocs-carousel {
	display: grid;
	grid-template-columns: 1fr auto auto auto 1fr;
	grid-template-areas:
		'swiper swiper swiper swiper swiper'
		'. prev pagination next .';
	align-items: center;
	column-gap: 16px;
	row-gap: 30px;
	padding-bottom: 60px;
}

/*
 * .ocs-carousel--locked is toggled by the JS in step with Swiper's own
 * lock/unlock events, which fire whenever every slide already fits in the
 * visible width (nothing left to scroll to) - e.g. a wide enough browser
 * window showing the whole story set at once. Controls that can't go
 * anywhere would just be clutter, so hide them and collapse the row-gap
 * that made room for them.
 */
.ocs-carousel--locked {
	row-gap: 0;
}

.ocs-carousel--locked .ocs-nav-btn,
.ocs-carousel--locked .ocs-carousel__pagination {
	display: none;
}

/*
 * Vertical padding gives the hover scale-up (see .ocs-card:hover) headroom
 * to grow into without being clipped by this element's own overflow:hidden
 * (required for the horizontal slide clipping the carousel depends on, but
 * it clips vertically too). This is separate from the grid's own row-gap
 * above: that row-gap is the resting-state space before the
 * prev/pagination/next row: this padding is *additional* space so an
 * enlarged hovered card doesn't reach down into that row.
 */
.ocs-carousel__swiper {
	grid-area: swiper;
	width: 100%;
	padding: 20px 0;
	margin: -20px 0;
	overflow: hidden;
}

.ocs-carousel .swiper-wrapper {
	align-items: stretch;
}

/*
 * Fixed slide width (not a percentage/fr-based split of the container) so
 * cards stay pinned at the design's 380px regardless of viewport - the
 * number of cards in view is however many fit, not a configured ratio.
 * Swiper is initialized with slidesPerView:'auto' (see the JS file) which
 * measures this real width rather than dividing the container by a count.
 */
.ocs-carousel .swiper-slide {
	width: 380px;
	max-width: 380px;
	height: auto;
	flex-shrink: 0;
}

.ocs-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #ffffff;
	border: 1px solid rgba(17, 17, 20, 0.08);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(17, 17, 20, 0.08);
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/*
 * The whole card is a link (see the widget's render()), so the "grows and
 * shadow deepens" affordance from the design lives on :hover/:focus-visible
 * of .ocs-card itself, not on the inner "See their story" text. Scaling up
 * (rather than translateY) keeps the card's center fixed, so it doesn't
 * visually shift into its neighbor. A slight z-index bump stops the scaled
 * card from being rendered under its still-normal-size neighbors.
 */
.ocs-card:hover,
.ocs-card:focus-visible {
	position: relative;
	z-index: 1;
	transform: scale(1.04);
	box-shadow: 0 20px 40px rgba(17, 17, 20, 0.22);
}

/* ------------------------------------------------------------ */
/* Media                                                          */
/* ------------------------------------------------------------ */

.ocs-card__media {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: var(--ocs-media-aspect, 2.2 / 1);
	overflow: hidden;
	background-color: #0e0e12;
}

.ocs-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.ocs-card__tint {
	position: absolute;
	inset: 0;
	background: var(--ocs-media-overlay, rgba(57, 0, 106, 0.5));
}

.ocs-card__logo-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	box-sizing: border-box;
}

.ocs-card__logo {
	display: block;
	max-width: 60%;
	max-height: 60px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0;
}

/*
 * Flat-color mask silhouette, swapped in for .ocs-card__logo when the
 * widget's "Monochrome Logos" Style control is on. Same mask-image
 * technique as the Logo Ticker widget's .oms-logo-ticker__logo-mask -
 * background-color clipped to the logo artwork's alpha shape, since a
 * raster image's own pixel colors can't be recolored via CSS filters alone
 * to an arbitrary editor-chosen color.
 *
 * Unlike .ocs-card__logo (a real <img>, which sizes itself from its own
 * intrinsic pixel dimensions even with width/height:auto), this is a plain
 * <span> with no content of its own - `aspect-ratio` alone can't give it a
 * size when both width and height are auto/max-*, so it collapses to 0x0
 * and the logo silently disappears (confirmed: this was shipped broken
 * once already). `height` must stay a definite value so aspect-ratio has
 * something to compute `width` from, exactly like the Ticker's mask does.
 */
.ocs-card__logo-mask {
	display: block;
	max-width: 60%;
	height: 60px;
	width: auto;
	aspect-ratio: var(--ocs-logo-aspect, 1);
	margin: 0;
	background-color: var(--ocs-logo-mono-color, #ffffff);
	-webkit-mask-image: var(--ocs-logo-mask-url);
	mask-image: var(--ocs-logo-mask-url);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ------------------------------------------------------------ */
/* Body                                                           */
/* ------------------------------------------------------------ */

.ocs-card__body {
	box-sizing: border-box;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 22px;
}

.ocs-card__stat {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid #efefef;
}

.ocs-card__stat-value {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: #7f16e0;
}

.ocs-card__stat-description {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: #1a1a1a;
}

/*
 * Compound selector is deliberate: this theme's global `body.orbit
 * blockquote` reset (background tint, blue border-left, 5rem vertical
 * margin, heavy padding) carries higher specificity (b:1,c:2 via the two
 * element selectors `body`+`blockquote`) than a single class here (b:1,c:0)
 * would have, despite matching the same element. Two classes (b:2) beats it
 * outright regardless of c. Don't simplify this back to `.ocs-card__quote`.
 */
.ocs-card .ocs-card__quote {
	margin: 0 0 16px;
	padding: 0;
	background-color: transparent;
	border-left: none;
	border-radius: 0;
	font-size: 15px;
	font-style: normal;
	line-height: 1.5;
	color: #3a3a3a;
}

.ocs-card__link-wrap {
	margin-top: auto;
}

.ocs-card__link {
	display: inline-block;
	font-size: 14px;
	font-weight: 800;
	color: #7f16e0;
	text-decoration: none;
}

/* .ocs-card is the actual link now (see the widget's render()); darken the
   "See their story" text whenever the card itself is hovered/focused,
   not just when the cursor is precisely over this inner span. */
.ocs-card:hover .ocs-card__link,
.ocs-card:focus-visible .ocs-card__link {
	color: #5c0fab;
}

/* ------------------------------------------------------------ */
/* Navigation + pagination                                        */
/* ------------------------------------------------------------ */

.ocs-nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--ocs-arrow-size, 44px);
	height: var(--ocs-arrow-size, 44px);
	padding: 0;
	border: none;
	border-radius: 50%;
	appearance: none;
	font: inherit;
	cursor: pointer;
	background-color: #7f16e0;
	color: #ffffff;
	transition: opacity 0.2s ease;
}

.ocs-nav-btn svg {
	display: block;
}

.ocs-nav-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.ocs-nav-btn--prev {
	grid-area: prev;
}

.ocs-nav-btn--next {
	grid-area: next;
}

.ocs-carousel__pagination {
	grid-area: pagination;
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.ocs-carousel__pagination .swiper-pagination-bullet {
	width: var(--ocs-bullet-size, 8px);
	height: var(--ocs-bullet-size, 8px);
	margin: 0;
	border-radius: 50%;
	background: var(--ocs-bullet-color, #d7dae9);
	opacity: 1;
}

.ocs-carousel__pagination .swiper-pagination-bullet-active {
	background: var(--ocs-bullet-active-color, #7f16e0);
}

@media (max-width: 767px) {
	.ocs-card__logo,
	.ocs-card__logo-mask {
		max-height: 44px;
	}

	.ocs-card__body {
		padding: 18px;
	}
}