/**
 * MedinaDesign.
 *
 * Compact. Everything that answers *should I book this* is put in one screen —
 * photographs, title, facts, price — and the rest of the page is a single
 * narrow column underneath.
 *
 * The single column below the opening is the decision that defines this
 * layout. A half-day activity has four hundred words of content; set beside a
 * booking card in two columns, the article column runs out halfway down and
 * leaves a tall empty space next to a card, which reads as a page that failed
 * to load. One column that ends where the content ends reads as a short page,
 * which is what it is.
 *
 * The card is therefore not sticky. It lives inside the opening grid and ends
 * with it, and the mobile bar takes over keeping the price reachable.
 *
 * The palette is not redeclared; the accent arrives from Tours settings.
 * Everything is under .wptm-medina, and no section template was touched.
 */

.wptm-medina {
	--wptm-medina-max: 1140px;
	--wptm-medina-read: 760px;
	--wptm-medina-gap: clamp(20px, 2.8vw, 38px);
	--wptm-medina-band: clamp(18px, 2.2vw, 28px);
	--wptm-medina-rule: var(--wptm-hairline);
}

.wptm-medina__wrap {
	max-width: var(--wptm-medina-max);
	margin-inline: auto;
	padding-inline: 20px;
}

.wptm-medina__crumbs {
	padding-block: 14px 0;
	font-size: 13px;
}

.wptm-medina__done {
	padding-block-start: 16px;
}

/* ========================================================== OPENING ==== */

.wptm-medina__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wptm-medina-gap);
	align-items: start;
	padding-block: clamp(16px, 2.2vw, 26px);
}

/*
 * Photographs slightly wider than the offer beside them.
 *
 * The ratio matters more here than on a long page: this grid is the whole
 * decision, and a half-and-half split makes the gallery look like an
 * illustration of the price rather than the reason for it.
 */
@media (min-width: 861px) {
	.wptm-medina__top {
		grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr);
	}

	/*
	 * The photographs keep pace with the offer.
	 *
	 * The offer column — title, facts, ticket, the two notes — is twice
	 * the height of the gallery, and the gallery used to stop a screen
	 * short of it and leave the left half of the opening empty. Sticky,
	 * it stays in view for as long as there is offer to read beside it and
	 * lets go where the opening ends, parked under the theme's header by
	 * the offset the script measures.
	 */
	.wptm-medina__media {
		position: sticky;
		top: calc(var(--wptm-offset, 0px) + 16px);
		align-self: start;
	}
}

/*
 * The ticket's fact rows that the strip above it already said.
 *
 * This layout puts the facts between the title and the price on purpose,
 * and the ticket then listed the same duration, type, availability,
 * languages and difficulty a second time under the price. Those five are
 * hidden here; the group size, the destination and the departure point,
 * which the strip does not carry, stay on the ticket. Each row names its
 * fact in a data attribute, so this reaches the right ones whatever
 * language the labels are in.
 */
.wptm-medina__card .wptm-tk__row[data-wptm-fact="calendar"],
.wptm-medina__card .wptm-tk__row[data-wptm-fact="tag"],
.wptm-medina__card .wptm-tk__row[data-wptm-fact="clock"],
.wptm-medina__card .wptm-tk__row[data-wptm-fact="globe"],
.wptm-medina__card .wptm-tk__row[data-wptm-fact="mountain"] {
	display: none;
}

.wptm-medina__media,
.wptm-medina__offer {
	min-width: 0;
}

.wptm-medina__media .wptm-block,
.wptm-medina__offer .wptm-block {
	margin: 0;
}

.wptm-medina__under {
	margin-block-start: clamp(16px, 2vw, 24px);
}

.wptm-medina__under + .wptm-medina__under {
	padding-block-start: clamp(12px, 1.6vw, 18px);
	border-block-start: 1px solid var(--wptm-medina-rule);
}

.wptm-medina__info .wptm-side__info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 16px;
	align-items: start;
}

.wptm-medina__info .wptm-side__info > * {
	margin: 0;
}

/*
 * The facts sit between the title and the price, inside the offer column.
 *
 * Duration, languages and difficulty are what somebody checks in the same
 * breath as the price on a short activity — "two hours, in English, easy, from
 * €35" is one sentence, and putting the facts anywhere else on the page breaks
 * it in half.
 */
.wptm-medina__facts {
	padding-block: 14px;
	margin-block: 14px;
	border-block: 1px solid var(--wptm-medina-rule);
}

.wptm-medina__facts .wptm-block {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.wptm-medina__card {
	margin-block-start: 16px;
}

/* ======================================================= HIGHLIGHTS ==== */

/*
 * The close of the opening: the last thing read before the decision, and the
 * shortest argument on the page.
 */

/* ============================================================= BODY ==== */

/*
 * One column, and a reading measure inside the page measure.
 *
 * The wrapper stays at the page width so a gallery or a price table inside a
 * band can still use it; the column that holds the bands is narrower and
 * centred, which is what keeps four hundred words from running across a
 * 1140px page.
 */
.wptm-medina__body {
	max-width: var(--wptm-medina-read);
	padding-block: clamp(6px, 1.4vw, 14px) clamp(24px, 3vw, 40px);
}

.wptm-medina__band {
	padding-block: var(--wptm-medina-band);
}

.wptm-medina__band:first-child {
	padding-block-start: 0;
}

.wptm-medina__band:last-child {
	padding-block-end: 0;
}

.wptm-medina__band + .wptm-medina__band {
	border-block-start: 1px solid var(--wptm-medina-rule);
}

.wptm-medina__band .wptm-block {
	margin: 0;
	/* The band draws the rule between sections; the block's own rule under
	   the band's padding was a second line thirty pixels below the first. */
	border-block-start: 0;
}

/* ========================================================== RELATED ==== */

.wptm-medina__band--related {
	padding-block: clamp(24px, 3vw, 40px);
	border-block-start: 1px solid var(--wptm-medina-rule);
}

/* =========================================================== NARROW ==== */

@media (max-width: 600px) {
	.wptm-medina {
		--wptm-medina-band: 18px;
	}

	.wptm-medina__wrap {
		padding-inline: 16px;
	}
}

.wptm-medina:lang(ar),
.wptm-medina [dir="rtl"] {
	letter-spacing: normal;
	line-height: 1.9;
	word-spacing: normal;
}

.wptm-medina:lang(ar) .wptm-block__title,
.wptm-medina [dir="rtl"] .wptm-block__title {
	letter-spacing: normal;
}