/**
 * SaraDesign.
 *
 * A layout, not a skin. Every band on the page is a section this plugin
 * already rendered, so this file arranges them and styles the frame around
 * them; it does not restyle a gallery, a booking panel or an itinerary that
 * has its own stylesheet and its own reasons.
 *
 * Everything is under .wptm-sara. There is no tag-level rule, no generic class
 * name and no !important: the page is also being rendered by a theme, and a
 * plugin stylesheet that reaches outside its own subtree on a page it shares
 * is a plugin that breaks somebody's layout.
 *
 * Directions are logical, so the same file serves Arabic. Colours come from
 * the accent variable the tour stylesheet already sets, so the accent chosen
 * in settings applies here without a second setting.
 */

.wptm-sara {
	--wptm-sara-gap: clamp(20px, 3vw, 38px);

	/*
	 * Two colours, on purpose.
	 *
	 * The rest of the plugin runs on one accent, which is right for a layout
	 * where the accent is a highlight. This one needs a pair: a calm ground
	 * for the price, which is information, and a loud one for the button,
	 * which is an action. Painting both with a single accent turns the card
	 * into one block of colour with a button lost inside it.
	 *
	 * Declared here rather than in a setting, because they are this layout's
	 * identity; a site that wants its own overrides these two custom
	 * properties in its theme and everything follows.
	 */
	--wptm-sara-price: #14532d;
	--wptm-sara-cta: #ea6a1e;
	--wptm-sara-cta-dark: #c9540f;
}

.wptm-sara__crumbs {
	max-width: 1220px;
	margin-inline: auto;
	padding-inline: 20px;
	padding-block: 14px 0;
	font-size: 13px;
}

/* ============================================================ LAYOUT ==== */

/*
 * One column until there is room for two.
 *
 * 1080px rather than a tablet width: the price card needs about 340px to hold
 * a date field, a guest field and a button without wrapping, and the article
 * beside it needs a readable measure. Below that the card is worth more as a
 * block above the content than as a squeezed column beside it.
 */
.wptm-sara__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wptm-sara-gap);
	max-width: 1220px;
	margin-inline: auto;
	padding-inline: 20px;
	/* The foot is the gap the closing band already carries; a padding of its
	   own here stacked on that and left a hundred and twenty pixels of
	   nothing between the last card and the band. */
	padding-block: clamp(16px, 2vw, 26px) 0;
}

@media (min-width: 1080px) {
	.wptm-sara__layout {
		grid-template-columns: minmax(0, 1fr) 360px;
		align-items: start;
	}
}

.wptm-sara__main {
	min-width: 0;
}

/* ============================================================== HERO ==== */

.wptm-sara__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(18px, 2.5vw, 30px);
	margin-block-end: var(--wptm-sara-gap);
}

@media (min-width: 860px) {
	.wptm-sara__hero {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: start;
	}

	/*
	 * The title beside the gallery, not over it.
	 *
	 * The header section sets its title for the full reading column; here
	 * it has half of one, and at that size a long tour name ran to four
	 * lines and pushed the facts under the fold. Two steps smaller keeps
	 * it the heaviest thing in its column at a length that stays readable.
	 */
	.wptm-sara__intro .wptm-head__title {
		font-size: clamp(24px, 2.4vw, 32px);
		line-height: 1.15;
	}

	.wptm-sara__intro .wptm-head__lead {
		font-size: 15.5px;
	}
}

.wptm-sara__media,
.wptm-sara__intro {
	min-width: 0;
}

/* ============================================================== PAIR ==== */

/*
 * Highlights beside the route.
 *
 * Two halves of one question — what is good about this trip, and where it goes
 * — and reading them together is worth more than reading them in sequence.
 * Either survives alone: when only one has content the grid is given a single
 * track by the template rather than leaving a column of air beside it.
 */
.wptm-sara__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(18px, 2.5vw, 32px);
	margin-block-end: var(--wptm-sara-gap);
}

