// ZASO Flip Card Widget
// NOTE: SiteOrigin prepends .so-widget-<id> to every selector compiled from this file.
// Cross-element modifier rules MUST be flat top-level selectors — never use chained &
// for descendant modifiers. See reference_siteorigin_widget_dev.

@card_height:       320px;
@front_bg_color:    #01949a;
@front_text_color:  #ffffff;
@back_bg_color:     #0f172a;
@back_text_color:   #e2e8f0;
@button_bg_color:   #00cdac;
@button_text_color: #0f172a;
@border_radius:     12px;

// ─── Stage ────────────────────────────────────────────────────────────────────
.zaso-flip-card {
	perspective: 1200px;
	width:       100%;
}

// ─── Rotating inner ─────────────────────────────────────────────────────────────
.zaso-flip-card__inner {
	position:        relative;
	width:           100%;
	height:          @card_height;
	transform-style: preserve-3d;
	transition:      transform 0.6s cubic-bezier( 0.4, 0.2, 0.2, 1 );
}

.zaso-flip-card__inner:focus-visible {
	outline:        3px solid @button_bg_color;
	outline-offset: 3px;
}

// ─── Flip triggers (flat selectors — no chained &!) ────────────────────────────
.zaso-flip-card:hover .zaso-flip-card__inner,
.zaso-flip-card__inner:focus-within,
.zaso-flip-card.is-flipped .zaso-flip-card__inner {
	transform: rotateY( 180deg );
}

.zaso-flip-card--vertical:hover .zaso-flip-card__inner,
.zaso-flip-card--vertical .zaso-flip-card__inner:focus-within,
.zaso-flip-card--vertical.is-flipped .zaso-flip-card__inner {
	transform: rotateX( 180deg );
}

// ─── Faces ──────────────────────────────────────────────────────────────────────
.zaso-flip-card__face {
	position:                absolute;
	top:                     0;
	left:                    0;
	width:                   100%;
	height:                  100%;
	display:                 flex;
	align-items:             center;
	justify-content:         center;
	text-align:              center;
	padding:                 28px;
	border-radius:           @border_radius;
	overflow:                hidden;
	backface-visibility:     hidden;
	-webkit-backface-visibility: hidden;
}

.zaso-flip-card__front {
	background-color: @front_bg_color;
	background-size:  cover;
	background-position: center center;
	color:            @front_text_color;
}

.zaso-flip-card__back {
	background-color: @back_bg_color;
	color:            @back_text_color;
	transform:        rotateY( 180deg );
}

.zaso-flip-card--vertical .zaso-flip-card__back {
	transform: rotateX( 180deg );
}

// ─── Front content ──────────────────────────────────────────────────────────────
.zaso-flip-card__title {
	margin:      0;
	font-size:   1.5rem;
	font-weight: 700;
	color:       @front_text_color;
	line-height: 1.2;
}

.zaso-flip-card__subtitle {
	margin:    8px 0 0;
	font-size: 1rem;
	opacity:   0.9;
	color:     @front_text_color;
}

// ─── Back content ───────────────────────────────────────────────────────────────
.zaso-flip-card__back-heading {
	margin:      0 0 10px;
	font-size:   1.25rem;
	font-weight: 700;
	color:       @back_text_color;
}

.zaso-flip-card__back-text {
	font-size:   0.95rem;
	line-height: 1.6;
	color:       @back_text_color;
}

.zaso-flip-card__back-text p {
	margin: 0 0 10px;
	color:  @back_text_color;
}

.zaso-flip-card__button {
	display:          inline-block;
	margin-top:       16px;
	padding:          10px 22px;
	font-size:        0.95rem;
	font-weight:      600;
	text-decoration:  none;
	border-radius:    6px;
	background-color: @button_bg_color;
	color:            @button_text_color;
	line-height:      1;
}

.zaso-flip-card__button:hover,
.zaso-flip-card__button:focus {
	opacity: 0.9;
	color:   @button_text_color;
}

.zaso-flip-card__button:focus-visible {
	outline:        3px solid @button_text_color;
	outline-offset: 2px;
}

// ─── Respect reduced-motion preferences ─────────────────────────────────────────
@media ( prefers-reduced-motion: reduce ) {
	.zaso-flip-card__inner {
		transition: none;
	}
}

// ─── Theme-robustness (1.10.1) ──────────────────────────────────────────────────
// Themes style bare a/h3/h4; re-assert button + heading chrome at higher
// specificity. Same @vars, no !important.
.zaso-flip-card a.zaso-flip-card__button {
	background-color: @button_bg_color;
	color:            @button_text_color;
	text-decoration:  none;
}

.zaso-flip-card a.zaso-flip-card__button:hover,
.zaso-flip-card a.zaso-flip-card__button:focus {
	color: @button_text_color;
}

.zaso-flip-card h3.zaso-flip-card__title {
	font-family: inherit;
	color:       @front_text_color;
}

.zaso-flip-card h4.zaso-flip-card__back-heading {
	font-family: inherit;
	color:       @back_text_color;
}