/*
 * Stylesheet for the "Custom Landing Page" template (custom-landing-page.php)
 * Enqueued only on that template — see functions.php
 */

.custom-landing-page {
    padding: 60px 0;
}

.custom-landing-page-hero {
    text-align: center;
    margin-bottom: 40px;
}

.custom-landing-page-hero h1 {
    margin: 0;
}

.custom-landing-page-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* ==========================================================================
   Our Hotels page (/our-hotels-across-canada/)
   Full-width sections — this page opts out of the generic padded/boxed
   layout above via the extra .tm-hotels class on the wrapping <section>.
   "tm-" = True Market, scopes these rules so they can't collide with
   anything else in this shared stylesheet.
   ========================================================================== */

.custom-landing-page.tm-hotels {
    padding: 0;
}

.custom-landing-page p {
    color: #000;
}

.tm-hotels {
    /* The site's pairing: Poppins for headings and heading-like UI (eyebrows,
       buttons, badges, filter labels), Cabin for body copy. Both families are
       already loaded site-wide by the parent theme's typography options, so
       nothing extra is enqueued for this template. */
    --tm-font-heading: 'Poppins', sans-serif;
    --tm-font-body: 'Cabin', sans-serif;

    --tm-navy: #003E7E;
    --tm-gold: #ffd105;
    --tm-text-dark: #252525;
    --tm-text-body: #404040;
    --tm-text-muted: #777777;
    --tm-green: #45715f;
    --tm-red: #b11f23;
    --tm-transparent-grey: rgba(0, 0, 0, 0.05);
    /* Lighter than --tm-navy; matches the blue in the pin and checkbox SVGs. */
    --tm-blue: #003e7e;
    /* The town/province set beside each hotel's name in the list. Sampled off
       the design rather than taken from a brand sheet — swap in the real value
       if there is one. */
    --tm-blue-light: #1b62b5;

    --tm-max-width: 1800px;
    --padding-inline: 60px;
    --tm-left-spacing: 60px;
    /* Shared between the status/type badges and the gold View Hotel button
       beside them in the location list row, so the two stay sized to match. */
    --tm-badge-padding: 8px 16px;

    font-family: var(--tm-font-body);
}

.tm-hotels img {
    max-width: 100%;
}

/* Headings ---------------------------------------------------------------- */

.tm-hotels h1,
.tm-hotels h2,
.tm-hotels h3 {
    font-family: var(--tm-font-heading);
    text-transform: uppercase;
    font-weight: 700;
}

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

.tm-button {
    display: inline-block;
    padding: 5px 20px;
    font-family: var(--tm-font-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    color: var(--tm-navy);
    background-color: var(--tm-gold);
}

.tm-button:hover {
    background-color: var(--tm-navy);
    color: #fff;
    /* border-color: var(--tm-navy); */
}

.tm-button--gold {
    background-color: var(--tm-gold);
    color: var(--tm-text-dark);
}

/* .tm-button--gold:hover {
    background-color: var(--tm-navy);
    color: #fff;
} */

.tm-button--outline {
    background-color: transparent;
    color: #fff;
    border-color: var(--tm-gold);
}

.tm-button--outline:hover {
    background-color: #fff;
    color: var(--tm-navy);
    border-color: #fff;
}

/* Hero ------------------------------------------------------------------ */

.tm-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-color: var(--tm-navy);
    padding-block: 10rem 20rem;
}

.tm-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent linear-gradient(91deg, var(--tm-navy) 0%, #003E7E00 100%) 0% 0% no-repeat padding-box;
}

.tm-hero::after {
    /* content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 40px;
    background: #fff;
    clip-path: polygon(0 100%, 0 40%, 6% 100%, 12% 40%, 18% 100%, 100% 100%); */

    content: url("../images/divider-point-up.svg");
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
}

.tm-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--tm-max-width);
    margin-inline-start: var(--tm-left-spacing);
    padding-inline: var(--padding-inline);
}

.tm-hero h1 {
    margin: 0;
    font-size: 48px;
    line-height: 1.15;
}

.tm-hero-line {
    display: block;
    color: #fff;
    font-size: 40px;
    letter-spacing: 3.5px;
}

.tm-hero-line--accent {
    color: var(--tm-gold);
    font-size: 70px;
    letter-spacing: 2px;
}

/* Intro / partner section ------------------------------------------------ */

.tm-intro {
    padding-block: 70px;
    margin-block-end: 4rem;
}

.tm-intro-inner {
    max-width: var(--tm-max-width);
    margin-inline-start: var(--tm-left-spacing);
    padding-inline: var(--padding-inline);
    display: grid;
    grid-template-columns: 1fr 1.95fr 1fr;
    gap: 90px;
    align-items: start;
}

