/* =============================================================
   Alpha Destinations – Guest Reviews
   States per card:
     • default : image only
     • hover   : image blurs + review text appears (light text)
     • clicked : solid colour replaces image + review text (dark)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Philosopher&family=Open+Sans:wght@400;600&display=swap');

:root {
	--adr-gold:       #f79418;
	--adr-light:      #f1f1f1;
	--adr-grey:       #a9a9a9;
	--adr-white:      #ffffff;
	--adr-cell:       250px;   /* Figma cell height */
	--adr-col:        calc( var(--adr-cell) + 100px );  /* column width = height + 100px */
	--adr-gap:        8px;
	--adr-radius:     4px;
	--adr-speed:      0.35s;
}

/* ── Section ───────────────────────────────────────────────── */
.adr-guest-reviews {
	width: 100%;
	max-width: calc( var(--adr-col) * 4 + var(--adr-gap) * 3 );
	margin: 0 auto;
	padding: 40px 0 60px;
	background: transparent;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
}
.adr-guest-reviews.alignwide,
.adr-guest-reviews.alignfull { max-width: none; }
.adr-guest-reviews.alignfull { padding-left: 20px; padding-right: 20px; }

/* ── Title ─────────────────────────────────────────────────── */
.adr-section-title {
	font-family: 'Philosopher', serif;
	font-size: 30px;
	font-weight: 400;
	color: var(--adr-gold);
	text-align: center;
	margin: 0 0 32px;
	line-height: normal;
}

/* ── Mosaic grid ───────────────────────────────────────────── */
/* 4 columns, 250px rows, dense auto-flow. Tall cards span 2 rows.
   The tall/short rhythm (set per-card in PHP) interlocks into the
   exact Figma brick pattern. */
.adr-mosaic {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, var(--adr-col) ) );
	grid-auto-rows: var(--adr-cell);
	gap: var(--adr-gap);
	justify-content: center;
}

/* ── Card ──────────────────────────────────────────────────── */
.adr-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--adr-radius);
	cursor: pointer;
	outline: none;
	grid-row: span 1;
	background: transparent;
}
.adr-card--tall  { grid-row: span 2; }
.adr-card--short { grid-row: span 1; }
.adr-card:focus-visible { box-shadow: 0 0 0 3px var(--adr-gold); }

/* Image layer */
.adr-card__image {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.adr-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--adr-fx, 50%) var(--adr-fy, 50%);
	transform: scale( var(--adr-zoom, 1) );
	transform-origin: var(--adr-fx, 50%) var(--adr-fy, 50%);
	display: block;
	transition: filter var(--adr-speed) ease, transform var(--adr-speed) ease;
}

/* Solid colour layer (revealed on click) */
.adr-card__solid {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--adr-bg, var(--adr-light));
	opacity: 0;
	transition: opacity var(--adr-speed) ease;
}

/* Text layer */
.adr-card__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: safe center;
	gap: 8px;
	padding: 22px 18px;
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--adr-speed) ease, transform var(--adr-speed) ease;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(247,148,24,0.7) transparent;
}
/* Custom scrollbar (WebKit) */
.adr-card__content::-webkit-scrollbar { width: 6px; }
.adr-card__content::-webkit-scrollbar-track { background: transparent; }
.adr-card__content::-webkit-scrollbar-thumb {
	background: rgba(247,148,24,0.7);
	border-radius: 3px;
}
.adr-card__content::-webkit-scrollbar-thumb:hover { background: rgba(247,148,24,0.95); }

.adr-card__name {
	font-family: 'Philosopher', serif;
	font-size: 26px;
	font-weight: 400;
	color: var(--adr-gold);          /* gold in every state */
	text-align: center;
	margin: 0;
	line-height: 1.1;
	word-break: break-word;
}

.adr-card__text {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	line-height: 1.55;
	color: var(--adr-light);         /* light over blurred image */
	margin: 0;
	text-align: center;
	word-break: break-word;
	flex: 0 0 auto;
}

/* ── HOVER state (only while not clicked) ─────────────────── */
.adr-card:not(.is-clicked):hover .adr-card__image img,
.adr-card:not(.is-clicked):focus-visible .adr-card__image img {
	filter: blur(10px);
	transform: scale( calc( var(--adr-zoom, 1) * 1.06 ) );
}
.adr-card:not(.is-clicked):hover .adr-card__content,
.adr-card:not(.is-clicked):focus-visible .adr-card__content {
	opacity: 1;
	transform: translateY(0);
}
/* Slight dim so light text stays readable over the blur */
.adr-card:not(.is-clicked):hover .adr-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.25);
}

/* ── CLICKED state ─────────────────────────────────────────── */
.adr-card.is-clicked .adr-card__solid { opacity: 1; }
.adr-card.is-clicked .adr-card__content {
	opacity: 1;
	transform: translateY(0);
}
.adr-card.is-clicked .adr-card__text {
	color: #000;                     /* dark text on solid bg */
}
/* On a dark solid colour, keep body text readable */
.adr-card.is-clicked.is-dark-bg .adr-card__text { color: var(--adr-white); }

/* Press feedback */
.adr-card:active { transform: scale(0.99); }

/* Cards with no image: show solid bg immediately as the resting state */
.adr-card--no-image .adr-card__solid { opacity: 1; }
.adr-card--no-image .adr-card__content { opacity: 1; transform: none; }
.adr-card--no-image .adr-card__text { color: #000; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1080px) { :root { --adr-cell: 200px; } }
@media (max-width: 860px)  { :root { --adr-cell: 170px; } .adr-card__name { font-size: 20px; } }

@media (max-width: 680px) {
	.adr-mosaic { grid-template-columns: repeat( 2, 1fr ); }
	.adr-card,
	.adr-card--tall,
	.adr-card--short {
		grid-column: auto !important;
		grid-row: auto !important;
		min-height: var(--adr-cell);
	}
	/* On touch devices, reveal text by default since there's no hover */
	.adr-card .adr-card__content { opacity: 1; transform: none; }
	.adr-card:not(.is-clicked) .adr-card__image img { filter: blur(8px); }
	.adr-card:not(.is-clicked) .adr-card__image::after {
		content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.3);
	}
}
@media (max-width: 420px) {
	.adr-mosaic { grid-template-columns: 1fr; }
}