/*
 * Hotelesque — TAC Booking Engine.
 *
 * Loaded on the pages the plugin loads on, through its own tacbe_enqueue_assets
 * action, which fires after its stylesheet, the variables its settings emit and
 * any custom CSS. So this sheet lands last and wins on order rather than on
 * weight — there is almost no !important here, unlike the two sheets this
 * replaces, which had to fight a plugin that styled itself through ids.
 *
 * The plugin's own look is set where it should be, under Properties → Settings →
 * Look & feel: brand and accent plum, text navy, the divider #CECECE, panels
 * oatmeal, a small radius. What is here is the part settings cannot say.
 *
 * Everything the plugin draws sits under .tac-stays-root and its classes are
 * prefixed tacbe-. They are the plugin's own names, so an upstream rebuild may
 * rename them — if a page reverts to the default look, that is the first thing
 * to check.
 *
 * The property page follows Figma 112:4491, carried over from the plugin this
 * replaces: Canela 80/90 and 28/40, Mundial 20/27 and 16/25, a column of 974
 * beside a 414 booking card, and the gallery above the name rather than below
 * it. The homepage's bar is not here at all — it is the theme's own now, in
 * style.css, and this only dresses the one on the search page.
 *
 * @package Hotelesque
 * @since Hotelesque 0.2.0
 */

/* Tokens
   ---------------------------------------------------------------------- */

/*
 * Two of the plugin's own variables are read by its stylesheet but never
 * written by its settings — the reviews block falls back to a grey of its own
 * for one, and the other only exists as a hardcoded fallback beside it. Both
 * are given a value here so nothing is left to a fallback.
 */
.tac-stays-root {
	--tacbe-font-heading: var(--hotelesque-font-display);
	--tacbe-font-body: var(--hotelesque-font-ui);
	--tacbe-muted: var(--wp--preset--color--accent-4);
	--tacbe-accent-dark: var(--wp--preset--color--plum);
	--tacbe-surface: var(--wp--preset--color--base);
}

/* Buttons
   ---------------------------------------------------------------------- */

/*
 * The site's button: filled plum turning outlined, 15 over 20 uppercase and
 * tracked, and a border it carries at all times so it does not move when the
 * fill goes. See .wp-block-button__link in style.css, which this follows.
 */
.tac-stays-root .tacbe-btn,
.tac-stays-root .tacbe-sb-go {
	border: 1px solid transparent;
	border-radius: 6px;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	padding: 13px 33px 15px;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tac-stays-root .tacbe-btn-primary,
.tac-stays-root .tacbe-sb-go {
	background: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--base);
}

/*
 * The search bar's button is not one of the engine's .tacbe-btn, so it misses
 * the treatment above and comes out at 133 by 15 in a 12.8 semibold with square
 * corners. Named alongside them it takes the site's button, and the 174 every
 * other one on the site is drawn at.
 */
.tac-stays-root .tacbe-sb-go {
	min-width: 174px;
}

.tac-stays-root .tacbe-btn-primary:hover,
.tac-stays-root .tacbe-btn-primary:focus-visible,
.tac-stays-root .tacbe-sb-go:hover,
.tac-stays-root .tacbe-sb-go:focus-visible {
	background: transparent;
	border-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--plum);
}

/*
 * The booking box is styled through its id, which outweighs any class of ours,
 * so its two buttons need the id said back to them. Everything else the rule
 * above sets reaches them without this — only the size and the corner were
 * being taken back.
 */
.tac-stays-root #tacbe-quote .tacbe-btn {
	border-radius: 6px;
	font-size: var(--hotelesque-size-label);
}

/* Search bar, on the search page
   ---------------------------------------------------------------------- */

/*
 * The bar above the results. It keeps the plugin's shape — a word over each
 * field and the answer under it, which tells a guest what is applied — and
 * takes the site's white ground, 6px corner and 952.
 *
 * That width also settles a bug: sticky, the plugin pulls the bar out to the
 * window with a negative margin measured against 100vw, which is wider than the
 * page whenever a scrollbar shows. The page scrolled sideways by the width of
 * one, 1808 against 1793, and by 54 on a phone.
 */
.tac-stays-root .tacbe-searchbar {
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	margin-inline: auto;
	max-width: min( 952px, 100% );
	min-height: 72px;
	padding: 11px 8px;
}

/* Cards
   ---------------------------------------------------------------------- */

/*
 * The card the rest of the site uses: a square-cornered photograph, the suburb
 * over the name in the label style, the name in the display face, and the price
 * split so the figure can stand larger than the words either side of it.
 */
/*
 * Set as the homepage's card is set — .residence-card in style.css: the
 * photograph on the 464 by 398 it is drawn at with a 6 corner, the name in the
 * display face at 28 over 40, the words inset 41, and the rate with its figure
 * standing between two smaller words.
 */

/*
 * On nothing, and still when pointed at. The engine paints each card in its
 * paper colour and lifts it two pixels under a shadow on hover; the homepage's
 * card does neither — it sits on the page, and the photograph is the thing that
 * carries it. The transition goes with the lift, so nothing is left waiting to
 * animate a property that no longer changes.
 */
.tac-stays-root .tacbe-card {
	background: none;
	transition: none;
}