.tm-intro-col--heading h2 {
    margin: 0;
    color: var(--tm-navy);
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.tm-intro-col--text {
    color: var(--tm-text-body);
}

.tm-intro-col--text p:first-child {
    margin-top: 0;
}

.tm-intro-col--partner h3 {
    margin: 0 0 20px;
    color: var(--tm-navy);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

/* Map + filter + list ----------------------------------------------------- */

.tm-map {
    /* The map runs full-bleed; the filter card floats over its top-left
       corner, inset to line up with the page's own 60px gutter. */
    /* Google Maps fills whatever box it's given, so this is the map's height
       outright rather than a floor it can grow past. Narrow screens set their
       own, smaller value below. */
    --tm-map-height: 800px;
    --tm-map-card-width: 390px;
    --tm-map-card-inset: 60px;
    /* Depth of the point cut out of the card's bottom edge. */
    --tm-map-card-point: 40px;
    /* Doubles as the map's top offset: the header sits entirely above the
       map, so its height is exactly how far the map is pushed down. */
    --tm-map-header-height: 60px;

    padding: 0 0 70px;
}

/*
 * `.prettyMapList` is Map List Pro's own wrapper div — the map, the filter
 * bar and the list are all direct children of it, but they need to be
 * positioned independently of each other here. `display: contents` dissolves
 * that wrapper's own box so its children become direct children of
 * `.tm-map-list-wrap`, without touching the plugin's markup or Knockout
 * bindings.
 */
.tm-map-list-wrap {
    position: relative;
}

.tm-map-list-wrap .prettyMapList {
    display: contents;
}

/* `.tm-map` is in this chain to outrank the plugin's own
   `.prettyMapList .mapHolder{border;height:350px;margin-bottom:15px}`, which
   ties a two-class selector on specificity and would otherwise win on load
   order. */
.tm-map .tm-map-list-wrap .mapHolder {
    position: relative;
    z-index: 1;
    width: 100%;
    height: var(--tm-map-height);
    border: none;
    margin-bottom: 0;
    /* Pushes the map down by exactly the header's height, so the header's
       bottom edge meets the map's top edge and the white card below it starts
       flush with the map. */
    margin-top: var(--tm-map-header-height);
}

/*
 * The navy gradient — real Google water shows now (see custom-landing-page.php
 * for the note on what this replaced). Back on `.mapHolder` itself, as a
 * pseudo-element rather than a real child or a separately-positioned sibling
 * — both were tried and both were wrong: Google Maps clears whatever real DOM
 * it's handed on init, so a child gets wiped the moment the map exists; a
 * sibling sits entirely outside `.mapHolder`'s own stacking context, so it
 * can't be interleaved by z-index with `.mapHolder::after` (the bottom angle)
 * below — the two would always resolve as a block, angle-above-gradient or
 * angle-below-gradient, never correctly split around the tiles in between. A
 * pseudo-element isn't real DOM Google can clear, and — like `::after` — it's
 * a first-class part of `.mapHolder`'s own stacking context, so it can sit
 * between the tiles and the angle exactly the way a plain child could without
 * being one.
 *
 * `inset: 0` — rather than a hardcoded top offset referencing
 * `--tm-map-header-height` — is what actually keeps this pinned to the map's
 * box at every breakpoint with no media query of its own: `.mapHolder`
 * already carries that offset in its own `margin-top` (and swaps to a
 * different, mobile-only layout entirely below 767px), so a pseudo-element
 * of it inherits that box for free rather than needing the variable
 * repeated here.
 *
 * `z-index: 1` is what clears Google's own tiles reliably, the same way
 * `::after` below relies on its own (higher) `z-index: 5` — and that's also
 * what keeps this under the angle: both z-indexes are compared inside this
 * one stacking context, tiles auto < gradient 1 < angle 5. Neither number
 * competes with the filter card's `z-index: 2`, which is a comparison one
 * level up, between `.mapHolder` as a whole and its siblings in
 * `.tm-map-list-wrap` — see the note on `::after` below for that split.
 */
.mapHolder::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, var(--tm-navy) 0%, #003E7E00 100%);
    pointer-events: none;
    max-width: 28%;
}

/*
 * The angled sweep where the map gives way to the page below it, per the
 * mockup: divider-point-down.svg laid across the map's bottom edge. That SVG's
 * *top* edge dips to a point, so filling it in the page's own white reads as
 * the map being cut away along that line.
 *
 * Anchored to .mapHolder rather than to the section so it tracks the map's
 * bottom edge in both layouts — the desktop overlay and the stacked mobile
 * one — without either needing to know the map's position. Google Maps owns
 * this element's children but not its pseudo-elements, so this survives the
 * map re-rendering, and `pointer-events: none` keeps the strip from
 * swallowing drags. The z-index sits above Google's tiles but is scoped
 * inside .mapHolder's own stacking context, so the filter card still floats
 * over it.
 */
.tm-map .tm-map-list-wrap .mapHolder::after {
    content: "";
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    /* Height follows the artwork's own ratio, so the angles stay true to the
       SVG at any viewport width instead of stretching. */
    aspect-ratio: 1920 / 194.762;
    background-color: #fff;
    -webkit-mask: url("../images/divider-point-down.svg") bottom center / 100% 100% no-repeat;
    mask: url("../images/divider-point-down.svg") bottom center / 100% 100% no-repeat;
    pointer-events: none;
}

/* Hides the Google wordmark bottom-left, and the "Map data ©… / Terms"
 * attribution bottom-right, per the mockup.
 *
 * HEADS UP: unlike the map controls (turned off through the Maps API in
 * tm-hotels.js), there is no supported option for either — the Google logo and
 * the attribution are a requirement of the Google Maps Platform Terms of
 * Service, which forbid altering or obscuring them. Hiding them puts the
 * site's API key at risk. Delete this one block to restore both.
 *
 * The logo is matched on the link's destination and the image's alt text
 * rather than on Google's generated class names and DOM order, which are
 * unversioned and change without notice. The attribution has no such handle,
 * so `.gm-style-cc` — Google's own container class for that corner — is the
 * only way in, and is the piece most likely to need revisiting after a Maps
 * API update. It also covers the scale bar and the "Keyboard shortcuts"
 * button, but both of those are switched off properly in tm-hotels.js, so
 * nothing here is load-bearing for them. */
.tm-map .gm-style a[href*="maps.google.com/maps"],
.tm-map .gm-style img[alt="Google"],
.tm-map .gm-style-cc {
    display: none !important;
}

/* The floating filter card: navy header + white body, stacked over the map. */

.tm-map-sidebar-header {
    position: absolute;
    z-index: 2;
    top: 0;
    left: calc(var(--tm-left-spacing) + var(--padding-inline));
    box-sizing: border-box;
    width: var(--tm-map-card-width);
    height: var(--tm-map-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--tm-blue);
    color: var(--tm-gold);
    padding: 0 40px;
    font-family: var(--tm-font-heading);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 20px;
    /* Markup is a <button> — below 767px it's the toggle that expands the
       filter card over the map — so the native chrome needs stripping back
       to the plain label this has always been at desktop widths. */
    appearance: none;
    border: none;
    margin: 0;
    text-align: left;
    cursor: pointer;
}

.tm-map-sidebar-header-label--compact {
    display: none;
}

.tm-map-sidebar-header-icons {
    order: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tm-map-sidebar-header-icon {
    width: 20px;
    height: 14px;
}

/* Only ever shown below 767px — see the label swap and this same selector
   in that media query. */
.tm-map-sidebar-header-chevron {
    display: none;
    width: 14px;
    height: 8px;
    background: url("../images/ui-arrow.svg") center / contain no-repeat;
    transition: transform 0.2s ease;
}

/*
 * `.clearfix` is folded into this selector (the plugin always adds it
 * alongside `.prettyFileBar`) purely to out-specificity two stray rules in
 * the theme's global style.css — `div.prettyMapList .prettyFileBar{padding:0
 * !important}` and, under a 768px media query, `{display:flex;flex-wrap:
 * wrap}` — both left over from styling Map List Pro's default markup
 * elsewhere on the site. `!important` matches the former so this wins
 * regardless of stylesheet load order; scoping to `.tm-map-list-wrap` keeps
 * the override local to this template only.
 *
 * The card is transparent and its white is painted by the ::before backdrop
 * below, which is the layer the point is cut out of. The shadow stays here on
 * the parent: masking and filtering the same element would clip the shadow
 * away, since masks are applied after filters. On the parent it traces the
 * child's cut-out silhouette instead, which is what follows the point.
 */
.tm-map-list-wrap .prettyFileBar.clearfix {
    position: absolute;
    z-index: 2;
    top: var(--tm-map-header-height);
    left: calc(var(--tm-left-spacing) + var(--padding-inline));
    box-sizing: border-box;
    width: var(--tm-map-card-width);
    display: block !important;
    background: none;
    /* The plugin's own `1px dashed #EFEFEF` bottom border sat invisibly at the
       card's edge while it was solid white; with the point cut out it would
       hang across the notch, over the map. */
    border: none;
    /* The point is cut out of the card's own box, so the bottom padding has
       to clear it or the last filter row would sit in the notch. */
    padding: 30px 40px calc(30px + var(--tm-map-card-point)) !important;
    filter: drop-shadow(0 8px 18px rgba(8, 33, 90, 0.18));
}

/*
 * The card's white backdrop, with the notch cut up into its bottom edge.
 *
 * Two mask layers combined with `exclude` (XOR): a solid fill covering the
 * whole card, minus divider-point-up.svg laid across the bottom. That SVG is a
 * wedge whose *top* edge peaks, so removing it takes a bite out of the card's
 * bottom that rises to a point — the card is cut into, rather than tapering to
 * a tail below itself. The wedge's height keeps the SVG's ~10.2:1
 * width-to-height ratio so the angles stay true to the artwork.
 *
 * `exclude` rather than `subtract` because the wedge sits entirely within the
 * solid layer, and XOR of a subset is precisely the difference. Safari before
 * 15.4 needs the -webkit- keyword (`xor`).
 *
 * The wedge is hung 2px below the card and made 2px taller to match, which
 * leaves its top edge — the visible angle — exactly where it was. The card's
 * height is content-driven and lands on a fraction of a pixel, so a wedge
 * ending flush with the bottom rasterises a hairline short of the painted edge
 * and leaves a 1px white line under the notch. Overhanging clears it.
 */
.tm-map-list-wrap .prettyFileBar.clearfix::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #fff;

    -webkit-mask-image: linear-gradient(#000, #000), url("../images/divider-point-up.svg");
    mask-image: linear-gradient(#000, #000), url("../images/divider-point-up.svg");
    -webkit-mask-size: 100% 100%, 100% calc(var(--tm-map-card-point) + 2px);
    mask-size: 100% 100%, 100% calc(var(--tm-map-card-point) + 2px);
    -webkit-mask-position: center, left 0 bottom -2px;
    mask-position: center, left 0 bottom -2px;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/*
 * The "Search by keyword" bar. tm-hotels.js moves Map List Pro's own search
 * form (`#Map-List-Search`) out of `.prettyFileBar` and appends it directly
 * to `.tm-map-list-wrap`, so it floats over the map as its own element
 * rather than living inside the filter card with the category checkboxes.
 * That move also takes it out of reach of the plugin's own
 * `.prettyFileBar .prettyMapListSearch` rules (MapListProCore.css), so
 * everything about its look is defined here instead of fought over.
 *
 * `max-width` is what keeps this clear of the filter card at every desktop
 * width: the card's own box (`--tm-map-card-width` plus its inset on both
 * sides) is subtracted from the viewport, so as the window narrows this
 * bar shrinks rather than sliding under the card.
 */
.tm-map-list-wrap #Map-List-Search {
    position: absolute;
    z-index: 2;
    top: 100px;
    right: var(--tm-map-card-inset);
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    width: 420px;
    max-width: calc(100% - var(--tm-map-card-width) - (var(--tm-map-card-inset) * 2));
    height: 54px;
    margin: 0;
    padding: 0;
    background: #fff;
    box-shadow: 0 8px 18px rgba(8, 33, 90, 0.18);
}

/* The plugin's own hint for this field — kept for assistive tech, but the
   mockup's "Search by keyword" is set as a real placeholder below instead
   (tm-hotels.js), since Knockout's `value: query` binding always overwrites
   whatever the input's own `value` attribute starts as. */
.tm-map-list-wrap #Map-List-Search label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tm-map-list-wrap #Map-List-Search .prettySearchValue {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 24px;
    background: none;
    border: none;
    box-shadow: none;
    color: var(--tm-text-dark);
    font-family: var(--tm-font-heading);
    font-size: 18px;
}

.tm-map-list-wrap #Map-List-Search .prettySearchValue:focus {
    outline: none;
    box-shadow: none;
}

.tm-map-list-wrap #Map-List-Search .prettySearchValue::placeholder {
    color: var(--tm-navy);
}

