/* =========================================================
   Microsite components.
   SOURCE OF TRUTH — main repo, microsite/public_html/css/.

   Loaded AFTER site.css, which is served from the MAIN SITE rather than
   copied into this bundle. site.css supplies the --brand-* token defaults
   and the Gotham @font-face declarations; because CSS url() resolves
   against the stylesheet's own URL, its relative ../fonts/ paths already
   point at the main site. Nothing font-related belongs in this file.

   Everything here is expressed in those tokens, never in literal brand hex,
   so a property palette in config/microsite.php re-themes the whole site
   without touching this file.

   The Bootstrap !important trap still applies: flex and alignment utilities
   are !important and cannot be beaten from here at any specificity. Where
   layout needs to change, change the utility on the element.
   ========================================================= */

/* ---------- Header ---------- */

.ms-navbar {
    background: var(--brand-primary);
    padding-block: .75rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
}

/*
 * The mark is a flex item in the navbar row. Without flex-shrink:0 the row
 * squeezes it when the nav buttons need space — which distorted it into an
 * oval on wider screens, where all five buttons sit on one line and compete.
 * Explicit box plus object-fit:contain means it can never distort: if it is
 * ever given a non-square box the artwork letterboxes instead of stretching.
 */
.ms-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 1rem;
    padding: 0;
    color: #fff;
    text-decoration: none;
}

.ms-brand-mark {
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/*
 * The mark became a <button> when it gained the manager popover, so it needs
 * the default button chrome stripped — a UA background and border would
 * otherwise draw a grey box around the logo on the blue bar.
 *
 * The 48px mark is its own touch target and already clears the 44px minimum,
 * so no min-width/height is added here.
 */
.ms-brand-btn {
    background: none;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* A button must show keyboard focus. :focus-visible rather than :focus so the
   ring does not flash on a mouse click; white to read against the blue bar,
   matching the nav links' own focus treatment. */
.ms-brand-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 50%; /* follows the circular mark rather than boxing it */
}

/*
 * The manager popover.
 *
 * Sized through Bootstrap 5.3's own popover custom properties rather than by
 * overriding .popover rules: these are plain custom props with no !important,
 * so they take effect cleanly (unlike Bootstrap's flex/spacing utilities).
 * The default 276px max-width sets this much copy as a narrow column.
 */
.ms-brand-popover {
    --bs-popover-max-width: 22rem;
    --bs-popover-body-padding-x: 1.25rem;
    --bs-popover-body-padding-y: 1.25rem;
    --bs-popover-font-size: .875rem;
}

/*
 * Steamboat Hospitality lockup at the top of the panel.
 *
 * max-width:100% + height:auto against the markup's intrinsic 234x96: it draws
 * at native size in the 352px panel and scales down proportionally when the
 * panel narrows, with no upscaling at any width. The intrinsic pair carries the
 * real ratio, so nothing reflows as the file arrives — the same requirement as
 * the hero logos, for the same reason.
 */
.ms-brand-pop-logo {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: .75rem;
}

.ms-brand-pop-text {
    margin-bottom: .875rem;
    line-height: 1.5;
    color: var(--brand-ink-2);
}

/* Buttons wrap rather than overflow the panel on a narrow screen, where
   22rem is wider than the viewport allows and Bootstrap shrinks the panel. */
.ms-brand-pop-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* A real link, never revealed by hover: touch screens have no hover, so a
   hover-gated control is invisible on every phone and tablet. 44px minimum
   touch target. */
.ms-phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    margin-right: .5rem;
    color: #fff;
}

.ms-toggler {
    border-color: rgba(255, 255, 255, .5);
    min-width: 44px;
    min-height: 44px;
}
.ms-toggler .navbar-toggler-icon {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/*
 * Nav items are outlined buttons: white outline and white text at rest,
 * inverting to a white fill with blue text on hover, focus and for the
 * current page.
 *
 * The selector matches the specificity of site.css's own
 * .navbar-nav > .nav-item > .nav-link pill rule and wins by load order,
 * which is why microsite.css must stay after site.css in the layout.
 *
 * Sizing is matched to the main site's desktop top nav so the two headers feel
 * like one family: font-size .775rem, padding .45rem 1rem, margin 0 .15rem,
 * radius .375rem and the same .15s ease-in-out transition
 * (see site.css, the "Top-level nav links: outline button treatment" block).
 *
 * The colours are inverted against the main site's: a white outline on the blue
 * bar, where the main site uses a blue outline on white.
 *
 * Both navs are uppercase, but by different means. The main site types its
 * labels in caps in the template (_header.html.twig: "LODGING OPTIONS"); this
 * one uses text-transform, so the Twig source keeps readable title-case labels
 * and reversing the decision is one line here rather than an edit per link.
 * The letter-spacing exists because of the caps: at .775rem, all-caps without
 * it sets too tight.
 *
 * The 44px touch minimum is not dropped, it moves to the drawer below lg —
 * that is the layout a finger actually uses.
 */
.ms-nav > .nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
    padding: .45rem 1rem;
    margin: 0 .15rem;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: .375rem;
    background: transparent;
    color: #fff;
    font-size: .775rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out;
}