.tac-stays-root .tacbe-card:hover {
	box-shadow: none;
	transform: none;
}
.tac-stays-root .tacbe-card-media,
.tac-stays-root .tacbe-card-img,
.tac-stays-root .tacbe-card-slide img {
	border-radius: 6px;
}

.tac-stays-root .tacbe-card-media {
	aspect-ratio: 464 / 398;
	height: auto;
	position: relative;
}

/*
 * Each photograph is a background on its slide rather than an image in it, and
 * the engine cuts them to 4 by 3 — a different shape from the 464 by 398 the
 * card is now drawn at, so they were being cropped twice.
 */
.tac-stays-root .tacbe-card-slide {
	aspect-ratio: 464 / 398;
}

/*
 * The mark over the corner of the photograph. On the homepage's card this is an
 * image in the markup; these cards are written by the engine in the browser, so
 * there is nowhere to put one — it is drawn on the photograph instead. It does
 * nothing on either card: the one that saves a property is on the property's own
 * page. Soft-light so it takes up whatever is beneath it rather than sitting on
 * the photograph as flat white, which is how the homepage's is set.
 */
.tac-stays-root .tacbe-card-media::after {
	background: url("../images/icon-heart.svg") center / contain no-repeat;
	content: "";
	height: 26px;
	mix-blend-mode: soft-light;
	pointer-events: none;
	position: absolute;
	right: 16px;
	top: 16px;
	width: 30px;
	z-index: 2;
}

.tac-stays-root .tacbe-card-body {
	padding-inline: 41px;
}

.tac-stays-root .tacbe-card-suburb {
	color: var(--wp--preset--color--navy);
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/*
 * Navy, said outright. The whole card is a link and the plugin colours what is
 * inside it with the brand, which is the plum the buttons are — a name is not a
 * button, and every other card on the site writes its name in navy.
 */
/*
 * Named through the body as well, because the engine sets this heading through
 * .tacbe-card-body h3 — two classes and a tag against the two classes here, so
 * a rule on the class alone loses and the name stayed at 23 rather than the 28
 * the homepage's card is set in.
 */
.tac-stays-root .tacbe-card-body .tacbe-card-title {
	color: var(--wp--preset--color--navy);
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-subtitle);
	margin-top: 0;
	font-weight: 100;
	line-height: var(--hotelesque-line-subtitle);
}

.tac-stays-root .tacbe-card-spec {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
}

.tac-stays-root .tacbe-card-price {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-figure);
	font-weight: 300;
}

.tac-stays-root .tacbe-card-from,
.tac-stays-root .tacbe-card-per {
	font-size: var(--hotelesque-size-unit);
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* Property page — Figma 112:4491
   ---------------------------------------------------------------------- */

/*
 * The design lays the page out as a 974 column of words beside a 414 booking
 * card, against the 1200 the plugin caps itself at. 974 is the theme's own
 * contentSize, so the words here are set to the same measure as every other
 * page on the site.
 *
 * The band is the site's 1560, not the 1613 this frame is drawn to. That frame
 * sets its own header at about 1718, so it is not drawn to the band the site
 * was built on, and taking its content width literally stood this page 59 past
 * the header above it and the difference band below it. The two columns are the
 * measurements worth keeping; the space between them is only what is left over,
 * so that is what gives — 172 here against the 231 drawn.
 *
 * space-between is what hands the leftover to it, which also closes it toward
 * 24 as the page narrows rather than holding a gap and squeezing the words.
 *
 * The gutter is carried here rather than left to main.property. The post content
 * inside it is alignfull, which breaks back out of that padding, so between
 * about 1425 and 1610 the page had no gutter at all and this band stood wider
 * than the header above it — 1425 against 1373. Held on this box instead, and
 * counted into the width so the band is a true 1560 once there is room for it:
 * 26 is the page's own gutter, the one main.property is set with.
 */
.tac-stays-root.tacbe-property {
	max-width: calc( var(--wp--style--global--wide-size, 1560px) + 52px );
	padding-inline: 26px;
}

/*
 * A hairline above each block rather than under the one before it, so the first
 * carries none and the column does not end on a rule.
 */
/*
 * Said through .tacbe-prop-main, as the engine says it. Written against
 * .tacbe-prop-section alone this lost outright — its own rules name the column
 * as well as the section, which outweighs a rule that names only the section,
 * so the rhythm below was never on the page and the sections kept its 40 and 34
 * with a grey rule rather than these and a navy one.
 */
.tac-stays-root .tacbe-prop-main > .tacbe-prop-section {
	border-top: 1px solid var(--wp--preset--color--navy);
	margin-top: 0;
	/*
	 * Uneven on purpose: the frame sets 31 between the rule and the heading under
	 * it and about 77 above it, so a rule reads as belonging to the block it
	 * opens rather than sitting between two.
	 */
	padding: 31px 0 77px;
}

.tac-stays-root .tacbe-prop-main > .tacbe-prop-section:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 44px;
}

.tac-stays-root .tacbe-prop-section > h2 {
	margin: 0 0 14px;
}

/*
 * The design opens straight onto the description. The heading is kept for
 * anyone reading the page as a structure rather than a picture — it is only
 * taken out of the drawing.
 */