/* Not part of the mockup, which shows only the field and the search
   button — the plugin's own "Clear" link stays functional (it's still
   bound to `clearSearch`) but out of sight. */
.tm-map-list-wrap #Map-List-Search .clearSearch {
    display: none !important;
}

/* Added by tm-hotels.js — `simplesearch` mode has no button of its own, just
   the field, since it already filters live on every keystroke. This one
   exists for the mockup's look and to give clicking/tapping something to
   confirm against; the icon is the theme's `ui-search.svg`, already gold
   (#ffd105 / --tm-gold) in the artwork itself rather than via a CSS mask. */
.tm-map-list-wrap #Map-List-Search .tm-map-search-submit {
    flex: 0 0 auto;
    width: 54px;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--tm-navy) url("../images/ui-search.svg") center / 22px 22px no-repeat;
    border: none;
    cursor: pointer;
}

.tm-map-list-wrap #ListContainer {
    max-width: var(--tm-max-width);
    margin: 40px auto 0;
    padding: 0 60px;
}

.tm-map-list-wrap .prettyMessage {
    max-width: var(--tm-max-width);
    margin: 20px auto 0;
    padding: 0 60px;
}

/* Filter checkbox lists (brand, type, status) */

.tm-map-list-wrap .menuDropDown {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-map-list-wrap .menuDropDown li a {
    position: relative;
    text-decoration: none;
    cursor: pointer;
}

/* Checkbox, right-aligned on every row — brand, type and status alike. */
.tm-map-list-wrap .menuDropDown li a::after {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: auto;
    background: url("../images/ui-checkbox-unchecked.svg") center / contain no-repeat;
}

/*
 * Ticking a filter is meant to do exactly two things: swap the checkbox art
 * and refilter the map. Map List Pro's own styling of the ticked state fights
 * all three of those, so it's unpicked here:
 *
 *   .categoryList .btn.showing        → padding-left:18px  (shunts the row left)
 *   .categoryList .btn.showing:after  → a 10x10 absolutely positioned "✓"
 *                                       glyph, which lands on top of the
 *                                       checkbox pseudo-element below and
 *                                       shrinks it
 *   .corePrettyStyle:hover / :active  → grey wash + inset shadow on press
 *   .categoryList .btn                → transition:all 0.2s (animates the above)
 *
 * The plugin's selectors carry five classes, so these have to match that
 * weight and win on element count instead — hence `.categoryList` and
 * `.menuDropDown` staying in the chain even though `li a` alone would reach
 * the same elements.
 */
.tm-map-list-wrap .prettyFileBar .categoryList .menuDropDown li a.showing::after {
    content: "";
    position: static;
    top: auto;
    left: auto;
    width: 20px;
    height: 20px;
    background-image: url("../images/ui-checkbox-checked.svg");
}

.tm-map-list-wrap .prettyFileBar .categoryList .menuDropDown li a,
.tm-map-list-wrap .prettyFileBar .categoryList .menuDropDown li a:hover,
.tm-map-list-wrap .prettyFileBar .categoryList .menuDropDown li a:active {
    background: none;
    box-shadow: none;
    transition: none;
}

/* Brand list — one full-width row per brand, divided by hairlines. The brand
   filter list is the .categoryList that's a direct child of .prettyFileBar;
   Type/Status are direct children of .multiCategoryFilter instead (targeted
   separately below), so this child-combinator reaches only the brand list. */

.tm-map-list-wrap .prettyFileBar > .categoryList {
    margin-bottom: 20px;
}

.tm-map-list-wrap .prettyFileBar > .categoryList .menuDropDown li {
    float: none;
    margin: 0;
    border-bottom: 1px solid #e2e4e9;
}

.tm-map-list-wrap .prettyFileBar > .categoryList .menuDropDown li:last-child {
    border-bottom: none;
}

/* The `.showing` twin holds the padding steady when a row is ticked — see the
   note on the plugin's ticked-state styling above. */
.tm-map-list-wrap .prettyFileBar > .categoryList .menuDropDown li a,
.tm-map-list-wrap .prettyFileBar > .categoryList .menuDropDown li a.showing {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 0;
    padding: 14px 2px;
    /* The active Map List Pro colour theme (Unboxed_grey.css) sets
       `.prettyMapList .btn{border:1px solid #ccc !important}` — !important
       leaves specificity powerless, so this has to match it. */
    border: none !important;
    font-family: var(--tm-font-heading);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
}

/* Brand pin icons + label colour, keyed to each brand term's slug.
   34x48 is the pin SVGs' own artboard size, so they render 1:1 here. */
.tm-map-list-wrap .prettyFileBar > .categoryList .menuDropDown li a::before {
    content: "";
    flex-shrink: 0;
    width: 34px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.tm-map-list-wrap .prettyFileBar > .categoryList li[class*="microtel"] a {
    color: var(--tm-navy);
}

.tm-map-list-wrap .prettyFileBar > .categoryList li[class*="microtel"] a::before {
    background-image: url("../images/ui-pin-blue.svg");
}

.tm-map-list-wrap .prettyFileBar > .categoryList li[class*="echo"] a {
    color: var(--tm-green);
}

.tm-map-list-wrap .prettyFileBar > .categoryList li[class*="echo"] a::before {
    background-image: url("../images/ui-pin-green.svg");
}

.tm-map-list-wrap .prettyFileBar > .categoryList li[class*="marriott"] a {
    color: var(--tm-red);
}

.tm-map-list-wrap .prettyFileBar > .categoryList li[class*="marriott"] a::before {
    background-image: url("../images/ui-pin-red.svg");
}

/* Type / Status — each taxonomy's two options sit side by side on one row.
   Map List Pro doesn't print a heading above each group in this mode, so
   these are labelled by position. Position follows the taxonomy
   *registration* order in functions.php (Type, then Status) — see the
   comment there before reordering either. */

.tm-map-list-wrap .multiCategoryFilter > .categoryList {
    padding-block: 20px;
    border-top: 1px solid #e2e4e9;
}

.tm-map-list-wrap .multiCategoryFilter > .categoryList:nth-of-type(1)::before,
.tm-map-list-wrap .multiCategoryFilter > .categoryList:nth-of-type(2)::before {
    display: block;
    margin-bottom: 14px;
    font-family: var(--tm-font-heading);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.04em;
    color: var(--tm-navy);
    text-transform: uppercase;
}

.tm-map-list-wrap .multiCategoryFilter > .categoryList:nth-of-type(1)::before {
    content: "Type";
}

.tm-map-list-wrap .multiCategoryFilter > .categoryList:nth-of-type(2)::before {
    content: "Status";
}

.tm-map-list-wrap .multiCategoryFilter .menuDropDown {
    display: flex;
    justify-content: space-between;
}

.tm-map-list-wrap .multiCategoryFilter .categoryList .menuDropDown li {
    float: none;
    margin: 0;
}

/*
 * The plugin's own `.categoryList .btn` rule carries 4 class selectors, the
 * same specificity weight as an equivalent selector here without
 * `.categoryList` in the chain — so `.categoryList` has to stay in these
 * selectors (matching it class-for-class) for the resets below to win.
 */
.tm-map-list-wrap .multiCategoryFilter .categoryList .menuDropDown li a,
.tm-map-list-wrap .multiCategoryFilter .categoryList .menuDropDown li a.showing {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    /* Same !important fight as the brand list above — see its comment. */
    border: none !important;
    border-radius: 0;
    font-family: var(--tm-font-body);
    font-size: 20px;
    color: var(--tm-text-body);
}

/* Location list rows */

.tm-map-list-wrap .prettyListItems {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e2e4e9;
}

.tm-map-list-wrap .corePrettyStyle.prettylink.map.location {
    border-bottom: 1px solid #e2e4e9;
    /* The plugin reserves 35px of left padding here for the row icon it draws
       in `.prettylink:after`. That icon is replaced below by a `::before` on
       the link itself, which sits inside the link's own padding — so the
       reserved space would do nothing but push every row's content right. */
    padding-left: 0;
}

/*
 * Brand pin per row, keyed to the brand term slugs Map List Pro writes onto
 * each row's `li` (its `$data.cssClass`, e.g. "microtel loc-939").
 *
 * This replaces an icon the plugin already draws: `.prettyMapList .map:after`
 * paints a generic 16px map graphic from its bundled silk_icons set into every
 * row, which is what currently shows where the brand pin belongs. It's
 * absolutely positioned against the `li` at a fixed `top`, so it can't be
 * re-pointed at a pin and still sit on the row's centre line — hiding it and
 * drawing the pin as a `::before` on the link makes the pin a flex item in the
 * row that's already there, and it centres with the title for free.
 *
 * The plugin's stylesheets are enqueued while the shortcode renders, so they
 * always load after this file — the overrides here have to out-specify the
 * plugin's own selectors rather than rely on source order.
 */
.tm-map-list-wrap .prettylink.map:after {
    display: none;
}

/* 34x48 is the pin SVGs' own artboard size, so they render 1:1 here — same
   three SVGs as the map pins and the brand filter list above, see
   jupiter_child_hotel_brands() in functions.php. */
.tm-map-list-wrap .prettyListItems .viewLocationDetail::before {
    content: "";
    flex-shrink: 0;
    width: 34px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/*
 * Order matters here. A few hotels carry both the ECHO Suites and Microtel
 * terms, so more than one of these can match the same row, and CSS has no way
 * to say "first match wins" — the rule written last is the one that lands.
 * Microtel is therefore last, so that a hotel tagged both gets the same pin in
 * the list as it does on the map, where precedence comes from the order of
 * jupiter_child_hotel_brands() in functions.php instead.
 *
 * `~=` matches a whole class token rather than a substring, so these can't be
 * tripped by the `loc-{ID}` class the plugin appends alongside the slugs.
 */
.tm-map-list-wrap .prettyListItems li[class~="marriott"] .viewLocationDetail::before {
    background-image: url("../images/ui-pin-red.svg");
}

.tm-map-list-wrap .prettyListItems li[class~="echosuites"] .viewLocationDetail::before {
    background-image: url("../images/ui-pin-green.svg");
}

.tm-map-list-wrap .prettyListItems li[class~="microtel"] .viewLocationDetail::before {
    background-image: url("../images/ui-pin-blue.svg");
}

/*
 * `.corePrettyStyle.prettylink` is in this chain only to out-specify the
 * plugin's own `.prettyMapList .corePrettyStyle .viewLocationDetail{display:
 * block}` (three classes, and loaded after this file, so anything lighter
 * loses the tie) — without it the row never becomes a flex container and the
 * pin, the title and the distance stack instead of sitting on one line.
 */
.tm-map-list-wrap .corePrettyStyle.prettylink .viewLocationDetail {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 40px 18px 8px;
    text-decoration: none;
    cursor: pointer;
}

.tm-map-list-wrap .viewLocationDetail .smallImage {
    width: 44px;
    height: 44px;
    object-fit: cover;
}

.tm-map-list-wrap .viewLocationDetail span[data-bind*="title"] {
    font-family: var(--tm-font-heading);
    font-weight: 700;
    color: var(--tm-navy);
    text-transform: uppercase;
    font-size: 25px;
    line-height: 1.1;
}

/*
 * The title arrives already split into brand / dash / place — see the
 * `mlp_map_object_filter` that wraps it in functions.php. Only the list treats
 * the three parts differently; the map's info window prints the same string
 * and is inside `.tm-map-list-wrap` too, so these rules stay pinned to
 * `.viewLocationDetail` and leave the info window reading as it always has.
 */
.tm-map-list-wrap .viewLocationDetail .tm-location-dash {
    display: none;
}

.tm-map-list-wrap .viewLocationDetail .tm-location-place {
    margin-left: 22px;
    font-family: var(--tm-font-body);
    font-weight: 400;
    font-size: 24px;
    color: var(--tm-blue-light);
    text-transform: none;
}

.tm-map-list-wrap .viewLocationDetail span[data-bind*="friendlyDistance"] {
    color: var(--tm-text-muted);
    font-size: 14px;
}

/*
 * Title and place take the same brand colour as the row's marker pin above,
 * instead of the flat navy/blue-light they inherit from the base rules —
 * these win on specificity (the brand class plus the attribute selector) so
 * they don't need `!important`. Same ordering caveat as the pin `::before`
 * rules above: a hotel can carry both the ECHO Suites and Microtel terms, so
 * microtel is written last to win that tie the same way the pin does.
 */
.tm-map-list-wrap .prettyListItems li[class~="marriott"] .viewLocationDetail span[data-bind*="title"],
.tm-map-list-wrap .prettyListItems li[class~="marriott"] .viewLocationDetail .tm-location-place {
    color: var(--tm-red);
}

.tm-map-list-wrap .prettyListItems li[class~="echosuites"] .viewLocationDetail span[data-bind*="title"],
.tm-map-list-wrap .prettyListItems li[class~="echosuites"] .viewLocationDetail .tm-location-place {
    color: var(--tm-green);
}

.tm-map-list-wrap .prettyListItems li[class~="microtel"] .viewLocationDetail span[data-bind*="title"],
.tm-map-list-wrap .prettyListItems li[class~="microtel"] .viewLocationDetail .tm-location-place {
    color: var(--tm-blue);
}

.tm-map-list-wrap .viewLocationDetail::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 16px;
    height: 9px;
    margin-top: -4px;
    background: url("../images/ui-arrow.svg") center / contain no-repeat;
    transition: transform 0.2s ease;
}

.tm-map-list-wrap .tm-row-open .viewLocationDetail::after {
    transform: rotate(180deg);
}

.tm-map-list-wrap .mapcategories {
    display: none;
}

/*
 * Expanded panel: thumbnail on the left, the hotel's own copy beside it, and
 * the badges and the View Hotel button sharing one flex-wrapped line
 * underneath that copy.
 *
 * The button is the plugin's markup and is a sibling of `.mapDescription`, not
 * part of it, so it can't simply flow after the badges in markup order.
 * tm-hotels.js relocates the button node into `.tm-location-badges` on render
 * (see `relocateViewHotelButtons`), which is what lets `.tm-location-badges`
 * below lay the three out as one row. Dissolving `.mapDescription` with
 * `display: contents` still drops the thumbnail and the copy into one grid
 * beside each other; the button no longer needs a grid column of its own.
 */
/* `.clearfix` is folded into this selector — the plugin always adds it here —
   to beat its own `.prettyMapList .mapLocationDetail{padding:10px 0}`, which
   ties on specificity and would otherwise win on load order. */
.tm-map-list-wrap .mapLocationDetail.clearfix {
    display: grid;
    grid-template-columns: auto 1fr;
    /* Lines the thumbnail up under the row's title rather than under its pin:
       the link's own 8px, then the pin and the gap that follows it. */
    padding: 0 8px 24px 58px;
}

.tm-map-list-wrap .mapDescription {
    display: contents;
}

/*
 * That `clearfix` class carries `:before`/`:after` rules, and a pseudo-element
 * of a grid container is a grid item like any other — as is one belonging to a
 * `display: contents` element, which keeps its pseudo-elements even though its
 * own box is gone. Left alone, four empty boxes take cells in this grid and
 * push the real content out of place. The float they clear is moot here: grid
 * items don't float.
 */
.tm-map-list-wrap .mapLocationDetail.clearfix::before,
.tm-map-list-wrap .mapLocationDetail.clearfix::after,
.tm-map-list-wrap .mapDescription.clearfix::before,
.tm-map-list-wrap .mapDescription.clearfix::after {
    display: none;
}

/* The plugin's own `.prettyMapList .featuredImage` gives this a border, a
   radius and an inset shadow; the design has a plain square thumbnail.
   Spacing is a margin rather than the grid's `column-gap` so that rows with no
   featured image close the column up instead of keeping a gap for it. */
.tm-map-list-wrap .mapLocationDetail .featuredImage {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin: 0 20px 0 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 3px solid var(--tm-gold);
}

/*
 * Stretching the copy to the full row height (the thumbnail is the tallest
 * thing in it) is what lets `.tm-location-badges` below be pushed to the
 * bottom via its own `margin-top: auto`, landing the badges-and-button row on
 * the thumbnail's bottom edge. The inner div is Knockout's html-binding
 * target, so the flex column has to be repeated on it to reach the badges.
 */
.tm-map-list-wrap .mapLocationDetail .description {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
    color: var(--tm-text-body);
    font-size: 14px;
}

.tm-map-list-wrap .mapLocationDetail .description > div {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tm-map-list-wrap .mapLocationDetail .description p {
    margin: 0;
}

/* The hotel copy leads with a brand logo the design doesn't show — the
   thumbnail beside it is the only image in this panel. */
.tm-map-list-wrap .mapLocationDetail .description p img {
    display: none;
}

.tm-location-badges {
    margin-top: auto;
    padding-top: 12px;
}

/* List row only: the flex row that holds the badge group and (once
   relocateViewHotelButtons() in tm-hotels.js moves it in) the View Hotel
   button, wrapping if the row gets too narrow to fit both. 30px separates
   the button from the badge group; spacing between the badges themselves is
   set on `.tm-badges-group` below instead. */
.tm-map-list-wrap .tm-location-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
}

/* Inner group: just the badges, kept clustered together with their own
   tighter gap regardless of how far the button sits from them. The gap
   replaces `.tm-badge`'s own margin-right for spacing here. */
.tm-map-list-wrap .tm-badges-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.tm-map-list-wrap .tm-badges-group .tm-badge {
    margin-right: 0;
}

.tm-badge {
    display: inline-block;
    margin-right: 8px;
    padding: var(--tm-badge-padding);
    font-family: var(--tm-font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--tm-transparent-grey);
    color: #000;
    letter-spacing: 0.75px;
}

/* .tm-badge--open {
    background: var(--tm-transparent-grey);
    color: var(--tm-text-dark);
}

.tm-badge--coming-soon {
    background: #e5e7eb;
    color: var(--tm-text-body);
}

.tm-badge--managed {
    background: var(--tm-navy);
    color: #fff;
}

.tm-badge--franchised {
    background: var(--tm-transparent-grey);
    color: var(--tm-navy);
} */

/*
 * Once relocated into `.tm-location-badges`, this is just another flex item
 * on that row, sitting beside `.tm-badges-group` rather than the badges
 * themselves — its own `gap: 30px` handles the spacing, so no left margin is
 * needed here. Only `margin-top: 0` still earns its keep, to beat the
 * plugin's own `.prettyMapList .viewLocationPage{margin-top:10px}`
 * (`.corePrettyStyle` is in the chain for the specificity to win that fight)
 * which would otherwise knock it out of line with the badge group beside it.
 */
.tm-map-list-wrap .corePrettyStyle.viewLocationPage {
    margin-top: 0;
    padding: var(--tm-badge-padding);
    background: var(--tm-gold);
    color: var(--tm-navy);
    font-family: var(--tm-font-heading);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    /* The active Map List Pro colour theme (Unboxed_grey.css) sets
       `.prettyMapList .btn{border:1px solid #ccc !important}`. */
    border: none !important;
}

.tm-map-list-wrap .viewLocationPage:hover {
    background: var(--tm-navy) !important;
    color: #fff !important;
}

/* Map info window (InfoBox popup when a pin is clicked) --------------------
 *
 * Map List Pro builds this with the bundled InfoBox library (js/infobox_
 * packed.js), not Google's native InfoWindow — hence the plugin's own class
 * names (`.infoWindowContainer`, `.infoWindow`, `.infowindowContent`) rather
 * than the standard `.gm-style-iw-*` ones. Its outer `.infoWindowContainer`
 * is sized wide purely so the library can center the box over a pin — its
 * background/border/tail are cosmetic chrome laid over that, all of it
 * reset here in favour of `.infoWindow`, the actual visible card. The
 * plugin's own MapListProCore.css sets several of these same properties
 * with equal-or-greater specificity and loads after this file, so `!important`
 * is needed throughout to win rather than tie or lose on load order.
 */

.tm-map .infoWindowContainer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    /* This container is sized to a chunk of the map's own width (see the
       note on .infoWindow below), almost all of it empty space around the
       card — left clickable, that space would sit over the map and block
       clicks on whatever pin is under it. `.infoWindow` opts back in below. */
    pointer-events: none !important;
}

/* The plugin draws its own pointer off the wide container's own horizontal
   centre, which doesn't line up with the (narrower, fixed-width) card once
   it's inset within that container — so it's dropped in favour of a matching
   one hung off .infoWindow itself, see its ::after below. */
.tm-map .infoWindowContainer.infobox::after,
.tm-map .infoWindowContainer.infobox::before {
    display: none !important;
}

/* Close button: tm-hotels.js relocates this from being a floated sibling of
   .infoWindow (where the plugin renders it, `align="right"` against the wide
   container above) to the card's own top-right corner, and adds this class
   so it can be styled here without depending on that container's width. */
/*
 * `close.gif` — the image Map List Pro's bundled InfoBox library hardcodes
 * here (`closeBoxURL` in maplistfront.js) — is Google's own grey, bordered
 * close button, not a plain "X". There's no plugin option for the icon
 * itself, and the click listener the library wires up on this exact node
 * (see the comment on `relocateInfoWindowClose` in tm-hotels.js) rules out
 * swapping it for another element. Hiding the image but keeping its box
 * lets `.infoWindow::before` below draw a plain "X" in the same spot, with
 * clicks still landing on the (invisible, but present) image beneath it.
 * `::before` rather than `::after`: the card already uses `::after` for its
 * own bottom-left pointer tail further down this file, and an element only
 * gets one of each.
 */
.tm-map .infoWindow .tm-info-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    z-index: 5;
    opacity: 0 !important;
    cursor: pointer;
}

