/* ==========================================================================
   Amman theme — a warm, quiet booking language for the hills of Amman.
   Extends `default`: default/theme.css loads first, this overrides its tokens
   and adds the amman chrome + component/page layers.

   SECTION MAP (append later work under the matching marker so diffs stay clean)
     === FONTS ===        self-hosted Geist / Geist Mono (variable woff2)
     === TOKENS ===       :root palette + type + radius + shadow overrides
     === BASE ===         reset, body, links
     === TYPOGRAPHY ===   display / headings / body / label scale
     === LAYOUT ===       .wrap, .page, .section
     === BUTTONS ===      .btn and variants
     === CHIPS & BADGES ===
     === CARD SHELL ===   .card / .card-body (component internals live in B2)
     === HEADER ===       sticky bar, brand, nav, lang pill, CSS-only burger
     === FOOTER ===       dark footer
     === COMPONENTS ===   (B2 appends here)
     === PAGES ===        (B2 appends here)
     === RESPONSIVE ===   breakpoints 1024 / 900 / 600 + reduced-motion
   ========================================================================== */

/* === FONTS ============================================================== */
/* Variable woff2, self-hosted; served build-free via the theme.asset route.
   url() is relative to /themes/amman/theme.css -> /themes/amman/fonts/… */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/Geist-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/GeistMono-variable.woff2') format('woff2');
}

/* === TOKENS ============================================================= */
:root {
    /* brand */
    /* Darkened from #BC5B34, which failed SC 1.4.3 twice over: white button labels on it
       measured 4.483:1, and the brand is also small text itself (section eyebrows) on
       --bg, the darker background, where it was 4.33:1. Sized against --bg — the tightest
       of the three — so all of them clear 4.5:1: 4.61:1 as text on --bg, 4.92:1 as text on
       --surface, 4.92:1 for white labels on the brand. */
    --brand: #B25631;
    --brand-hover: #A44E2A;      /* button fill only, never text; 5.67:1 under white labels */

    /* two-tier header total height (strip + bar); strip collapses on scroll */
    --header-h: 104px;

    /* surfaces */
    --bg: #FBF7F1;          /* sand 50  — page background */
    --surface: #ffffff;     /* card     — raised surface  */
    --border: #E8DFD1;      /* sand 200 — hairline border */
    --sand-100: #F3ECE1;    /* muted surface (chips, tabs, ghost hover) */
    --sand-300: #D9CCB8;    /* input / secondary-button border */

    /* ink */
    --ink: #1F1B17;         /* primary text  */
    --ink-soft: #3D362E;    /* headings alt  */
    --ink-muted: #6B6154;   /* muted text    */
    /* Placeholder + card meta. Was #A79B88: 2.73:1, far under the 4.5:1 SC 1.4.3 wants of
       small text. Sized against --bg, the darker of the two backgrounds it lands on —
       4.61:1 there, 4.92:1 on --surface. */
    --ink-faint: #7B6F5B;

    /* accents */
    --olive-600: #5F6B4C;
    --olive-100: #E7E9DD;
    --amber-500: #D8973C;
    --amber-100: #F7E9D2;
    --terracotta-100: #F6E4D9;
    --success-600: #4B7A52;

    /* type */
    --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* radius */
    --radius-sm: 8px;    /* chips, cells    */
    --radius-md: 10px;   /* buttons, inputs */
    --radius-lg: 14px;   /* panels          */
    --radius-xl: 16px;   /* cards, modals   */
    --radius-pill: 999px;

    /* elevation — rgba(31,27,23,…) ink shadows */
    --shadow-card: 0 1px 2px rgba(31, 27, 23, .06);         /* resting cards      */
    --shadow-card-hover: 0 18px 40px -16px rgba(31, 27, 23, .24); /* card hover   */
    --shadow-md: 0 6px 20px -8px rgba(31, 27, 23, .16);     /* popovers, dropdowns */
    --shadow-lg: 0 18px 40px -16px rgba(31, 27, 23, .24);   /* modals             */
}

/* === BASE =============================================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-muted); }

/* === TYPOGRAPHY ========================================================= */
.display {
    font-size: clamp(34px, 6vw, 52px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.02;
    margin: 0;
}

h1, .h1 {
    font-size: clamp(27px, 4.4vw, 34px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.1;
    margin: 0;
}

h2, .h2 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0;
}

h3, .h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.3;
    margin: 0;
}

.lead { font-size: 17px; line-height: 1.6; color: var(--ink-muted); }
.small { font-size: 13px; line-height: 1.5; }

.label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* === LAYOUT ============================================================= */
.wrap {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 28px;
}

.page {
    max-width: 1180px;
    margin-inline: auto;
    padding-block: 40px;
    padding-inline: 28px;
}

.section { padding-block: 44px; }

/* === BUTTONS ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: var(--brand);
    border: 1px solid transparent;
    padding: 11px 20px;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(31, 27, 23, .12);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.btn:hover { background: var(--brand-hover); }

/* outline / neutral */
.btn-secondary {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--sand-300);
    box-shadow: none;
}
.btn-secondary:hover { background: var(--sand-100); }

/* muted fill */
.btn-muted {
    color: var(--ink);
    background: var(--sand-100);
    box-shadow: none;
}
.btn-muted:hover { background: #EBE1D1; }

/* text button */
.btn-ghost {
    color: var(--brand);
    background: transparent;
    box-shadow: none;
}
.btn-ghost:hover { background: var(--terracotta-100); }

/* ink fill */
.btn-dark {
    color: #fff;
    background: var(--ink);
    box-shadow: none;
}
.btn-dark:hover { background: #33291f; }

/* nav CTA — compact terracotta primary with leading icon */
.btn-cta {
    font-size: 13.5px;
    padding: 9px 17px;
}

.btn svg { flex: none; }

/* === CHIPS & BADGES ===================================================== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ink-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 5px 11px;
    border-radius: var(--radius-pill);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--sand-300);
    color: var(--ink);
}
.badge-brand { color: #5A2D18; background: var(--terracotta-100); border-color: transparent; }
.badge-olive { color: #3F4A2F; background: var(--olive-100); border-color: transparent; }
.badge-amber { color: #7A5A18; background: var(--amber-100); border-color: transparent; }
.badge-solid { color: #fff; background: var(--brand); border-color: transparent; }

/* === CARD SHELL ========================================================= */
.card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    border-color: var(--sand-300);
}
.card-body { padding: 18px 20px 20px; }

/* === HEADER ============================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 247, 241, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-body);
    transition: box-shadow .2s ease;
}
.header-condensed .site-header { box-shadow: var(--shadow-md); }

/* header "second floor" — utility strip (contacts left, language right) */
.header-utility {
    height: 38px;
    overflow: hidden;
    transition: height .25s ease, opacity .2s ease;
}
.header-utility-inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 28px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.utility-contacts { display: inline-flex; align-items: center; gap: 18px; }
.utility-contact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-muted);
    white-space: nowrap;
    transition: color .15s ease;
}
.utility-ic { display: inline-flex; color: var(--ink-faint); transition: color .15s ease; }
.utility-ic svg { width: 15px; height: 15px; }
.utility-contact:hover { color: var(--brand); }
.utility-contact:hover .utility-ic { color: var(--brand); }
.utility-contact:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.utility-lang { display: inline-flex; align-items: center; gap: 2px; }
.utility-lang-link {
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-muted);
    transition: color .15s ease, background .15s ease;
}
.utility-lang-link:hover { color: var(--ink); background: var(--sand-100); }
.utility-lang-link.is-active { color: var(--ink); font-weight: 600; background: var(--sand-100); }
.header-condensed .header-utility { height: 0; opacity: 0; }
/* Collapsing the strip takes 38px off the header, so everything parked beneath it has to
   move up by the same 38px — otherwise the page shows through the gap. Retuned here, on
   the token, rather than at each sticky call site: .header-condensed sits on <html>, the
   same element as :root, and this rule comes later, so it wins. 104 = 38 strip + 66 bar;
   without the strip, 66. */
.header-condensed { --header-h: 66px; }

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 24px;
    min-height: 66px;
    padding-block: 0;
}
.nav-drawer-utility { display: none; }

/* brand */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: none;
}
.brand-logo { display: block; height: 34px; width: auto; }
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    background: var(--ink);
    border-radius: 9px;
    flex: none;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-word {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ink);
}

/* nav (menu + actions, pushed to the end on desktop) */
.nav {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-inline-start: auto;
}
.nav-link {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    padding: 4px 0;
    text-decoration: none;
    transition: color .15s ease;
}
.nav-link:hover { color: var(--ink); }
/* The underline below carries the active state here, so the label stays at its normal
   weight. font-weight is set rather than omitted: base ships `.nav-link.is-active
   { font-weight: 700 }`, same specificity, and only loses because amman's sheet is
   loaded after it. Dropping this line brings the bold back. */
.nav-link.is-active { color: var(--ink); font-weight: 500; }
.nav-link.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-inline-start: 6px;
}

/* header contact links (phone + email) */
.header-contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
}
.header-contact svg { width: 16px; height: 16px; }
.header-contact:hover { color: var(--brand); }

/* language pill — <details class="lang-menu"> */
.lang-menu { position: relative; }
.lang-menu > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--sand-300);
    padding: 8px 11px;
    border-radius: var(--radius-md);
    cursor: pointer;
    list-style: none;
    user-select: none;
    white-space: nowrap;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::marker { content: ""; }
