/* Achang Splide - front-end styling. */

.achang-splide {
	width: 100%;
}

/*
 * Specificity note - every rule below is deliberately written with the SAME
 * weight (one class per descendant, never an element selector) so that skin
 * rules can override the base rules purely by coming later in this file.
 * The base image rule used to be `img.achang-splide__img`, whose extra
 * element selector made it 0,3,1 - heavy enough to beat every skin rule and
 * silently break 左右並排. Do not put element selectors back in here.
 */
.achang-splide .splide__slide .achang-splide__img {
	width: 100%;
	height: auto;
	display: block;
}

.achang-splide__title {
	margin: 0.5em 0 0.25em;
	line-height: 1.3;
}

.achang-splide__content {
	margin: 0;
}

/* A whole-slide link should not look like a link. */
.achang-splide__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Stops a long unbroken word from stretching a flex column. */
.achang-splide__body {
	min-width: 0;
}

/*
 * Prevent Elementor's "Hide Page Title" feature (body.elementor-page-title-hidden)
 * from accidentally hiding loop article titles inside Achang Splide.
 */
body.elementor-page-title-hidden .achang-splide .elementor-page-title,
body.elementor-page-title-hidden [class*="elementor-widget-achang_splide"] .elementor-page-title,
body.elementor-page-title-hidden [class*="elementor-widget-loop"] .elementor-page-title {
	display: block;
}

/*
 * Same intent as above, but without depending on how the theme hides the page
 * title (the `body.elementor-page-title-hidden` class is not universal). A
 * hidden card title inside a carousel is never what anyone wanted, so force it
 * visible here. 0,3,0 outranks a theme's `[class*=elementor-widget-loop]
 * .elementor-page-title` (0,2,0), while Elementor's own responsive
 * `elementor-hidden-*` classes still win because they use !important.
 */
.achang-splide .e-loop-item .elementor-page-title,
.achang-splide .e-loop-item .product_title.entry-title {
	display: block;
}

/* -------------------------------------------------------------------------
   Skins

   The 輪播樣式 control uses Elementor's `prefix_class`, which writes
   achang-splide--{value} onto the widget wrapper - the same mechanism
   Elementor's own divider / icon-list / icon-box widgets use, and the same
   place {{WRAPPER}} points at. Every rule is keyed off that class, so a new
   skin needs nothing but CSS (plus one entry in get_skin_options()).
   ------------------------------------------------------------------------- */

/* 左右並排：圖左、文字右 */
.achang-splide--row .achang-splide__inner {
	display: flex;
	align-items: center;
	/* 與文字距離 sets --achang-splide-gap; 1.5rem is the unset fallback. */
	gap: var(--achang-splide-gap, 1.5rem);
}

.achang-splide--row .achang-splide__inner .achang-splide__img {
	flex: 0 0 50%;
	width: 50%;
	max-width: 50%;
	margin-bottom: 0;
}

.achang-splide--row .achang-splide__body {
	flex: 1 1 auto;
}

/* 覆疊：文字壓在圖上 */
.achang-splide--overlay .achang-splide__inner {
	position: relative;
	overflow: hidden;
}

.achang-splide--overlay .achang-splide__inner .achang-splide__img {
	margin-bottom: 0;
}

.achang-splide--overlay .achang-splide__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1.5rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}

/* A solid-colour slide has no image to overlay, so let the text flow. */
.achang-splide--overlay .achang-splide__inner--text .achang-splide__body {
	position: static;
	padding: 0;
	background: none;
}

/* Narrow screens: 左右並排 has no room, stack it again. */
@media (max-width: 767px) {
	.achang-splide--row .achang-splide__inner {
		display: block;
	}

	.achang-splide--row .achang-splide__inner .achang-splide__img {
		width: 100%;
		max-width: 100%;
		margin-bottom: 0.5rem;
	}
}