/* Accordion system for the trip template (details/summary based):
   shared .accordion base + --light/--dark/--padded/--counter variants +
   the itinerary-specific handle layout.
   Values measured from the reference accordion + itinerary-accordion CSS.
   Note: the .accordion base lives here because the trip template is its
   only consumer; other agents reference these classes rather than redefine. */

.accordion {
	--accordion-counter-min-width: 27px;
	--accordion-counter-margin-right: 10px;
}

/* ------------------------------------------------------------- Header */

.accordion__header {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 10px;
}
@media screen and (min-width: 768px) {
	.accordion__header {
		align-items: flex-end;
		flex-direction: row;
		gap: 20px;
		justify-content: space-between;
		padding-bottom: 20px;
	}
}
.accordion--title-center .accordion__header {
	align-items: center;
	flex-direction: column;
	gap: 10px;
}

.accordion__title,
.accordion__description { margin-bottom: 0; }

.accordion__toggle-buttons { margin-bottom: 4px; }
@media screen and (min-width: 768px) {
	.accordion__toggle-buttons { margin-left: auto; }
}
.accordion--title-center .accordion__toggle-buttons { margin-left: 0; }

.accordion__toggle-button {
	background-color: transparent;
	color: var(--color-burgundy-2);
	cursor: pointer;
	padding: 0 6px;
	transition-duration: var(--transition-time);
	transition-property: all;
	transition-timing-function: var(--transition-easing);
}
.accordion__toggle-button:hover { color: var(--color-burgundy-3); }
.accordion__toggle-buttons-separator { color: var(--color-gray-500); }

/* -------------------------------------------------------------- Items */

.accordion__item {
	border-top: 1px solid var(--color-gray-200);
	display: block;
	position: relative;
}
.accordion__item:last-of-type { border-bottom: 1px solid var(--color-gray-200); }

.accordion--light .accordion__item { background-color: var(--color-soft-white); }

/* summary acts as the handle */
.accordion__handle {
	cursor: pointer;
	display: block;
	list-style: none;
}
.accordion__handle::-webkit-details-marker { display: none; }

.accordion__handle-btn {
	align-items: center;
	color: inherit;
	cursor: pointer;
	display: flex;
	outline: none;
	padding: calc(var(--grid-row-gutter) + 3px) 0;
	text-align: left;
	transition-duration: var(--transition-time);
	transition-property: all;
	transition-timing-function: var(--transition-easing);
	width: 100%;
}
@media screen and (min-width: 768px) {
	.accordion__handle-btn { padding: var(--grid-row-gutter) 0; }
}
.accordion__handle-btn-text { margin-bottom: 0; padding-right: 20px; }
.accordion__handle-icon { display: inline-flex; margin-left: auto; }

.accordion--padded .accordion__handle-btn,
.accordion--padded .accordion__content { padding-inline: var(--grid-row-gutter); }
.accordion--padded .accordion__content-inner {
	padding-bottom: 30px;
	padding-top: calc(30px - var(--grid-row-gutter));
}

.accordion__content-inner { padding-bottom: var(--grid-row-gutter); }
.accordion__content-inner a { color: inherit; }

/* ---------------------------------------------------- Counter variant */

.accordion--counter { counter-reset: accordion_counter; }
.accordion--counter .accordion__handle-btn::before {
	align-items: center;
	border: 1px solid #17191b26;
	border-radius: 50%;
	content: counter(accordion_counter);
	counter-increment: accordion_counter;
	display: inline-flex;
	flex: none;
	font-size: 13px;
	font-weight: var(--font-weight-medium);
	height: 27px;
	justify-content: center;
	letter-spacing: 0.8px;
	line-height: 1;
	margin-right: var(--accordion-counter-margin-right);
	min-width: var(--accordion-counter-min-width);
	padding: 2px;
	text-transform: uppercase;
}
@media (min-width: 400px) {
	.accordion--counter .accordion__handle-btn::before { font-size: calc(0.3vw + 11.8px); }
}
@media (min-width: 1400px) {
	.accordion--counter .accordion__handle-btn::before { font-size: 16px; }
}
.accordion--counter .accordion__content-inner {
	padding-left: calc(var(--accordion-counter-min-width) + var(--accordion-counter-margin-right));
}