.lang-menu .lang-chevron { transition: transform .18s ease; }
.lang-menu[open] .lang-chevron { transform: rotate(180deg); }

/* the panel keeps default's .lang / .lang-link / is-active contract */
.lang-menu .lang {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 168px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    z-index: 60;
}
.lang-menu .lang-link {
    display: block;
    font-size: 13px;
    color: var(--ink-soft);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
}
.lang-menu .lang-link:hover { background: var(--sand-100); }
.lang-menu .lang-link.is-active {
    color: var(--ink);
    font-weight: 600;
    background: var(--sand-100);
}

/* CSS-only mobile menu — checkbox pattern (input#nav-open + label.nav-burger) */
.nav-burger {
    display: none;                 /* shown at <=900px */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--sand-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    flex: none;
}
.nav-burger .icon-close { display: none; }
.nav-toggle:checked ~ .nav-burger .icon-menu { display: none; }
.nav-toggle:checked ~ .nav-burger .icon-close { display: inline-flex; }
/* Block svg drops the inline baseline gap so the icon centers in the button. */
.nav-burger svg { display: block; }

/* === FOOTER ============================================================= */
.site-footer {
    margin-top: 64px;
    background: var(--ink);
    color: #E9E1D3;
    border-top: 0;
    font-family: var(--font-body);
    font-size: 15px;
}
.footer-inner { padding-block: 56px 28px; }
.footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(233, 225, 211, .14);
}
.footer-brand {
    flex: 1 1 280px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.footer-word {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #FBF7F1;
}
.footer-mission { margin: 0; font-size: 13.5px; line-height: 1.65; color: #B7AD9C; }
.footer-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; display: block; }
.footer-contact-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #E9E1D4; transition: color .15s ease; overflow-wrap: anywhere; }
.footer-contact-ic { display: inline-flex; flex: none; color: #8C8272; transition: color .15s ease; }
.footer-contact-ic svg { width: 16px; height: 16px; }
.footer-contact-link:hover { color: var(--amber-500); }
.footer-contact-link:hover .footer-contact-ic { color: var(--amber-500); }
.footer-col {
    flex: 0 1 auto;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.footer-col-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8C8272;
}
.footer-link { font-size: 13.5px; color: #C8BEAD; text-decoration: none; transition: color .15s ease; }
.footer-link:hover { color: #FBF7F1; }
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 24px;
    flex-wrap: wrap;
}
.footer-copy { font-size: 12.5px; color: #8C8272; }

/* === COMPONENTS ========================================================= */

/* --- listing grids ----------------------------------------------------- */
.hotel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 18px;
}
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}
.hotel-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Tablet band: above the phone's single column, below the 901px point where the list
   card reflows to media-beside-body. In between the card is still the stacked one, so
   a full-width row stretches a 4/3 cover across the whole page and fits barely two
   results on screen. Two columns of that same stacked card fill the row instead.
   Kept next to the rule it overrides rather than filed with the breakpoints below. */
@media (min-width: 601px) and (max-width: 900px) {
    .hotel-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
    /* Pinned to the same two columns rather than left on `auto-fill, minmax(258px, 1fr)`,
       which slipped to three near the top of the band. The view toggle is hidden here (see
       the ≤900px block), so the two views have to agree: whichever one a bookmarked ?view=
       carries, the page must look the same, because nothing on screen can switch it back. */
    .hotel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- hotel card -------------------------------------------------------- */
/* Reuses the .card shell (border, radius, hover lift). Media is a bleed block:
   a warm gradient placeholder with the real cover layered on top, a scrim for
   legibility, a derived rating badge and a location pin. Body carries the name,
   stars, a dark guest-rating cluster, curated amenity chips and a price/CTA
   footer. The .is-list variant reflows to a horizontal card on wide viewports. */
.hotel-card { display: flex; flex-direction: column; }
.hotel-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #E4B36A 0%, #C07A3C 55%, #9E4A28 100%);
    overflow: hidden;
}
.hotel-card .card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
    background: transparent;
    transition: transform .3s ease;
}
.hotel-card:hover .card-image { transform: scale(1.035); }
.hotel-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28, 22, 17, .46), rgba(28, 22, 17, 0) 52%);
    pointer-events: none;
}
.hotel-card-badge {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #5A2D18;
    background: rgba(255, 255, 255, .92);
    padding: 5px 9px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.hotel-card-pin {
    position: absolute;
    inset-inline-start: 14px;
    inset-block-end: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .01em;
}
.hotel-card-pin svg { flex: none; }

.hotel-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 11px; padding: 16px; }
/* On a phone the card gives its width back to the text: 16px of breathing room above,
   nothing on the other three sides. Kept next to the rule it overrides rather than filed
   with the other breakpoints far below. */
@media (max-width: 600px) {
    .hotel-card-body { padding: 16px 0 0; }
}
.hotel-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.hotel-card-headings { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hotel-card-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.012em;
    line-height: 1.25;
    color: var(--ink);
}
.hotel-card-sub { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.hotel-card-stars { color: var(--amber-500); font-size: 13px; letter-spacing: 1px; }
.hotel-card-country {
    font-size: 12.5px;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Guest-rating cluster overlays the media top-right (mirrors the top-left badge). */
.hotel-card-score {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rating-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 30px;
    padding: 0 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    background: var(--ink);
    border-radius: var(--radius-sm);
}
/* Lift the chip off the photo when it sits over the media. */
.hotel-card-media .rating-chip { box-shadow: 0 2px 8px rgba(28, 22, 17, .3); }
.hotel-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hotel-card-chip {
    font-size: 11.5px;
    color: var(--ink-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.hotel-card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--sand-100);
}
.hotel-card-price { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.hotel-card-price-label,
.hotel-card-price-night { font-size: 12px; color: var(--ink-muted); }
.hotel-card-price-amount {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}
.hotel-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand);
}
.hotel-card-cta svg { width: 13px; height: 13px; }

/* list variant — horizontal media beside the body on wide viewports */
@media (min-width: 901px) {
    .hotel-card.is-list { flex-direction: row; }
    .hotel-card.is-list .hotel-card-media {
        flex: none;
        width: 250px;
        aspect-ratio: auto;
        min-height: 200px;
        align-self: stretch;
    }
    .hotel-card.is-list .hotel-card-body {
        flex: 1;
        gap: 12px;
        padding: 18px 20px 16px;
        min-width: 0;
    }
    .hotel-card.is-list .hotel-card-name { font-size: 18px; letter-spacing: -.015em; }
    /* the footer becomes a right-anchored price + solid CTA button */
    .hotel-card.is-list .hotel-card-foot { align-items: center; }
    .hotel-card.is-list .hotel-card-price-amount { font-size: 22px; }
    .hotel-card.is-list .hotel-card-cta {
        color: #fff;
        background: var(--brand);
        padding: 9px 16px;
        border-radius: var(--radius-md);
        transition: background .15s ease;
    }
    .hotel-card.is-list:hover .hotel-card-cta { background: var(--brand-hover); }
}

/* --- post card --------------------------------------------------------- */
.post-card { display: flex; flex-direction: column; }
.post-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #DBA890, #A65A4E);
    overflow: hidden;
}
.post-card .card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
    background: transparent;
}
.post-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 18px; }
/* Same on a phone as the hotel card: 16px above, nothing else. */
@media (max-width: 600px) {
    .post-card-body { padding: 16px 0 0; }
}
.post-card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.3;
    color: var(--ink);
}
.post-card-excerpt { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-muted); }
.post-card-meta { margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--ink-faint); }

/* --- floating search bar ----------------------------------------------- */
.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.search-bar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--brand);
    padding-inline-start: 6px;
}
.search-bar-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    background: transparent;
    /* WCAG 1.4.11: the control needs a boundary of its own. The pill's hairline is
       --border on --surface = 1.32:1 and cannot serve as one; --ink-faint is 4.92:1,
       over the 3:1 a boundary needs without the weight of --ink-muted's 6:1. */
    border: 1px solid var(--ink-faint);
    border-radius: 10px;
}
.search-bar-input::placeholder { color: var(--ink-faint); font-weight: 400; }
/* WCAG 2.4.7: the input used to set `outline: none` with nothing in its place, so a
   keyboard user saw no focus at all. Same idiom as .utility-contact:focus-visible. */
.search-bar-input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }
.search-bar .btn { flex: none; }

/* === PAGES ============================================================== */

/* --- home: hero -------------------------------------------------------- */
.home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 52px 48px 78px;
    border-radius: var(--radius-xl);
    background: linear-gradient(160deg, #C2703A 0%, #A44E2A 46%, #7C3A22 100%);
    color: #FFF8EF;
}
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 16px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 16px);
}
/* Cloud-served (imgproxy) hero background + a terracotta scrim so the light
   text stays legible over any photo. Only applied when a photo is present. */