.tac-stays-root .tacbe-prop-about > h2 {
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/*
 * READ MORE and VIEW MORE. The plugin draws each of these as a bordered button;
 * the design has a plain underlined word under the block it opens.
 */
.tac-stays-root .tacbe-clamp-toggle,
.tac-stays-root .tacbe-amenity-more,
.tac-stays-root .tacbe-rev-more,
.tac-stays-root .property-reviews__more {
	background: none;
	border: 0;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	text-decoration: underline;
	text-transform: uppercase;
}

/* The reviews expander is a <summary>, which draws its own marker. */
.tac-stays-root .tacbe-rev-more::marker,
.tac-stays-root .property-reviews__more::marker,
.tac-stays-root .tacbe-rev-more::-webkit-details-marker,
.tac-stays-root .property-reviews__more::-webkit-details-marker {
	display: none;
}

/*
 * A note on the min() in every auto-fit below: a track's minimum is a floor it
 * will not go under, so minmax(380px, 1fr) in a column of 323 lays out 380 and
 * hangs 57 off the side — which main.property then clips, taking the words with
 * it. min(380px, 100%) lets the floor give way once there is less room than
 * that, which is the only state where it matters.
 */

/*
 * Amenities, four columns as drawn against the plugin's two, each marked with
 * the ringed check the rest of the site uses — assets/images/icon-check.svg at
 * 32, with the label 20 away.
 *
 * The plugin already hangs a mark on each of these, absolutely placed with the
 * room for it made by padding, so only the mark and the room are changed. Laid
 * out as a flex row instead, this rule would have done two things it did not
 * mean to: left the mark where it was, over the first letters of the label, and
 * overridden the display: none that keeps the long tail of the list folded away
 * until it is asked for — all 53 amenities showed at once.
 *
 * The line box is the mark's own height so that a label sits on its middle
 * without needing to be laid out, and a label that wraps keeps its mark on the
 * first line, as the design draws it.
 */
.tac-stays-root .tacbe-amenities {
	gap: 13px 24px;
	/*
	 * Four at the width the design draws them, and fewer as the column narrows —
	 * counted from the room there is rather than from the window, because what
	 * this sits in is the words column and that is squeezed by the booking card
	 * beside it, not by the page. Told to hold four regardless, it was fitting
	 * them into 519 on a small laptop.
	 */
	grid-template-columns: repeat( auto-fit, minmax( min( 210px, 100% ), 1fr ) );
}

.tac-stays-root .tacbe-amenity {
	line-height: 32px;
	padding-inline-start: 52px;
}

.tac-stays-root .tacbe-amenity::before {
	background: url("../images/icon-check.svg") center / 32px 32px no-repeat;
	content: "";
	height: 32px;
	top: 0;
	width: 32px;
}

/*
 * Bedroom configurations — Figma 112:5355. Four cards of 224 across the 974 the
 * words are read at, 26 apart, each 142 tall with the bed mark at 34 from the
 * top and the two lines under it at 76 and 99. Counted from the room there is
 * rather than held at four, so they drop to three and two as the column narrows.
 */
.property-bedrooms__list {
	display: grid;
	gap: 26px;
	grid-template-columns: repeat( auto-fit, minmax( min( 200px, 100% ), 1fr ) );
	list-style: none;
	margin: 27px 0 0;
	padding: 0;
}

.property-bedrooms__card {
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: 6px;
	min-height: 142px;
	padding: 34px 26px 20px;
}

.property-bedrooms__mark {
	display: block;
	height: 25px;
	width: auto;
}

/*
 * Both of these name the column and the tag as well as the class. The engine
 * sets every paragraph in this column to a 25 line, at the weight of two classes
 * and a tag, and these two are drawn on a 20 and a 22 — left at one class each
 * they lost, and the card stood 151 tall against the 142 it is drawn at.
 */
.tac-stays-root .tacbe-prop-main p.property-bedrooms__room {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 17px 0 0;
	text-transform: uppercase;
}

.tac-stays-root .tacbe-prop-main p.property-bedrooms__beds {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 22px;
	margin: 3px 0 0;
}

/* The map is a panel on the page, cornered like everything else here. */
.tac-stays-root .tacbe-map {
	border-radius: 6px;
}

/*
 * Three stays across the page, as drawn. The plugin lays this row out for as
 * many as will fit, which put three cards of 303 in a row built for five.
 */
.tac-stays-root .tacbe-similar-grid {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

/*
 * Reviews — Figma 148:7732. Two to a row of 460, 53 apart and 69 between rows,
 * counted from the room there is rather than held at two. The heading carries
 * the overall score against the right-hand edge.
 */
.property-reviews__header {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
}

.property-reviews__score {
	align-items: center;
	display: flex;
	gap: 10px;
	margin: 0;
}

.property-reviews__score-label,
.property-reviews__date {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 200;
	letter-spacing: 1.5px;
	line-height: 20px;
	text-transform: uppercase;
}

.property-reviews__score-star {
	display: block;
	height: auto;
	width: 33px;
}

/* 26 over 20, tracked wide — the frame's own sub-head. */
.property-reviews__score-value {
	font-family: var(--hotelesque-font-ui);
	font-size: 26px;
	font-weight: 200;
	letter-spacing: 3.9px;
	line-height: 20px;
}

.property-reviews__list {
	display: grid;
	gap: 69px 53px;
	grid-template-columns: repeat( auto-fit, minmax( min( 380px, 100% ), 1fr ) );
	list-style: none;
	margin: 36px 0 0;
	padding: 0;
}

.property-reviews__head {
	align-items: center;
	display: flex;
	gap: 13px;
	margin: 0;
}

.property-reviews__stars {
	align-items: center;
	display: flex;
	gap: 10px;
}

.property-reviews__star {
	display: block;
	height: auto;
	width: 17px;
}

/*
 * Named through the column and the tag: the engine sets every paragraph in this
 * column, at the weight of two classes and a tag, and would take the 9 above
 * this back to its own spacing.
 */
.tac-stays-root .tacbe-prop-main p.property-reviews__text {
	margin: 9px 0 0;
}

/* The rest, behind a word rather than a button — see the other two like it. */
.property-reviews__rest > .property-reviews__list {
	margin-top: 36px;
}

/*
 * The booking card: the design draws it as a panel on the page rather than a
 * card floating above one, in the blush at a quarter — no border, no shadow.
 */
.tac-stays-root .tacbe-quote-box {
	background: color-mix( in srgb, var(--wp--preset--color--blush) 25%, #fff );
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	/*
	 * 414 across with 31 either side leaves 352, which the frame splits into the
	 * dates at 209 and the guests at 129 with 14 between. Laid on a grid so those
	 * two can share a row: the engine stacks every part of this card, and they are
	 * the only two that do not want a row each.
	 */
	column-gap: 14px;
	display: grid;
	/*
	 * Densely, because the calendar sits between the two fields in the markup and
	 * appears only once a date is asked for. Packed loosely it took the row after
	 * the dates the moment it opened, and the guests — which follows it — dropped
	 * to a row of their own. Dense lets them go back into the space beside the
	 * dates that is still free. Nothing else here is narrower than the full width,
	 * so nothing else can be pulled forward by it.
	 */
	grid-auto-flow: row dense;
	grid-template-columns: 209fr 129fr;
	padding: 31px;
	row-gap: 18px;

	/*
	 * The card's own words, at the size the rest of the page is read at. The
	 * engine sets this whole box at 22 over 30.8 — larger than the body of the
	 * page beside it — and nothing on the frame is that size. It was the line
	 * about adding dates that showed it: 92 of the card given to a sentence,
	 * which is what kept it looking untouched however the fields were arranged.
	 */
	font-size: var(--hotelesque-size-body-sm);
	line-height: 25px;
}

/*
 * Before there are dates there is nothing to reserve, so the engine disables
 * this — rightly. Left to its own it went to grey on oatmeal, which reads as
 * broken beside a frame that draws a solid plum button here. The same button,
 * dimmed: plainly the thing you will press, plainly not yet.
 */
.tac-stays-root .tacbe-bk-reserve[disabled] {
	background: var(--wp--preset--color--plum);
	border-color: transparent;
	color: var(--wp--preset--color--base);
	opacity: 0.4;
}

.tac-stays-root .tacbe-quote-box > * {
	grid-column: 1 / -1;
	margin: 0;
}

.tac-stays-root .tacbe-quote-box > .tacbe-daterange {
	grid-column: 1;
}

.tac-stays-root .tacbe-quote-box > .tacbe-bk-guests {
	grid-column: 2;
}

/*
 * The two fields: a plum hairline with a 6 corner, as drawn.
 *
 * The frame draws each as one line — "Check in Dates", "Guests" — because it
 * draws the card before anything is chosen. Once a date is, the engine writes
 * "22 Aug 2026" into it, and two of those with a separator do not fit 209. So
 * the word stays above the answer, which is the engine's own arrangement and
 * the only one that holds at both ends.
 */
.tac-stays-root .tacbe-daterange,
.tac-stays-root .tacbe-bk-guests {
	align-items: center;
	border: 1px solid var(--wp--preset--color--plum);
	border-radius: 6px;
	display: flex;
	/*
	 * Said outright: the card sets a 22 over 30.8 for the price at the top of it,
	 * and every line box inside these two inherited it — which is what stood them
	 * at 73 against the 50 they are drawn at, whatever padding they were given.
	 */
	font-size: var(--hotelesque-size-body-sm);
	line-height: 22px;
	min-height: 50px;
	overflow: hidden;
	padding: 0;
}

/* Opens the calendar under it, so it is marked as something that opens. */
.tac-stays-root .tacbe-daterange {
	background: url("../images/chevron.svg") no-repeat right 14px center / 12px auto;
}

.tac-stays-root .tacbe-dr-cell {
	flex: 1;
	min-width: 0;
	padding: 7px 12px;
}

.tac-stays-root .tacbe-dr-cell + .tacbe-dr-cell {
	padding-inline-end: 32px;
}

/*
 * Sentence case, as the frame writes these. Set in the site's tracked capitals
 * they were wider than half of 209 — "CHECK OUT" came to 77 in a 75 cell — so
 * each label took a second line and pushed the field to 71.
 */
.tac-stays-root .tacbe-dr-label,
.tac-stays-root .tacbe-bk-guests label {
	color: var(--wp--preset--color--accent-4);
	display: block;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-unit);
	font-weight: 300;
	letter-spacing: 0;
	line-height: 14px;
	text-transform: none;
	white-space: nowrap;
}

.tac-stays-root .tacbe-dr-val {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 20px;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tac-stays-root .tacbe-bk-guests {
	display: block;
	padding: 7px 12px;
}

/*
 * The count reads as the answer beside the word above it rather than as a box
 * inside a box — the field is already the box. It keeps its steppers: it is a
 * number and this is where it is set.
 */
.tac-stays-root .tacbe-bk-guests input {
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	display: block;
	height: auto;
	line-height: 20px;
	margin-top: 2px;
	padding: 0;
	width: 100%;
}

/* Both buttons run the width of the card, 50 tall, as drawn. */
.tac-stays-root .tacbe-bk-reserve,
.tac-stays-root .tacbe-bk-enquire {
	min-height: 50px;
	width: 100%;
}

/*
 * Outlined, and standing below the tinted panel rather than inside it — see
 * assets/js/property-booking.js, which is what moves it out. Once it is a child
 * of .tacbe-quote rather than of the panel it needs its own width and the space
 * the frame leaves above it.
 */
.tac-stays-root .tacbe-quote > .tacbe-bk-enquire {
	display: block;
	margin-top: 20px;
	/*
	 * The engine caps the panel at 420, which this used to sit inside and so
	 * inherited. Out here it is a sibling of the panel rather than a child, and
	 * took the full width of the column instead — 833 under a 420 panel wherever
	 * the card is stacked under the words.
	 */
	max-width: 420px;
	width: 100%;
}

.tac-stays-root .tacbe-bk-enquire {
	background: transparent;
	border-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--plum);
}

.tac-stays-root .tacbe-bk-enquire:hover,
.tac-stays-root .tacbe-bk-enquire:focus-visible {
	background: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--base);
}

/*
 * The design opens on the photographs and puts the name under them; the plugin
 * writes the name first. The order is swapped here rather than through the
 * markup, because the head and the gallery are the plugin's own two blocks and
 * this only changes which way round they are read.
 */
/*
 * The design opens on the photographs, puts the name under them, and stands the
 * booking card beside the name rather than below it. The plugin writes the name
 * first and keeps the card in a row of its own further down, so the page is
 * laid on one grid and each part placed on it — which is also what holds the
 * name to the 974 the design wraps it at instead of the full width of the page.
 *
 * .tacbe-prop-cols is dissolved so the two halves it holds become parts of this
 * grid. If a rebuild puts a third thing in that row it will land here as well,
 * so this is worth re-checking after a plugin update.
 */
.tac-stays-root.tacbe-property {
	column-gap: 24px;
	display: grid;
	grid-template-columns: minmax( 0, 974px ) 414px;
	justify-content: space-between;
}

/*
 * The booking engine's own gallery — a picture with a grid of four beside it.
 * Ours is drawn instead, from the same photographs; see inc/property-gallery.php
 * for why this is hidden rather than not written.
 */
.tac-stays-root.tacbe-property > .tacbe-gallery {
	display: none;
}

/*
 * The gallery the design opens on — Figma 112:5028, "Hero Banner": one
 * photograph in the middle with the one before and the one after showing past
 * it either side, an arrow over each, and VIEW GALLERY at the bottom on the
 * right-hand one's edge.
 *
 * It is drawn as a row 3103 wide inside a frame of 1920, so it runs off both
 * edges of the page and is cut by them: 1299 by 908 in the middle, 37 either
 * side of it, and 865 by 742 for the two beside it — shorter than the middle
 * one and centred against it, which is what leaves the white above and below
 * them and raises the middle photograph out of the row. Only about 270 of each
 * of those is ever in view, so they are cut here by the page rather than sized:
 * every slide is the middle one's width, and it is the height that tells them
 * apart.
 *
 * The numbers are read as fractions of the page, because that is what the frame
 * draws them against: 1299 of 1920 is 67.66, and 908 of 1299 is what holds the
 * shape.
 */
.property-gallery {
	--gallery-main: min( 67.66vw, 1299px );
	--gallery-gap: 37px;

	grid-column: 1 / -1;
	grid-row: 1;
	position: relative;
}

/*
 * Out to the width of the page. 100vw counts the scrollbar and the page is not
 * that wide, so the 15 or so it overhangs by is cut off at main.property, which
 * is exactly as wide as the page can be. Clipped rather than hidden: hidden
 * would make that element a scroll container and unpin the booking card.
 */
main.property {
	overflow-x: clip;
}

/*
 * Said through the gallery as well, for the same reason the slide's width is:
 * Swiper's own stylesheet centres .swiper with auto margins, at the weight of a
 * single class, and is printed after this sheet. Left to it the row sat in the
 * band and ran off the right-hand side instead of standing either side of it.
 */
.property-gallery .property-gallery__track {
	margin-inline: calc( 50% - 50vw );
	overflow: hidden;
	width: 100vw;
}

/* Centred, so the two beside the middle one sit on its middle rather than its top. */
.property-gallery .swiper-wrapper {
	align-items: center;
}

/*
 * Said through the row as well as the slide: Swiper's own stylesheet holds
 * .swiper-slide at the full width of the track, at the same weight as a single
 * class here, and it is printed after this sheet.
 *
 * The height is what raises the middle photograph: 742 of the 908 it stands at,
 * for the two either side of it.
 */
.property-gallery .property-gallery__slide {
	aspect-ratio: 1299 / 908;
	height: 100%;
	transition: height 0.3s ease;
	width: var( --gallery-main );
}

/*
 * Stated as the exception rather than the rule so the middle photograph is its
 * full height on the first paint. Written the other way round — short by
 * default, full once Swiper marks the active slide — every property page opened
 * with the photograph growing into place, because that mark is only put on
 * after the script runs.
 */
.property-gallery .property-gallery__slide:not( .swiper-slide-active ) {
	height: 81.72%;
}

/*
 * The row is as tall as the middle photograph, so it does not change height as
 * the row moves.
 */
.property-gallery__track {
	aspect-ratio: unset;
	height: calc( var( --gallery-main ) / 1299 * 908 );
}

.property-gallery__image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/*
 * Over the photographs either side, as drawn, and on the page's own gutter
 * rather than the row's — the same arrows the residences row uses.
 */
.property-gallery__arrow {
	/*
	 * White behind the ring. The mark itself — assets/images/arrow.svg — draws a
	 * navy circle around a navy arrow and leaves the middle of it clear, which is
	 * right everywhere else on the site: every other row stands its arrows on the
	 * page beside the cards. These stand on a photograph, and unfilled they were a
	 * ring with the picture showing through the middle of it. The design fills the
	 * circle white; it is filled here rather than in the file so the four rows
	 * that share it are left alone.
	 */
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	line-height: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 2;
}

/*
 * Centred on the photograph either side rather than set in from the page: what
 * is in view of each is half of what is left once the middle one and its two
 * gaps are taken out, and the arrow is 60 across.
 *
 * The 50% - 50vw is what moves the measurement off this box and onto the page.
 * These sit in the 1560 band while the row itself runs the full width, so
 * without it both arrows were a band's inset too far in.
 */
.property-gallery__arrow--prev,
.property-gallery__arrow--next {
	--gallery-peek: calc( ( 100vw - var( --gallery-main ) - 2 * var( --gallery-gap ) ) / 2 );
}

.property-gallery__arrow--prev {
	inset-inline-start: calc( 50% - 50vw + var( --gallery-peek ) / 2 - 30px );
	rotate: 180deg;
}

.property-gallery__arrow--next {
	inset-inline-end: calc( 50% - 50vw + var( --gallery-peek ) / 2 - 30px );
}

.property-gallery__arrow[aria-disabled="true"] {
	opacity: 0.4;
	pointer-events: none;
}

/*
 * 261 by 50, its bottom level with the bottom of the middle photograph — which
 * is below the two either side, those being the shorter ones, so it stands
 * clear of them.
 *
 * Set in from the right-hand edge of the page rather than out from the middle
 * photograph. The design has it on the left edge of the right-hand one, but
 * that edge is only 273 from the page's own edge at the width it is drawn at,
 * and less than that on any narrower screen — measured from there the button
 * walks off the page. From this end it keeps the 22 it is drawn with.
 */
.property-gallery__all {
	bottom: 0;
	inset-inline-end: calc( 50% - 50vw + 22px );
	justify-content: center;
	width: 261px;
	z-index: 2;
	background: var(--wp--preset--color--plum);
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 0;
	padding: 13px 33px 15px;
	position: absolute;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.property-gallery__all:hover,
.property-gallery__all:focus-visible {
	background: transparent;
	border-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--plum);
}

/* Clear of the name under it. */
.property-gallery {
	margin-bottom: 60px;
}

/* Every photograph at once, behind that button. */
.property-gallery__lightbox {
	background: var(--wp--preset--color--base);
	border: 0;
	height: 100%;
	max-height: 100%;
	max-width: 100%;
	padding: 0;
	width: 100%;
}

.property-gallery__lightbox::backdrop {
	background: rgba( 25, 40, 61, 0.85 );
}

.property-gallery__all-photos {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat( auto-fill, minmax( min( 380px, 100% ), 1fr ) );
	padding: 90px 40px 40px;
}

.property-gallery__all-photo {
	aspect-ratio: 3 / 2;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.property-gallery__close {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: 50%;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	font-size: 28px;
	height: 48px;
	inset-inline-end: 40px;
	line-height: 1;
	position: fixed;
	top: 28px;
	width: 48px;
	z-index: 2;
}

.tac-stays-root .tacbe-prop-head {
	grid-column: 1;
	grid-row: 2;
}

.tac-stays-root.tacbe-property > .property-spec {
	grid-column: 1;
	grid-row: 3;
}

.tac-stays-root .tacbe-prop-cols {
	display: contents;
}

.tac-stays-root .tacbe-prop-main {
	grid-column: 1;
	grid-row: 4;
}

/*
 * Beside the name and the words both, and pinned as the page scrolls — but
 * pinned from inside rather than as itself. Dissolving .tacbe-prop-cols takes
 * away the box that would have bounded the pinning, and what is left to bound
 * it is the whole page: the card came unstuck from its own column and rode down
 * over the reviews and the similar stays. Given the height of the two rows it
 * stands beside, it is that box the card is now pinned within.
 */
.tac-stays-root .tacbe-prop-aside {
	align-self: stretch;
	grid-column: 2;
	grid-row: 2 / 5;
	position: static;
}

.tac-stays-root .tacbe-prop-aside--sticky .tacbe-quote {
	position: sticky;
	top: 20px;
}

/* Reviews are read at the same measure as the rest of the words. */
.tac-stays-root .tacbe-reviews {
	grid-column: 1;
}

.tac-stays-root .property-similar {
	grid-column: 1 / -1;
}

/*
 * The booking engine's own row of marks. Ours is printed above it and reads the
 * same three numbers — see inc/property-spec.php for why it is drawn rather than
 * rewritten. This still reaches the marks on its cards, which are its own.
 */
.tac-stays-root .tacbe-prop-head .tacbe-specbar {
	display: none;
}

/*
 * The design's row: the marks on a 25 band with the number beside each, 24
 * between one and the next. Figma 112:5169 and 112:5175.
 */
.property-spec {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	list-style: none;
	/* The 18 the frame sets between the name and this row. */
	margin: 18px 0 0;
	padding: 0;
}

.property-spec__item {
	align-items: center;
	display: flex;
	gap: 6px;
}

.property-spec__mark {
	display: block;
	height: 25px;
	width: auto;
}

.property-spec__n {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-figure);
	font-weight: 200;
	line-height: 1;
}

/* The score closes the row at the far end of the column. */
.property-spec__rating {
	gap: 8px;
	margin-inline-start: auto;
}

.property-spec__star {
	display: block;
	height: auto;
	width: 24px;
}

/*
 * Share and save, in the gap between the words and the booking card — they
 * belong to neither column, and the frame stands them there: 60 clear of the
 * card's left edge, which is what they are hung off below rather than the
 * words, so they keep that clearance as the gap changes width.
 *
 * The gap is only wide enough to hold them once the band has reached its full
 * 1560, which wants a page of 1612. Narrower than that it closes to 24 — less
 * than these two are wide — so they sit at the end of the words instead, and on
 * a phone there is no second column for them to be beside at all.
 */
.property-actions {
	align-self: start;
	display: flex;
	gap: 12px;
	grid-column: 1;
	grid-row: 2;
	justify-self: end;
	/* The frame sets them 11.6 below the top of the suburb's line beside them. */
	margin-top: 12px;
}

@media ( min-width: 1612px ) {
	.property-actions {
		grid-column: 2;
		justify-self: start;
		/* Their own width, plus the 60 the frame leaves before the card. */
		translate: calc( -100% - 60px ) 0;
	}
}

.property-actions__button {
	background: none;
	border: 0;
	color: var(--wp--preset--color--plum);
	cursor: pointer;
	line-height: 0;
	padding: 4px;
	position: relative;
	transition: color 0.2s ease, scale 0.2s ease;
}

.property-actions__button:hover {
	scale: 1.08;
}

.property-actions__mark {
	display: block;
	height: 29px;
	width: auto;
}

/* Saved: the outline fills in, which is the whole of what the state looks like. */
.property-actions__button--save[aria-pressed="true"] .property-actions__mark {
	fill: currentColor;
}

/* "Link copied", under the mark, for as long as it takes to read. */
.property-actions__note {
	background: var(--wp--preset--color--navy);
	border-radius: 4px;
	color: var(--wp--preset--color--base);
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-unit);
	font-weight: 300;
	inset-inline-end: 0;
	letter-spacing: 1px;
	line-height: 1;
	padding: 7px 10px;
	position: absolute;
	top: calc(100% + 8px);
	text-transform: uppercase;
	white-space: nowrap;
}

