/* Pattern: luxe/home-glass — glass comparison viewer.
   Without JS (and in the editor) the glass groups show as a card list; once
   glass-preview.js runs (.has-preview) the cards are hidden and the layout is
   the photo on the left and a numbered glass list on the right. */

.luxe-glass > .luxe-glass__layout {
	margin-top: 56px;
}

.luxe-glass__layout.has-preview {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr);
	gap: 40px clamp(48px, 6vw, 104px);
	align-items: start;
}

.luxe-glass__layout.has-preview > .luxe-glass__grid {
	display: none;
}

@media (max-width: 899px) {
	.luxe-glass__layout.has-preview {
		grid-template-columns: 1fr;
	}
}

/* — Photo (left) — */
.luxe-glass__layout > .luxe-glass-preview {
	display: none;
	margin: 0;
}

.luxe-glass__layout > .luxe-glass-preview.is-ready {
	display: block;
}

.luxe-glass-preview > .luxe-glass-preview__label {
	margin: 0 0 14px;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.06em;
	color: var(--luxe-muted);
}

.luxe-glass-preview__frame {
	position: relative;
	margin: 0;
	padding: 8px;
	background: var(--wp--preset--color--surface);
	outline: 1px solid var(--luxe-divider);
	box-shadow: var(--luxe-shadow-md);
}

.luxe-glass-preview__frame img {
	display: block;
	width: 100%;
	aspect-ratio: 502 / 376;
	object-fit: cover;
}

.luxe-glass-preview__tag {
	position: absolute;
	bottom: 20px;
	padding: 5px 12px;
	background: rgb(246 244 241 / 0.9);
	backdrop-filter: blur(4px);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.luxe-glass-preview__tag.is-glass { left: 20px; }
.luxe-glass-preview__tag.is-clear { right: 20px; }

.luxe-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* — Numbered glass list (right) — */
.luxe-glass-list {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--luxe-divider);
}

.luxe-glass-list__item {
	border-bottom: 1px solid var(--luxe-divider);
}

.luxe-glass-list__head {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: baseline;
	gap: 12px;
	padding: 18px 0;
	cursor: pointer;
}

.luxe-glass-list__head input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.luxe-glass-list__head:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 4px;
}

.luxe-glass-list__num {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-size: 17px;
	font-feature-settings: "tnum" 1;
	color: color-mix(in srgb, var(--wp--preset--color--accent-1) 70%, transparent);
}

.luxe-glass-list__name {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: clamp(24px, 2.2vw, 30px);
	font-weight: 300;
	line-height: 1.1;
	color: var(--luxe-muted);
	transition: color 400ms var(--luxe-ease);
}

.luxe-glass-list__rating {
	font-size: 11px;
	letter-spacing: 0.16em;
	font-feature-settings: "tnum" 1;
	color: var(--luxe-muted);
}

.luxe-glass-list__head:hover .luxe-glass-list__name,
.luxe-glass-list__item.is-active .luxe-glass-list__name {
	color: var(--wp--preset--color--contrast);
}

.luxe-glass-list__item.is-active .luxe-glass-list__num {
	color: var(--wp--preset--color--accent-1);
}

/* The open row shows the full "Privacy N/10" below, so hide its short rating. */
.luxe-glass-list__item.is-active .luxe-glass-list__rating {
	opacity: 0;
}

.luxe-glass-list__rating {
	transition: opacity 300ms ease;
}

/* Line the list up with the photo frame (below the photo's caption line). */
@media (min-width: 900px) {
	.luxe-glass__layout.has-preview > .luxe-glass-list {
		margin-top: 32px;
	}
}

/* The selected row opens smoothly to show its meter and description. */
.luxe-glass-list__details {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 600ms var(--luxe-ease);
}

.luxe-glass-list__item.is-active .luxe-glass-list__details {
	grid-template-rows: 1fr;
}

.luxe-glass-list__details > div {
	overflow: hidden;
	padding-left: 52px;
}

.luxe-glass-list__label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-3);
}

.luxe-glass-list__details p {
	max-width: 38ch;
	margin: 16px 0 24px;
	font-size: 15.5px;
	line-height: 27px;
	color: var(--luxe-soft);
}

/* — Glass entries as cards: the no-JS / editor view — */
.luxe-glass__layout > .luxe-glass__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: clamp(16px, 2vw, 24px);
	margin: 0;
}

.luxe-glass__grid > .luxe-glass-card {
	margin: 0;
	padding: 0 22px 24px;
	overflow: hidden;
	border: 1px solid var(--luxe-divider);
	border-radius: 18px 18px 4px 4px;
	background: rgb(255 255 255 / 0.35);
}

.luxe-glass-card > p {
	margin: 0;
}

/* Swatch: the left (glass) half of the comparison photo; Clear shows its whole photo. */
.luxe-glass-card > .luxe-glass-card__swatch {
	margin: 0 -22px 20px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-bottom: 1px solid var(--luxe-divider);
}

.luxe-glass-card__swatch img {
	display: block;
	width: 200%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.luxe-glass-card.is-baseline .luxe-glass-card__swatch img {
	width: 100%;
}

.luxe-glass-card > .luxe-glass-card__name {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 25px;
	line-height: 1.1;
}

.luxe-glass-card > .luxe-glass-card__rating {
	margin-top: 10px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-feature-settings: "tnum" 1;
	color: var(--wp--preset--color--accent-3);
}

.luxe-glass-card > .luxe-glass-card__text {
	margin-top: 14px;
	font-size: 13.5px;
	line-height: 21px;
	color: var(--luxe-soft);
}

/* Privacy meter: ten segments, N filled in gold (from .luxe-privacy-N). */
.luxe-glass-card__rating::after,
.luxe-glass-meter {
	content: "";
	display: block;
	max-width: 240px;
	height: 2px;
	margin-top: 10px;
	background:
		linear-gradient(var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-1)) left / calc(var(--luxe-privacy, 0) * 10%) 100% no-repeat,
		var(--luxe-divider);
	-webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
	mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
}

.luxe-privacy-1 { --luxe-privacy: 1; }
.luxe-privacy-2 { --luxe-privacy: 2; }
.luxe-privacy-3 { --luxe-privacy: 3; }
.luxe-privacy-4 { --luxe-privacy: 4; }
.luxe-privacy-5 { --luxe-privacy: 5; }
.luxe-privacy-6 { --luxe-privacy: 6; }
.luxe-privacy-7 { --luxe-privacy: 7; }
.luxe-privacy-8 { --luxe-privacy: 8; }
.luxe-privacy-9 { --luxe-privacy: 9; }
.luxe-privacy-10 { --luxe-privacy: 10; }

/* — Below the viewer: the Therma-Tru link as a quiet text link — */
.luxe-glass > .luxe-actions {
	margin-top: 44px;
}

.luxe-glass > .luxe-actions .wp-block-button__link {
	min-height: 0;
	padding: 0 0 5px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-1);
	border-radius: 0;
	background: none;
	font-size: 11.5px;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--accent-3);
}

.luxe-glass > .luxe-actions .wp-block-button__link:hover {
	background: none;
	color: var(--wp--preset--color--accent-4);
	border-color: var(--wp--preset--color--accent-4);
}

.luxe-glass > .luxe-note {
	margin-top: 18px;
}

/* — Legacy: markup from older saved homepages — */
.luxe-glass > .luxe-glass__banner {
	display: none; /* Banner photo was removed from the design. */
}

.luxe-glass > .luxe-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.luxe-glass > .luxe-tags li {
	margin: 0;
	padding: 8px 20px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 70%, transparent);
	border-radius: 999px;
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-3);
}