/* :focus-visible rather than :focus so the fill does not flash on a mouse
   click, and the keyboard ring stays visible against the white fill. */
.ms-nav > .nav-item > .nav-link:hover,
.ms-nav > .nav-item > .nav-link:focus-visible,
.ms-nav > .nav-item > .nav-link:active,
.ms-nav > .nav-item > .nav-link.active {
    background: #fff;
    border-color: #fff;
    color: var(--brand-primary);
}
.ms-nav > .nav-item > .nav-link.active { font-weight: 600; }
.ms-nav > .nav-item > .nav-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Five buttons plus the phone line is tight between lg and xl; wrapping is
   the graceful failure, and the gap keeps the outlines from touching. */
.ms-nav {
    flex-wrap: wrap;
    row-gap: .35rem;
}

/* The count sits inside parentheses in the markup — "Favorites (0)" — so it is
   plain text, not a pill. It must inherit colour: the nav buttons invert to a
   white fill with blue text on hover and when active, and a fixed colour here
   would leave the number unreadable in one of those two states. */
.ms-fav-count {
    font-variant-numeric: tabular-nums;
    color: inherit;
}

.ms-phone-line {
    color: rgba(255, 255, 255, .85);
    font-size: .8125rem;
    /* The number is one token — letting it break mid-digits reads as two
       different numbers. */
    white-space: nowrap;
}
.ms-phone-line a { color: #fff; font-weight: 600; }

/*
 * At lg and up the phone line sits ABOVE the buttons rather than beside them.
 * Side by side, five buttons plus a ~230px phone line overflows the container
 * below about 1400px and the nav wraps to a ragged second row. Stacking gives
 * the buttons the full width and holds one clean row all the way down to the
 * breakpoint. It also matches the main site's header treatment.
 */
@media (min-width: 992px) {
    .ms-offcanvas .offcanvas-body {
        flex-direction: column;
        align-items: flex-end;
        gap: .5rem;
    }
    /* Visually first, but left after the nav in the DOM: the links are the
       primary navigation and should come first for a screen reader. */
    .ms-phone-line { order: -1; }
}

/* The offcanvas drawer only exists below lg; above it the panel is inline. */
.ms-offcanvas .offcanvas-header { background: var(--brand-primary); color: #fff; }
.ms-offcanvas .btn-close        { filter: invert(1) grayscale(100%) brightness(200%); }
@media (max-width: 991.98px) {
    .ms-offcanvas          { background: var(--brand-primary); }
    /* In the drawer the buttons stack, so let them fill the width — and this
       is the touch layout, so the 44px minimum target applies here. */
    .ms-nav > .nav-item                { width: 100%; }
    .ms-nav > .nav-item > .nav-link {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        margin-inline: 0;
        padding-block: .5rem;
    }
}

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

.ms-hero {
    position: relative;
    min-height: 30rem;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-color: var(--brand-primary);
}
.ms-hero--plain { min-height: 18rem; }

.ms-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .65) 100%);
}

.ms-hero-inner  { position: relative; padding-block: 2.5rem; color: #fff; }
.ms-hero-title  { font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 700; margin-bottom: .5rem; }
.ms-hero-sub    { font-size: 1.125rem; opacity: .9; margin-bottom: 1.5rem; }

/*
 * Centred variant: the property logo, then the availability form directly
 * beneath it, both centred on the hero photo.
 *
 * The logo keeps intrinsic width and height attributes in the markup. A logo
 * sized by width with height:auto has no aspect ratio until it loads, so the
 * hero measures short and everything below it jumps — an intermittent race
 * that is miserable to reproduce.
 */
.ms-hero--center                 { align-items: center; text-align: center; }
.ms-hero--center .ms-hero-inner  { display: flex; flex-direction: column; align-items: center; }

/*
 * The home hero's logo box.
 *
 * Both the height and the margin are overridden here, because the base box is
 * sized for a static-page hero and the home hero is a different room: 30rem of
 * full-bleed photo rather than a 310px title strip. The base cap of 150px left
 * the mark looking like a caption on it, and the 1.25rem gap put it right on
 * top of the search form.
 *
 * 280px at the ceiling is not arbitrary — it restores what the old
 * `.ms-hero-logo { width: min(420px, 78vw) }` actually produced for a 1.54:1
 * logo (420 / 1.54 = 273px tall) without going back to sizing by width, which
 * is what broke for the other ten property logos. The img's own
 * `max-width: min(420px, 78vw)` still caps the horizontal side, so a very wide
 * mark like Bronze Tree's 6.38:1 hits that cap before this height.
 *
 * Scoped to .ms-hero so the static-page heroes on /specials, /specials/{slug},
 * /contact and /check-in keep the smaller box they were designed around.
 */
.ms-hero .ms-hero-logo-box {
    height: clamp(180px, 21vw, 280px);
    margin: 0 auto 2rem;
}

/*
 * Property logo over a static-page hero (/specials, and any other page that
 * reuses that shell).
 *
 * Sized to a fixed BOX rather than a fixed width, because the eleven property
 * logos have wildly different proportions — 0.92:1 for Chateau Chamonix up to
 * 6.38:1 for Bronze Tree. A shared `width: 420px` would render one of them
 * 66px tall and another 457px tall, the latter overflowing the 310px title
 * box. Capping the HEIGHT and letting width follow keeps every logo inside the
 * hero at a comparable visual weight.
 *
 * The box is also what makes width/height attributes unnecessary on the img.
 * Per the home-header lesson, a logo sized by width with height:auto needs
 * intrinsic attributes or the layout measures short and jumps — but a shared
 * template has no one correct pair to declare. A fixed-height box reserves the
 * vertical space before the file arrives, which is the only axis that can move
 * the hero; width settling horizontally inside it is invisible.
 *
 * max-width is the guard for the wide wordmarks: with it, a 6.38:1 logo stops
 * growing at 420px and simply sits shorter than the box instead of bleeding
 * out of the hero. object-fit is NOT used — both axes are max-* constraints on
 * an auto-sized image, so it scales proportionally on its own.
 */
/* The clamp is mostly floor-and-ceiling, not fluid: 11vw only clears the floor
   above ~1020px, so on a phone the floor is what actually governs. It is set to
   a size that still reads as the property's mark rather than a decoration —
   measured at 112px tall / 172px wide on a 385px viewport. */
.ms-hero-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(112px, 11vw, 150px);
}

