/* ==========================================================================
   Trip Itinerary  [trip_itinerary]

   Grid layout per item (2 columns × 2 rows):
     col 1          | col 2
     ─────────────────────────────
     .it-number     | .it-day       ← row 1
     .it-line       | .it-details   ← row 2
   ========================================================================== */

/* ── Wrapper ── */
.it-wrap {
	display: flex;
	flex-direction: column;
}

/* ── Single day item ── */
.it-item {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	grid-template-rows: auto 1fr;
	column-gap: 1.25rem;
	row-gap: 0;
}

/* ── Circle (col 1, row 1) ── */
.it-number {
	grid-column: 1;
	grid-row: 1;
	justify-self: center;
	align-self: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: #ff720d;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex-shrink: 0;
}

/* ── Day label (col 2, row 1) ── */
.it-day {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

/* ── Connecting line (col 1, row 2) ── */
/* Stretches to the full height of row 2, which is set by .it-details.
   The padding-bottom on .it-details bridges the gap to the next item. */
.it-line {
	grid-column: 1;
	grid-row: 2;
	justify-self: center;
	align-self: stretch;
	width: 2px;
	background-color: #ff720d;
	opacity: 0.35;
	min-height: 1rem;
}

/* ── WYSIWYG content (col 2, row 2) ── */
.it-details {
	grid-column: 2;
	grid-row: 2;
	padding-top: 0.5rem;
	padding-bottom: 2.5rem; /* this space is filled by the line */
	font-size: 0.95rem;
	line-height: 1.65;
}

.it-item--last .it-details {
	padding-bottom: 0;
}

.it-details > *:first-child {
	margin-top: 0;
}

.it-details > *:last-child {
	margin-bottom: 0;
}

/* Headings inside WYSIWYG render in orange to match the design */
.it-details h2,
.it-details h3,
.it-details h4 {
	color: #ff720d;
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}