/**
 * AtlasDesign.
 *
 * An editorial page: a measured column for the reading, a card beside it, and
 * two bands lifted out of the column and given the whole page — the route and
 * the itinerary.
 *
 * The measure is the point of this layout. Body text is held near 68 characters
 * because that is where continuous prose is comfortable, and a multi-day tour
 * is the one product on this plugin somebody actually reads end to end. Every
 * other decision here follows from protecting that measure.
 *
 * The palette is not redeclared. The accent is set once in Tours settings and
 * arrives as --wptm-accent on .wptm-tour; a second set of colours in a design
 * stylesheet is a second place to change the brand and one of them is always
 * forgotten.
 *
 * Everything is under .wptm-atlas, there is no !important, and no section
 * template was touched: this file arranges bands the plugin already renders.
 *
 * Logical properties throughout, so an Arabic tour mirrors without a second
 * stylesheet.
 */

.wptm-atlas {
	--wptm-atlas-max: 1200px;
	--wptm-atlas-measure: 68ch;
	--wptm-atlas-gap: clamp(24px, 3.2vw, 46px);
	--wptm-atlas-band: clamp(22px, 2.6vw, 34px);
	--wptm-atlas-rule: var(--wptm-hairline);
}

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

.wptm-atlas__crumbs {
	max-width: var(--wptm-atlas-max);
	margin-inline: auto;
	padding-inline: 20px;
	padding-block: 14px 0;
	font-size: 13px;
}

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

/* ========================================================= MASTHEAD ==== */

/*
 * The heading leads, and the photographs follow it.
 *
 * That is the whole difference between this layout and SaharaDesign, which
 * reverses the two. A trip described as "eight days across the Atlas to the
 * Sahara" is sold by the sentence; a desert camp is sold by the photograph.
 */
.wptm-atlas__masthead {
	padding-block: clamp(20px, 3vw, 40px) clamp(16px, 2.2vw, 26px);
}

.wptm-atlas__masthead .wptm-block {
	margin: 0;
}

.wptm-atlas__media {
	margin-block-end: clamp(18px, 2.4vw, 30px);
}

/* ============================================================ FACTS ==== */

/*
 * Ruled top and bottom on this layout only. The rules are on the wrapper
 * rather than on the facts section, so the section keeps its own appearance
 * on every other design.
 */
.wptm-atlas__facts {
	padding-block: 18px;
	border-block: 1px solid var(--wptm-atlas-rule);
	margin-block-end: var(--wptm-atlas-gap);
}

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

/* =========================================================== COLUMN ==== */

.wptm-atlas__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wptm-atlas-gap);
	align-items: start;
}

@media (min-width: 981px) {
	.wptm-atlas__grid {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 355px);
	}

	/* The second half of the reading, after the plan: one track, no card.
	   The measure on the text inside keeps it at reading width. */
	.wptm-atlas__grid--single {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wptm-atlas__grid--single {
	/* The plan band above carries its own foot padding; a full band's margin
	   on top of it was a hundred pixels of nothing before the rates. */
	margin-block-start: 0;
}

.wptm-atlas__grid--single .wptm-atlas__band:first-child .wptm-block {
	padding-block-start: 0;
}

/* The last block in the plan band keeps no foot padding of its own; the
   band's is enough. */
.wptm-atlas__plan .wptm-block:last-child {
	padding-block-end: 0;
}

.wptm-atlas__column,
.wptm-atlas__aside {
	min-width: 0;
}

/*
 * The measure, applied to the text of a band rather than to the band.
 *
 * A table of prices or a gallery inside a band still gets the full column
 * width; only prose, lists and headings are held in. Capping the band itself
 * would have narrowed the pricing table too, and a price table that wraps is
 * harder to read than a wide one.
 */
.wptm-atlas__band .wptm-block > p,
.wptm-atlas__band .wptm-block > ul,
.wptm-atlas__band .wptm-block > ol,
.wptm-atlas__band .wptm-block__title,
.wptm-atlas__band .wptm-prose {
	max-width: var(--wptm-atlas-measure);
}

.wptm-atlas__band {
	padding-block: var(--wptm-atlas-band);
}

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

/* And none after the last, so the space before whatever follows the column
   is the following thing's own margin and not that plus a band's padding. */
.wptm-atlas__band:last-child {
	padding-block-end: 0;
}

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

.wptm-atlas__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;
}

/* ============================================================= CARD ==== */

/*
 * Sticky, because this page is long and the price has to stay reachable while
 * somebody reads about the fourth day.
 *
 * Only above the breakpoint where there are two columns. On a phone the card
 * is a block in the flow and the mobile bar keeps the price in reach — a
 * sticky card and a fixed bar at once is the same offer twice on one screen.
 */
@media (min-width: 981px) {
	.wptm-atlas__card {
		position: sticky;
		/* The offset the script measures for the theme's fixed header, and a
		   negative one when the card is taller than the screen; before the
		   script runs, the header offset plus the gap. */
		inset-block-start: var(--wptm-side-top, calc(var(--wptm-offset, 0px) + 24px));
	}
}

/* ============================================= ROUTE AND ITINERARY ==== */

/*
 * Both out of the column and across the page, on a tinted band.
 *
 * A route is a horizontal chain and an itinerary is a long vertical run, and
 * both read badly at 68 characters with a card pressing on them. Keeping the
 * two adjacent also lets a reader check the chain against the days without
 * scrolling between two distant parts of the page.
 */
.wptm-atlas__plan {
	margin-block-start: var(--wptm-atlas-gap);
	padding-block: clamp(26px, 3.4vw, 46px);
	/*
	 * Tinted over whatever is beneath rather than over an assumed white.
	 * Mixing into #fff painted an opaque white band, which on a dark theme is
	 * a white stripe across a dark page. Mixing into transparent tints the
	 * page's own colour, so the band is a shade of the theme either way.
	 */
	background: color-mix(in srgb, var(--wptm-accent, #b8853a) 5%, transparent);
	border-block: 1px solid var(--wptm-atlas-rule);
}

.wptm-atlas__route {
	margin-block-end: clamp(20px, 2.6vw, 34px);
}

.wptm-atlas__route:last-child {
	margin-block-end: 0;
}

.wptm-atlas__plan .wptm-block {
	margin: 0;
	background: none;
}

/*
 * The itinerary gets a wider measure than the prose, not the full page.
 *
 * A day entry is a heading and two or three sentences, and at full width on a
 * large screen those sentences run past comfortable reading again. 78ch is
 * wider than the article column, which is the point, without giving up the
 * measure entirely.
 */
.wptm-atlas__days .wptm-prose {
	max-width: 78ch;
}

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

.wptm-atlas__band--related {
	padding-block: clamp(26px, 3.4vw, 46px);
}

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

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

	.wptm-atlas__wrap,
	.wptm-atlas__crumbs {
		padding-inline: 16px;
	}
}

/*
 * Arabic joins its letters, so any tracking added for Latin display type
 * breaks the joins. Reset it rather than assume no theme has set one, and
 * open the leading, which Arabic needs more of than Latin at the same size.
 */
.wptm-atlas:lang(ar),
.wptm-atlas [dir="rtl"] {
	letter-spacing: normal;
	line-height: 1.9;
	word-spacing: normal;
}

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