.ms-hero-logo-box img {
    max-height: 100%;
    max-width: min(420px, 78vw);
    width: auto;
    height: auto;
    display: block;
}

/*
 * Centre a static-page hero overlay at EVERY width.
 *
 * site.css centres .static-page-hero-title on small screens and then switches
 * it to justify-content: flex-start / text-align: left at 768px, which is right
 * for the main site — those heroes carry a page heading, and a heading belongs
 * on the same left margin as the copy beneath it. A property logo is artwork,
 * not a heading, and reads as misplaced pinned to that margin.
 *
 * Written as a modifier class applied in the template rather than an override
 * of .static-page-hero-title itself: that selector is shared with every static
 * page on the main site and with the promotion landing pages, so redefining it
 * here would silently re-align heroes this page has nothing to do with.
 *
 * The doubled selector is deliberate. site.css sets flex-start inside a
 * @media (min-width: 768px) block, and a media query adds no specificity — so a
 * single .ms-hero-title-center (0,1,0) would win only by load order. Qualifying
 * it with the class it modifies makes it (0,2,0) and independent of which
 * stylesheet is linked first. text-align rides along for the no-logo text
 * fallback, whose last line would otherwise stay left-aligned when it wraps.
 */
.static-page-hero-title.ms-hero-title-center {
    justify-content: center;
    text-align: center;
}

/*
 * The rule under the hero photo, in Steamboat Blue rather than site.css's
 * lighter --brand-link.
 *
 * Two elements, because it is one visible line drawn by different borders at
 * different widths: at md+ the content card has no border and the hero's own
 * border-bottom shows in the gutters either side of the card; below md the card
 * is full-bleed and pulled up over that border, so what sits under the photo is
 * the card's border-top. Recolouring only one of them would leave the line
 * bright blue on phones and navy on desktop.
 *
 * Scoped on .microsite (always on the body in microsite/layout.html.twig) for
 * two reasons: it documents that this is the microsite's treatment, not a
 * change to the main site's static pages, and at (0,2,0) it outranks site.css's
 * (0,1,0) regardless of stylesheet order.
 *
 * border-*-color only, never the shorthand: site.css drops the card's border
 * entirely at md+ with `border: none`, and a longhand colour cannot resurrect a
 * border whose style is none — which is exactly the behaviour wanted here.
 */
.microsite .static-page-hero {
    border-bottom-color: var(--brand-primary);
}

.microsite .static-page-content {
    border-top-color: var(--brand-primary);
}

/* ---------- Contact page ---------- */

/*
 * The bordered box around the contact form.
 *
 * This is the treatment the main site's /email-us gives the same form, written
 * as a class because that page hard-codes it as an inline style
 * (templates/pages/email-us.html.twig) and there was nothing to reuse. Values
 * match it: 1px #c8cdd2, .5rem radius, 2.5rem/3rem padding. The `shadow` comes
 * from the Bootstrap utility in the markup, as it does there.
 *
 * The padding drops on small screens — 3rem of side padding inside a card that
 * already has its own 2rem leaves a phone about half its width for the inputs.
 */
.ms-contact-box {
    border: 1px solid #c8cdd2;
    border-radius: .5rem;
    padding: 2.5rem 3rem;
}

@media (max-width: 575.98px) {
    .ms-contact-box {
        padding: 1.25rem;
    }
}

