/**
 * Featured Accordion Widget — Front-end Styles
 *
 * Handles the layout, transitions, and visual states (collapsed / expanded)
 * for the Featured Accordion cards on both desktop and mobile.
 *
 * @package FeaturedAccordionWidget
 * @since   1.0.0
 */

/* ==========================================================================
   Container
   ========================================================================== */

.faw-container {
	display: flex;
	flex-direction: row;
	width: 100%;
	gap: 8px;
}

/* ==========================================================================
   Card — Base
   ========================================================================== */

.faw-card {
	position: relative;
	flex: 1 1 0%;
	overflow: hidden;
	cursor: pointer;
	transition:
		flex 0.6s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Background layer — inherits the card background so it can be scaled independently. */
.faw-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	background-size: cover;
	background-position: center center;
	z-index: 0;
	transition: transform var(--faw-hover-duration, 400ms) ease;
}

/* Overlay element to improve text readability over background images. */
.faw-card__overlay {
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: 0.4;
	z-index: 1;
	pointer-events: none;
	transition: opacity var(--faw-hover-duration, 400ms) ease;
}

/* ==========================================================================
   Card — Inner layout
   ========================================================================== */

.faw-card__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	box-sizing: border-box;
}

/* Header: title + open icon, visible in collapsed state. */
.faw-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.faw-card__title {
	margin: 0;
	color: #fff;
	word-break: break-word;
	transition: color var(--faw-hover-duration, 400ms) ease;
}

/* ==========================================================================
   Open Icon
   ========================================================================== */

.faw-card__open-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
	line-height: 1;
	transition:
		opacity 0.3s ease,
		transform var(--faw-hover-duration, 400ms) ease,
		color var(--faw-hover-duration, 400ms) ease,
		background-color var(--faw-hover-duration, 400ms) ease;
}

/* Hover transform for the open icon — driven by CSS custom properties set via Elementor. */
.faw-card:hover .faw-card__open-icon {
	transform:
		rotate(var(--faw-hover-icon-rotate, 0deg))
		scale(var(--faw-hover-icon-scale, 1))
		translate(var(--faw-hover-icon-tx, 0px), var(--faw-hover-icon-ty, 0px));
}

/* ==========================================================================
   Close Icon
   ========================================================================== */

.faw-card__close-icon {
	position: absolute;
	top: 16px;
	right: 16px;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 3;
	line-height: 1;
}

/* ==========================================================================
   Expanded Content (description + button) — hidden by default
   ========================================================================== */

.faw-card__content {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.faw-card__description {
	color: #fff;
	transition: color var(--faw-hover-duration, 400ms) ease;
}

/* ==========================================================================
   Button
   ========================================================================== */

.faw-card__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
	box-sizing: border-box;
}

/* ==========================================================================
   States — Expanded Card
   ========================================================================== */

.faw-card.faw-card--expanded {
	flex: 100 1 0%;
	cursor: default;
	border-width: 0 !important;
}

.faw-card.faw-card--expanded .faw-card__content {
	max-height: 600px;
	opacity: 1;
	transition:
		max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.6s 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.faw-card.faw-card--expanded .faw-card__open-icon {
	opacity: 0;
	pointer-events: none;
}

.faw-card.faw-card--expanded .faw-card__close-icon {
	display: inline-flex;
	opacity: 1;
	transition: opacity 0.4s 0.2s ease;
}

.faw-container.faw-container--has-expanded {
	gap: 0 !important;
}

/* States — Collapsed siblings when one card is expanded. */
.faw-container.faw-container--has-expanded .faw-card:not(.faw-card--expanded) {
	flex: 0 0 0%;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

/* ==========================================================================
   Separator (border between cards, driven by --faw-separator-width)
   ========================================================================== */

.faw-card:not(:last-child) {
	border-right-style: solid;
	border-right-width: var(--faw-separator-width, 0);
}

/* ==========================================================================
   Responsive — Mobile (stack vertically)
   ========================================================================== */

@media (max-width: 767px) {
	.faw-container {
		flex-direction: column;
	}

	.faw-card:not(:last-child) {
		border-right-style: none;
		border-right-width: 0;
		border-bottom-style: solid;
		border-bottom-width: var(--faw-separator-width, 0);
	}
}