.tm-map .infoWindow::before {
    content: "\00d7";
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 6;
    font-family: var(--tm-font-heading);
    font-size: 20px;
    line-height: 1;
    color: #fff;
    opacity: 0.7;
    pointer-events: none;
}

.tm-map .infoWindow:has(.tm-info-close:hover)::before {
    opacity: 1;
}

/* The visible card: navy, rounded, fixed width so the thumbnail (and the
   title's clearance for it, below) can be positioned in px against it.

   `margin-left: 50%` is what actually puts this over the marker. The plugin
   sizes `.infoWindowContainer` to a chunk of the *map's* own width (see
   maplistfront.js, `getInfoWindowsPixelSizes()`) — often several times wider
   than this card — and its `pixelOffset` is `-that width / 2`, which centres
   the marker on that wide container's own midpoint, not on anything inside
   it. Left un-touched, this card sits flush against the container's left
   edge, nowhere near that midpoint. A 50% margin resolves against the width
   of the containing block (the container), so it lands this card's own left
   edge exactly on that midpoint — i.e. on the marker — regardless of the
   map's width or how the plugin's own responsive sizing option is set. */
.tm-map .infoWindow {
    display: inline-block;
    position: relative;
    width: 440px;
    margin-left: 50%;
    /* Extra clearance above the marker: the plugin's own vertical offset
       (pixelOffset.y in maplistfront.js) is fixed in its JS, so this can't be
       adjusted directly — but `.infoWindowContainer` is positioned by its
       `bottom` (alignBottom:true), auto-sized to fit its content, so adding
       space below this card grows the container upward from that same
       anchored bottom edge instead. */
    margin-bottom: 35px;
    box-sizing: border-box;
    padding: 28px;
    background: var(--tm-navy) !important;
    border-radius: 0 !important;
    overflow: visible;
    box-shadow: 0 8px 24px rgba(8, 33, 90, 0.35) !important;
    color: #fff;
    font-size: 14px;
    pointer-events: auto;
}