/*
 * The form's submit button, branded.
 *
 * _contact-form.html.twig is SHARED with the main site and renders a plain
 * Bootstrap `btn btn-primary`, which nothing in site.css themes — so it is
 * #0d6efd, a blue that belongs to no palette here. Scoping on .microsite (a
 * body class set in microsite/layout.html.twig) brands it on the eleven
 * property sites without touching either the shared partial or the live main
 * site, whose off-brand button is a separate decision.
 *
 * --brand-accent to match .promo-landing-btn and .ms-btn-primary: on these
 * sites red is the "do the thing" colour, and a form submit is that.
 *
 * Bootstrap's .btn-primary sets colour with plain declarations (not
 * !important), so a (0,2,0) selector loaded after it wins cleanly. The
 * :hover/:focus pair has to be restated — Bootstrap's own hover rule would
 * otherwise put the default blue back on hover only, which looks like a bug.
 */
.microsite .btn-primary {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
    font-weight: 600;
}

.microsite .btn-primary:hover,
.microsite .btn-primary:focus,
.microsite .btn-primary:active {
    background-color: var(--brand-accent-hover-2);
    border-color: var(--brand-accent-hover-2);
    color: #fff;
}

/*
 * The outline variant, for the "Get Directions" button beside the phone ones.
 * Same reason and same scoping as above: Bootstrap's .btn-outline-primary is
 * its own blue, and site.css themes neither variant.
 */
.microsite .btn-outline-primary {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
    font-weight: 600;
}

.microsite .btn-outline-primary:hover,
.microsite .btn-outline-primary:focus,
.microsite .btn-outline-primary:active {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
}

/*
 * "Other Ways to Contact Us" details under the form.
 *
 * Only the address rule remains. .ms-contact-aside, -heading and -phone are
 * gone: they were written for a sidebar layout that /contact no longer uses —
 * it now follows the main site's /email-us model, where the headings and phone
 * numbers take their styling from the shared static-page classes in site.css.
 */
/* <address> is italic by default in every browser; a postal address is not a
   citation, so put it back to normal. */
.ms-contact-address {
    font-style: normal;
    line-height: 1.6;
}

/*
 * The hero's form column. Capped so the form stays a card rather than a
 * full-bleed band on a large screen.
 *
 * The flex column is the CENTRING, and it belongs here rather than only on the
 * inner wrapper. Several site.css pieces — .hero-search and
 * .hero-search-tagline among them — are sized with a max-width and
 * `margin: … 0 0`, i.e. no auto side margins, because on the main site they are
 * centred by a flex parent (.hero-search-overlay, align-items:center). Dropped
 * into a plain block they sit flush left with all the slack on the right, and
 * a centre-aligned box of text then reads as off-centre. Centring the container
 * fixes every such child at once instead of one at a time.
 */
.ms-hero-search {
    width: 100%;
    max-width: 52rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Sits on .hero-search-tagline, which already supplies the centred, light
   treatment; this only lifts it enough to read as a call to action. */
.ms-hero-prompt {
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}
.ms-hero-prompt a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .15em;
}
.ms-hero-prompt a:hover,
.ms-hero-prompt a:focus-visible { text-decoration-thickness: 2px; }

/* ---------- Search form ----------
   The form itself is styled by site.css's .hero-search* rules, shared with
   the main site's home page. Only the wrapper differs per variant, so a
   restyle there reaches every property site with no change here. */

/*
 * Over the hero photo: site.css already gives .hero-search its translucent
 * dark card, so the wrapper only has to centre it.
 *
 * The flex column IS the centring. site.css caps .hero-search at max-width
 * 750px with margin 0, and on the main site it is centred by its flex parent
 * (.hero-search-overlay, align-items:center). A plain block wrapper leaves it
 * flush left with the slack all on the right — visibly off-centre at every
 * width from 414px up.
 *
 * Scoped to the hero variant on purpose: the inline variant is a page-level
 * search bar and should stay left-aligned with the heading above it.
 */
.ms-searchwrap--hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;   /* a flex item shrinks to content without this */
}
.ms-searchwrap--hero .ms-searchform {
    pointer-events: auto;
    width: 100%;
}

/*
 * On a white page that translucent-dark card would be unreadable, so the
 * inline variant repaints it as a light panel. Same fields, same metrics.
 */
.ms-searchwrap--inline .ms-searchform {
    background: var(--brand-chip-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--brand-chip-border);
    box-shadow: none;
    /*
     * Fill the column. site.css gives .hero-search `width: 90%` because on the
     * main site that form is centred over a hero photo, where the 10% inset is
     * the design. Inside a content column it just leaves the form short of the
     * page it sits on — most obviously on a phone, where 90% of an already
     * narrow column reads as a mistake.
     *
     * The `max-width: 750px` from .hero-search is deliberately NOT cleared:
     * that cap is what stops the form stretching the full width of a wide
     * desktop container, and at 750px it is already wider than any viewport
     * this rule changes. So this is a phone and tablet fix that leaves desktop
     * rendering byte-identical.
     */
    width: 100%;
}
.ms-searchwrap--inline { margin-bottom: 1.5rem; }

/* ---------- Legacy inline bar (unused once every page uses the form above) ---------- */

.ms-search-active {
    margin: .75rem 0 0;
    font-size: .875rem;
    color: var(--brand-ink-2);
}

/* ---------- Sections ---------- */

