/* Beautera Treatments Carousel widget + shared .beau-tcard (archives reuse it) */
.beau-tcards {
	background: var(--beautera-cream);
	padding-block: var(--beautera-section-pad-block);
}
.beau-tcards__head { padding-inline: var(--beautera-section-pad-inline); }
.beau-tcards__head .beau-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	text-align: start;
	gap: 24px;
	flex-wrap: wrap;
}
.beau-tcards__head .beau-link-more { margin-block-end: 8px; }
.beau-tcards__viewport { position: relative; }
.beau-tcards__track {
	display: flex;
	gap: 20px;
	padding: 0 var(--beautera-section-pad-inline) 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
/* JS-driven carousel: snap fights smooth scrollBy — let JS own movement */
.beau-tcards--js .beau-tcards__track { scroll-snap-type: none; }
.beau-tcards--js[data-beau-tc-drag='1'] .beau-tcards__track { cursor: grab; }
.beau-tcards--js .beau-tcards__track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}
.beau-tcards__arrow {
	position: absolute;
	inset-block-start: calc(50% - 32px);
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--beautera-line-strong);
	background: rgba(255, 253, 248, 0.92);
	color: var(--beautera-ink);
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(43, 33, 24, 0.14);
	transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.beau-tcards__arrow:hover {
	border-color: var(--beautera-gold);
	color: var(--beautera-gold-deep);
	background: var(--beautera-paper);
}
.beau-tcards__arrow--prev { inset-inline-start: 16px; }
.beau-tcards__arrow--next { inset-inline-end: 16px; }
@media (max-width: 700px) {
	.beau-tcards__arrow { display: none; }
}
.beau-tcards__cell {
	flex: none;
	width: 300px;
	scroll-snap-align: start;
}
.beau-tcards__cell .beau-tcard { height: 448px; }

/* The treatment card — single markup dialect for widget AND archives */
.beau-tcard {
	position: relative;
	border-radius: var(--beautera-radius);
	overflow: hidden;
	height: 340px;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	background: var(--beautera-ink);
	display: block;
}
.beau-tcard:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(43, 33, 24, 0.22);
}
.beau-theme .beau-tcard__img,
.beau-theme .beau-tcard img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Photo eases in on hover — pairs with the deeper overlay below. */
.beau-theme .beau-tcard:hover img,
.beau-theme .beau-tcard:focus-within img {
	transform: scale(1.05);
}
.beau-tcard__scrim {
	position: absolute;
	inset: 0;
	/* Rest state: deep enough that category + name stay legible over bright
	   photos (the design's 38% stop washed out on pale/backlit images). */
	background: linear-gradient(to bottom, transparent 30%, rgba(27, 18, 10, 0.58) 62%, rgba(27, 18, 10, 0.92) 100%);
}
/* Hover overlay — a second, darker layer that fades in so the revealed copy
   reads against any photo. Strength is Elementor-controlled. */
.beau-tcard__scrim::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(20, 13, 7, 0.58) 0%, rgba(20, 13, 7, 0.84) 55%, rgba(20, 13, 7, 0.95) 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
}
.beau-tcard:hover .beau-tcard__scrim::after,
.beau-tcard:focus-within .beau-tcard__scrim::after {
	opacity: var(--beau-tcard-hover-opacity, 1);
}
.beau-tcard__body {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	padding: 28px 24px;
}
.beau-tcard__cat {
	font-family: var(--beautera-sans);
	font-size: 9px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--beautera-gold-soft);
	margin: 0 0 8px;
	font-weight: 600;
	overflow-wrap: anywhere;
	text-shadow: 0 1px 12px rgba(20, 13, 7, 0.55);
}
.beau-tcard__title {
	font-family: var(--beautera-serif);
	font-size: 1.65rem;
	font-weight: 400;
	color: var(--beautera-paper);
	line-height: 1.2;
	margin: 0 0 18px;
	/* Long or nbsp-joined names must wrap instead of running off the card. */
	overflow-wrap: anywhere;
	text-shadow: 0 1px 14px rgba(20, 13, 7, 0.5);
}
/* Optional per-card rich-text description (HTML) between title and button.
   Collapsed at rest and revealed on hover/focus: the block expands from the
   bottom-anchored body, so category + name slide up as the copy unfolds. */
.beau-tcard__desc {
	font-family: var(--beautera-sans);
	font-size: 12px;
	line-height: 1.65;
	color: rgba(255, 253, 248, 0.82);
	overflow-wrap: anywhere;
	max-height: 0;
	margin: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(10px);
	transition: max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		margin 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.3s ease;
}
.beau-tcard:hover .beau-tcard__desc,
.beau-tcard:focus-within .beau-tcard__desc {
	max-height: var(--beau-tcard-desc-max, 16em);
	margin: 2px 0 16px;
	opacity: 1;
	transform: none;
}
/* No hover available (touch): show the copy, capped so it can't spill out. */
@media (hover: none) {
	.beau-tcard__desc {
		max-height: var(--beau-tcard-desc-max, 16em);
		margin: 2px 0 16px;
		opacity: 1;
		transform: none;
	}
}
/* Elementor: "Description → Always visible" — original static layout. */
.beau-tcards--desc-static .beau-tcard__desc {
	max-height: none;
	margin: -8px 0 16px;
	opacity: 1;
	transform: none;
}
.beau-tcard__desc > :first-child { margin-block-start: 0; }
.beau-tcard__desc > :last-child { margin-block-end: 0; }
.beau-tcard__desc p { margin: 0 0 8px; }
.beau-tcard__desc a { color: var(--beautera-gold-soft); }
.beau-tcard__desc strong { color: var(--beautera-paper); }
.beau-tcard__link {
	display: inline-block;
	border: 1px solid rgba(255, 253, 248, 0.45);
	color: var(--beautera-paper);
	padding: 9px 16px;
	font-family: var(--beautera-sans);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px;
	transition: border-color 0.25s, color 0.25s;
}
.beau-tcard__link:hover {
	border-color: var(--beautera-gold);
	color: var(--beautera-gold-soft);
}

/* Grid context (archives + services grid): smaller cards */
.beau-tcard-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin-inline: auto;
}
.beau-tcard-grid .beau-tcard { height: 340px; }
.beau-tcard-grid .beau-tcard__body { padding: 22px 20px; }
.beau-tcard-grid .beau-tcard__cat { letter-spacing: 0.2em; }
.beau-tcard-grid .beau-tcard__title { font-size: 1.25rem; line-height: 1.25; margin-block-end: 14px; }
.beau-tcard-grid .beau-tcard__link { padding: 8px 14px; font-size: 8.5px; letter-spacing: 0.14em; }

.beau-tcard-grid .beau-tcard__desc { --beau-tcard-desc-max: 8.5em; }

@media (prefers-reduced-motion: reduce) {
	.beau-tcard,
	.beau-tcard__desc,
	.beau-tcard__scrim::after,
	.beau-theme .beau-tcard img { transition-duration: 0.01ms; }
	.beau-tcard:hover { transform: none; }
	.beau-tcard__desc { transform: none; }
	.beau-theme .beau-tcard:hover img,
	.beau-theme .beau-tcard:focus-within img { transform: none; }
}

@media (max-width: 1100px) {
	.beau-tcard-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
	.beau-tcard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.beau-tcard-grid { grid-template-columns: 1fr; }
	.beau-tcards__cell { width: 260px; }
}