.home-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-hero:has(.home-hero-bg)::before {
    background-image:
        linear-gradient(160deg, rgba(124, 58, 34, .55) 0%, rgba(124, 58, 34, .28) 46%, rgba(124, 58, 34, .48) 100%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 16px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 16px);
}
.home-hero::after {
    content: "";
    position: absolute;
    top: -120px;
    inset-inline-end: -80px;
    z-index: -1;
    width: 420px;
    height: 420px;
    border-radius: var(--radius-pill);
    background: radial-gradient(circle, rgba(240, 190, 110, .42), rgba(240, 190, 110, 0) 68%);
    pointer-events: none;
}
.home-hero-inner { max-width: 620px; }
.home-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #FBEAD8;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-pill);
}
.home-hero-kicker svg { flex: none; }
.home-hero-title {
    margin: 20px 0 0;
    font-size: clamp(34px, 6vw, 52px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.02;
    color: #FFF8EF;
}
.home-hero-lead {
    margin: 16px 0 0;
    max-width: 48ch;
    font-size: 18px;
    line-height: 1.55;
    color: #F4DEC9;
}
.home-hero-trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 0;
    font-size: 13px;
    color: #F4DEC9;
}
.home-hero-trust svg { flex: none; }

/* floating search card overlapping the hero */
.home-search {
    position: relative;
    z-index: 5;
    margin: -46px 24px 0;
}
.home-search .search-bar {
    padding: 14px 16px;
    border-radius: 18px;
    box-shadow: 0 24px 50px -24px rgba(31, 27, 23, .32);
}

/* --- home: featured / sections ---------------------------------------- */
.section-head { margin-bottom: 22px; }
.section-kicker {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand);
}
.section-foot { margin-top: 26px; display: flex; justify-content: center; }