/*
 * Sections sit on the page background — no alternating tint. The bands drew
 * more attention to the seams than to the content, and with Amenities gone the
 * only one still showing was Location.
 */
.ms-section { padding-block: 2rem; }

/* The marquee runs edge to edge and needs no vertical padding of its own — its
   blue rules are the separation. */
.ms-section.ms-gallery { padding-bottom: 0; }

.ms-section-heading {
    font-size: clamp(1.375rem, 3vw, 1.875rem);
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 1.25rem;
}

.ms-btn {
    display: inline-block;
    min-height: 44px;
    padding: .625rem 1.5rem;
    border-radius: .375rem;
    font-weight: 600;
    text-decoration: none;
}
.ms-btn-primary { background: var(--brand-accent); color: #fff; }
.ms-btn-primary:hover,
.ms-btn-primary:focus { background: var(--brand-accent-hover); color: #fff; }

.ms-about-cta { margin-top: 1.5rem; }

/* ---------- Photo marquee ---------- */



/*
 * Full-bleed strip that drifts right to left and wraps seamlessly.
 *
 * No breakout needed, and deliberately no 100vw: the section is already full
 * width and only its heading is wrapped in a .container, so this block fills
 * the page on its own. 100vw was tried and INCLUDES the scrollbar gutter, which
 * made the element wider than the content area and gave the page 8px of
 * horizontal overflow on any desktop browser that reserves that space.
 */
.ms-marquee {
    overflow: hidden;
    /*
     * White, deliberately. Some of Track's source photos carry white padding
     * baked into the file — it is in the image, not added by the proxy — so a
     * tinted strip renders those as visible bands. On white they blend, and no
     * photo has to be cropped to hide someone else's letterboxing.
     */
    background: #fff;

    /* Steamboat Blue rules top and bottom, containing the full-bleed strip.
       The token rather than the literal, so a property palette re-themes them
       along with everything else. */
    border-top: 4px solid var(--brand-primary);
    border-bottom: 4px solid var(--brand-primary);
}

/*
 * The track holds TWO identical copies of the photo set, so translating it by
 * exactly -50% lands the second copy precisely where the first started and the
 * restart is invisible. Any other distance would visibly jump.
 *
 * The duration is set in JS from the measured strip width so the drift speed is
 * constant in pixels per second no matter how many photos a property has —
 * Antlers has 25, others have fewer, and a fixed duration would make them race.
 */
.ms-marquee-track {
    display: flex;
    width: max-content;
    animation: ms-marquee-scroll 120s linear infinite;
    will-change: transform;
}

@keyframes ms-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Pause on hover and while a photo has keyboard focus, so the strip holds still
   when someone is actually trying to look at or click a picture. */
.ms-marquee:hover .ms-marquee-track,
.ms-marquee:focus-within .ms-marquee-track {
    animation-play-state: paused;
}

.ms-marquee-set { display: flex; }

/*
 * Butted together: no gap, no radius. Fixed height with auto width lets each
 * photo keep its own aspect ratio while the strip stays level.
 */
.ms-marquee-item {
    flex: 0 0 auto;
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: zoom-in;
}

.ms-marquee-item img {
    display: block;
    height: 15rem;          /* 240px at the default root size */
    width: auto;
    max-width: none;   /* beats the global img{max-width:100%}, which would squash the strip */
    border-radius: 0;
    object-fit: cover;
}

.ms-marquee-item:focus-visible {
    outline: 3px solid var(--brand-link);
    outline-offset: -3px;
}

@media (max-width: 767.98px) {
    .ms-marquee-item img { height: 10rem; }   /* 160px */
}

/*
 * Anyone who has asked their OS to reduce motion gets a static, scrollable
 * strip instead of a moving one. Hiding the duplicate set stops the same photo
 * being announced twice once it is no longer a wrap buffer.
 */
@media (prefers-reduced-motion: reduce) {
    .ms-marquee-track { animation: none; }
    .ms-marquee       { overflow-x: auto; }
    .ms-marquee-set + .ms-marquee-set { display: none; }
}

/*
 * The hero photo cells are <button> so they are keyboard-operable — the main
 * site uses <a> because it links to a photo URL. A button arrives with the
 * user agent's own border, radius and background, which showed as a bevelled
 * edge on every one of the five photos. site.css's .prop-hero-cell never has
 * to reset those, so it is done here.
 */
.prop-hero-cell {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    line-height: 0;
}
.prop-hero-cell:focus-visible {
    outline: 3px solid var(--brand-link);
    outline-offset: -3px;
}

/* ---------- Availability calendar ---------- */

/*
 * Three months at the widest, two at tablet, one on a phone — the same
 * breakpoints the pager in microsite.js uses to decide how many to reveal.
 * The two must agree: the JS hides everything outside its window, so a CSS
 * grid that fitted four would simply leave a gap.
 */
.prop-cal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
}
@media (min-width: 576px)  { .prop-cal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .prop-cal-grid { grid-template-columns: repeat(3, 1fr); } }

/* The pager sits either side of the months. */
.prop-cal-nav-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.prop-cal-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--brand-chip-border);
    border-radius: 50%;
    background: #fff;
    color: var(--brand-primary);
    cursor: pointer;
}
.prop-cal-btn:hover:not(:disabled),
.prop-cal-btn:focus-visible:not(:disabled) {
    border-color: var(--brand-link);
    color: var(--brand-link);
}
/* Disabled rather than hidden at the ends, so the control does not jump. */
.prop-cal-btn:disabled { opacity: .35; cursor: default; }

