/* ===========================================================================
   /concierge — kteothivon212.gr/symboyles in this site's palette (see
   ConciergeSection.astro for what was and wasn't carried over).

   Header   — one screen tall, pinned for a screen of scroll while the floating
              photographs converge into the mark at its centre.
   Cards    — asymmetric: left and right in turn, at their own widths, revealed
              one by one as the circuit lines reach them (concierge-page.js).
   Closing  — the line the lines end at, and the button.
   ========================================================================= */

/* The disc behind the mark. Charcoal, like the header it sits in, so the
   converging photographs disappear behind it. */
.cg_dot {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 320px;
	height: 320px;
	background-color: var(--vv-charcoal);
	border-radius: 50%;
	clip-path: circle(50%);
	transform: translate(-50%, -50%);
	transform-origin: 50%;
	pointer-events: none;
	backface-visibility: hidden;
	visibility: hidden;
}

/* ----- Header ------------------------------------------------------------- */
.cg_header {
	position: relative;
	background-color: var(--vv-charcoal);
	color: var(--vv-off-white);
}
.cg_header_pin {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100svh;
	overflow: hidden;
	text-align: center;
}
/* Without the pin (reduced motion), the header keeps its scroll length. */
.cg_header:not([data-pinned]) .cg_header_pin {
	position: sticky;
	top: 0;
}

.cg_thumbs {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
}
.cg_thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 170px;
	height: 114px;
	overflow: hidden;
	border-radius: 8px;
	opacity: 0;
	transform-origin: center center;
}
.cg_thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cg_header_content {
	position: relative;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}
/* The mark fills with the site's own photographs as the pin scrubs: the PNG's
   own transparency is the mask, so no vector geometry is needed (their glyph
   paints into its SVG paths instead — see ConciergeSection.astro). */
.cg_mark {
	position: relative;
	z-index: 20;
	width: 190px;
	/* The Minos Host mark's own proportions (logo/mark-black.png). */
	aspect-ratio: 1579 / 1060;
	will-change: transform;
}
.cg_mark_ghost,
.cg_mark_fill {
	position: absolute;
	inset: 0;
	display: block;
}
/* The empty mark under the fill — the shape you see before the photographs
   have risen into it. */
.cg_mark_ghost {
	background-color: rgba(245, 242, 237, 0.22);
	-webkit-mask-image: url("../../img/logo/mark-black.png");
	mask-image: url("../../img/logo/mark-black.png");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.cg_mark_fill {
	overflow: hidden;
	-webkit-mask-image: url("../../img/logo/mark-black.png");
	mask-image: url("../../img/logo/mark-black.png");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
/* Three bands, bottom one first; each is clipped away until the scroll brings
   it up (concierge-page.js). */
.cg_mark_band {
	position: absolute;
	left: 0;
	width: 100%;
	height: 33.34%;
	overflow: hidden;
	/* Hidden until the motion layer opens it. */
	clip-path: inset(100% 0 0 0);
}
.cg_mark_band:nth-child(1) {
	bottom: 0;
}
.cg_mark_band:nth-child(2) {
	bottom: 33.33%;
}
.cg_mark_band:nth-child(3) {
	bottom: 66.66%;
}
.cg_mark_band img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cg_title {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(46px, 7vw, 110px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
}
.cg_lead {
	max-width: 44rem;
	margin: 0;
	color: rgba(245, 242, 237, 0.75);
	font-size: 17px;
	line-height: 1.6;
}

.cg_scroll_cue {
	position: absolute;
	bottom: 48px;
	left: 50%;
	z-index: 20;
	transform: translateX(-50%);
}
.cg_scroll_cue_line {
	display: block;
	width: 1px;
	height: 56px;
	background: linear-gradient(to bottom, rgba(184, 154, 107, 0), var(--vv-gold));
}

/* ----- The cards ---------------------------------------------------------- */
.cg_list {
	position: relative;
	z-index: 2;
	background-color: var(--vv-cream);
	color: var(--vv-charcoal);
	padding-block: 80px 0;
}
.cg_cards {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 80px;
	padding-block: 40px;
}
/* The canvas the lines are drawn on. The motion layer moves it to <body> and
   sizes it to the screen; it paints over everything and takes no clicks. */
.cg_lines_canvas,
.cg_wave_canvas {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100svh;
	pointer-events: none;
}
.cg_lines_canvas {
	z-index: 2;
}
/* Above the cards: these planes ARE the card photographs. */
.cg_wave_canvas {
	z-index: 11;
}

.cg_card {
	position: relative;
	width: 90%;
	margin-inline: auto;
	/* The lines own this once they start (concierge-page.js); until then the
	   card is simply there, so a page without the motion layer still reads. */
	transition: opacity 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}
.cg_card_thumb {
	position: relative;
	margin-bottom: 1.5rem;
	overflow: hidden;
	border-radius: 20px;
}
.cg_card_thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 812 / 568;
	object-fit: cover;
}
.cg_card_info {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.cg_card_title {
	margin: 0;
	width: 58.3333%;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(26px, 2.6vw, 40px);
	font-weight: 400;
	line-height: 1.15;
}
.cg_card_meta {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: space-between;
}
.cg_card_lead {
	margin: 0;
	color: var(--vv-charcoal);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.55;
}
.cg_card_text {
	margin: 0;
	color: var(--vv-gray);
	font-size: 16px;
	line-height: 1.6;
}

@media screen and (min-width: 40rem) {
	.cg_card_meta {
		flex-direction: row;
		gap: 2.5rem;
	}
	.cg_card_lead {
		width: 58.3333%;
	}
	.cg_card_text {
		width: 41.6667%;
	}
}

/* Asymmetric placement — their own widths and insets. */
@media screen and (min-width: 769px) {
	.cg_card--left {
		margin-right: auto;
		margin-left: 4%;
	}
	.cg_card--right {
		margin-right: 4%;
		margin-left: auto;
	}
	.cg_card--center {
		margin-inline: auto;
	}
	.cg_card--small {
		width: 29%;
	}
	.cg_card--medium {
		width: 36%;
	}
	.cg_card--large {
		width: 41%;
	}
	.cg_card--xlarge {
		width: 46%;
	}
}

/* ----- Closing ------------------------------------------------------------ */
.cg_cta {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	padding-block: 80px 120px;
	text-align: center;
}
.cg_cta_text {
	max-width: 48rem;
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 400;
	line-height: 1.2;
}

@media screen and (max-width: 991px) {
	.cg_cards {
		gap: 56px;
	}
	.cg_list {
		padding-top: 56px;
	}
	.cg_cta {
		padding-block: 56px 80px;
	}
	.cg_thumb {
		width: 128px;
		height: 86px;
	}
	.cg_mark {
		width: 120px;
	}
}