/**
 * GDC Visitor Path Variants
 * S7 §12: Zone reordering, badges, and variant-specific styles
 *
 * Three paths: direct (default), organizer (?org=), nondiver (?partner=true).
 * Zone reordering uses CSS order on a flex container — no PHP restructuring.
 *
 * @package GDC
 * @since   5.0.0
 */

/* ==========================================================
   ZONE REORDERING — non-diver path
   Zones 1,2,3 stay in place. 6 (Stay) moves before 4,5 (Day/Diving).
   Standard:  1, 2, 3, 4, 5, 6, 7, 8, 9, 10
   Non-diver: 1, 2, 3, 6, 4, 5, 7, 8, 9, 10
   ========================================================== */

[data-visitor-path="nondiver"] .gdc-zone-1-hero   { order: 1; }
[data-visitor-path="nondiver"] .gdc-zone-2-hook   { order: 2; }
[data-visitor-path="nondiver"] .gdc-zone-3-host   { order: 3; }
[data-visitor-path="nondiver"] .gdc-zone-6-stay   { order: 4; }
[data-visitor-path="nondiver"] .gdc-zone-4-day    { order: 5; }
[data-visitor-path="nondiver"] .gdc-zone-5-diving { order: 6; }
[data-visitor-path="nondiver"] .gdc-zone-7-included  { order: 7; }
[data-visitor-path="nondiver"] .gdc-zone-8-pricing   { order: 8; }
[data-visitor-path="nondiver"] .gdc-zone-9-trust     { order: 9; }
[data-visitor-path="nondiver"] .gdc-zone-10-close    { order: 10; }

/* S7 §12.8: The .se-page main becomes a flex column for order to work */
.se-page[data-visitor-path="nondiver"] {
	display: flex;
	flex-direction: column;
}

/* ==========================================================
   HERO BADGES — organizer and non-diver path indicators
   ========================================================== */

.gdc-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--gdc-space-2, 8px);
	padding: var(--gdc-space-1, 4px) var(--gdc-space-3, 12px);
	border-radius: var(--gdc-radius-full, 999px);
	font-family: var(--gdc-font-body, 'Manrope', sans-serif);
	font-size: var(--gdc-text-xs, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-block-end: var(--gdc-space-3, 12px);
}

.gdc-hero-badge--organizer {
	background: rgba(155, 127, 212, 0.2);
	color: var(--gdc-purple, #9B7FD4);
	border: 1px solid rgba(155, 127, 212, 0.3);
}

.gdc-hero-badge--nondiver {
	background: rgba(77, 212, 192, 0.15);
	color: var(--gdc-teal, #4DD4C0);
	border: 1px solid rgba(77, 212, 192, 0.25);
}

.gdc-hero-badge__avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

.gdc-hero-badge__label {
	white-space: nowrap;
}

/* ==========================================================
   HERO NON-DIVER CALLOUT
   ========================================================== */

.gdc-hero-nondiver-callout {
	margin-block-start: var(--gdc-space-3, 12px);
	font-family: var(--gdc-font-body, 'Manrope', sans-serif);
	font-size: var(--gdc-text-sm, 0.875rem);
	color: var(--gdc-teal, #4DD4C0);
	font-weight: 500;
}

/* ==========================================================
   ZONE 3: ORGANIZER VARIANT — organizer card + divider
   ========================================================== */

.gdc-host-card--organizer {
	border: 1px solid rgba(155, 127, 212, 0.2);
	border-radius: var(--gdc-radius-lg, 12px);
	padding: var(--gdc-space-4, 16px);
	background: rgba(155, 127, 212, 0.05);
	margin-block-end: var(--gdc-space-4, 16px);
}

.gdc-host-role-label {
	font-family: var(--gdc-font-body, 'Manrope', sans-serif);
	font-size: var(--gdc-text-xs, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gdc-purple, #9B7FD4);
	margin-block-end: var(--gdc-space-1, 4px);
}

.gdc-host-divider {
	display: flex;
	align-items: center;
	gap: var(--gdc-space-3, 12px);
	margin-block: var(--gdc-space-4, 16px);
	color: var(--gdc-white-muted, rgba(255, 255, 255, 0.5));
	font-size: var(--gdc-text-xs, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.gdc-host-divider::before,
.gdc-host-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--gdc-surface, #1C2430);
}

/* ==========================================================
   ZONE 3: GROUP BOOKING BENEFITS CALLOUT
   ========================================================== */

.gdc-host-group-benefits {
	margin-block-start: var(--gdc-space-6, 24px);
	padding: var(--gdc-space-4, 16px) var(--gdc-space-5, 20px);
	background: rgba(155, 127, 212, 0.06);
	border: 1px solid rgba(155, 127, 212, 0.15);
	border-radius: var(--gdc-radius-lg, 12px);
}

.gdc-host-group-benefits__title {
	font-family: var(--gdc-font-heading, 'Cormorant Garamond', serif);
	font-size: var(--gdc-text-lg, 1.125rem);
	color: var(--gdc-white, #FFFFFF);
	margin-block-end: var(--gdc-space-3, 12px);
}

.gdc-host-group-benefits__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gdc-space-2, 8px);
}

.gdc-host-group-benefits__list li {
	display: flex;
	align-items: center;
	gap: var(--gdc-space-2, 8px);
	font-size: var(--gdc-text-sm, 0.875rem);
	color: var(--gdc-white-muted, rgba(255, 255, 255, 0.7));
}

.gdc-host-group-benefits__list svg {
	flex-shrink: 0;
	color: var(--gdc-teal, #4DD4C0);
}

/* ==========================================================
   ZONE 10: NON-DIVER PROMINENCE
   ========================================================== */

.gdc-nondiver--prominent {
	border: 1px solid rgba(77, 212, 192, 0.2);
	border-radius: var(--gdc-radius-lg, 12px);
	padding: var(--gdc-space-5, 20px);
	background: rgba(77, 212, 192, 0.04);
}

.gdc-nondiver__partner-callout {
	font-family: var(--gdc-font-heading, 'Cormorant Garamond', serif);
	font-size: var(--gdc-text-lg, 1.125rem);
	color: var(--gdc-teal, #4DD4C0);
	font-weight: 600;
	margin-block-end: var(--gdc-space-2, 8px);
}

/* ==========================================================
   RESPONSIVE — maintain variants at all breakpoints
   ========================================================== */

@media (min-width: 768px) {
	.gdc-hero-badge {
		font-size: var(--gdc-text-sm, 0.875rem);
		padding: var(--gdc-space-2, 8px) var(--gdc-space-4, 16px);
	}

	.gdc-hero-badge__avatar {
		width: 32px;
		height: 32px;
	}

	.gdc-host-card--organizer {
		padding: var(--gdc-space-5, 20px) var(--gdc-space-6, 24px);
	}

	.gdc-host-group-benefits {
		padding: var(--gdc-space-5, 20px) var(--gdc-space-6, 24px);
	}
}

@media (min-width: 1200px) {
	.gdc-host-group-benefits__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--gdc-space-4, 16px);
	}
}

/* ==========================================================
   REDUCED MOTION — respect user preferences
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
	.gdc-hero-badge,
	.gdc-nondiver--prominent,
	.gdc-host-card--organizer {
		transition: none;
	}
}