/*
 * Features and amenities carry NO styling here on purpose. Both sections use
 * the main site's .prop-features-list / .prop-amenity-* classes from the shared
 * site.css, so there is one source of truth for how they look. Do not add local
 * overrides — change site.css and every property site follows.
 */

/* ---------- Guest reviews carousel ---------- */

/*
 * Full-bleed backdrop photo. No 100vw and no breakout: this section is already
 * a direct child of <main>, so it fills the page on its own. 100vw would include
 * the scrollbar gutter and give the page horizontal overflow.
 */
.ms-reviews {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: var(--brand-primary);
    padding-block: 4rem;
    margin-block: 2rem;
    overflow: hidden;

    /*
     * Same 4px Steamboat Blue rules as the photo carousel. They read against
     * the section rather than vanishing into it because a border sits OUTSIDE
     * the padding box — the scrim is inset:0, which resolves to the padding
     * box, so it never paints over these. The rules are therefore full-strength
     * brand primary against the scrimmed photo behind them.
     */
    border-top: 4px solid var(--brand-primary);
    border-bottom: 4px solid var(--brand-primary);
}

/*
 * Steamboat Blue scrim. A separate layer painted with the TOKEN at reduced
 * opacity, rather than an rgba() literal, so a property palette re-tints the
 * photo along with the rest of the site.
 */
.ms-reviews-scrim {
    position: absolute;
    inset: 0;
    background: var(--brand-primary);
    /* Enough to hold white text at AA over a bright snow photo, but light
       enough that the photograph still reads as a photograph. */
    opacity: .74;
}

.ms-reviews-inner { position: relative; }

/* Carries the text over the bright patches of the photo so the scrim does not
   have to be heavy enough to flatten the image. */
.ms-reviews-inner :is(h2, h3, blockquote, p, .ms-carousel-stars) {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.ms-reviews-heading { color: #fff; text-align: center; margin-bottom: 1.5rem; }

/* ---------- Carousel mechanics ---------- */

.ms-carousel {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* The window. One slide wide; the track slides behind it. */
.ms-carousel-viewport {
    flex: 1 1 auto;
    overflow: hidden;
}

/*
 * Transform, not scroll position: a transform stays on the compositor and
 * cannot be knocked out of step by a stray scroll, which is the failure mode
 * scroll-snap has with JS-driven paging.
 */
.ms-carousel-track {
    display: flex;
    transition: transform .35s ease;
    will-change: transform;
}

/*
 * Every slide is as tall as the TALLEST review, because they all sit in one
 * flex row. That is deliberate — a carousel that resizes as you page through
 * it shoves the rest of the page around on every click. The content is centred
 * vertically so a short review sits in the middle of the band instead of
 * stranded at the top of it, which is the alternative to truncating someone's
 * review mid-sentence.
 */
.ms-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;          /* a flex item will not shrink below its content without this */
    padding: 0 1rem;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ms-carousel-stars { color: #fff; margin-bottom: .75rem; }
.ms-carousel-stars svg { margin: 0 1px; }

.ms-carousel-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .5rem;
}

.ms-carousel-quote {
    margin: 0 auto .875rem;
    max-width: 52rem;
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.7;
    color: #fff;
}
.ms-carousel-quote::before { content: '\201C'; }
.ms-carousel-quote::after  { content: '\201D'; }

.ms-carousel-meta {
    margin: 0;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .8);
}

/*
 * Arrows are real buttons and always rendered — never hover-revealed, since a
 * touch screen has no hover. 44px minimum target.
 */
.ms-carousel-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ms-carousel-arrow:hover,
.ms-carousel-arrow:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--brand-primary);
}
.ms-carousel-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ms-carousel-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

/*
 * The dot itself is small, but its BUTTON is a full 44px target with the visible
 * dot centred inside — a 10px tap target would be unusable on a phone.
 */