@media (min-width: 900px) {
	.wptm-sara__pair {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		/* Both cards run to the same foot; the shorter one used to stop a
		   hundred and fifty pixels above its neighbour. */
		align-items: stretch;
	}

	.wptm-sara__pair.is-single {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wptm-sara__pair > * {
	min-width: 0;
	margin: 0;
}

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

.wptm-sara__body > * + * {
	margin-block-start: var(--wptm-sara-gap);
}

.wptm-sara__done {
	max-width: 1220px;
	margin-inline: auto;
	padding-inline: 20px;
	padding-block-start: 18px;
}

/* ============================================================= ASIDE ==== */

.wptm-sara__aside {
	min-width: 0;
}

/* The information cards under the panel keep the column's rhythm and stay
   in it on a phone, where the shared sidebar rules would otherwise lift them
   out of their box. */
.wptm-sara__more {
	margin-block-start: var(--wptm-sara-gap);
}

.wptm-sara__more .wptm-side,
.wptm-sara__more .wptm-side__info {
	display: grid;
	gap: 16px;
}

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

/*
 * Sticky, and only where sticky means anything.
 *
 * position: sticky in a grid column follows the reader with no script at all,
 * and it does nothing at the narrow widths where the column is a block in the
 * flow — which is the behaviour wanted there, since the mobile bar takes over.
 *
 * The offset leaves room for a theme's fixed header. Jannah's is measured by
 * the landing script where that runs; here a conservative constant is used,
 * because a card that starts a few pixels lower than it could is invisible and
 * a card that starts under a navigation bar is not.
 */
@media (min-width: 1080px) {
	.wptm-sara__panel {
		position: sticky;
		/* The offset the script measures for the theme's fixed header, and a
		   negative one when the panel is taller than the screen; 96px was a
		   guess at a header height, and it was under some and over others. */
		inset-block-start: var(--wptm-side-top, calc(var(--wptm-offset, 0px) + 24px));
	}
}

/* ======================================================== RESPONSIVE ==== */

@media (max-width: 600px) {
	.wptm-sara__crumbs,
	.wptm-sara__layout,
	.wptm-sara__done {
		padding-inline: 16px;
	}
}

/*
 * Room for the mobile bar is not made here.
 *
 * The script measures the bar and sets --wptm-bar on the page wrapper,
 * which pads the foot of the whole page by exactly the bar's height. A
 * second clearance on this layout was ninety-six pixels of nothing between
 * the booking column and the closing band, in the middle of the page rather
 * than at its end.
 */

/* ========================================================== SURFACES ==== */

/*
 * The bands become cards.
 *
 * This is the whole visual difference between SaraDesign and the layouts
 * before it: instead of sections separated by rules on one flat page, each is
 * a panel on a quiet background, which is how every marketplace presents a
 * product and why the page reads as a set of answers rather than a long
 * article.
 *
 * Applied to the block wrapper the section files already emit, so no section
 * template was touched and every one of them keeps working unchanged on the
 * five other layouts.
 */
.wptm-sara .wptm-block,
.wptm-sara__pair > *,
.wptm-sara__panel {
	/* The edge is there to be found, not seen: seven per cent of the text
	   colour, where twelve read as a frame around every band. */
	border: 1px solid color-mix(in srgb, currentColor 7%, transparent);
	border-radius: 14px;
	background: #fff;
	padding: clamp(18px, 2.4vw, 28px);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {

	.wptm-sara .wptm-block,
	.wptm-sara__pair > *,
	.wptm-sara__panel {
		border-color: rgba(0, 0, 0, .07);
	}
}

/* The route reads as a map panel rather than a second article: tinted, so the
   eye takes it as a figure beside the highlights instead of more prose. */
.wptm-sara .wptm-block--route {
	background: #fff;
	border-color: color-mix( in srgb, var(--wptm-accent, #b8853a) 22%, transparent );
}

/* The hero keeps its own shape: a card around a gallery would put a frame
   around a frame. */
.wptm-sara__media .wptm-block,
.wptm-sara__intro .wptm-block {
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0;
}

/* The summary under the gallery is a card again, a quieter one: the tint
   of the route panel, so it reads as a note on the pictures rather than as
   the first article. */
.wptm-sara__under {
	margin-block-start: clamp(14px, 1.8vw, 20px);
}

.wptm-sara__under .wptm-block {
	padding: clamp(16px, 2vw, 22px);
	border: 1px solid color-mix(in srgb, var(--wptm-accent, #b8853a) 22%, transparent);
	border-radius: 14px;
	background: #fff;
}

.wptm-sara__under .wptm-block > p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
}

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

/* ============================================================== TABS ==== */


/*
 * :target styles the section the reader has just jumped to, which is the one
 * piece of state a tab bar needs and the one CSS can hold on its own. Without
 * a script there is no scroll-spy, and a wrong highlight would be worse than
 * none.
 */
.wptm-sara .wptm-block:target {
	scroll-margin-block-start: 72px;
	border-color: color-mix( in srgb, var(--wptm-accent, #b8853a) 40%, transparent );
}

/* ============================================================ PANEL ==== */

/*
 * The price slab.
 *
 * Rewritten against the markup the booking panel actually emits. The first
 * attempt styled .wptm-price and .wptm-sidebar__price, and neither exists:
 * the section renders .wptm-tk with .wptm-tk__price, .wptm-tk__from,
 * .wptm-tk__value and .wptm-tk__basis. Nothing changed on the page, which is
 * the failure mode of writing CSS against a template you have not read.
 *
 * The geometry is a solid band across the top of the card rather than a line
 * of text inside it. The price is the question every visitor arrived with, and
 * a slab answers it before the card asks for a date — a number set in a
 * paragraph has to be found first.
 *
 * Set to the inline start, not centred. Centred prices read as a poster; a
 * left-set figure with its qualifier beside it reads as a fact, which is what
 * this is.
 */
.wptm-sara__panel .wptm-tk {
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0;
	overflow: hidden;
}

.wptm-sara__panel .wptm-tk__price {
	margin: 0;
	padding: clamp(18px, 2.4vw, 24px);
	background: var(--wptm-sara-price);
	color: #fff;
	text-align: start;
}

.wptm-sara__panel .wptm-tk__from {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	opacity: .82;
	color: inherit;
}

/* The amount and its basis on one baseline. */
.wptm-sara__panel .wptm-tk__amount {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	color: inherit;
}

.wptm-sara__panel .wptm-tk__value {
	font-size: clamp(2rem, 3.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: inherit;
}

.wptm-sara__panel .wptm-tk__basis {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	opacity: .86;
	color: inherit;
}

/* The perforation between slab and body belongs to a ticket, not to this. */
.wptm-sara__panel .wptm-tk__perf {
	display: none;
}

.wptm-sara__panel .wptm-tk__body {
	padding: clamp(18px, 2.4vw, 24px);
}

/* ---- The form itself ---------------------------------------------------- */

/*
 * Plain and serious.
 *
 * A field is a bordered box with its label above it, which is what every
 * booking site does because it is what people already know how to read. No
 * floating labels, no placeholder standing in for a label: a placeholder
 * disappears the moment somebody types, exactly when they are checking what
 * the field was for.
 */
.wptm-sara__panel .wptm-bk__form label,
.wptm-sara__panel .wptm-tk__actions label {
	display: block;
	margin-block-end: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wptm-muted, #5b6472);
}

.wptm-sara__panel input[type="date"],
.wptm-sara__panel input[type="text"],
.wptm-sara__panel input[type="email"],
.wptm-sara__panel input[type="tel"],
.wptm-sara__panel input[type="number"],
.wptm-sara__panel select,
.wptm-sara__panel textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 13px;
	border: 1px solid var(--wptm-line, rgba(0, 0, 0, .16));
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: inherit;
}

.wptm-sara__panel input:focus-visible,
.wptm-sara__panel select:focus-visible,
.wptm-sara__panel textarea:focus-visible {
	outline: 2px solid var(--wptm-sara-cta);
	outline-offset: 1px;
	border-color: transparent;
}

/*
 * One loud button on the card, and it is the one that does the thing.
 *
 * The price slab is calm and the call to action is not: two colours doing two
 * jobs. Giving both the same colour would make the card one block of green
 * with a button hidden in it, which is what the accent alone would have done —
 * and why this layout carries a pair rather than inheriting the single accent.
 */
.wptm-sara__panel .wptm-btn--primary {
	width: 100%;
	min-height: 52px;
	border: 0;
	border-radius: 10px;
	background: var(--wptm-sara-cta);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.wptm-sara__panel .wptm-btn--primary:hover,
.wptm-sara__panel .wptm-btn--primary:focus-visible {
	background: var(--wptm-sara-cta-dark);
	color: #fff;
}

.wptm-sara__panel .wptm-btn--secondary {
	width: 100%;
	min-height: 46px;
	border-radius: 10px;
}

/* The reassurance under the button: quiet, and never a second button. */
.wptm-sara__panel .wptm-assure__item {
	font-size: 13px;
	color: var(--wptm-muted, #5b6472);
}

@media (max-width: 600px) {
	.wptm-sara .wptm-block,
	.wptm-sara__pair > *,
	.wptm-sara__panel > * {
		padding: 16px;
	}

}