/* The suburb, over the name, as every eyebrow on the site is set. */
.tac-stays-root .tacbe-prop-eyebrow {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	text-transform: uppercase;
}

/*
 * The design's H2: Canela 80 over 90, which is the hero size the rest of the
 * site is set in. It was at 45 here, which is a different heading altogether.
 */
.tac-stays-root .tacbe-prop-title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-hero);
	font-weight: 100;
	line-height: var(--hotelesque-line-hero);
	/* The 27 the frame sets between the suburb and the name. */
	margin: 27px 0 0;
}

/*
 * The head holds the engine's row of marks, which is hidden — but the box round
 * it is not, and neither is the space the head keeps under itself, so between
 * them they stood 38 between the name and our row against the design's 10.
 */
.tac-stays-root .tacbe-prop-head {
	margin-bottom: 0;
}

.tac-stays-root .tacbe-prop-metarow {
	display: none;
}

/* Guests, beds and baths on one line under the name. */
.tac-stays-root .tacbe-specbar {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
}

/* The heading over each section of the page. */
/*
 * The heading over each block. The frame names it H5 — Canela Thin 28 over 40 —
 * and these were set at 40 over 52, which is the size above it.
 *
 * Similar stays keeps that larger size: it is not one of these blocks, it is a
 * row of its own below them all, and the frame draws its heading larger.
 */
