/**
 * GDC Trip Zone Collapse & Spacing System
 * S7 §2: Shared zone pattern — collapse, animations, spacing, responsive behavior
 *
 * CSS-first collapse using native <details>/<summary>.
 * Mobile: zones 4-10 collapsed. Desktop (≥768px): all zones forced open.
 *
 * @package GDC
 * @since   5.0.0
 */

/* ==========================================================
   ZONE SPACING — responsive margins between zones
   ========================================================== */

:root {
	--gdc-zone-spacing: var(--gdc-space-6);  /* 48px mobile */
}

@media (min-width: 768px) {
	:root {
		--gdc-zone-spacing: var(--gdc-space-8);  /* 64px tablet */
	}
}

@media (min-width: 1200px) {
	:root {
		--gdc-zone-spacing: var(--gdc-space-12);  /* 96px desktop */
	}
}

.gdc-trip-zone + .gdc-trip-zone {
	margin-block-start: var(--gdc-zone-spacing);
}

/* ==========================================================
   DETAILS/SUMMARY RESET — remove browser defaults
   ========================================================== */

.gdc-zone-details {
	border: none;
	padding: 0;
	margin: 0;
}

.gdc-zone-summary {
	display: block;
	list-style: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.gdc-zone-summary::-webkit-details-marker,
.gdc-zone-summary::marker {
	display: none;
	content: '';
}

.gdc-zone-summary:focus-visible {
	outline: 2px solid var(--gdc-accent-primary);
	outline-offset: 2px;
	border-radius: var(--gdc-radius-md);
}

/* ==========================================================
   ZONE HEADER — icon + title + subtitle + chevron
   ========================================================== */

.gdc-zone-header {
	display: flex;
	align-items: center;
	gap: var(--gdc-space-2);
	min-block-size: var(--gdc-tap-target-primary);
	padding-block: var(--gdc-space-2);
}

.gdc-zone-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--gdc-purple);
}

.gdc-zone-icon svg {
	width: 24px;
	height: 24px;
}

.gdc-zone-titles {
	flex: 1;
	min-width: 0;
}

.gdc-zone-title {
	font-family: var(--gdc-font-heading);
	font-size: 1.5rem;
	font-weight: var(--gdc-font-semibold);
	line-height: var(--gdc-leading-snug);
	color: var(--gdc-text-primary);
	margin: 0;
	padding: 0;
}

.gdc-zone-subtitle {
	font-family: var(--gdc-font-body);
	font-size: 0.95rem;
	font-weight: var(--gdc-font-regular);
	line-height: var(--gdc-leading-normal);
	color: var(--gdc-white-dim);
	margin: var(--gdc-space-xs) 0 0;
	padding: 0;
}

.gdc-zone-chevron {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--gdc-white-muted);
	transition: transform var(--gdc-duration-standard) var(--gdc-ease-default);
}

.gdc-zone-details[open] > .gdc-zone-summary .gdc-zone-chevron {
	transform: rotate(180deg);
}

/* ==========================================================
   ZONE PREVIEW — visible when collapsed, hidden when expanded
   ========================================================== */

.gdc-zone-preview {
	padding: var(--gdc-space-1) 0 var(--gdc-space-2);
	font-family: var(--gdc-font-body);
	font-size: var(--gdc-text-sm);
	line-height: var(--gdc-leading-normal);
	color: var(--gdc-text-secondary);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gdc-zone-details[open] .gdc-zone-preview {
	display: none;
}

/* ==========================================================
   ZONE CONTENT — the expandable body
   ========================================================== */

.gdc-zone-content {
	padding-block-start: var(--gdc-space-3);
}

/* ==========================================================
   COLLAPSE ANIMATION — smooth expand/collapse
   ========================================================== */

.gdc-zone-content {
	opacity: 1;
	transition: opacity var(--gdc-duration-standard) var(--gdc-ease-out);
}

.gdc-zone-details:not([open]) + .gdc-zone-content {
	opacity: 0;
}

.gdc-zone-content[data-animating] {
	overflow: hidden;
	transition: max-height var(--gdc-duration-standard) var(--gdc-ease-out),
	            opacity var(--gdc-duration-standard) var(--gdc-ease-out);
}

.gdc-zone-content[data-animating="closing"] {
	opacity: 0;
}

/* ==========================================================
   DESKTOP — force all zones open (≥768px)
   ========================================================== */

@media (min-width: 768px) {
	.gdc-zone-details {
		pointer-events: auto;
	}

	.gdc-zone-details > .gdc-zone-content,
	.gdc-zone-details:not([open]) > *:not(summary) {
		display: block;
		opacity: 1;
	}

	.gdc-zone-summary {
		cursor: default;
	}

	.gdc-zone-chevron {
		display: none;
	}

	.gdc-zone-preview {
		display: none;
	}
}

/* ==========================================================
   DIV-BASED FALLBACK — when ?disable-details=1
   ========================================================== */

.gdc-zone-toggle {
	cursor: pointer;
	min-block-size: var(--gdc-tap-target-primary);
	-webkit-user-select: none;
	user-select: none;
}

.gdc-zone-toggle:focus-visible {
	outline: 2px solid var(--gdc-accent-primary);
	outline-offset: 2px;
	border-radius: var(--gdc-radius-md);
}

.gdc-zone-toggle[aria-expanded="true"] .gdc-zone-chevron {
	transform: rotate(180deg);
}

.gdc-zone-toggle[aria-expanded="true"] + .gdc-zone-preview {
	display: none;
}

@media (min-width: 768px) {
	.gdc-zone-toggle {
		cursor: default;
	}

	.gdc-zone-toggle .gdc-zone-chevron {
		display: none;
	}

	.gdc-zone-content[hidden] {
		display: block !important;
	}
}

/* ==========================================================
   LAZY LOAD REVEAL — fade-in for below-fold zones
   ========================================================== */

.gdc-trip-zone[data-zone-index="5"] figure,
.gdc-trip-zone[data-zone-index="6"] figure,
.gdc-trip-zone[data-zone-index="7"] figure,
.gdc-trip-zone[data-zone-index="8"] figure,
.gdc-trip-zone[data-zone-index="9"] figure,
.gdc-trip-zone[data-zone-index="10"] figure {
	opacity: 0;
	transform: translateY(var(--gdc-scroll-slide-distance));
	transition: opacity var(--gdc-scroll-fade-duration) var(--gdc-ease-out),
	            transform var(--gdc-scroll-fade-duration) var(--gdc-ease-out);
}

.gdc-trip-zone figure.gdc-revealed {
	opacity: 1;
	transform: translateY(0);
}

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

@media (prefers-reduced-motion: reduce) {
	.gdc-zone-chevron {
		transition: none;
	}

	.gdc-zone-content {
		transition: none;
	}

	.gdc-zone-content[data-animating] {
		transition: none;
	}

	.gdc-trip-zone figure {
		opacity: 1;
		transform: none;
		transition: none;
	}
}