/* Card's own pointer, hung off its own bottom-left rather than the wide
   container's (see the note above on why the plugin's own tail is hidden) —
   and off the left rather than centre, since the card's left edge is what
   now sits over the marker. */
.tm-map .infoWindow::after {
    content: "";
    position: absolute;
    top: 99%;
    left: 0;
    background-color: var(--tm-navy);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    width: 20px;
    height: 20px;
}

/* Title ---------------------------------------------------------------------
 * `padding-right` clears the thumbnail, which is absolutely positioned
 * (out of flow) against this same card — see img.locationImage below. Sized
 * to the thumbnail's own width (76px) plus a gap. */

.tm-map .infoWindow h3 {
    margin: 0;
    padding: 0 96px 0 0 !important;
    /* Unboxed_grey.css (the plugin's active colour theme) sets a light grey
       background and bottom border on this element for the plugin's default
       white card. */
    background: transparent !important;
    border-bottom: none !important;
    color: #fff !important;
    line-height: 1;
}

.tm-map .infoWindow h3 a {
    text-decoration: none;
}

.tm-map .infoWindow .tm-location-brand {
    display: block;
    font-family: var(--tm-font-heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.35;
}

.tm-map .infoWindow .tm-location-dash {
    display: none;
}

.tm-map .infoWindow .tm-location-place {
    display: block;
    margin-top: 4px;
    font-family: var(--tm-font-heading);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--tm-gold);
    line-height: 1.15;
}