/* ------------------------------------------------------- Dark variant */

.accordion--dark {
	background-color: var(--color-burgundy-2);
	color: var(--color-soft-white);
	padding-bottom: 15px;
}
@media screen and (min-width: 768px) {
	.accordion--dark { padding-bottom: 20px; }
}
.accordion--dark .accordion__item { border-color: #fefefc26; }
.accordion--dark .accordion__toggle-button,
.accordion--dark a { color: var(--color-soft-white); }
.accordion--dark .accordion__toggle-button:hover,
.accordion--dark a:hover { color: var(--color-brass-3); }

/* --------------------------------------------------- Plus/minus icon */

.accordion .plus-minus {
	cursor: pointer;
	height: clamp(12px, 7.1392405063px + 0.63291139vw, 16px);
	position: relative;
	width: clamp(12px, 7.1392405063px + 0.63291139vw, 16px);
}
.accordion .plus-minus::before,
.accordion .plus-minus::after {
	background-color: currentcolor;
	content: "";
	display: block;
	height: 1.5px;
	left: 0;
	position: absolute;
	top: 50%;
	transition: 0.35s;
	width: 100%;
}
.accordion .plus-minus::before { transform: translateY(-50%); }
.accordion .plus-minus::after { transform: translateY(-50%) rotate(90deg); }
.accordion [open] .plus-minus::before,
details[open] > .accordion__handle .plus-minus::before {
	opacity: 0;
	transform: translateY(-50%) rotate(-90deg);
}
.accordion [open] .plus-minus::after,
details[open] > .accordion__handle .plus-minus::after {
	transform: translateY(-50%) rotate(0);
}

/* ------------------------------------------------- Itinerary variant */

.itinerary-accordion {
	--plus-icon-size: 15px;
	--handle-right-padding: calc(var(--grid-row-gutter) + var(--plus-icon-size) + 20px);
}
@media screen and (min-width: 768px) {
	.itinerary-accordion { --plus-icon-size: 18px; }
}

.itinerary-accordion .accordion__handle { position: relative; }
.itinerary-accordion .accordion__handle-icon {
	align-items: center;
	bottom: 0;
	display: flex;
	margin: auto;
	position: absolute;
	right: var(--grid-row-gutter);
	top: 0;
	z-index: 1;
}

.itinerary-accordion__handle-header {
	display: block;
	padding: var(--grid-row-gutter) var(--grid-row-gutter) 0;
}

.itinerary-accordion .accordion__handle-btn {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	padding-right: var(--handle-right-padding);
	padding-top: 3px;
	position: relative;
	z-index: 2;
}
@media screen and (min-width: 1024px) {
	.itinerary-accordion .accordion__handle-btn { padding-top: 0; }
}

.itinerary-accordion__handle-heading {
	display: block;
	flex: 1;
	margin-bottom: 0;
	min-width: 0;
	outline: none;
	padding-right: 20px;
	text-align: left;
	text-decoration: none;
}

.itinerary-accordion__date {
	color: var(--color-gray-600);
	display: inline-block;
	margin-bottom: 5px;
	margin-right: 8px;
}

.itinerary-accordion .plus-minus {
	height: clamp(15px, 11.3544303797px + 0.47468354vw, 18px);
	width: clamp(15px, 11.3544303797px + 0.47468354vw, 18px);
}

/* ----------------------------------------- Nested day panel sections
   Day panels render as nested .section blocks (day photo + intro heading +
   Featured Experiences / Accommodations media-text carousels), mirroring the
   reference day sub-structure. Rhythm inside a panel is tighter than the
   page-level 60px section gutter. */

.itinerary-accordion .accordion__content-inner > .itinerary-accordion__day { margin: 0; }

.itinerary-accordion__day-photo { margin: 0 0 25px; }
.itinerary-accordion__day-photo figure { margin: 0; }
.itinerary-accordion__day-photo img {
	display: block;
	height: auto;
	width: 100%;
}

.itinerary-accordion__day > h4 { margin-bottom: 10px; }

.itinerary-accordion__day-block { margin: 30px 0 0; }
.itinerary-accordion__day-block > .section { margin: 0; }
.itinerary-accordion .media-text-carousel__media > .section { margin: 0; }
.itinerary-accordion .media-text-carousel__media figure { margin: 0; }