.ms-carousel-dot {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}
.ms-carousel-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    transition: background-color .15s ease, transform .15s ease;
}
.ms-carousel-dot:hover::before     { background: rgba(255, 255, 255, .75); }
.ms-carousel-dot.is-active::before { background: #fff; transform: translate(-50%, -50%) scale(1.35); }
.ms-carousel-dot:focus-visible     { outline: 2px solid #fff; outline-offset: -8px; border-radius: 50%; }

@media (max-width: 575.98px) {
    .ms-carousel-quote { font-size: .9375rem; }
    .ms-carousel-slide { padding: 0 .25rem; }
    .ms-carousel-dots  { gap: 0; }
}

/* Someone who has asked their OS to reduce motion gets an instant change
   rather than a slide. */
@media (prefers-reduced-motion: reduce) {
    .ms-carousel-track { transition: none; }
}
/* ---------- Location ---------- */

.ms-location-address { font-style: normal; color: var(--brand-ink-2); margin-bottom: 1rem; }
.ms-location { padding-bottom: 0rem; }
/*
 * Full-window location map. .prop-map-wrap supplies the height and the frame;
 * this strips the rounded corners and the side border, which read as a mistake
 * on an element that runs edge to edge. Taller than the boxed version because
 * a full-width map at 360px is a letterbox slot.
 *
 * No 100vw: this is already a direct child of a full-width section, and 100vw
 * would include the scrollbar gutter and overflow the page.
 */
.ms-map-full {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    margin-bottom: 0;
    height: 460px;
}
@media (max-width: 767.98px) {
    .ms-map-full { height: 320px; }
}

/* Boxed map, still used by the unit and check-in pages. */
.ms-map {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    border-radius: .5rem;
    background: var(--brand-chip-bg);
}

/* ---------- Unit grid ---------- */

.ms-type-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.ms-type-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .5rem 1rem;
    border: 1px solid var(--brand-chip-border);
    border-radius: 999px;
    background: #fff;
    color: var(--brand-ink);
    text-decoration: none;
    font-size: .9375rem;
}
.ms-type-btn:hover,
.ms-type-btn:focus     { border-color: var(--brand-link); color: var(--brand-link); }
.ms-type-btn.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }

.ms-empty {
    padding: 2rem 0;
    color: var(--brand-ink-2);
}

/* ---------- Footer ---------- */

/*
 * Same ground as the main site's .site-footer, from the shared --footer-bg
 * token rather than a second literal, so the two can never drift apart.
 *
 * NOT var(--brand-ink), which is what this used to be: that token is themeable
 * per property, and the footer is the one band that should look the same on all
 * twelve origins — it is where the operator signs the page, not where the
 * property brands it.
 */
.ms-footer {
    background: var(--footer-bg);
    color: rgba(255, 255, 255, .85);
    padding-top: 3rem;
}

/*
 * Headings and link lists come from site.css's own .footer-heading and
 * .footer-list, which are unscoped rather than nested under .site-footer — so
 * this footer and the main site's are one design. The old ms-footer-heading /
 * ms-footer-links / ms-footer-contact rules that used to live here are gone
 * with the markup that carried them; do not reintroduce them.
 *
 * The one thing that IS scoped over there is the follow-on heading spacing,
 * `.site-footer .footer-heading:not(:first-child)`. Repeated here for the same
 * effect, because a column with a heading after a list needs the air.
 */
.ms-footer .footer-heading:not(:first-child) {
    margin-top: 1.75rem;
}

/* <address> is italic by default in every browser; a postal address is not a
   citation. Font size follows .footer-list so the address and the phone lines
   under it read as one block. */
.ms-footer-address {
    font-style: normal;
    font-size: .78rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .75);
    margin-bottom: .75rem;
}

/*
 * Management lockup, floated right so the blurb wraps around it — the same
 * arrangement as the main site's .footer-circle-logo, with a width suited to a
 * wide lockup rather than a circle.
 *
 * No box wrapper here, unlike the hero logos: the markup declares the file's
 * real 937x379 ratio as width/height attributes, which reserves the space just
 * as well and is only possible because this is ONE fixed file. The eleven
 * property logos have no single correct pair, which is why they use a box.
 *
 * max-width keeps it from dominating the column once it stacks full width on a
 * phone, where a floated 170px image beside a short heading looks accidental.
 */
.ms-footer-mgmt-logo {
    float: right;
    width: 170px;
    max-width: 40%;
    margin: 0 0 1rem 1.5rem;
    /* block, so the anchor is the floated box itself and the whole lockup is
       the click target rather than just the alt text's line box. line-height:0
       kills the descender gap an inline img would leave under it. */
    display: block;
    line-height: 0;
}

.ms-footer-mgmt-logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* A logo link still has to show keyboard focus. White to read against the
   footer's near-black ground, matching the nav's own treatment. */
.ms-footer-mgmt-logo:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* The three footer buttons. gap rather than margins so the row spaces evenly
   however many wrap onto a second line. */
.ms-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}


/*
 * The eleven-property directory.
 *
 * Multi-column rather than a grid: the names vary a lot in length, and columns
 * let the browser balance them instead of leaving a short name alone in a wide
 * cell. column-count rather than column-width so the count is predictable at
 * each breakpoint.
 */
/*
 * Set off by a lighter ground rather than a rule.
 *
 * A hairline border read as a divider between two halves of one footer; a band
 * reads as a distinct thing, which is what this is — a directory of sibling
 * sites rather than more of this site's own navigation.
 *
 * FULL BLEED, so the markup places this element OUTSIDE the footer's
 * container-xl and puts a second container-xl inside it. A background cannot
 * escape its own box: left in the container it stopped at the gutters, which
 * read as a floating panel rather than a band. No border-radius and no
 * horizontal padding here for the same reason — the inner container owns the
 * gutters, and a radius on a full-width band just clips its own corners.
 *
 * It runs flush into the white legal band below, which is why
 * .ms-footer .footer-legal drops its top margin.
 */