/* Content -------------------------------------------------------------------
 * Card padding already sets the inset on every side, so the content div's own
 * padding (10px in MapListProCore.css) is dropped rather than stacked. */

.tm-map .infoWindow .infowindowContent {
    overflow: visible !important;
    padding: 0 !important;
}

.tm-map .infoWindow .infowindowContent a {
    color: var(--tm-gold);
}

/* The plugin wraps both the thumbnail and the address paragraph in one <a>;
   made block so the address flows under the (absolutely positioned, so
   already out of flow) thumbnail rather than trying to run beside it. */
.tm-map .infowindowContent > a:first-child {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Hotel photo — pinned to the card's own top-right corner (not the row of
   copy beneath it), with the brand-gold underline from the mockup. */
.tm-map .infoWindow img.locationImage {
    position: absolute !important;
    top: 28px !important;
    right: 28px !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    width: 76px !important;
    height: 60px !important;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: cover;
    border: none !important;
    border-bottom: 4px solid var(--tm-gold) !important;
    display: block;
}

/* Brand logo inline in the address paragraph's own markup — not in the
   mockup, which shows only the address text. */
.tm-map .infowindowContent p img {
    display: none !important;
}

.tm-map .infowindowContent p {
    margin: 0 0 14px;
    font-family: var(--tm-font-body);
    font-size: 16px;
    color: #fff;
    letter-spacing: 0;
}

