/**
 * Selected treatments for the unpublished homepage visual draft.
 *
 * Scope is intentionally limited to the opted-in draft body class. The
 * destination board and FAQ content remain structurally unchanged.
 */

/*
 * Popular destinations: one low sage platform grounds the departure board.
 * The heading stays on open paper and the board remains the focal object.
 */
body.tss-home-visual-draft .tss-shelf-showcase--weekly-tags {
	overflow: hidden;
}

body.tss-home-visual-draft .tss-shelf-showcase--weekly-tags::before {
	display: none;
}

body.tss-home-visual-draft .tss-shelf-showcase--weekly-tags::after {
	display: block;
	top: auto;
	right: auto;
	bottom: clamp(16px, 2vw, 28px);
	left: 50%;
	width: min(1640px, 112vw);
	height: clamp(170px, 17vw, 230px);
	border: 0;
	border-radius: 52% 48% 12px 12px / 72px 86px 12px 12px;
	background: var(--tss-draft-sage-wash);
	box-shadow: none;
	transform: translateX(-50%) rotate(-0.3deg);
}

/*
 * FAQ: the accordion is the paper sheet. Its container now follows the real
 * disclosure height, including when an answer opens.
 */
body.tss-home-visual-draft .tss-home__section:has(.tss-faq)::before,
body.tss-home-visual-draft .tss-home__section:has(.tss-faq)::after {
	display: none;
}

body.tss-home-visual-draft .tss-faq {
	position: relative;
	isolation: isolate;
	overflow: visible;
	gap: 0;
	border: 1px solid rgba(16, 16, 16, 0.18);
	border-left: 4px solid var(--tss-yellow);
	border-radius: 7px;
	background: rgba(255, 253, 247, 0.86);
	box-shadow: 7px 8px 0 rgba(223, 244, 242, 0.38);
}

body.tss-home-visual-draft .tss-faq::after {
	content: "";
	position: absolute;
	right: 20px;
	bottom: -27px;
	z-index: -1;
	width: min(132px, 30%);
	height: 38px;
	border-top: 2px dashed rgba(16, 16, 16, 0.18);
	border-bottom: 2px solid rgba(0, 124, 120, 0.16);
	border-radius: 999px;
	transform: rotate(-4deg);
	pointer-events: none;
}

body.tss-home-visual-draft .tss-faq details::before {
	display: none;
}

body.tss-home-visual-draft .tss-faq details:not([open]) {
	border-bottom-color: rgba(16, 16, 16, 0.2);
	background: transparent;
}

body.tss-home-visual-draft .tss-faq details[open] {
	z-index: 1;
	margin: 7px 8px;
	border: 2px solid var(--tss-black);
	border-radius: 7px;
	background:
		linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(255, 247, 223, 0.78));
	box-shadow: 3px 3px 0 var(--tss-yellow);
}

@media (max-width: 1050px) {
	body.tss-home-visual-draft .tss-shelf-showcase--weekly-tags::after {
		bottom: 18px;
		width: 118vw;
		height: 190px;
		border-radius: 51% 49% 11px 11px / 58px 68px 11px 11px;
		transform: translateX(-50%) rotate(-0.15deg);
	}
}

@media (max-width: 767px) {
	body.tss-home-visual-draft .tss-shelf-showcase--weekly-tags::after {
		bottom: 12px;
		width: 136%;
		height: 132px;
		border-radius: 51% 49% 10px 10px / 40px 48px 10px 10px;
		transform: translateX(-50%) rotate(-0.08deg);
	}

	body.tss-home-visual-draft .tss-faq {
		border-radius: 6px;
		box-shadow: 5px 6px 0 rgba(223, 244, 242, 0.36);
	}

	body.tss-home-visual-draft .tss-faq::after {
		display: none;
	}

	body.tss-home-visual-draft .tss-faq details[open] {
		margin: 6px;
		box-shadow: 3px 3px 0 var(--tss-yellow);
	}
}