.tac-stays-root .tacbe-prop-section > h2,
.tac-stays-root .tacbe-reviews-title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-subtitle);
	font-weight: 100;
	line-height: var(--hotelesque-line-subtitle);
}

/*
 * Similar stays: the homepage's row, borrowed whole — see inc/property-similar.php.
 * Only the heading and the room around it are said here; the card and the
 * carousel are already dressed for the homepage and carry that over unchanged.
 */
.tac-stays-root .property-similar {
	margin-top: 90px;
}

/*
 * The row is laid out by .residences__carousel, which already centres the
 * arrows against it and keeps the 80 either side. What it does not carry is the
 * flex itself: on the homepage that comes from the layout class core puts on
 * the group, and there is no group here — so the arrows stacked above and below
 * the cards instead of standing either side of them.
 */
.tac-stays-root .property-similar__carousel {
	display: flex;
	flex-wrap: nowrap;
}

.tac-stays-root .property-similar__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title-xs);
	font-weight: 100;
	line-height: var(--hotelesque-line-title-xs);
	margin: 0 0 40px;
}

.tac-stays-root .tacbe-prop-section,
.tac-stays-root .tacbe-prop-main p,
.tac-stays-root .tacbe-amenity,
.tac-stays-root .tacbe-gtk-item {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
}