.ms-footer-network {
    margin-top: 2.5rem;
    /* 3rem to match .ms-footer's own padding-top, so the band has the same
       breathing room inside its ground that the column section has inside
       its own. Keep the two in step if either changes. */
    padding-block: 3rem;
    background: var(--footer-bg-offset);
}

/*
 * One running comma-separated line rather than columns.
 *
 * Inline list items with the separator as an ::after on each one: attaching the
 * comma to its own item is what keeps it from wrapping to the start of the next
 * line, which is exactly what a standalone separator element would do. Drawn in
 * CSS because it is punctuation between links, not content — the <ul> is what
 * actually carries the structure.
 *
 * Extra line-height because a wrapped run of links with no vertical rhythm of
 * its own sets too tight to scan.
 */
.ms-footer-network-list {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.9;
}

.ms-footer-network-list li {
    display: inline;
    /* site.css gives .footer-list li a bottom margin for stacked lists; an
       inline box ignores it, but zero it so the intent is not ambiguous. */
    margin: 0;
    /* Break BETWEEN names, never inside one — "Steamboat Gondola / Residences"
       split across two lines reads as two properties. The line still wraps at
       the commas, and the longest name here is comfortably narrower than the
       smallest viewport, so this cannot cause overflow. */
    white-space: nowrap;
}

.ms-footer-network-list li:not(:last-child)::after {
    content: ",";
    margin-right: .3em;
    color: rgba(255, 255, 255, .45);
}

/*
 * The portfolio-wide search line under the property run.
 *
 * White rather than the .75 muted the links above use: it is the one call to
 * action in this band, and it has to separate itself from ten property names
 * set in the same size.
 *
 * Carries a standing underline, unlike .footer-list a, which only draws one on
 * hover. In a list, position makes it obvious the items are links; a sentence
 * of prose gives no such signal, so the underline is what marks it as one at
 * all. The hover colour matches the lists above so the two still feel related.
 */
.ms-footer-network-cta {
    margin: 1.25rem 0 0;
    font-size: .78rem;
}

.ms-footer-network-cta a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding-bottom: 2px;
}

.ms-footer-network-cta a:hover,
.ms-footer-network-cta a:focus-visible {
    border-bottom-color: var(--brand-footer-underline);
}
/* ---------- 404 ---------- */

/*
 * Centred and measure-capped. The container is container-xl for consistency
 * with every other page; this caps the reading width inside it rather than
 * letting three short links stretch across 1320px.
 *
 * 46rem rather than a tighter measure, which is set by the LAST line — the
 * "Looking for a different Steamboat Springs property?" sentence runs about
 * 640px, and at 34rem it wrapped onto two lines on a desktop for no reason.
 * Everything above it is a short centred phrase that never reaches this width,
 * so widening costs nothing there, and keeping one container means the divider
 * above that line stays aligned with the content it divides.
 */
.ms-notfound-inner {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
    padding-block: 1rem 2rem;
}

/* Fixed-height box, image sized to it — the .ms-hero-logo-box pattern. Height
   is what gets reserved, so the message below cannot jump as the file loads,
   and each property's logo keeps its own proportions. */
.ms-notfound-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(120px, 14vw, 170px);
    margin-bottom: 1.5rem;
}
.ms-notfound-logo img {
    max-height: 100%;
    max-width: min(320px, 78vw);
    width: auto;
    height: auto;
    display: block;
}

.ms-notfound-lead {
    font-size: 1.125rem;
    color: var(--brand-ink-2);
    margin-bottom: 1.75rem;
}

.ms-notfound-links {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.ms-notfound-links a {
    display: inline-block;
    font-weight: 600;
    padding-block: .2rem;
}

/*
 * 44px minimum touch target — these three are the only way off this page on a
 * phone, and a bare text link in a stack is easy to miss by a few pixels.
 *
 * Gated on (hover: none) rather than applied always, because that height is
 * what made the stack look airy on a desktop: a mouse does not need the padded
 * box, so it gets the tighter list and a finger still gets the target. Pointer
 * capability, not a width breakpoint — a narrow laptop window still has a mouse
 * and a wide tablet still has none.
 */
@media (hover: none) {
    .ms-notfound-links {
        gap: .5rem;
    }
    .ms-notfound-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding-block: 0;
    }
}

.ms-notfound-alt {
    font-size: .9375rem;
    color: var(--brand-muted-2);
    margin: 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--brand-chip-border);
}

/*
 * The shared legal band is a white strip below the footer.
 *
 * margin-top: 0 because the full-bleed property band above already provides the
 * separation and its own bottom padding. A gap here would show a strip of the
 * darker footer ground between two bands, which reads as a misalignment rather
 * than as spacing. The property band always renders — the network config has
 * all eleven entries — so there is no case where this leaves the legal strip
 * jammed against the columns.
 */
.ms-footer .footer-legal { margin-top: 0; }