/* Status/Type badges — appended to this same description by the
   `mlp_location_description` filter in functions.php, and reusing the
   `.tm-badge` styling from the expanded list row further up this file.
   Scoped and overridden here because that base styling (navy text on a
   near-transparent grey) reads fine on the row's white background but is
   invisible against this card's navy one. */
.tm-map .infowindowContent .tm-location-badges {
    margin: 0 0 14px;
    padding: 0;
}

.tm-map .infowindowContent .tm-badge {
    background: rgba(0,0,0,0.25);
    color: #fff;
}

/* VIEW HOTEL button. */
.tm-map .infowindowContent .viewLocationPage {
    display: inline-block !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    background: var(--tm-gold) !important;
    color: var(--tm-text-dark) !important;
    font-family: var(--tm-font-heading);
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border: none !important;
}

.tm-map .infowindowContent .viewLocationPage:hover {
    background: #fff !important;
    color: var(--tm-navy) !important;
}

/* CTA banner --------------------------------------------------------------- */

.tm-cta-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 60px;
    background: rgba(0,0,0,0.05);
    max-width: 1640px;
    margin-inline: auto;
    margin-block-end: 140px;
}

.tm-cta-banner h2 {
    margin: 0;
    font-weight: 700;
    color: var(--tm-navy);
    font-size: 25px;
    line-height: 1;
    text-align: center;
}

/* Development opportunity blocks -------------------------------------------- */

/* Full-width background photo (set inline from the template) with the copy
   floated on top — not a grid, since there's no separate image column any
   more. `background-color` is just the fallback for a block with no image. */