/*
 * The booking card, 414 as drawn against the 974 the words are read at. The
 * plugin already keeps it beside them and pins it as the page scrolls.
 */
.tac-stays-root .tacbe-prop-aside {
	flex-basis: 414px;
}

.tac-stays-root .tacbe-bk-price {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-figure);
	font-weight: 100;
}

.tac-stays-root .tacbe-bk-unit {
	font-size: var(--hotelesque-size-unit);
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/*
 * The call-out and promotion pills carry their colours as inline styles, set
 * per tag in the plugin's settings, so only the shape is ours to say.
 */
.tac-stays-root .tacbe-callout,
.tac-stays-root .tacbe-card-callout,
.tac-stays-root .tacbe-card-promopill {
	border-radius: 0;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-unit);
	font-weight: 300;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* Narrower
   ---------------------------------------------------------------------- */

/*
 * The property page, in one column.
 *
 * The plugin stacks it below 860 by re-columning .tacbe-prop-cols — which is
 * the box dissolved above, so none of that reaches the page any more and the
 * two columns held at every width. A 414 card alone is wider than a phone, so
 * this is not a matter of it reading tight: the page went off the side of
 * itself.
 *
 * Stacked at 1024 rather than at the plugin's 860, because the card does not
 * narrow: every pixel the page loses comes off the words instead, and by 1024
 * they are down to 519 against the 974 they are set at. The card is better off
 * the row by then.
 *
 * The card goes above the words, as the plugin puts it — on a small screen the
 * price and the dates are what the page is for — and stops being pinned, since
 * there is nothing beside it to be pinned against.
 */
@media ( max-width: 1024px ) {
	.tac-stays-root.tacbe-property {
		grid-template-columns: minmax( 0, 1fr );
	}

	.tac-stays-root.tacbe-property > .property-gallery {
		grid-row: 1;
	}

	.tac-stays-root .tacbe-prop-head {
		grid-column: 1;
		grid-row: 2;
	}

	.tac-stays-root.tacbe-property > .property-spec {
		grid-row: 3;
	}

	.property-actions {
		grid-column: 1;
		justify-self: end;
		translate: none;
	}

	.tac-stays-root .tacbe-prop-aside {
		grid-column: 1;
		grid-row: 4;
	}

	.tac-stays-root .tacbe-prop-main {
		grid-column: 1;
		grid-row: 5;
	}

	.tac-stays-root .tacbe-prop-aside--sticky .tacbe-quote {
		position: static;
	}

	/*
	 * More of the photograph, but not all of it: the arrows go here, so what is
	 * left of the two either side is the only thing saying the row moves at all.
	 * At 86 there was nothing left of them and it read as a single picture.
	 */
	.property-gallery .property-gallery__slide {
		width: 80%;
	}

	.property-gallery__arrow {
		display: none;
	}

	/*
	 * Under the row rather than on it. The design stands this in the white to
	 * the right of the middle photograph, and on a phone there is no white
	 * there — placed as drawn it sat on the picture, and behind it, since the
	 * row is painted after. Sized to its words too: 261 covers most of a phone.
	 */
	.property-gallery__all {
		display: block;
		font-size: var(--hotelesque-size-unit);
		inset-inline-end: auto;
		margin: 16px 0 0 auto;
		padding: 11px 20px 13px;
		position: static;
		width: auto;
	}


	.tac-stays-root .tacbe-prop-section {
		padding: 36px 0;
	}
}


/*
 * The bar keeps its fields on one row at every width — it is the plugin's own
 * layout and it does not stack them — so the only thing to take off here is the
 * divider, which reads as clutter once the fields are this close together.
 *
 * The button keeps its 174. Given the full width instead it pushed the row past
 * the page and took 412 of sideways scroll with it.
 */
@media ( max-width: 767px ) {
	.tac-stays-root .tacbe-sb-field + .tacbe-sb-field::before {
		display: none;
	}

	/*
	 * Three fields and a 174 button need more room than a phone has, and the
	 * plugin keeps them on one row regardless, so the row is allowed to wrap and
	 * the button takes the line under them.
	 */
	.tac-stays-root .tacbe-searchbar {
		flex-wrap: wrap;
	}

	.tac-stays-root .tacbe-sb-go {
		width: 100%;
	}
}