/**
 * Card Reveal Challenge — front end.
 *
 * Colours come from Avada's own custom properties so the cards inherit Zara's
 * palette and follow it if she ever changes the scheme. The hex values in the
 * var() fallbacks are the palette as it stands, so the grid still looks right
 * if this ever renders outside an Avada page.
 *
 *   resting card   custom_color_1  #f1eaff   pale lilac
 *   hovered card   color4          #af92db   mid purple
 *   border         color5          #7244d1
 *   question mark  color7          #220042
 *
 * The "Click To Reveal" caption is set in custom_color_1, which means it is
 * invisible against the resting card and only readable once the background
 * changes on hover. That is how the Avada design behaves and it is deliberate.
 */

/*
 * The modal is moved to <body> when it opens, so it needs the palette in its
 * own right — it is no longer inside .ztcc by the time it is visible.
 */
.ztcc,
.ztcc__modal {
	--ztcc-rest: var(--awb-custom_color_1, #f1eaff);
	--ztcc-hover: var(--awb-color4, #af92db);
	--ztcc-border: var(--awb-color5, #7244d1);
	--ztcc-mark: var(--awb-color7, #220042);
	--ztcc-caption: var(--awb-custom_color_1, #f1eaff);
	--ztcc-ink: var(--awb-color6, #270c5b);
	--ztcc-paper: var(--awb-color1, #ffffff);
	--ztcc-columns: 4;

	position: relative;
}

/* ---- grid ---- */

.ztcc__grid {
	display: grid;
	grid-template-columns: repeat(var(--ztcc-columns), minmax(0, 1fr));

	/* Matches column_spacing / row_spacing on the Avada element it replaces. */
	gap: 40px;
}

@media (max-width: 1024px) {
	.ztcc__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.ztcc__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- card ---- */

.ztcc__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;

	/* Matches the Avada column: 60px top, 30px elsewhere. */
	padding: 60px 30px 30px;
	min-height: 240px;

	background: var(--ztcc-rest);
	border: 0;
	border-bottom: 1px solid var(--ztcc-border);
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.11);

	font: inherit;
	text-align: center;
	overflow: hidden;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

button.ztcc__card {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

button.ztcc__card:hover,
button.ztcc__card:focus-visible {
	background: var(--ztcc-hover);
}

button.ztcc__card:focus-visible {
	outline: 2px solid var(--ztcc-mark);
	outline-offset: 2px;
}

.ztcc__mark {
	font-size: 69px;
	line-height: 1;
	color: var(--ztcc-mark);
	font-family: var(--h2_typography-font-family, inherit);
}

.ztcc__hint {
	margin-top: 14px;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ztcc-mark);
	opacity: 0.75;
}

.ztcc__caption {
	margin: 10px 20px 0;
	color: var(--ztcc-caption);
	font-family: var(--h2_typography-font-family, inherit);
	font-size: 1.1rem;
	line-height: 1.3;
}

/* ---- skeleton ---- */

/*
 * The skeleton is the finished card with its text not yet filled in — same
 * box, same background, same question mark in the same place. Anything more
 * elaborate (a pulse, a shimmer) draws the eye to exactly the moment we want
 * nobody to notice, and reads as a flicker when the real cards land.
 */
.ztcc__card--skeleton .ztcc__mark {
	opacity: 0.55;
}

/* ---- locked ---- */

.ztcc__card--locked,
.ztcc__card--signed_out,
.ztcc__card--no_access {
	opacity: 0.45;
	filter: saturate(0.5);
	cursor: not-allowed;
}

.ztcc__card--locked:hover,
.ztcc__card--signed_out:hover,
.ztcc__card--no_access:hover {
	background: var(--ztcc-rest);
}

.ztcc__countdown {
	margin-top: 12px;
	font-size: 0.8rem;
	color: var(--ztcc-mark);
	font-variant-numeric: tabular-nums;
}

/* ---- already revealed ---- */

.ztcc__card--revealed {
	background: var(--ztcc-hover);
}

.ztcc__card--revealed .ztcc__caption,
.ztcc__card--revealed .ztcc__mark {
	color: var(--ztcc-paper);
}

.ztcc__badge {
	margin-top: 12px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ztcc-paper);
	color: var(--ztcc-ink);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---- status line ---- */

.ztcc__status {
	margin: 18px 0 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--ztcc-ink);
}

.ztcc__status--quiet {
	opacity: 0.7;
}

.ztcc__status a {
	color: inherit;
	text-decoration: underline;
}

/* ---- modal ---- */

.ztcc__modal {
	position: fixed;
	inset: 0;

	/*
	 * Above Avada's sticky header and its off-canvas panels. The number alone
	 * is not enough — an ancestor with a transform or filter would trap the
	 * whole thing in its own stacking context however high this goes — so the
	 * script also moves this element to <body> before showing it.
	 */
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	/*
	 * White and see-through, per Zara: enough of the site shows behind to
	 * keep its context, and the blur is what actually isolates the photo.
	 */
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.ztcc__modal[hidden] {
	display: none;
}

/*
 * The panel is the photograph. No box, no padding, no white surround — the
 * container takes whatever shape the reference image is, so an 8x8 peacock and
 * a 6x8 wren each get a panel of their own proportions rather than a
 * letterboxed image inside a fixed dialog.
 */
.ztcc__modal-inner {
	position: relative;
	display: inline-block;
	max-width: 100%;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}

.ztcc__modal-inner:focus {
	outline: none;
}

.ztcc__reveal {
	position: relative;
	display: block;
	margin: 0;
	line-height: 0;
}

.ztcc__photo {
	display: block;
	width: auto;
	height: auto;
	max-width: min(860px, 92vw);
	max-height: 84vh;
}

/*
 * Scrims, only as dark as the text needs. The photo is what the member came
 * for, and a heavy wash over a reference image defeats the point of showing
 * it. pointer-events stay off so the gradients never swallow a click.
 *
 * Neutral black, not the brand purple: members paint from this photo, and a
 * tinted scrim shifts the colours they are trying to match.
 */
.ztcc__overlay {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	pointer-events: none;
	line-height: 1.3;
}

.ztcc__overlay--top {
	top: 0;
	padding: 20px 62px 44px 24px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

.ztcc__overlay--bottom {
	bottom: 0;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 56px 24px 24px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.ztcc__modal-title {
	margin: 0;
	font-family: var(--h2_typography-font-family, inherit);
	font-size: 1.45rem;
	line-height: 1.2;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.ztcc__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.ztcc__close:hover,
.ztcc__close:focus-visible {
	background: rgba(0, 0, 0, 0.8);
}

.ztcc__downloads {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ztcc__button {
	pointer-events: auto;
	display: inline-block;
	padding: 12px 20px;
	border-radius: 4px;
	background: var(--ztcc-border);
	color: #fff;
	text-decoration: none;
	font-size: 0.92rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ztcc__button:hover,
.ztcc__button:focus-visible {
	background: var(--ztcc-mark);
	color: #fff;
}

.ztcc__button:focus-visible {
	outline: 2px solid var(--ztcc-rest);
	outline-offset: 2px;
}

/*
 * Tutorial cards and any card whose reference photo is missing have no image
 * to build a panel around, so they fall back to a solid one.
 */
.ztcc__reveal--plain {
	padding: 32px;
	min-width: min(420px, 88vw);
	background: var(--ztcc-mark);
	line-height: 1.6;
}

.ztcc__reveal--plain .ztcc__modal-title {
	margin-bottom: 14px;
}

.ztcc__reveal--plain p {
	margin: 0 0 20px;
	color: #fff;
	opacity: 0.85;
}

.ztcc__reveal--plain .ztcc__downloads {
	position: static;
}

/* At phone width the buttons stack rather than squeezing side by side. */
@media (max-width: 520px) {
	.ztcc__overlay--bottom {
		flex-direction: column;
		align-items: stretch;
	}

	.ztcc__downloads {
		flex-direction: column;
	}

	.ztcc__button {
		text-align: center;
	}
}

/* ---- photo credit ---- */

.ztcc__credit {
	margin-left: auto;
	font-size: 0.75rem;
	line-height: 1.3;
	text-align: right;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.ztcc__reveal--plain .ztcc__credit {
	display: block;
	margin-top: 16px;
	text-shadow: none;
}

/* ---- buttons on a solid panel ---- */

button.ztcc__button {
	border: 0;
	font: inherit;
	font-size: 0.92rem;
	cursor: pointer;
}

/*
 * The usual hover colour is the panel's own background here, which would make
 * the button vanish under the cursor.
 */
.ztcc__reveal--plain .ztcc__button:hover,
.ztcc__reveal--plain .ztcc__button:focus-visible {
	background: var(--ztcc-border);
	filter: brightness(1.15);
}

.ztcc__button.ztcc__button--ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: none;
}

.ztcc__button.ztcc__button--ghost:hover,
.ztcc__button.ztcc__button--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	filter: none;
}

/* ---- are you sure? ---- */

.ztcc__reveal--confirm {
	max-width: min(480px, 88vw);
}

.ztcc__reveal--confirm .ztcc__confirm-text {
	margin: 0 0 24px;
	font-size: 1.1rem;
	line-height: 1.5;
	opacity: 1;
}

.ztcc__confirm-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
}

/* ---- word cards ---- */

.ztcc__reveal--word {
	padding: 64px 48px;
	text-align: center;
}

.ztcc__reveal--word .ztcc__word {
	margin: 0;
	font-size: clamp(2.4rem, 8vw, 4rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* A turned word card shows its word in the grid, big enough to read at a glance. */
.ztcc__caption--word {
	font-size: 1.6rem;
}

/* ---- the answer to clicking a locked card ---- */

.ztcc__status {
	padding: 8px 12px;
	border-radius: 4px;
}

.ztcc__status--nudge {
	animation: ztcc-nudge 1.2s ease;
}

@keyframes ztcc-nudge {
	0% { background-color: var(--ztcc-hover); }
	100% { background-color: transparent; }
}

/* ---- access notice ---- */

/*
 * This renders outside the challenge grid, on any locked page, so it reads
 * Avada's variables directly rather than the grid's own tokens.
 */
.ztcc-access {
	max-width: 680px;
	margin: 0 auto;
	padding: 32px 28px;
	text-align: center;
	background: var(--awb-custom_color_1, #f1eaff);
	border-radius: 4px;
}

.ztcc-access__text {
	margin: 0 0 22px;
	font-family: var(--h2_typography-font-family, inherit);
	font-size: 1.15rem;
	line-height: 1.45;
	color: var(--awb-color7, #220042);
}

.ztcc-access__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.ztcc-access__button {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid var(--awb-color5, #7244d1);
	border-radius: 4px;
	background: var(--awb-color5, #7244d1);
	color: #fff;
	text-decoration: none;
	font-size: 0.95rem;
}

.ztcc-access__button:hover,
.ztcc-access__button:focus-visible {
	background: var(--awb-color7, #220042);
	border-color: var(--awb-color7, #220042);
	color: #fff;
}

/* The secondary action — somewhere to go that is not a purchase. */
.ztcc-access__button--quiet {
	background: transparent;
	color: var(--awb-color5, #7244d1);
}

@media (prefers-reduced-motion: reduce) {
	.ztcc__card,
	.ztcc__card--skeleton {
		transition: none;
		animation: none;
	}

	/* Still mark the message, just without the fade. */
	.ztcc__status--nudge {
		animation: none;
		background-color: var(--ztcc-rest);
	}
}