.tm-dev-block {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 620px;
    padding: 90px 115px;
    color: #fff;
    background-color: var(--tm-navy);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.tm-dev-block .tm-button:hover {
    background-color: #fff;
    color: var(--tm-navy);
}

/* Flat readability tint over the photo — no longer brand-coloured per block
   now that the navy/green classes are gone, just enough to hold white text
   at any photo brightness. */
.tm-dev-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.tm-dev-block-content {
    position: relative;
    z-index: 1;
    max-width: 860px;
}

/* Copy sits left by default; reverse pushes it to the right instead. */
.tm-dev-block--reverse {
    justify-content: flex-end;
}

.tm-dev-block--reverse .tm-dev-block-content {
    justify-content: flex-end;
}

.tm-dev-block--reverse .tm-dev-block-text {
    justify-self: flex-end;
}

.tm-dev-block--reverse  {
    text-align: right;
}

.tm-dev-block--reverse .tm-dev-block-buttons {
    justify-content: flex-end;
}

/* Grid auto-placement always fills from the start edge, so with fewer than
   4 thumbnails they'd otherwise pack to the left under right-aligned copy.
   `rtl` flips the fill direction to the right; harmless on the images
   themselves, which have no text direction of their own. */
.tm-dev-block--reverse .tm-dev-block-thumbs {
    direction: rtl;
}

.tm-dev-block-text {
    max-width: 490px;
}

.tm-eyebrow {
    display: block;
    margin-bottom: 20px;
    color: var(--tm-gold);
    font-family: var(--tm-font-heading);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tm-dev-block-content h2 {
    margin: 0 0 30px;
    color: #fff;
    font-size: 40px;
    line-height: 1;
}

.tm-dev-block-content p {
    margin: 0 0 50px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
}

.tm-dev-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.tm-dev-block-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 40px;
}

.tm-dev-block-thumb {
    display: block;
    transition: opacity 0.2s ease;
}

.tm-dev-block-thumb:hover,
.tm-dev-block-thumb:focus-visible {
    opacity: 0.8;
}

.tm-dev-block-thumbs img {
    width: 100%;
    height: 125px;
    object-fit: cover;
    border-bottom: 4px solid var(--tm-gold);
}

.tm-map .mapLocationDetail p {
    font-size: 20px;
}

/* Responsive ----------------------------------------------------------------- */

@media (max-width: 1200px) {
    .tm-hotels {
        --padding-inline: 30px;
    }

    .tm-intro-inner{
        gap: 60px;
    }
}

@media (max-width: 991px) {
    .tm-intro-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .tm-map {
        --tm-map-card-inset: 24px;
        --tm-left-spacing: 24px;
    }

    .tm-dev-block {
        min-height: 0;
        padding: 50px 60px;
    }

    /* Left-aligned at any width narrow enough to stack, regardless of the
       desktop reverse side — there's no second column to push the copy
       against any more. */
    .tm-dev-block--reverse {
        justify-content: flex-start;
    }

    .tm-dev-block-content,
    .tm-dev-block--reverse .tm-dev-block-content {
        max-width: none;
        text-align: left;
    }

    .tm-dev-block--reverse .tm-dev-block-buttons {
        justify-content: flex-start;
    }
}

/*
 * Below this the card no longer fits over the map, so the header collapses
 * into a "Filter Our Hotels" toggle (tm-hotels.js flips `.tm-map-filters-open`
 * on click) and the filter card itself floats over the map instead of
 * stacking above it in the page flow.
 *
 * That overlay placement matters beyond just saving space: the card's point
 * cutout and drop shadow (see `.prettyFileBar.clearfix::before` above) are
 * drawn to read as the card sitting on top of the map, and only make sense
 * with the map directly behind them. Stacked in normal flow — which is what
 * this used to do — there's nothing behind the notch but the page background,
 * so the point and its shadow float in the gap above the map looking like a
 * stray graphic. Overlaying keeps the map behind the card at every width, so
 * the same artwork that works on desktop keeps working here.
 */
@media (max-width: 767px) {
    .tm-map {
        --tm-map-height: 400px;
    }

    .tm-map-list-wrap {
        display: flex;
        flex-direction: column;
    }

    .tm-map-sidebar-header {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        margin: 0 24px;
        order: 1;
    }

    .tm-map-sidebar-header-label--full {
        display: none;
    }

    .tm-map-sidebar-header-label--compact {
        display: inline;
    }

    .tm-map-sidebar-header-chevron {
        display: inline-block;
    }

    .tm-map-list-wrap.tm-map-filters-open .tm-map-sidebar-header-chevron {
        transform: rotate(180deg);
    }

    /* Below the desktop width the search bar has room to float on the map at,
       it drops into normal flow instead — a static bar between the toggle
       header (order 1) and the map (order 3) rather than another thing
       overlaid on top of it. */
    .tm-map-list-wrap #Map-List-Search {
        position: relative;
        z-index: auto;
        top: auto;
        right: auto;
        order: 2;
        width: auto;
        max-width: none;
        height: 48px;
        margin: 8px 24px 0;
    }

    .tm-map-list-wrap #Map-List-Search .tm-map-search-submit {
        width: 48px;
    }

    /* Collapsed by default. `!important` matches the base rule above it —
       without it that rule's own `!important` would win on source order
       alone and the card would never hide. */
    .tm-map-list-wrap .prettyFileBar.clearfix {
        display: none !important;
        position: absolute;
        top: var(--tm-map-header-height);
        left: 24px;
        right: 24px;
        width: auto;
        max-height: calc(var(--tm-map-height) - 20px);
        overflow-y: auto;
        /* No point cutout at this width — the desktop padding below reserves
           room for it. */
        padding-bottom: 30px !important;
        /* The card's fill moves here from `::before` because that pseudo is
           part of the scrollable content: with more filters than fit
           `max-height`, it scrolls away with everything else, leaving
           whatever's scrolled into view — Status, most of the time — with no
           white behind it and the map showing through instead. A background
           painted on the scroll container itself has no such problem: its
           default `background-attachment: scroll` keeps it fixed to the box
           rather than the content, so it stays put and covers the full
           height of the scrollport regardless of scroll position. */
        background: #fff;
    }

    /* Higher specificity than the rule above beats its `!important` too. */
    .tm-map-list-wrap.tm-map-filters-open .prettyFileBar.clearfix {
        display: block !important;
    }

    /* The notch cutout this pseudo exists to draw doesn't fit a straight
       bottom edge, and its fill has moved to the parent's own background
       above, so there's nothing left for it to do at this width. */
    .tm-map-list-wrap .prettyFileBar.clearfix::before {
        display: none;
    }

    .tm-map .tm-map-list-wrap .mapHolder {
        order: 3;
        margin-top: 20px;
    }

    .tm-map-list-wrap .prettyMessage {
        order: 4;
        padding: 0 24px;
    }

    .tm-map-list-wrap #ListContainer {
        order: 5;
        padding: 0 24px;
    }
}

@media (max-width: 600px) {
    .tm-hero,
    .tm-intro,
    .tm-cta-banner {
        padding-inline: 24px;
    }

    .tm-dev-block {
        padding-inline: 24px;
    }

    .tm-hero h1 {
        font-size: 32px;
    }

    .tm-dev-block--reverse .tm-dev-block-thumbs {
        direction: ltr;
    }

    .tm-dev-block-thumbs {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Below this the thumbnail and copy no longer fit side by side, so the
       image drops above the content instead of sitting to its left. */
    .tm-map-list-wrap .mapLocationDetail.clearfix {
        grid-template-columns: 1fr;
    }

    .tm-map-list-wrap .mapLocationDetail .featuredImage {
        grid-column: 1;
        grid-row: 1;
        margin: 0 0 16px;
    }

    .tm-map-list-wrap .mapLocationDetail .description {
        grid-column: 1;
        grid-row: 2;
        margin-right: 0;
    }
}

@media (max-width: 500px) {
    /* Too narrow for the brand pin beside the title too, so it's dropped
       rather than shrunk. */
    .tm-map-list-wrap .prettyListItems .viewLocationDetail::before {
        display: none;
    }

    .tm-map-list-wrap .mapLocationDetail.clearfix {
        padding: 0 25px;
    }
}

@media (max-width: 350px) {
    .tm-dev-block-thumbs {
        grid-template-columns: 1fr;
    }
}