/* --- home: real stat strip -------------------------------------------- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 24px;
    text-align: center;
    background: var(--surface);
}
.stat-figure { font-size: 34px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
.stat-label { font-size: 13px; line-height: 1.4; color: var(--ink-muted); }

/* --- home: browse by rating grid -------------------------------------- */
.browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}
.browse-tile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    min-height: 150px;
    padding: 18px;
    border-radius: var(--radius-lg);
    color: #fff;
    text-decoration: none;
    background: linear-gradient(150deg, var(--amber-500), var(--brand));
    transition: transform .18s ease, box-shadow .18s ease;
}
.browse-grid > .browse-tile:nth-child(6n + 1) { background: linear-gradient(150deg, #E4B36A, #C07A3C 55%, #9E4A28); }
.browse-grid > .browse-tile:nth-child(6n + 2) { background: linear-gradient(150deg, #AEB187, #5F6B4C); }
.browse-grid > .browse-tile:nth-child(6n + 3) { background: linear-gradient(150deg, #DBA890, #A65A4E); }
.browse-grid > .browse-tile:nth-child(6n + 4) { background: linear-gradient(150deg, #E7C46B, #B98A2E); }
.browse-grid > .browse-tile:nth-child(6n + 5) { background: linear-gradient(150deg, #D98A5E, #B4552E); }
.browse-grid > .browse-tile:nth-child(6n + 6) { background: linear-gradient(150deg, #6B5B4A, #241D18); }
.browse-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.browse-tile-pin { color: rgba(255, 255, 255, .92); margin-bottom: auto; }
.browse-tile-pin svg { width: 18px; height: 18px; }
.browse-tile-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.browse-tile-count { font-size: 12.5px; color: rgba(255, 255, 255, .82); }

/* --- home: featured filter tabs --------------------------------------- */
.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.filter-tab {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-tab:hover { border-color: var(--ink-faint); }
.filter-tab.is-active { color: #fff; background: var(--ink); border-color: var(--ink); }

/* --- home: value props ------------------------------------------------- */
.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.value-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.value-card:hover {
    transform: translateY(-4px);
    border-color: var(--terracotta-100);
    box-shadow: var(--shadow-md);
}
.value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--brand);
    background: var(--terracotta-100);
    border-radius: var(--radius-lg);
    transition: transform .2s ease, background .2s ease, color .2s ease;
}
.value-icon svg { width: 22px; height: 22px; }
.value-card:hover .value-icon {
    color: #fff;
    background: var(--brand);
    transform: rotate(-4deg) scale(1.04);
}
.value-title { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.012em; color: var(--ink); }
.value-body { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-muted); }

/* --- home: journal (blog) strip --------------------------------------- */
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-head-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}
.section-head-link svg { width: 14px; height: 14px; }
.journal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.journal-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
}
.journal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.journal-card-media { height: 168px; }
.journal-grid > .journal-card:nth-child(3n + 1) .journal-card-media { background: linear-gradient(150deg, #E4B36A, #C07A3C 55%, #9E4A28); }
.journal-grid > .journal-card:nth-child(3n + 2) .journal-card-media { background: linear-gradient(150deg, #AEB187, #5F6B4C); }
.journal-grid > .journal-card:nth-child(3n + 3) .journal-card-media { background: linear-gradient(150deg, #DBA890, #A65A4E); }
.journal-card-body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.journal-card-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
.journal-card-title { font-size: 16.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.012em; color: var(--ink); }
.journal-card-excerpt { font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); }
.journal-card-read {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
}
.journal-card-read svg { width: 14px; height: 14px; }

/* --- home: dark CTA banner -------------------------------------------- */
.cta-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    padding: 44px 48px;
    background: var(--ink);
    border-radius: var(--radius-xl);
}
.cta-banner::after {
    content: "";
    position: absolute;
    top: -90px;
    inset-inline-end: -40px;
    z-index: -1;
    width: 340px;
    height: 340px;
    border-radius: var(--radius-pill);
    background: radial-gradient(circle, rgba(188, 91, 52, .4), rgba(188, 91, 52, 0) 68%);
    pointer-events: none;
}
.cta-banner-title {
    margin: 0;
    max-width: 34ch;
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: #FBF7F1;
}
.cta-banner-btn {
    flex: none;
    padding: 13px 24px;
    font-size: 15px;
    color: var(--ink);
    background: var(--amber-500);
}
.cta-banner-btn:hover { background: #C9862F; }

/* --- hotels listing ---------------------------------------------------- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--ink-faint);
}
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb-current { color: var(--ink-soft); font-weight: 500; }

@media (max-width: 600px) {
    /* The last crumb is whatever the page is about — a hotel name, a post title — and on a
       phone it ran the row past the screen. It alone gives way: `min-width: 0` because a
       flex item will not shrink below its text without it, and the trail ahead of it is
       pinned so the ellipsis eats the long name rather than "Home / Hotels". */
    .breadcrumb a, .breadcrumb-sep { flex: none; }
    .breadcrumb-current {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.hotels-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.hotels-count { margin: 0; font-size: 14px; color: var(--ink-muted); }

/* --- hotels: filter sidebar layout ------------------------------------ */
.hotels-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.hotels-filters {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.filter-group { display: flex; flex-direction: column; gap: 12px; }
.filter-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.filter-group-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.filter-reset { font-size: 12px; font-weight: 600; color: var(--brand); }
.filter-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 13.5px;
    color: var(--ink-soft);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.filter-option:hover { background: var(--bg); }
.filter-option.is-active { color: var(--ink); font-weight: 600; background: var(--terracotta-100); }
.filter-option-stars { color: var(--amber-500); font-size: 12px; letter-spacing: 1px; }
.hotels-results { min-width: 0; }

/* --- hotels: mobile filter sheet chrome (desktop keeps the plain sidebar) --- */
.filters-toggle,
.filters-trigger,
.filters-scrim,
.filters-close,
.filters-foot { display: none; }

/* Suppresses the slide for the one frame in which theme.js re-opens the sheet after an
   instant-apply reload, so it is simply already open instead of animating in again. */
.is-sheet-restoring .hotels-filters,
.is-sheet-restoring .filters-scrim { transition: none !important; }

/* --- hotels: edit-search bar ------------------------------------------ */
.hotels-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.hotels-search-field { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 6px 14px; color: var(--brand); }
.hotels-search-field input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
    background: transparent;
    /* WCAG 1.4.11, as on .search-bar-input: the control carries its own boundary. */
    border: 1px solid var(--ink-faint);
    border-radius: 10px;
}
.hotels-search-field input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }
.hotels-search-btn { flex: none; gap: 8px; }

/* --- hotels: sidebar filters (design-faithful) ------------------------ */
.filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sand-100);
}
.filters-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.star-toggles { display: flex; gap: 8px; }
.star-toggle {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
}
.star-toggle .star-toggle-icon { color: var(--amber-500); font-size: 11px; }
.star-toggle-count { font-size: 11px; font-weight: 500; color: var(--ink-faint); }
.star-toggle.is-active { color: #fff; background: var(--brand); border-color: var(--brand); }
.star-toggle.is-active .star-toggle-icon,
.star-toggle.is-active .star-toggle-count { color: rgba(255, 255, 255, .85); }
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    font-size: 13.5px;
    color: var(--ink-soft);
    text-decoration: none;
}
.filter-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex: none;
    color: #fff;
    border: 1.5px solid var(--border);
    border-radius: 5px;
}
.filter-box svg { width: 12px; height: 12px; }
.filter-checkbox.is-active .filter-box { background: var(--brand); border-color: var(--brand); }
.filter-checkbox-label { flex: 1; }
.filter-checkbox-count { font-size: 12px; color: var(--ink-faint); }

/* --- hotels: results toolbar ------------------------------------------ */
.results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.results-count { font-size: 18px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.results-controls { display: flex; align-items: center; gap: 10px; }
.view-toggle { display: flex; gap: 3px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    color: var(--ink-muted);
    border-radius: var(--radius-sm);
}
.view-btn.is-active { color: #fff; background: var(--ink); }
.sort-select { position: relative; display: inline-flex; align-items: center; }
.sort-select select {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    background: var(--surface);
    /* --border is 1.32:1 — a hairline for cards, not a boundary a control can be
       identified by (WCAG 1.4.11 wants 3:1). --ink-faint is 4.92:1 here. */
    border: 1px solid var(--ink-faint);
    border-radius: var(--radius-md);
    padding: 10px 34px 10px 14px;
    cursor: pointer;
}
.sort-select select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }
.sort-select svg { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ink-muted); pointer-events: none; }

/* --- hotels: active filter chips -------------------------------------- */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px 6px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-soft);
    background: var(--sand-100);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    text-decoration: none;
}
.filter-chip svg { width: 12px; height: 12px; color: var(--ink-muted); }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- empty state ------------------------------------------------------- */
/* --- listing pagination -------------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 32px;
}
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.page-link:hover { border-color: var(--brand); color: var(--brand); }
.page-link.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    cursor: default;
}
.page-link.is-disabled { opacity: .4; pointer-events: none; }
.page-link svg { width: 16px; height: 16px; }
.page-prev svg { transform: rotate(180deg); }
.page-gap {
    display: inline-flex;
    align-items: flex-end;
    padding: 0 4px;
    color: var(--ink-faint);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 20px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--sand-300);
    border-radius: var(--radius-xl);
}
.empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: var(--ink-faint);
    background: var(--sand-100);
    border-radius: var(--radius-lg);
}
.empty-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }

/* --- search page ------------------------------------------------------- */
.search-head { max-width: 640px; }
.search-head .h1 { margin-bottom: 16px; }
.section-sub { margin: 28px 0 16px; font-weight: 600; }
.search-results .section-sub:first-child { margin-top: 8px; }
.search-empty { margin: 0; }

/* --- page responsive --------------------------------------------------- */
@media (max-width: 900px) {
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
    .stat-figure { font-size: 28px; }
    .hotels-layout { grid-template-columns: 1fr; }

    /* Both views are two columns of the same stacked card from here down (601–900px pins
       the grid to match the list; below 600px both fall to one), so the toggle switches
       between two identical layouts. It only costs the toolbar room the count and the sort
       want. An inbound ?view=grid keeps working, it just looks the same. */
    .view-toggle { display: none; }

    /* --- hotels: filter bottom sheet ---------------------------------------
       Replaces the old `position: static; flex-direction: row; flex-wrap: wrap`
       sidebar-as-a-row rule: that laid every group out side by side, which is both
       what pushed the results off-screen and what would shred this panel. */
    .filters-toggle {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    /* Clipped rather than `hidden`: a hidden input cannot take focus, so the sheet would
       be mouse-only. This one stays focusable — Space opens and closes it with no JS —
       and paints its ring on the visible label. */
    .filters-toggle:focus-visible + .filters-trigger { outline: 2px solid var(--brand); outline-offset: 2px; }

    .filters-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        min-height: 48px;
        margin-bottom: 18px;
        padding: 12px 18px;
        font-size: 15px;
        font-weight: 600;
        color: var(--ink);
        background: var(--surface);
        /* SC 1.4.11: --ink-faint is the control boundary that clears 3:1 on --bg. */
        border: 1px solid var(--ink-faint);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        cursor: pointer;
    }
    .filters-trigger svg { flex: none; color: var(--brand); }
    .filters-trigger-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 21px;
        height: 21px;
        padding: 0 6px;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        background: var(--brand);
        border-radius: var(--radius-pill);
    }

    .filters-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(20, 16, 12, .55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .26s ease, visibility 0s linear .26s;
    }
    .filters-toggle:checked ~ .filters-scrim {
        opacity: 1;
        visibility: visible;
        transition: opacity .26s ease, visibility 0s;
    }

    .hotels-filters {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 91;
        max-height: 86vh;
        max-height: 86dvh;
        gap: 0;
        padding: 0 20px;
        overflow-y: auto;
        overflow-x: clip;
        overscroll-behavior: contain;
        border: 0;
        border-start-start-radius: var(--radius-lg);
        border-start-end-radius: var(--radius-lg);
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        box-shadow: 0 -18px 48px rgba(20, 16, 12, .28);
        transform: translateY(100%);
        /* A closed panel stays in the DOM, so without this it keeps its tab stops and a
           voice in the a11y tree behind the page. */
        visibility: hidden;
        transition: transform .28s cubic-bezier(.22, .8, .3, 1), visibility 0s linear .28s;
    }
    .filters-toggle:checked ~ .hotels-filters {
        transform: translateY(0);
        visibility: visible;
        transition: transform .28s cubic-bezier(.22, .8, .3, 1), visibility 0s;
    }

    .filters-head {
        position: sticky;
        top: 0;
        z-index: 1;
        gap: 10px;
        margin-inline: -20px;
        padding: 24px 20px 14px;
        background: var(--surface);
    }
    .filters-head::before {
        content: '';
        position: absolute;
        top: 9px;
        inset-inline: 0;
        width: 38px;
        height: 4px;
        margin-inline: auto;
        background: var(--sand-300);
        border-radius: var(--radius-pill);
    }
    .filters-title { font-size: 16px; }
    /* Reset moves to the footer, by the thumb; two of them in one panel is noise. */
    .filters-head .filter-reset { display: none; }
    .filters-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-inline-start: auto;
        margin-inline-end: -8px;
        color: var(--ink-soft);
        border-radius: var(--radius-pill);
        cursor: pointer;
    }
    .filters-close svg { display: block; }
    .filters-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

    .filter-group { padding-bottom: 20px; }
    /* SC 2.5.8: these are thumb targets on a phone, not 29px mouse targets. */
    .filter-option { min-height: 44px; padding: 11px 12px; font-size: 15px; }
    .filter-checkbox { min-height: 46px; padding: 12px 4px; font-size: 15px; }
    .filter-box { width: 20px; height: 20px; }
    .star-toggle { min-height: 46px; font-size: 14px; }

    .filters-foot {
        display: flex;
        align-items: center;
        gap: 10px;
        position: sticky;
        bottom: 0;
        z-index: 1;
        margin-top: auto;
        margin-inline: -20px;
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
        border-top: 1px solid var(--border);
    }
    .filters-foot-reset {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        min-height: 48px;
        padding: 0 18px;
        font-size: 14px;
        border: 1px solid var(--ink-faint);
        border-radius: var(--radius-md);
    }
    .filters-done {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        min-height: 48px;
        padding: 0 18px;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        background: var(--brand);
        border-radius: var(--radius-md);
        cursor: pointer;
    }
    .filters-done:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

    .home-hero { padding: 40px 28px 70px; }
    .home-search { margin-inline: 8px; }
    .cta-banner { padding: 34px 28px; }
}

@media (max-width: 600px) {
    .home-hero { padding: 32px 20px 62px; }
    .home-hero-lead { font-size: 16px; }
    .home-search { margin-inline: 0; margin-top: -34px; }
    .home-search .search-bar { flex-wrap: wrap; }
    .home-search .search-bar .btn { width: 100%; }
    /* One column, and the list card is still stacked (its horizontal reflow only starts at
       901px), so the two views stay identical down here too. The toggle that used to be
       hidden by this block is hidden by the ≤900px one now. */
    .hotel-grid { grid-template-columns: 1fr; }
    .value-grid { grid-template-columns: 1fr; }
    .cta-banner { flex-direction: column; align-items: flex-start; gap: 18px; }
    .cta-banner-btn { width: 100%; }
}

/* === RESPONSIVE ========================================================= */
@media (max-width: 1024px) {
    .wrap,
    .page { padding-inline: 22px; }
    .nav { gap: 22px; }
}

@media (max-width: 900px) {
    .nav-burger {
        display: inline-flex;
        margin-inline-start: auto;
        flex: none;
    }
    /* The site name is DB-driven and can be long. `.brand` ships `flex: none` inside a
       `flex-wrap: nowrap` header, so it refused to shrink and pushed the burger off the
       viewport — at 390px "Amman Hotels & Apartments" clipped it in half and the close
       button with it. Let the brand give way, and ellipsize rather than overflow. */
    .brand { flex: 0 1 auto; min-width: 0; }
    .brand-word {
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .nav {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin-inline-start: 0;
        padding: 14px 22px 20px;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }
    .nav-toggle:checked ~ .nav { display: flex; }
    .nav-link { font-size: 16px; padding: 10px 2px; }
    /* Stacked in the dropdown panel, a full-width underline reads as a divider between
       items, so it goes — and with it the only non-colour signal, since --ink and
       --ink-soft sit 1.44:1 apart and cannot be told apart by eye. The weight comes back
       to fill that gap: it is what marks the current page in the panel. */
    .nav-link.is-active::after { display: none; }
    .nav-link.is-active { font-weight: 700; }
    .nav-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-inline-start: 0;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
    }
    .lang-menu,
    .lang-menu > summary { width: 100%; }
    .lang-menu > summary { justify-content: space-between; }
    .lang-menu .lang { position: static; box-shadow: none; border: 0; padding: 6px 0 0; min-width: 0; }
    .btn-cta { width: 100%; }
    /* strip hides on mobile; its contacts + language reappear in the drawer */
    .header-utility { display: none; }
    .nav-drawer-utility { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
    .nav-drawer-utility .header-contact { width: 100%; padding: 10px 2px; font-size: 16px; }
}

@media (max-width: 600px) {
    .wrap,
    .page { padding-inline: 16px; }
    .footer-top { gap: 28px; }
    .footer-inner { padding-block: 40px 24px; }
    .footer-bottom { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        /* Duration alone is not enough: a delayed `visibility` step (the filter sheet
           uses one to stay focusable until it has slid away) would still hold for its
           full delay, leaving a closed panel visible. */
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* === HOTEL DETAIL ======================================================= */
/* Layout lives inside the inherited <main class="page"> (max 1180, padded).
   The site header is a 66px sticky bar; the in-page anchor bar sticks below it,
   so section targets take a scroll-margin-top clearing both (66 + bar + gap). */

.hotel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 4px; }
.hotel-head-main { min-width: 0; }
.hotel-head-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.hotel-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #5A2D18;
    background: var(--terracotta-100);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
}
.hotel-stars { color: var(--amber-500); font-size: 14px; letter-spacing: 2px; }
.hotel-address-map { color: var(--brand); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hotel-title {
    margin: 0;
    font-size: clamp(28px, 4.4vw, 34px);
    font-weight: 700;
    letter-spacing: -.028em;
    line-height: 1.08;
    color: var(--ink);
}
.hotel-address {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--ink-muted);
}
.hotel-address-pin { display: inline-flex; flex: none; color: var(--brand); }
.hotel-address-sep { color: var(--sand-300); margin-inline: 4px; }

@media (max-width: 600px) {
    /* Pin, address and "Show on map" shared one flex row, and the link carries
       `white-space: nowrap` — so on a phone it fought the address for the line instead of
       giving way. It drops to its own line beneath the address: `flex-basis: 100%` is what
       forces the wrap, and the 22px indent (14px pin + the 8px gap) lands it under the
       text rather than under the pin. */
    .hotel-address { flex-wrap: wrap; align-items: flex-start; row-gap: 4px; }
    .hotel-address-map { flex-basis: 100%; margin-inline-start: 22px; }
}

/* --- photo mosaic ------------------------------------------------------ */
.hotel-mosaic {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    height: 420px;
    margin-top: 20px;
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.hotel-mosaic-tile {
    position: relative;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(135deg, #E4B36A 0%, #C07A3C 55%, #9E4A28 100%);
}
.hotel-mosaic-hero { grid-column: 1; grid-row: 1 / span 2; }
.hotel-mosaic-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.hotel-mosaic-tile:hover img { transform: scale(1.04); }
/* The hero <img> also carries base's `.detail-cover`, written for the default theme's
   plain stacked hero: a 420px cap, a radius and a 16px bottom margin. Inside a mosaic
   tile all three are wrong — the tile is the frame — and a <button> centres its content,
   so that bottom margin pushed the image up and showed the tile's gradient as a band
   under it. Nothing else here outweighs a single class, so reset them explicitly. */
.hotel-mosaic .detail-cover { max-height: none; margin: 0; border-radius: 0; }
.hotel-mosaic-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: rgba(28, 22, 17, .5);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.hotel-mosaic-more svg { width: 17px; height: 17px; }
.hotel-mosaic.is-single {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 380px;
}
.hotel-mosaic.is-single .hotel-mosaic-hero { grid-column: auto; grid-row: auto; }

/* --- sticky sub-nav ---------------------------------------------------- */
.detail-subnav {
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    margin-bottom: 8px;
    background: rgba(251, 247, 241, .9);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}
.detail-subnav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 52px; }
.detail-subnav-left { display: flex; align-items: center; gap: 22px; min-width: 0; }
.detail-subnav-name { flex: none; font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.detail-subnav-links { display: flex; gap: 20px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.detail-subnav-links::-webkit-scrollbar { display: none; }
.detail-subnav-link { flex: none; font-size: 13px; color: var(--ink-muted); white-space: nowrap; transition: color .15s ease; }
.detail-subnav-link:hover { color: var(--brand); }
.detail-subnav-cta { padding: 8px 16px; font-size: 13px; flex: none; }

/* --- inline date + guest booking (right side of the sticky bar) -------- */
.detail-subnav-book { position: relative; display: flex; align-items: center; gap: 14px; flex: none; }
.subnav-booking { display: flex; align-items: stretch; border: 1px solid var(--sand-300); border-radius: 10px; background: var(--surface); }
.subnav-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    min-width: 0;
    transition: background .15s ease;
}
.subnav-field:first-child { border-radius: 10px 0 0 10px; }
.subnav-field:last-child { border-radius: 0 10px 10px 0; }
.subnav-field + .subnav-field { border-inline-start: 1px solid var(--sand-300); }
.subnav-field:hover { background: var(--sand-50, #F7F1E7); }
.subnav-field[aria-expanded="true"] { background: var(--sand-100); }
/* Occupancy is fixed (BookingUrl books 2 adults, 1 room), so it is stated, not offered.
   Plain muted text with no border, no fill and no hover — it sits beside the date pill
   rather than inside it, because sharing that chrome made it look clickable. */
.subnav-occupancy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    font-size: 13.5px;
    color: var(--ink-muted);
}
.subnav-field-icon { display: inline-flex; flex: none; color: var(--ink-faint); }
.subnav-field-icon svg { width: 15px; height: 15px; }
.subnav-field-value { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.subnav-price { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.subnav-price strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.subnav-price-total { font-size: 15px; font-weight: 700; color: var(--ink); }
.subnav-price-total .subnav-price-nights { font-size: 13px; font-weight: 400; color: var(--ink-muted); }

.subnav-pop {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 50;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 22px 48px -18px rgba(31, 27, 23, .34);
    padding: 18px;
}
.subnav-cal { width: 320px; }
.subnav-pop[hidden] { display: none; }

/* --- content column (booking now lives in the sticky bar) -------------- */
/* Full width — spans the gallery, matching the hero and "more stays". */
.hotel-layout { margin-top: 12px; }
.hotel-main { min-width: 0; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-nav { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; color: var(--ink-soft); }
.cal-nav:disabled { opacity: .4; cursor: default; }
.cal-nav svg { width: 15px; height: 15px; }
.cal-prev-icon svg, .cal-nav[data-cal-prev] svg { transform: rotate(90deg); }
.cal-nav[data-cal-next] svg { transform: rotate(-90deg); }
.cal-title { font-size: 14px; font-weight: 600; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekdays { margin-bottom: 6px; }
.cal-weekdays span { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-faint); }
.cal-grid { gap: 2px; }
.cal-empty { height: 36px; }
.cal-day { height: 36px; display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 13px; color: var(--ink); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.cal-day.is-disabled { color: var(--sand-300); cursor: default; }
.cal-day.is-range { background: var(--terracotta-100); border-radius: 0; }
.cal-day.is-edge { background: var(--brand); color: #fff; font-weight: 600; }
.cal-apply { width: 100%; margin-top: 12px; padding: 9px; font-size: 13px; background: var(--ink); }


/* --- amenities: grouped masonry of category blocks --------------------- */
/* Category blocks flow into 3 masonry columns (break-inside keeps a block
   whole), so single-item categories pack tight instead of wasting a row. */
.amenity-collapse { position: relative; max-height: 360px; overflow: hidden; }
.amenity-collapse.is-open { max-height: none; }
.amenity-collapse:not(.is-open)::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 76px;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
}
.amenity-cats { column-count: 3; column-gap: 40px; }
.amenity-cat { break-inside: avoid; margin-bottom: 22px; }
.amenity-cat-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.amenity-cat-icon { display: inline-flex; flex: none; color: var(--brand); }
.amenity-cat-icon svg { width: 16px; height: 16px; }
.amenity-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.amenity-tile { font-size: 14px; line-height: 1.35; color: var(--ink-soft); min-width: 0; }
.amenity-paid { margin-inline-start: 5px; font-size: 11px; font-weight: 600; color: var(--ink-faint); }
.amenity-toggle {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.amenity-toggle::after { content: "›"; font-weight: 700; }
.amenity-toggle[hidden] { display: none; }

/* --- room select button ------------------------------------------------ */
.room-card.is-selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

/* Author display beats the UA `[hidden]` rule, so restore hiding explicitly. */
.lightbox[hidden] { display: none; }

/* --- lightbox ---------------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px; background: rgba(20, 16, 12, .92); }
.lightbox-bar { width: 100%; max-width: 1000px; display: flex; align-items: center; justify-content: space-between; }
.lightbox-counter { font-size: 13px; color: #E9E1D3; }
.lightbox-close { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 13px; font-weight: 600; color: #E9E1D3; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); padding: 8px 14px; border-radius: 10px; cursor: pointer; }
.lightbox-close svg { width: 14px; height: 14px; }
.lightbox-stage { position: relative; width: 100%; max-width: 1000px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #1c1611; }
.lightbox-img { width: 100%; height: 100%; object-fit: contain; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .9); border: 0; border-radius: 999px; cursor: pointer; color: var(--ink); }
.lightbox-nav svg { width: 20px; height: 20px; }
.lightbox-prev { left: 16px; } .lightbox-prev svg { transform: rotate(90deg); }
.lightbox-next { right: 16px; } .lightbox-next svg { transform: rotate(-90deg); }

/* Kept next to the rules it overrides, not filed with the other breakpoints further down:
   the mosaic's mobile layout lived far from its desktop one and was silently overridden
   for months. */
@media (max-width: 600px) {
    /* The stage dictated 16/9 whatever the photo was. On a 420px screen that left a
       340x191 box, and a portrait shot contained inside it rendered ~127px wide. Drop the
       ratio and let the stage take the column's height; the photo then uses the screen. */
    .lightbox { padding: 12px 12px 76px; gap: 10px; }
    .lightbox-stage {
        position: static;      /* so the arrows below anchor to the overlay, not the stage */
        overflow: visible;     /* ...and are not clipped by it */
        aspect-ratio: auto;    /* the photo decides its own shape */
        height: auto;
        background: none;      /* no letterbox left to fill */
    }
    /* Sized off the viewport rather than a percentage of a flexed parent, as qingdao's
       lightbox already does: it resolves the same in every browser. The photo grows to
       whichever of width or height runs out first, and keeps its ratio either way. */
    .lightbox-img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: calc(100vh - 170px);
        border-radius: 14px;
    }
    /* Off the photo: side by side beneath it, rather than across its middle — which is
       exactly where the thing being looked at is. */
    .lightbox-nav { top: auto; bottom: 16px; transform: none; }
    .lightbox-prev { left: 50%; margin-inline-start: -52px; }
    .lightbox-next { right: auto; left: 50%; margin-inline-start: 8px; }
}

@media (max-width: 980px) {
    .amenity-cats { column-count: 2; }
    /* Reclaim room for the booking pills: drop the running price on the bar. */
    .subnav-price { display: none; }
}
@media (max-width: 680px) {
    /* On narrow screens the bar becomes a dedicated booking control. */
    .detail-subnav-left { display: none; }
    .detail-subnav-inner { gap: 10px; }
    .detail-subnav-book { flex: 1; }
    .subnav-booking { flex: 1; }
    .subnav-field { flex: 1; justify-content: center; }
    .subnav-pop { left: 0; right: 0; }
    /* Was left truncated as `.subnav-cal, }` — a dangling selector list whose `}` closed
       the whole media block early, so the rule never existed. The pop is stretched to the
       bar above; the calendar's own 320px keeps it from following unless it is cleared. */
    .subnav-cal { width: auto; }
}
@media (max-width: 560px) {
    .amenity-cats { column-count: 1; }
    /* The mosaic used to be re-laid out here too, with fixed 160px rows. It never took
       effect: the ≤900px block sits later in the file at equal weight, so it won every
       shared property and a phone got that layout regardless. One owner now — the ≤900px
       block — which is already the two-column, hero-on-top shape a phone wants. */
}

.hotel-sections { margin-top: 8px; }
/* No rule between sections: the 30px of padding either side already separates them, and
   each section leads with its own heading. The `:first-child { border-top: 0 }` that used
   to suppress the first line went with it — it had nothing left to suppress. */
.hotel-section {
    scroll-margin-top: 128px;
    padding-block: 30px;
}
.hotel-section-title {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.018em;
    color: var(--ink);
}
.hotel-prose { max-width: 62ch; }
.hotel-prose p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.hotel-prose p:last-child { margin-bottom: 0; }

/* --- overview: highlights grid + rating card --------------------------- */
.hotel-overview {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 36px;
    align-items: start;
}
.hotel-overview-main { min-width: 0; }
.overview-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.overview-feature { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; color: var(--ink-soft); }
.overview-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; color: var(--brand); background: var(--terracotta-100); border-radius: var(--radius-sm); }
.overview-feature-icon svg { width: 15px; height: 15px; }
.overview-rating {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.overview-rating-head { display: flex; align-items: center; gap: 12px; }
.overview-rating-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 40px;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: var(--ink);
    border-radius: var(--radius-md);
}
.overview-rating-meta { display: flex; flex-direction: column; line-height: 1.25; }
.overview-rating-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.overview-rating-count { font-size: 12px; color: var(--ink-faint); }
.overview-rating-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--brand); text-decoration: none; }
.overview-rating-link svg { width: 13px; height: 13px; }
.overview-rating-trust { display: flex; align-items: center; gap: 7px; margin: 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; }
.overview-rating-trust svg { width: 14px; height: 14px; flex: none; }

/* --- description: real body or a placeholder 3-4 section scaffold ------- */
.hotel-description .hotel-prose { max-width: 74ch; }
.description-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 44px; max-width: 920px; }
.description-block { min-width: 0; }
.description-subtitle { margin: 0 0 7px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.description-block p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }

/* --- location: decorative map ----------------------------------------- */
.loc-map-live { display: block; padding: 0; }
.loc-map-frame { display: block; width: 100%; height: 100%; border: 0; }
.loc-map-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none; }
.loc-map-link svg { width: 14px; height: 14px; }
.loc-map {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background:
        linear-gradient(rgba(120, 104, 74, .12) 1px, transparent 1px) 0 0 / 42px 42px,
        linear-gradient(90deg, rgba(120, 104, 74, .12) 1px, transparent 1px) 0 0 / 42px 42px,
        linear-gradient(135deg, #E7DFCE 0%, #D2C3A6 60%, #B8A47E 100%);
}
.loc-map-pin { color: var(--brand); filter: drop-shadow(0 2px 3px rgba(31, 27, 23, .3)); }
.loc-map-pin svg { width: 40px; height: 40px; }
.loc-map-label {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 16px;
    font-size: 12px;
    color: #5A4A2E;
    background: rgba(255, 255, 255, .86);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
}
.review-score-count { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }

/* --- more stays -------------------------------------------------------- */
/* "More places to stay" drew its own rule, separate from the one .hotel-section used to
   draw — which is why it survived that one being removed. Gone too; the section keeps its
   .hotel-section padding, so the spacing is unchanged. */

/* --- rooms ------------------------------------------------------------- */
/* Two-up on wide screens so a full-width room card never stretches sparse;
   collapses to a single column once a card would get too narrow. */
.room-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* Closes the room list. The list is a grid, so this block-level anchor starts flush at
   the section's left edge on its own; `.btn` is inline-flex, so it shrinks to its label
   and stays bottom-left. The arrow leans into the direction of travel on hover — the
   global prefers-reduced-motion block stops the slide for anyone who asks it to. */
.room-complete { margin-top: 18px; }
/* Direction-safe nudge: logical margins, not translateX, which would shove the arrow
   back toward the label under dir="rtl". The negative end margin keeps the width steady
   so nothing beside it twitches. */
.room-complete svg { transition: margin .18s ease; }
.room-complete:hover svg { margin-inline-start: 3px; margin-inline-end: -3px; }
@media (max-width: 1024px) { .room-list { grid-template-columns: 1fr; } }
.room-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}
/* A priced card is a <button>: undo what the UA gives buttons, since the card's own look
   is the design. Unpriced ones stay divs and are not selectable. */
.room-card.is-selectable { width: 100%; font: inherit; text-align: start; cursor: pointer; }
.room-card.is-selectable:hover { border-color: var(--brand); }
.room-card.is-selectable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.room-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.room-name { margin: 0; font-size: 16.5px; font-weight: 600; color: var(--ink); }
.room-meta { display: flex; flex-wrap: wrap; gap: 16px; }
.room-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-muted); }
.room-meta-icon { display: inline-flex; color: var(--ink-faint); }
.room-card-media {
    flex: none;
    align-self: stretch;
    width: 150px;
    min-height: 118px;
    border-radius: var(--radius-md);
    background: linear-gradient(150deg, #E4B36A, #C07A3C 55%, #9E4A28);
}
.room-list > .room-card:nth-child(3n + 2) .room-card-media { background: linear-gradient(150deg, #AEB187, #5F6B4C); }
.room-list > .room-card:nth-child(3n + 3) .room-card-media { background: linear-gradient(150deg, #DBA890, #A65A4E); }

/* TEMPORARY — rooms carry no photo of their own, so this span is a coloured stand-in and
   reads as a failed image rather than a design. Hidden until real room images exist; the
   sizing and gradients above are deliberately left intact, so bringing it back is deleting
   this one rule. Its test in AmmanThemeTest goes with it. */
.room-card-media { display: none; }
.room-card-rail {
    flex: none;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding-inline-start: 18px;
    border-inline-start: 1px solid var(--border);
    text-align: end;
}
.room-price { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.room-price-note { font-size: 11.5px; color: var(--ink-faint); }

/* --- house rules ------------------------------------------------------- */
.rule-list { margin: 0; }
.rule-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.rule-row:last-child { border-bottom: 0; }
.rule-type { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.rule-text { margin: 0; font-size: 14px; color: var(--ink-muted); }

/* --- location ---------------------------------------------------------- */
.loc-panel {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 1px 1px, rgba(120, 104, 74, .16) 1px, transparent 0) 0 0 / 22px 22px,
        linear-gradient(135deg, #EFE7D6 0%, #E3D6BE 100%);
}
.loc-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    color: #fff;
    background: var(--brand);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
}
.loc-pin svg { width: 20px; height: 20px; }
.loc-address { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.loc-place { margin: 4px 0 0; font-size: 13px; }

.nearby { margin-top: 22px; }
.nearby-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--ink); }
.nearby-group { margin-bottom: 14px; }
.nearby-group:last-child { margin-bottom: 0; }
.nearby-section {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.nearby-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 32px;
}
.nearby-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.nearby-place { font-size: 13.5px; color: var(--ink-soft); }
/* The distance is one value and must read as one: without this the row shrank both
   children alike, and "6 km" broke across two lines next to a long place name. It holds
   its width; the name wraps instead, which is what has room to. Matches harbin's
   .hd-near-dist and qingdao's .hd-near-row .d, where this was already right. */
.nearby-dist { flex: none; white-space: nowrap; font-size: 12.5px; font-weight: 500; }

/* --- reviews: guest score + per-aspect bars + cards -------------------- */
.review-summary {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 26px;
}
.review-score-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}
.review-score-big { font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.review-score-label { font-size: 12.5px; color: var(--ink-muted); }

.score-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 32px;
    align-content: start;
}
.score-bar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.score-bar-label { font-size: 13px; color: var(--ink-soft); }
.score-bar-val { font-size: 13px; font-weight: 600; color: var(--ink); }
.score-bar-track { height: 6px; background: var(--sand-100); border-radius: var(--radius-pill); overflow: hidden; }
.score-bar-fill {
    height: 100%;
    width: calc(var(--score, 0) / 10 * 100%);
    background: var(--brand);
    border-radius: var(--radius-pill);
}

/* --- reviews: header toolbar + horizontal carousel (loops via arrows) --- */
.review-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.review-header .hotel-section-title { margin: 0; }
.review-nav-group { display: flex; gap: 8px; flex: none; }
.review-nav {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    color: var(--ink-soft);
    transition: border-color .15s ease, color .15s ease;
}
.review-nav:hover { border-color: var(--brand); color: var(--brand); }
.review-nav svg { width: 18px; height: 18px; }
.review-prev svg { transform: rotate(90deg); }
.review-next svg { transform: rotate(-90deg); }
/* flex-start, not `left`: the row reverses on the ar locale and the button should follow
   the text it sits under. */
.review-cta { display: flex; justify-content: flex-start; margin-top: 22px; }
.review-all { padding: 12px 30px; font-size: 14px; }

/* The carousel arrows share this row with the title rather than sitting on the section
   heading, so the control sits next to the track it scrolls. The spacing that was the
   title's moves here, since the title is now a child. */
.review-track-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0 12px; }
/* Same weight as .nearby-title — a label inside a section, not a second section heading.
   text-align: start rather than left so the ar locale mirrors it. */
.review-track-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); text-align: start; }
.review-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 8px;
    margin-inline: -2px;
}
.review-track::-webkit-scrollbar { display: none; }
.review-card {
    flex: 0 0 clamp(260px, 31%, 380px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}
.review-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.review-author { display: flex; align-items: center; gap: 11px; min-width: 0; }
.review-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
    border-radius: var(--radius-pill);
}
.review-author-meta { display: flex; flex-direction: column; min-width: 0; }
.review-author-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.review-author-sub { font-size: 12px; }
.review-card-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    padding: 0 8px;
    flex: none;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--ink);
    border-radius: var(--radius-sm);
}
.review-card-title { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
/* Clamp both text blocks so a long review can't make every carousel card tall. */
.review-card-body { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.review-card-neg { margin: 8px 0 0; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Bottom-right of the card: margin-top:auto eats the slack in the flex column so the date
   sits on the floor no matter how short the review is, and the track stretches every card
   to the same height, so they line up across the row. align-self (not `right`) because the
   ar locale mirrors the whole thing. */
.review-card-date { margin-top: auto; padding-top: 12px; align-self: flex-end; font-size: 12px; }

/* --- FAQ --------------------------------------------------------------- */
/* The rules here separate one question from the next, so the list needs n-1 of them: the
   last item's bottom border sat under nothing and read as a section divider. */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-q::after {
    content: "+";
    flex: none;
    font-size: 20px;
    font-weight: 400;
    color: var(--ink-muted);
    transition: transform .18s ease;
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-a { margin: 0; padding: 0 2px 18px; font-size: 14px; line-height: 1.65; color: var(--ink-muted); }

/* --- full gallery ------------------------------------------------------ */
.hotel-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.hotel-gallery-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #E4B36A, #9E4A28);
}

/* --- hotel detail responsive ------------------------------------------ */
@media (max-width: 900px) {
    .hotel-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        height: auto;
    }
    /* Every tile sizes itself now that the grid no longer has a fixed 420px height to
       divide. Written before the hero rule below on purpose: the hero carries both
       classes, so the two aspect-ratios are equally specific and source order decides. */
    .hotel-mosaic-tile { height: auto; aspect-ratio: 4 / 3; }
    /* The grid lays out the <button>, not the <img> inside it. This used to be written
       as `.hotel-mosaic .detail-cover`, which is the image — so the desktop
       `grid-column: 1; grid-row: 1 / span 2` survived here and pinned the hero into a
       two-row-tall cell in the first column, leaving the second row's left half empty.
       The 16/9 image then sat inside that taller cell with the tile's orange gradient
       showing above and below it. Override the tile itself. */
    .hotel-mosaic-hero {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 16 / 9;
    }
    /* .is-single beats a bare .hotel-mosaic, so the 380px desktop height has to be
       cleared at its own weight or the lone cover keeps a fixed-height cell to rattle in. */
    .hotel-mosaic.is-single { height: auto; }
    .review-summary { grid-template-columns: 1fr; gap: 20px; }
    .score-bars { grid-template-columns: 1fr; }
    .nearby-list { grid-template-columns: 1fr; }
    /* The overview keeps its two blocks side by side on a tablet — highlights left, rating
       card right — rather than collapsing to one column the way it used to. There is room
       for both here, and stacking pushed the score a full screen below the fold. The card
       column is fluid so it stays a card and not a banner: ~290px at 800px of viewport,
       narrowing to its 200px floor at the bottom of the band. */
    .hotel-overview {
        grid-template-columns: minmax(0, 1fr) clamp(200px, 40%, 320px);
        gap: 24px;
    }
    /* Two highlight columns while the shrinking left column can hold them, one when it
       cannot — auto-fit decides per width, so no third breakpoint is needed to catch the
       point where "Air conditioning" starts wrapping. */
    .overview-highlights { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .hotel-anchor-name { display: none; }
}

@media (max-width: 600px) {
    /* The mosaic is deliberately NOT collapsed here. `.hotel-mosaic-tile` is every tile —
       the hero carries that class too (hotel.blade.php builds it as
       ['hotel-mosaic-tile', 'hotel-mosaic-hero' => $i === 0]) — so hiding it took the whole
       gallery off the page below 600px, cover included, along with the "+N photos" button
       that opens the lightbox. The mobile layout is the ≤900px block above, which already
       stacks the hero over two columns of thumbnails. */
    .hotel-anchor-price { display: none; }
    .description-grid { grid-template-columns: 1fr; }
    /* A phone is where the overview genuinely runs out of width: the two blocks stack and
       the rating card is capped so it does not stretch edge to edge. This lived in the
       ≤900px block, which is why a tablet got the phone layout. */
    .hotel-overview { grid-template-columns: 1fr; gap: 22px; }
    .overview-rating { max-width: 340px; }
    .overview-highlights { grid-template-columns: 1fr; }
    .room-card { flex-wrap: wrap; align-items: stretch; gap: 12px; }
    .room-card-media { width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
    .room-card-rail { flex-direction: row; align-items: baseline; gap: 8px; padding-inline-start: 0; border-inline-start: 0; text-align: start; }
    .rule-row { grid-template-columns: 1fr; gap: 4px; }
}

/* === BLOG =============================================================== */
.blog-head { margin-bottom: 22px; }

.post-detail { max-width: 760px; margin-inline: auto; }
.post-detail-head { margin-bottom: 22px; }
.post-detail-title {
    margin: 0;
    font-size: clamp(28px, 4.4vw, 36px);
    font-weight: 700;
    letter-spacing: -.028em;
    line-height: 1.1;
    color: var(--ink);
}
.post-detail-meta { margin-top: 12px; font-size: 13px; color: var(--ink-muted); }
.post-detail-dot { color: var(--sand-300); margin-inline: 2px; }
.post-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 26px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #DBA890, #A65A4E);
}
.post-detail-excerpt {
    margin: 0 0 22px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ink-soft);
}
.post-detail-body p { margin: 0 0 18px; font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.post-detail-body p:last-child { margin-bottom: 0; }

/* === 404 =============================================================== */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 80px 20px;
    text-align: center;
}
.error-code {
    font-family: var(--font-mono);
    font-size: clamp(64px, 16vw, 120px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--brand);
}
.error-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.error-body { max-width: 42ch; margin: 0; }
.error-page .btn { margin-top: 10px; }

/* === OPTIONAL PAGES: SHARED ============================================= */
/* Terracotta eyebrow used by about / contact / privacy heads + section heads.
   (Distinct from .label, which is the mono/muted variant.) */
.eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--brand);
}
.section-head .eyebrow { margin-bottom: 8px; }

/* === ABOUT ============================================================== */
.about-hero {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 44px;
    align-items: center;
    margin-block: 20px 8px;
}
.about-hero-copy .eyebrow { margin-bottom: 12px; }
.about-hero-title {
    margin: 0;
    font-size: clamp(30px, 5vw, 46px);
    font-weight: 700;
    letter-spacing: -.032em;
    line-height: 1.05;
    color: var(--ink);
}
.about-hero-lead {
    margin: 20px 0 0;
    max-width: 56ch;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-muted);
}
.about-hero-art {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: 320px;
    border-radius: var(--radius-xl);
    background: linear-gradient(150deg, #C2703A 0%, #A44E2A 50%, #7C3A22 100%);
}
.about-hero-art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 15px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 15px);
}
.about-hero-mark {
    position: absolute;
    inset-inline-end: 18px;
    bottom: -12px;
    width: 240px;
    height: 240px;
    color: #FBE7D4;
    opacity: .2;
}

.about-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.step-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px;
}
.step-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--brand);
    background: var(--terracotta-100);
    border-radius: var(--radius-lg);
}
.step-icon svg { width: 22px; height: 22px; }
.step-num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-faint);
}
.step-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.step-body { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); }

.about-values {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 44px;
    background: var(--ink);
    border-radius: var(--radius-xl);
}
.about-values::after {
    content: "";
    position: absolute;
    top: -90px;
    inset-inline-end: -40px;
    z-index: -1;
    width: 340px;
    height: 340px;
    border-radius: var(--radius-pill);
    background: radial-gradient(circle, rgba(188, 91, 52, .38), rgba(188, 91, 52, 0) 68%);
    pointer-events: none;
}
.about-values-eyebrow { color: var(--amber-500); }
.about-values-title {
    margin: 10px 0 0;
    max-width: 22ch;
    font-size: clamp(24px, 3.4vw, 30px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.12;
    color: #FBF7F1;
}
.about-values-body {
    margin: 16px 0 0;
    max-width: 60ch;
    font-size: 15px;
    line-height: 1.7;
    color: #B7AD9C;
}

.about-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 32px 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}
.about-cta-title {
    margin: 0;
    max-width: 30ch;
    font-size: clamp(22px, 3vw, 26px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.12;
    color: var(--ink);
}
.about-cta-btn { flex: none; }

/* === CONTACT ============================================================ */
.contact-head { max-width: 60ch; margin-block: 20px 30px; }
.contact-head .eyebrow { margin-bottom: 10px; }
.contact-head .h1 { max-width: 18ch; }
.contact-head .lead { margin-top: 16px; }

/* The two halves were even, which gave the form ~550px of a 1124px page — visibly narrower
   than the same card on /concierge-service, where it stands alone in its section. The
   contact methods need only enough width for an icon, a label and an address; the slack
   goes to the form, which is what the page is for. Below 900px this collapses to one
   column anyway (see the optional-pages responsive block). */
.contact-grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.contact-grid.is-single { grid-template-columns: 1fr; }
.contact-left { display: flex; flex-direction: column; gap: 14px; }

/* contact form card */
.contact-form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(22px, 3vw, 32px);
}
.contact-form-title { margin: 0; font-size: 22px; font-weight: 600; color: var(--ink); }
.contact-form-sub { margin: 6px 0 20px; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.ct-amman-form { display: flex; flex-direction: column; gap: 16px; }
.ct-amman-field { display: flex; flex-direction: column; gap: 7px; }
.ct-amman-field-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.ct-amman-field input, .ct-amman-field select, .ct-amman-field textarea {
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--bg, #fff);
    /* --border is 1.32:1 and cannot identify a control (WCAG 1.4.11 wants 3:1);
       --ink-faint is 4.61:1 against --bg, the fill these fields use. */
    border: 1px solid var(--ink-faint);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.ct-amman-field input, .ct-amman-field select { height: 48px; padding-block: 0; }
.ct-amman-field textarea { resize: vertical; min-height: 110px; font-family: inherit; }
/* A 1px border recolour was the whole focus indicator here; every other control in the
   theme now shows the same ring, so these do too. */
.ct-amman-field input:focus-visible, .ct-amman-field select:focus-visible, .ct-amman-field textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }
.ct-amman-field.has-error input, .ct-amman-field.has-error select, .ct-amman-field.has-error textarea { border-color: var(--danger, #c0392b); }
.ct-amman-field-error { font-size: 12px; line-height: 1.4; color: var(--danger, #c0392b); display: none; }
.ct-amman-field.has-error .ct-amman-field-error { display: block; }
.contact-count { display: block; margin-top: 6px; font-size: 12px; text-align: end; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ct-amman-send { margin-top: 4px; justify-content: center; width: 100%; }
.form-error { color: var(--danger, #c0392b); font-size: 13px; font-weight: 500; margin: 0; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ct-amman-sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 0; }
.ct-amman-sent-check { width: 60px; height: 60px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ct-amman-sent-check svg { width: 26px; height: 26px; }
.ct-amman-sent h2 { margin: 6px 0 0; font-size: 22px; color: var(--ink); }
.ct-amman-sent p { margin: 0; color: var(--ink-muted); max-width: 40ch; }
/* Author display beats the UA [hidden] rule, so restore hiding explicitly. */
.ct-amman-form[hidden],
.ct-amman-sent[hidden] { display: none; }

/* === CONCIERGE SERVICE ================================================= */
.concierge-city p { max-width: 70ch; margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }
.concierge-exps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 32px; }
.concierge-exp { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.concierge-exp-check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--sand-100); color: var(--brand); }
.concierge-exp-check svg { width: 14px; height: 14px; }
.concierge-form-wrap .contact-form-card { max-width: 640px; margin-inline: auto; }

.contact-methods { display: flex; flex-direction: column; gap: 14px; }
.contact-method {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.contact-method:hover {
    border-color: var(--sand-300);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}
.contact-method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: none;
    color: var(--brand);
    background: var(--terracotta-100);
    border-radius: 13px;
}
.contact-method-icon svg { width: 22px; height: 22px; }
.contact-method-icon.is-whatsapp { color: var(--success-600); background: #E4EFE4; }
.contact-method-icon.is-email { color: #9B6E1E; background: var(--amber-100); }
.contact-method-icon.is-address { color: var(--olive-600); background: var(--olive-100); }
.contact-method-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contact-method-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.contact-method-value {
    font-size: 13.5px;
    color: var(--ink-muted);
    overflow-wrap: anywhere;
}
.contact-method-arrow { display: inline-flex; flex: none; color: var(--ink-faint); }
.contact-method-arrow svg { width: 18px; height: 18px; }

.contact-hours {
    padding: 24px;
    background: var(--ink);
    border-radius: var(--radius-xl);
}
.contact-hours-head { display: flex; align-items: center; gap: 12px; }
.contact-hours-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    color: var(--amber-500);
    background: rgba(233, 225, 211, .08);
    border-radius: var(--radius-md);
}
.contact-hours-icon svg { width: 20px; height: 20px; }
.contact-hours-title { font-size: 15px; font-weight: 600; color: #FBF7F1; }
.contact-hours-sched {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #E9E1D3;
    white-space: pre-line;
}
.contact-hours-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(233, 225, 211, .14);
    font-size: 12.5px;
    color: #B7AD9C;
}
.contact-hours-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: var(--radius-pill);
    background: #6BBE7B;
}

/* === PRIVACY ============================================================ */
.privacy-head { max-width: 64ch; margin-block: 20px 32px; }
.privacy-head .eyebrow { margin-bottom: 10px; }
.privacy-head .lead { margin-top: 16px; }
.privacy-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.privacy-chip {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-muted);
    background: var(--sand-100);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
}

.privacy-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}
.privacy-toc {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.privacy-toc-title {
    padding: 0 12px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.privacy-toc-link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--ink-muted);
    text-decoration: none;
    border-inline-start: 2px solid var(--border);
    border-radius: var(--radius-sm);
    transition: color .15s ease, background .15s ease;
}
.privacy-toc-link:hover { color: var(--brand); background: var(--sand-100); }
.privacy-toc-num { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }

.privacy-body { min-width: 0; }
.privacy-section {
    scroll-margin-top: 92px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border);
}
.privacy-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.privacy-num { font-family: var(--font-mono); font-size: 13px; color: var(--brand); }
.privacy-section-title {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--ink);
}
.privacy-section-body {
    margin: 0;
    max-width: 68ch;
    font-size: 15px;
    line-height: 1.72;
    color: var(--ink-soft);
}

.privacy-help {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px;
}
.privacy-help-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.privacy-help-body { margin: 8px 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
.privacy-help-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.privacy-help-email { font-size: 13px; color: var(--ink-muted); }
.privacy-help-email:hover { color: var(--brand); }

/* === OPTIONAL PAGES: RESPONSIVE ======================================== */
@media (max-width: 900px) {
    .about-hero { grid-template-columns: 1fr; gap: 28px; }
    .about-hero-art { height: 240px; }
    .about-steps { grid-template-columns: 1fr; }
    .about-values { padding: 32px 28px; }
    .about-cta { padding: 28px; }
    .contact-grid { grid-template-columns: 1fr; }
    .privacy-layout { grid-template-columns: 1fr; gap: 24px; }
    .privacy-toc {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        padding-bottom: 4px;
    }
    .privacy-toc-title { flex-basis: 100%; padding-inline: 0; }
    .privacy-toc-link { border-inline-start: 0; background: var(--sand-100); }
}

@media (max-width: 600px) {
    .about-cta { flex-direction: column; align-items: flex-start; gap: 16px; }
    .about-cta-btn { width: 100%; }
    .contact-method { padding: 16px; }
}