/* ============================================================
   Afternoon Tea Review — Main Stylesheet
   Fonts: Dancing Script (hero) · Athiti (headings/UI) · Noto Serif Thai (body)
   Palette: White / Black base · Fresh multi-accent
   ============================================================ */

/* ─── Tokens ───────────────────────────────────────────────────────────────── */

:root {
    /* Accent palette — pulled from logo */
    --clr-teal:    #00B4B0;
    --clr-coral:   #E8454A;
    --clr-amber:   #F5A623;
    --clr-sage:    #4CAF82;
    --clr-violet:  #8B6FD4;
    --clr-sky:     #3A9EDD;

    /* Light mode */
    --bg:          #FFFFFF;
    --bg-alt:      #F6F6F6;
    --bg-surface:  #FFFFFF;
    --text:        #111111;
    --text-soft:   #555555;
    --text-muted:  #888888;
    --border:      #E0E0E0;
    --border-soft: #EEEEEE;
    --shadow:      0 2px 16px rgba(0,0,0,.07);
    --shadow-hover:0 6px 32px rgba(0,0,0,.13);

    /* Accent in use (can be overridden per component) */
    --accent:      var(--clr-teal);

    /* Typography */
    --ff-heading: 'Athiti', 'Noto Serif Thai', sans-serif;
    --ff-body:    'Noto Serif Thai', serif;
    --fz-xs:   .75rem;
    --fz-sm:   .875rem;
    --fz-base: 1rem;
    --fz-lg:   1.125rem;
    --fz-xl:   1.25rem;
    --fz-2xl:  1.5rem;
    --fz-3xl:  1.875rem;
    --fz-4xl:  2.25rem;
    --fz-5xl:  3rem;

    /* Spacing */
    --sp-1:  .25rem;
    --sp-2:  .5rem;
    --sp-3:  .75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;

    /* Layout */
    --max-w: 1280px;
    --radius:    5px;
    --radius-lg: 9px;
    --radius-xl: 13px;

    /* Transitions */
    --ease: cubic-bezier(.4,0,.2,1);
    --dur:  220ms;
}

/* Dark mode — respects browser/OS preference by default */
@media (prefers-color-scheme: dark) {
    :root { --mode: dark; }
}

[data-theme="dark"] {
    --bg:          #0A0A0A;
    --bg-alt:      #141414;
    --bg-surface:  #1A1A1A;
    --text:        #F5F5F5;
    --text-soft:   #AAAAAA;
    --text-muted:  #666666;
    --border:      #2A2A2A;
    --border-soft: #222222;
    --shadow:      0 2px 16px rgba(0,0,0,.4);
    --shadow-hover:0 6px 32px rgba(0,0,0,.6);
}

[data-theme="light"] {
    --bg:          #FFFFFF;
    --bg-alt:      #F6F6F6;
    --bg-surface:  #FFFFFF;
    --text:        #111111;
    --text-soft:   #555555;
    --text-muted:  #888888;
    --border:      #E0E0E0;
    --border-soft: #EEEEEE;
    --shadow:      0 2px 16px rgba(0,0,0,.07);
    --shadow-hover:0 6px 32px rgba(0,0,0,.13);
}

/* Auto dark when no explicit override */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:          #0A0A0A;
        --bg-alt:      #141414;
        --bg-surface:  #1A1A1A;
        --text:        #F5F5F5;
        --text-soft:   #AAAAAA;
        --text-muted:  #666666;
        --border:      #2A2A2A;
        --border-soft: #222222;
        --shadow:      0 2px 16px rgba(0,0,0,.4);
        --shadow-hover:0 6px 32px rgba(0,0,0,.6);
    }
}

/* ─── Reset + base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

body {
    font-family: var(--ff-body);
    font-size: var(--fz-base);
    font-weight: 300;          /* Noto Serif Thai Light — gentle strokes, warm mood */
    line-height: 1.85;         /* Thai needs room for vowel marks above/below */
    word-spacing: 0.03em;
    color: var(--text);
    background: var(--bg);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-heading);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
}

/* ─── Utilities ────────────────────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--sp-6);
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--sp-4);
    background: var(--clr-teal);
    color: #fff;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius);
    z-index: 9999;
}
.skip-link:focus { top: var(--sp-4); }

/* ─── Header ───────────────────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
    font-family: var(--ff-heading);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    height: 72px;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo { height: 48px; width: auto; object-fit: contain; }

/* Show light logo by default, dark logo in dark mode */
.logo--dark  { display: none; }
.logo--light { display: block; }

[data-theme="dark"] .logo--light { display: none; }
[data-theme="dark"] .logo--dark  { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo--light { display: none; }
    :root:not([data-theme="light"]) .logo--dark  { display: block; }
}

/* Nav */
.site-nav { flex: 1; display: flex; justify-content: center; }

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.nav-menu a {
    display: block;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius);
    font-family: var(--ff-heading);
    font-size: var(--fz-base);
    font-weight: 500;
    color: var(--text-soft);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav-menu a:hover,
.nav-menu .current-menu-item a {
    color: var(--clr-teal);
    background: color-mix(in srgb, var(--clr-teal) 10%, transparent);
}

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--sp-2); }
.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Header actions */
.site-header__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--text-soft);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-icon:hover { color: var(--text); background: var(--bg-alt); }

/* ─── Search overlay ────────────────────────────────────────────────────────── */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.search-overlay:not([hidden]) { opacity: 1; pointer-events: auto; }
.search-overlay[hidden] { display: none; }

/* Solid panel that drops from the header */
.search-overlay__form {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    background: var(--bg-surface);
    border-bottom: 2px solid var(--clr-teal);
    padding: var(--sp-4) var(--sp-6);
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
    flex-shrink: 0;
}
.search-overlay__input {
    flex: 1;
    padding: var(--sp-3) var(--sp-4);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--fz-base);
    background: var(--bg);
    color: var(--text);
    min-width: 0;
}
.search-overlay__input:focus { outline: none; border-color: var(--clr-teal); }

/* Close × sits inside the form bar */
.search-overlay__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--sp-2);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s;
}
.search-overlay__close:hover { color: var(--text); }

/* Dark backdrop fills the rest of the screen below the form */
.search-overlay__backdrop {
    flex: 1;
    background: rgba(0,0,0,.45);
    cursor: default;
}

/* Theme toggle icons */
.btn-theme-toggle .icon-sun  { display: block; }
.btn-theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .btn-theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .btn-theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-theme-toggle .icon-sun  { display: none; }
    :root:not([data-theme="light"]) .btn-theme-toggle .icon-moon { display: block; }
}

/* ─── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--radius);
    font-family: var(--ff-heading);
    font-size: var(--fz-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: all var(--dur) var(--ease);
    white-space: nowrap;
}

.btn--primary {
    background: var(--clr-teal);
    color: #fff;
}
.btn--primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 16px color-mix(in srgb, var(--clr-teal) 40%, transparent); }

.btn--outline {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--border);
}
.btn--outline:hover { border-color: var(--clr-teal); color: var(--clr-teal); }

.btn--full { width: 100%; justify-content: center; margin-top: var(--sp-4); }
.btn--small { padding: var(--sp-2) var(--sp-4); font-size: var(--fz-xs); }
.btn--facebook { color: #1877F2; border-color: color-mix(in srgb, #1877F2 30%, transparent); }
.btn--facebook:hover { background: color-mix(in srgb, #1877F2 8%, transparent); border-color: #1877F2; }

/* ─── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
    padding: var(--sp-20) 0 var(--sp-16);
    background: var(--bg);
    border-bottom: 1px solid var(--border-soft);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 80% 20%, color-mix(in srgb, var(--clr-teal) 8%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 20% 80%, color-mix(in srgb, var(--clr-amber) 6%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 30% 30% at 90% 90%, color-mix(in srgb, var(--clr-violet) 5%, transparent) 0%, transparent 50%);
    pointer-events: none;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--sp-16);
    position: relative;
}

.hero__eyebrow {
    display: inline-block;
    font-size: var(--fz-sm);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--clr-teal);
    margin-bottom: var(--sp-4);
}

.hero__title {
    font-family: 'Dancing Script', cursive;
    font-size: clamp(var(--fz-3xl), 5.5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--sp-6);
}

.hero__title em {
    font-style: italic;
    color: var(--clr-teal);
}

.hero__desc {
    font-size: var(--fz-lg);
    color: var(--text-soft);
    margin-bottom: var(--sp-8);
    max-width: 540px;
    white-space: nowrap;
}

.hero__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* Stat cards */
.hero__stats {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6) var(--sp-8);
    text-align: center;
    box-shadow: var(--shadow);
    min-width: 120px;
}

.stat-card__num {
    display: block;
    font-family: var(--ff-heading);
    font-size: var(--fz-3xl);
    font-weight: 700;
    color: var(--clr-teal);
    line-height: 1;
    margin-bottom: var(--sp-1);
}

.stat-card__label {
    font-size: var(--fz-sm);
    color: var(--text-muted);
}

/* ─── Country strip ────────────────────────────────────────────────────────── */

.country-strip {
    padding: var(--sp-6) 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border-soft);
    overflow-x: auto;
}

.country-strip__list {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: nowrap;
    min-width: max-content;
}

.country-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: 999px;
    border: 1.5px solid var(--border);
    font-size: var(--fz-sm);
    font-weight: 500;
    color: var(--text-soft);
    background: var(--bg-surface);
    transition: all var(--dur) var(--ease);
    white-space: nowrap;
}
.country-chip:hover {
    border-color: var(--clr-teal);
    color: var(--clr-teal);
    background: color-mix(in srgb, var(--clr-teal) 8%, var(--bg-surface));
}

.country-chip__count {
    background: var(--bg-alt);
    color: var(--text-muted);
    font-size: var(--fz-xs);
    padding: 1px 6px;
    border-radius: 999px;
    transition: background var(--dur) var(--ease);
}
.country-chip:hover .country-chip__count { background: color-mix(in srgb, var(--clr-teal) 15%, transparent); color: var(--clr-teal); }

/* ─── Section ──────────────────────────────────────────────────────────────── */

.section { padding: var(--sp-16) 0; }
.section--alt { background: var(--bg-alt); }

.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--sp-10);
}

.section-title {
    font-size: clamp(var(--fz-2xl), 3vw, var(--fz-3xl));
}
.section-title--coral { color: var(--clr-coral); }
.section-title--teal  { color: var(--clr-teal); }

.section-link {
    font-size: var(--fz-sm);
    font-weight: 600;
    color: var(--clr-teal);
    transition: gap var(--dur) var(--ease);
}
.section-link:hover { text-decoration: underline; }

/* ─── Review grid ──────────────────────────────────────────────────────────── */

.review-grid {
    display: grid;
    gap: var(--sp-6);
}
.review-grid--3 { grid-template-columns: repeat(3, 1fr); }
.review-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ─── Review card ──────────────────────────────────────────────────────────── */

.review-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--border-soft);
}

.review-card__thumb {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: var(--bg-alt);
    border-radius: 0;
}

.review-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--ease);
}
.review-card:hover .review-card__img { transform: scale(1.04); }

.review-card__badges {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

.review-card__score {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-heading);
    font-size: var(--fz-sm);
    font-weight: 700;
    color: #fff;
    backdrop-filter: blur(4px);
}
.review-card__score--high   { background: var(--clr-sage); }
.review-card__score--mid    { background: var(--clr-amber); }
.review-card__score--low    { background: var(--clr-coral); }

.review-card__body {
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--sp-3);
}

/* Specific site label (teal small text — shows specific site or falls back to location name) */
.review-card__specific-site {
    font-size: var(--fz-xs);
    color: var(--clr-teal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Set name — the main headline of the card */
.review-card__title {
    font-size: var(--fz-xl);
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* City + location name row */
.review-card__location-row {
    font-size: var(--fz-sm);
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
}
.review-card__location-name-sub {
    color: var(--text-muted);
    font-size: var(--fz-xs);
}

.review-card__excerpt {
    font-size: var(--fz-sm);
    color: var(--text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.review-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-soft);
    font-size: var(--fz-xs);
    color: var(--text-muted);
}

.review-card__meta-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.review-card__read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fz-sm);
    font-weight: 600;
    color: var(--clr-teal);
    white-space: nowrap;
    flex-shrink: 0;
}
.review-card__read-more:hover { text-decoration: underline; }
.review-card__read-more .icon-teapot { transition: transform .2s; }
.review-card__read-more:hover .icon-teapot { transform: translateY(-4px) translateX(2px) rotate(-12deg); }

/* ─── Card meta chips (city / theme / price) ────────────────────────────────── */
.card-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}
.card-chip--city  { background: color-mix(in srgb, var(--clr-sky)    15%, transparent); color: var(--clr-sky);    border: 1px solid color-mix(in srgb, var(--clr-sky)    30%, transparent); }
.card-chip--theme { background: color-mix(in srgb, var(--clr-violet) 15%, transparent); color: var(--clr-violet); border: 1px solid color-mix(in srgb, var(--clr-violet) 30%, transparent); }
.card-chip--price { background: color-mix(in srgb, var(--clr-amber)  15%, transparent); color: var(--clr-amber);  border: 1px solid color-mix(in srgb, var(--clr-amber)  30%, transparent); }
.card-chip--visit { background: color-mix(in srgb, var(--clr-teal)   15%, transparent); color: var(--clr-teal);   border: 1px solid color-mix(in srgb, var(--clr-teal)   30%, transparent); }

/* Stretched link — makes entire card clickable */
.review-card__stretched-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Keep interactive elements above the stretched link */
.review-card__badges,
.review-card__score,
.review-card__meta-chips .badge,
.card-chip,
.review-card__read-more { position: relative; z-index: 2; }

/* ─── Badges ───────────────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--fz-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.badge--disclosure.badge--customer  { background: color-mix(in srgb, var(--clr-sage) 18%, transparent); color: var(--clr-sage); }
.badge--disclosure.badge--sponsored { background: color-mix(in srgb, var(--clr-amber) 18%, transparent); color: color-mix(in srgb, var(--clr-amber) 80%, #000); }
.badge--hightea  { background: color-mix(in srgb, var(--clr-violet) 18%, transparent); color: var(--clr-violet); }
.badge--theme    { background: color-mix(in srgb, var(--clr-sky) 15%, transparent); color: var(--clr-sky); }
.badge--chip     { background: var(--bg-alt); color: var(--text-soft); border: 1px solid var(--border); }

/* ─── Theme chips ──────────────────────────────────────────────────────────── */

.theme-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.theme-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-4) var(--sp-6);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border);
    background: var(--bg-surface);
    transition: all var(--dur) var(--ease);
    min-width: 120px;
    text-align: center;
}
.theme-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

/* Cycle accent colors for theme chips */
.theme-chip:nth-child(6n+1) { --chip-clr: var(--clr-teal); }
.theme-chip:nth-child(6n+2) { --chip-clr: var(--clr-coral); }
.theme-chip:nth-child(6n+3) { --chip-clr: var(--clr-amber); }
.theme-chip:nth-child(6n+4) { --chip-clr: var(--clr-sage); }
.theme-chip:nth-child(6n+5) { --chip-clr: var(--clr-violet); }
.theme-chip:nth-child(6n+6) { --chip-clr: var(--clr-sky); }
.theme-chip:hover { border-color: var(--chip-clr); color: var(--chip-clr); }
.theme-chip__name { font-weight: 600; font-size: var(--fz-base); }
.theme-chip__count { font-size: var(--fz-xs); color: var(--text-muted); margin-top: var(--sp-1); }

/* ─── Archive layout ───────────────────────────────────────────────────────── */

.archive-hero {
    padding: var(--sp-12) 0 var(--sp-8);
    background: var(--bg);
    border-bottom: 1px solid var(--border-soft);
}
.archive-hero__title { font-size: clamp(var(--fz-2xl), 4vw, var(--fz-4xl)); }
.archive-hero__desc { color: var(--text-soft); margin-top: var(--sp-3); }


.archive-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp-10);
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-16);
    align-items: start;
}

.archive-sidebar {
    /* flows naturally — no sticky, no scroll constraints */
}

/* On desktop the sidebar filter is always visible — override hidden attr */
@media (min-width: 901px) {
    .archive-sidebar .filter-panel {
        display: block !important;
    }
    .filter-toggle {
        display: none; /* no toggle needed — filter is always open in sidebar */
    }
}


.archive-main { min-width: 0; }

/* ─── Filter panel — inline collapsible checkbox panel ─────────────────────── */

.filter-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}

/* Groups stack vertically in sidebar */
.filter-panel .filter-group {
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: var(--sp-4);
}
.filter-panel .filter-group:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.filter-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-2);
}

.filter-select-all {
    font-family: var(--ff-heading);
    font-size: var(--fz-sm);
    font-weight: 400;
    color: var(--clr-teal);
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity var(--dur) var(--ease);
}
.filter-select-all:hover { opacity: .7; }

.filter-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    padding-right: var(--sp-1);
}

.filter-radios {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.filter-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.filter-check input[type="checkbox"],
.filter-check input[type="radio"] {
    flex-shrink: 0;
    accent-color: var(--clr-teal);
    width: 14px;
    height: 14px;
    margin-top: 3px;
    cursor: pointer;
}
.filter-check__label {
    font-family: var(--ff-heading);
    font-weight: 400;
    font-size: var(--fz-sm);
    color: var(--text);
    line-height: 1.4;
}
.filter-check__count {
    font-family: var(--ff-heading);
    font-weight: 400;
    color: var(--text-muted);
    font-size: var(--fz-xs);
}

.filter-panel__footer {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-soft);
}

.filter-panel__reset {
    font-family: var(--ff-heading);
    font-size: var(--fz-sm);
    font-weight: 400;
    color: var(--clr-coral);
}
.filter-panel__reset:hover { text-decoration: underline; }

/* Badge on Filters toggle button */
.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-teal);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    margin-left: 3px;
    line-height: 1;
}

.filter-label {
    display: block;
    font-family: var(--ff-heading);
    font-size: var(--fz-xs);
    font-weight: 400;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--sp-2);
}

.filter-input {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-family: var(--ff-heading);
    font-size: var(--fz-sm);
    font-weight: 400;
    transition: border-color var(--dur) var(--ease);
    appearance: none;
    -webkit-appearance: none;
}
.filter-input::placeholder {
    font-family: var(--ff-heading);
    font-weight: 400;
    color: var(--text-muted);
}
.filter-input:focus { outline: none; border-color: var(--clr-teal); }

/* ─── City autocomplete ─────────────────────────────────────────────────────── */

.city-ac__wrap {
    position: relative;
    margin-bottom: var(--sp-3);
}

.city-ac__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1.5px solid var(--clr-teal);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 20;
    overflow: hidden;
}

.city-ac__item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--ff-heading);
    font-size: var(--fz-sm);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
    gap: var(--sp-2);
}
.city-ac__item:hover,
.city-ac__item:focus  { background: var(--bg-alt); }
.city-ac__item.is-selected { color: var(--clr-teal); font-weight: 400; }

.city-ac__count {
    margin-left: auto;
    font-family: var(--ff-heading);
    font-weight: 400;
    color: var(--text-muted);
    font-size: var(--fz-xs);
}

/* Popular quick-pick chips */
.city-quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.city-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--sp-3);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-family: var(--ff-heading);
    font-size: var(--fz-xs);
    font-weight: 400;
    color: var(--text-soft);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                background var(--dur) var(--ease);
    white-space: nowrap;
}
.city-chip:hover {
    border-color: var(--clr-teal);
    color: var(--clr-teal);
}
.city-chip.is-active {
    background: var(--clr-teal);
    border-color: var(--clr-teal);
    color: #fff;
}

/* Selected city pills */
.city-selected {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.city-selected:not(:empty) { margin-top: var(--sp-2); }

.city-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px var(--sp-2) 3px var(--sp-3);
    background: var(--clr-teal);
    color: #fff;
    border-radius: 999px;
    font-family: var(--ff-heading);
    font-size: var(--fz-xs);
    font-weight: 400;
    white-space: nowrap;
}

.city-pill__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    color: #fff;
    font-size: .75rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
    flex-shrink: 0;
}
.city-pill__remove:hover { background: rgba(255,255,255,.5); }

/* Sort dropdown (results bar) */
.filter-select {
    padding: var(--sp-2) var(--sp-3);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-size: var(--fz-sm);
    transition: border-color var(--dur) var(--ease);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 2rem;
}
.filter-select:focus { outline: none; border-color: var(--clr-teal); }
.filter-select--small { width: auto; }

/* ─── Archive toolbar (count · sort · filter toggle) ───────────────────────── */

.archive-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.archive-results__count {
    flex: 1;
    font-family: var(--ff-heading);
    font-weight: 400;
    font-size: var(--fz-sm);
    color: var(--text-muted);
    letter-spacing: .03em;
}

.archive-toolbar__right {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.filter-toggle { gap: var(--sp-2); }

.archive-map-link {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ff-heading);
    font-size: var(--fz-sm);
    font-weight: 400;
    color: var(--clr-teal);
    text-decoration: none;
    white-space: nowrap;
    opacity: .85;
    transition: opacity .15s;
}
.archive-map-link:hover { opacity: 1; }

/* Sort pill */
.archive-results__sort {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 var(--sp-3);
    height: 34px;
    transition: border-color var(--dur) var(--ease);
}
.archive-results__sort:focus-within { border-color: var(--clr-teal); }

.archive-results__sort label {
    font-family: var(--ff-heading);
    font-weight: 400;
    font-size: var(--fz-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
    pointer-events: none;
}

.archive-results__sort label::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 11px;
    background: var(--border);
    margin-left: var(--sp-2);
    vertical-align: middle;
}

.archive-results__sort .filter-select--small {
    font-family: var(--ff-heading);
    font-weight: 400;
    font-size: var(--fz-sm);
    color: var(--text);
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    padding-right: 18px;
    /* let the browser size the select naturally so text sits vertically centred */
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 34px;
}

/* .filter-toggle is always visible — no display:none needed */

/* ─── Pagination ───────────────────────────────────────────────────────────── */

.pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-12);
}

.load-more-btn {
    min-width: 160px;
    letter-spacing: .06em;
}

/* ─── Ajax loader ──────────────────────────────────────────────────────────── */

.ajax-loader { display: none; justify-content: center; padding: var(--sp-12); }
.ajax-loader:not([hidden]) { display: flex; }
.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--clr-teal);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Single review ────────────────────────────────────────────────────────── */

/* Hero image */
.review-hero {
    position: relative;
    height: min(60vh, 520px);
    overflow: hidden;
}
.review-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-hero__link { display: block; cursor: zoom-in; }
.review-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 34%;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
}

.review-single__badges {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-3);
}

/* Body layout */
.review-single__body {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--sp-10);
    padding-top: var(--sp-10);
    padding-bottom: var(--sp-16);
    align-items: start;
}

/* Breadcrumb */
.review-single__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fz-xs);
    color: var(--text-muted);
    margin-bottom: var(--sp-5);
}
.review-single__breadcrumb a:hover { color: var(--clr-teal); }

/* Title area */
.review-single__title {
    font-size: clamp(var(--fz-2xl), 4vw, var(--fz-4xl));
    margin-bottom: var(--sp-3);
}

.review-single__set-name {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: var(--fz-sm);
    color: var(--clr-teal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.review-single__location-row {
    font-size: var(--fz-lg);
    color: var(--text-soft);
    margin-top: var(--sp-3);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.review-single__specific-site-sub { font-style: italic; }
.review-single__location-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.review-single__location-link:hover { color: var(--clr-teal); border-bottom-color: var(--clr-teal); }
.review-single__city a { color: var(--clr-sky); }
.review-single__city a:hover { text-decoration: underline; }

.review-single__meta-row {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border-soft);
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fz-sm);
    color: var(--text-muted);
}
.meta-item--link { color: var(--clr-teal); font-weight: 500; }
.meta-item--link:hover { text-decoration: underline; }

/* Review content (editor output) */
.review-content {
    margin-top: var(--sp-10);
    font-size: var(--fz-lg);
    font-weight: 300;
    line-height: 1.95;
    color: var(--text);
}
.review-content h2,
.review-content h3 { margin-top: var(--sp-8); margin-bottom: var(--sp-4); }
.review-content p   { margin-bottom: var(--sp-5); }
.review-content ul,
.review-content ol  { margin: var(--sp-5) 0; padding-left: var(--sp-6); }
.review-content li  { margin-bottom: var(--sp-2); }
.review-content a   { color: var(--clr-teal); text-decoration: underline; }
.review-content strong { font-weight: 700; }
.review-content em     { font-style: italic; }

/* Facebook source citation — below the review text */
.review-fb-citation {
    font-family: var(--ff-heading);
    font-size: var(--fz-xs);
    font-weight: 400;
    color: var(--text-muted);
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-soft);
}
.review-fb-citation a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.review-fb-citation a:hover { color: var(--text); }
.review-content blockquote {
    border-left: 4px solid var(--clr-teal);
    padding: var(--sp-4) var(--sp-6);
    margin: var(--sp-6) 0;
    background: var(--bg-alt);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--text-soft);
}

.review-section-title {
    font-size: var(--fz-2xl);
    margin-top: var(--sp-12);
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-3);
    border-bottom: 2px solid var(--border-soft);
}
.review-section-title--coral  { border-bottom-color: var(--clr-coral);  color: var(--clr-coral); }
.review-section-title--violet { border-bottom-color: var(--clr-violet); color: var(--clr-violet); }

/* ─── Gallery ──────────────────────────────────────────────────────────────── */

/* ── Feature image — first photo, shown before the review content ──────────── */
.review-feature-image {
    margin: 0 0 var(--sp-8);
    border-radius: var(--radius-lg);
    overflow: hidden;
    line-height: 0; /* remove gap below img */
}
.review-feature-image__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
}
.review-feature-image__caption {
    font-size: var(--fz-xs);
    color: var(--text-muted);
    text-align: center;
    padding: var(--sp-2) 0 0;
    line-height: 1.4;
}

/* ── Masonry columns gallery — handles any mix of 3:4, 4:3, 9:16 ──────────── */
.gallery-grid {
    columns: 3;
    column-gap: var(--sp-2);
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: var(--sp-2);
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: var(--bg-alt);
    cursor: pointer;
    display: block;
}


.gallery-item__img {
    width: 100%;
    height: auto;       /* natural aspect ratio — no cropping */
    display: block;
    transition: transform 400ms var(--ease);
}
.gallery-item:hover .gallery-item__img { transform: scale(1.04); }

.gallery-item__link {
    position: absolute;
    inset: 0;
    display: block;
    /* no dark overlay — just makes the item clickable for lightbox */
}

.gallery-item__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 100%);
    color: #fff;
    font-size: var(--fz-xs);
    padding: var(--sp-6) var(--sp-3) var(--sp-3);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
}
.gallery-item:hover .gallery-item__caption { opacity: 1; }

/* ─── Video ────────────────────────────────────────────────────────────────── */

.video-list { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.video-item { flex: 0 0 100%; }
.video-item--vertical { flex: 0 0 calc(50% - var(--sp-4)); }
.video-embed {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
}
.video-embed--vertical { aspect-ratio: 9/16; }
.video-embed iframe,
.video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.video-item__desc {
    margin-bottom: var(--sp-3);
    font-size: var(--fz-sm);
    color: var(--text-soft);
}

/* ─── Sidebar cards ────────────────────────────────────────────────────────── */

.review-single__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    position: sticky;
    top: 88px;
}

/* Score card */
.score-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    text-align: center;
    box-shadow: var(--shadow);
}

.score-card__dial {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto var(--sp-4);
}

.score-dial { transform: rotate(-90deg); }

.score-dial__track {
    fill: none;
    stroke: var(--border);
    stroke-width: 10;
}

.score-dial__fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 326.7;
    stroke-dashoffset: calc(326.7 - (326.7 * var(--score-pct) / 100));
    transition: stroke-dashoffset 1s var(--ease);
}
.score--high .score-dial__fill { stroke: var(--clr-sage); }
.score--mid  .score-dial__fill { stroke: var(--clr-amber); }
.score--low  .score-dial__fill { stroke: var(--clr-coral); }

.score-card__number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--ff-heading);
    font-size: var(--fz-3xl);
    font-weight: 700;
    line-height: 1;
}
.score--high .score-card__number { color: var(--clr-sage); }
.score--mid  .score-card__number { color: var(--clr-amber); }
.score--low  .score-card__number { color: var(--clr-coral); }

.score-card__denom {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--fz-xs);
    color: var(--text-muted);
}

.score-card__summary {
    font-size: var(--fz-sm);
    color: var(--text-soft);
    font-style: italic;
    line-height: 1.5;
}

/* Info card */
.info-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow);
}

.info-card__title {
    font-size: var(--fz-lg);
    font-weight: 700;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 2px solid var(--border-soft);
}
.info-card__title--amber  { border-bottom-color: var(--clr-amber);  color: var(--clr-amber); }
.info-card__title--violet { border-bottom-color: var(--clr-violet); color: var(--clr-violet); }
.info-card__title--sky    { border-bottom-color: var(--clr-sky);    color: var(--clr-sky); }

/* Price table */
.price-table { width: 100%; border-collapse: collapse; font-size: var(--fz-sm); }
.price-table td { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-soft); color: var(--text-soft); }
.price-table td:last-child { text-align: right; }
.price-table__val { color: var(--text); }
.price-table__net td { color: var(--text); font-size: var(--fz-base); padding-top: var(--sp-3); border-bottom: none; }
.price-table__promo td { color: var(--clr-sage); border-bottom: none; }
.price-table__perperson td { color: var(--text-muted); font-size: var(--fz-xs); border-bottom: none; font-style: italic; }
.price-table__for { font-size: .7em; font-weight: 400; opacity: .65; margin-left: 4px; }

/* Info list */
.info-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.info-list__item { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); font-size: var(--fz-sm); }
.info-list__label { color: var(--text-muted); flex-shrink: 0; }
.info-list__val { text-align: right; color: var(--text); }
.info-list__val--link,
a.info-list__val--link {
    color: var(--clr-teal);
    text-decoration: none;
    text-align: right;
}
.info-list__val--link:hover { text-decoration: underline; }
.info-list__val--disc { font-weight: 600; }
.info-list__val--customer  { color: var(--clr-sage); }
.info-list__val--sponsored { color: var(--clr-amber); }

/* Tag list */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag {
    display: inline-block;
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    border: 1.5px solid var(--border);
    font-size: var(--fz-xs);
    color: var(--text-soft);
    transition: all var(--dur) var(--ease);
}
.tag:hover { border-color: var(--clr-teal); color: var(--clr-teal); background: color-mix(in srgb, var(--clr-teal) 8%, transparent); }

/* ─── Lightbox ─────────────────────────────────────────────────────────────── */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8);
}
.lightbox[hidden] { display: none; }

.lightbox__inner {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
}

.lightbox__img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius);
}

.lightbox__caption { color: rgba(255,255,255,.8); font-size: var(--fz-sm); text-align: center; }

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: fixed;
    background: rgba(255,255,255,.1);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur) var(--ease);
    backdrop-filter: blur(4px);
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(255,255,255,.25); }

.lightbox__close { top: var(--sp-6);  right: var(--sp-6); }
.lightbox__prev  { left: var(--sp-6); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--sp-6); top: 50%; transform: translateY(-50%); }

/* ─── About blurb ──────────────────────────────────────────────────────────── */

.about-blurb { max-width: 720px; margin-inline: auto; }
.about-blurb h2 { font-size: var(--fz-2xl); margin-bottom: var(--sp-5); }
.about-blurb p  { color: var(--text-soft); margin-bottom: var(--sp-4); }

/* ─── Footer ───────────────────────────────────────────────────────────────── */

.site-footer {
    background: var(--bg);
    border-top: 1px solid var(--border);
    font-family: var(--ff-heading);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 200px 1fr 1fr 1fr;
    gap: var(--sp-10);
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-12);
    align-items: start;
}

.footer-logo { height: 48px; width: auto; opacity: .85; }
.site-footer__tagline { font-size: var(--fz-base); color: var(--text-muted); margin-top: var(--sp-3); line-height: 1.6; }

.site-footer__social { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); }
.social-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fz-base);
    color: var(--text-muted);
    transition: color var(--dur) var(--ease);
    text-decoration: none;
}
.social-link:hover { color: var(--clr-teal); }
.social-link svg { flex-shrink: 0; }

.site-footer__nav h4,
.site-footer__filters h4 {
    font-size: var(--fz-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
}

.footer-menu { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-menu a { font-size: var(--fz-base); color: var(--text-soft); transition: color var(--dur) var(--ease); }
.footer-menu a:hover { color: var(--clr-teal); }

.footer-tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.footer-tag-list a {
    font-size: var(--fz-sm);
    color: var(--text-soft);
    border: 1px solid var(--border);
    padding: 2px 10px;
    border-radius: 999px;
    transition: all var(--dur) var(--ease);
}
.footer-tag-list a:hover { border-color: var(--clr-teal); color: var(--clr-teal); }

.site-footer__bottom {
    background: var(--bg-alt);
    border-top: 1px solid var(--border-soft);
    padding: var(--sp-5) 0;
}
.site-footer__bottom .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.site-footer__bottom p { font-size: var(--fz-sm); color: var(--text-muted); }

/* ─── Page templates ───────────────────────────────────────────────────────── */

.page-content {
    max-width: 760px;
    margin: var(--sp-16) auto;
    padding: 0 var(--sp-6);
}
.page-content h1 { font-size: var(--fz-4xl); margin-bottom: var(--sp-8); }
.page-content p   { color: var(--text-soft); margin-bottom: var(--sp-5); line-height: 1.8; }

/* 404 */
.page-404 { text-align: center; padding: var(--sp-20) var(--sp-6); }
.page-404__code { font-family: var(--ff-heading); font-size: 8rem; font-weight: 700; color: var(--border); line-height: 1; margin-bottom: var(--sp-4); }
.page-404__title { font-size: var(--fz-2xl); margin-bottom: var(--sp-4); }
.page-404__desc { color: var(--text-soft); margin-bottom: var(--sp-8); }

/* Search */
.search-hero { padding: var(--sp-12) 0 var(--sp-8); }
.search-hero__form { display: flex; gap: var(--sp-3); max-width: 560px; margin-top: var(--sp-5); }
.search-hero__input { flex: 1; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--border); border-radius: var(--radius); font-size: var(--fz-base); background: var(--bg); color: var(--text); }
.search-hero__input:focus { outline: none; border-color: var(--clr-teal); }

/* Content none */
.content-none { text-align: center; padding: var(--sp-16) 0; color: var(--text-muted); }
.content-none__icon { font-size: 3rem; margin-bottom: var(--sp-4); opacity: .4; }
.content-none__title { font-size: var(--fz-xl); margin-bottom: var(--sp-3); }
.content-none__desc { font-size: var(--fz-sm); }

/* Section related */
.section--related { background: var(--bg-alt); padding: var(--sp-12) 0; }

/* ─── Same-place visits ─────────────────────────────────────────────────────── */
.section--same-place { padding: var(--sp-12) 0; border-top: 1px solid var(--border-soft); }

.same-place-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-width: 640px;
}

.same-place-item {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg);
    text-decoration: none;
    color: var(--text);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.same-place-item:hover { border-color: var(--clr-teal); box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.same-place-item__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 0;
}
.same-place-item__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.same-place-item__img--placeholder { background: var(--bg-alt); width: 100%; height: 100%; }

.same-place-item__body { flex: 1; min-width: 0; }
.same-place-item__set { font-size: var(--fz-xs); color: var(--clr-teal); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.same-place-item__title { font-size: var(--fz-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.same-place-item__meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: 4px; font-size: var(--fz-xs); color: var(--text-muted); }

.same-place-item__score {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fz-sm);
    font-weight: 700;
    color: #fff;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .review-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__desc { white-space: normal; }
    /* min-width:0 stops the 1fr grid cell expanding to fit all cards,
       which lets overflow-x:auto create a real scroll context */
    .hero__stats {
        min-width: 0;
        flex-direction: row;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--sp-2);
        scrollbar-width: none;
    }
    .hero__stats::-webkit-scrollbar { display: none; }
    .hero__stats .stat-card { flex: 0 0 auto; min-width: 110px; }

    .review-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .archive-layout { grid-template-columns: 1fr; }
    .archive-sidebar { position: static; }
    /* filter-panel collapsed by default on mobile; toggle button shows it */
    .filter-toggle { display: flex; }

    .review-single__body { grid-template-columns: 1fr; }
    .review-single__sidebar { position: static; display: grid; grid-template-columns: repeat(2, 1fr); }
    .score-card { grid-column: span 2; }

    .gallery-grid { columns: 2; }

}

@media (max-width: 640px) {
    :root { --sp-6: 1rem; }

    /* ── Prevent any horizontal scroll on every page ── */
    html, body { overflow-x: hidden; }

    /* Search overlay — align to mobile header height */
    .search-overlay { padding-top: 60px; }

    .site-header__inner { height: 60px; }

    .nav-menu { display: none; flex-direction: column; align-items: stretch; }
    .nav-menu.is-open {
        display: flex;
        position: fixed;
        top: 60px;
        left: 0; right: 0;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border);
        padding: var(--sp-4);
        z-index: 100;
        box-shadow: var(--shadow);
    }
    .nav-menu.is-open a { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); }
    .nav-toggle { display: flex; }

    .review-grid--3,
    .review-grid--4 { grid-template-columns: 1fr; }

    /* 1. Read more link — breathing room on the right */
    .review-card__read-more { padding-right: var(--sp-3); }

    /* 2. Stat cards — gap tightens on small screens */
    .hero__stats { gap: var(--sp-3); }

    /* 3. Search bar — stack input + button on small screens */
    .search-hero__form {
        flex-direction: column;
        max-width: 100%;
    }
    .search-hero__input { width: 100%; }
    .search-hero__form .btn { width: 100%; justify-content: center; }

    .site-footer__inner { grid-template-columns: 1fr; gap: var(--sp-8); }

    .gallery-grid { columns: 1; }

    .review-single__sidebar { grid-template-columns: 1fr; }
    .score-card { grid-column: auto; }

    /* 4. Archive toolbar — row 1: count + filter toggle
                            row 2: right group pushed to right at natural width */
    .archive-toolbar {
        flex-wrap: wrap;
        gap: var(--sp-2);
    }
    .archive-results__count { flex: 1 1 auto; }
    /* Filter toggle sits on row 1 beside count */
    .filter-toggle { margin-left: auto; }
    /* Right group wraps to row 2: map link left, sort right */
    .archive-toolbar__right {
        width: 100%;
        justify-content: space-between;
    }
    .archive-map-link { font-size: var(--fz-xs); }

    /* 5. Sort stays at natural width — no growing */
    .archive-results__sort { flex: 0 0 auto; }
    .archive-results__sort .filter-select--small { min-width: 80px; }
}

/* ─── Accessibility ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

:focus-visible {
    outline: 2.5px solid var(--clr-teal);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ─── WordPress specifics ──────────────────────────────────────────────────── */

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--fz-xs); color: var(--text-muted); text-align: center; margin-top: var(--sp-2); }
.alignleft  { float: left;  margin: 0 var(--sp-5) var(--sp-4) 0; }
.alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-5); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide  { width: calc(100% + 4rem); margin-inline: -2rem; }

/* ─── About page ───────────────────────────────────────────────────────────── */

.about-hero {
    padding: var(--sp-16) 0 var(--sp-10);
    text-align: center;
}
.about-hero__logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-4);
}
.about-hero__logo img {
    height: 150px;
    width: auto;
}
.about-hero__label {
    font-family: var(--ff-heading);
    font-size: var(--fz-sm);
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--clr-teal);
    margin-bottom: var(--sp-3);
}
.about-hero__title {
    font-family: 'Dancing Script', cursive;
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--text);
    line-height: 1.15;
}

.about-body {
    max-width: 680px;
    padding-bottom: var(--sp-20);
}

.about-content {
    margin-bottom: var(--sp-12);
}

.about-prose p {
    font-family: var(--ff-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 2;
    color: var(--text);
    margin-bottom: var(--sp-5);
}
.about-prose hr,
.about-prose .wp-block-separator {
    border: none;
    text-align: center;
    margin: var(--sp-8) 0;
    opacity: .6;
}
.about-prose hr::after,
.about-prose .wp-block-separator::after {
    content: '☕';
    font-size: 1.1rem;
    color: var(--text-muted);
}

.about-links {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.about-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--ff-heading);
    font-size: var(--fz-sm);
    font-weight: 400;
    color: var(--text-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: var(--sp-2) var(--sp-4);
    text-decoration: none;
    transition: color .2s, border-color .2s;
}
.about-link:hover {
    color: var(--clr-teal);
    border-color: var(--clr-teal);
}

/* ─── Map page ─────────────────────────────────────────────────────────────── */

.map-page .about-hero {
    padding: var(--sp-8) 0 var(--sp-2);
}
.map-page__count {
    font-family: var(--ff-heading);
    font-size: var(--fz-sm);
    color: var(--text-muted);
    padding-bottom: var(--sp-3);
}
.map-wrap {
    width: 100%;
    height: 75vh;
    min-height: 500px;
}

/* Custom Google Maps pin */
.atr-map-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.atr-map-pin__dot {
    width: 36px;
    height: 36px;
    background: var(--clr-teal);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    transition: transform .15s;
}
.atr-map-pin__dot svg {
    transform: rotate(45deg);
    color: #fff;
    width: 16px;
    height: 16px;
}
.atr-map-pin:hover .atr-map-pin__dot {
    transform: rotate(-45deg) scale(1.15);
}
.atr-map-pin__label {
    margin-top: 4px;
    background: #fff;
    color: var(--clr-teal);
    font-family: var(--ff-heading);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    white-space: nowrap;
    letter-spacing: .03em;
}

/* City filter control — sits inside the Google Map frame (TOP_LEFT) */
.atr-map-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    margin: 10px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    max-width: calc(100vw - 120px);
}
.atr-map-filter__btn {
    font-family: var(--ff-heading);
    font-size: 12px;
    font-weight: 400;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--clr-teal);
    background: transparent;
    color: var(--clr-teal);
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    line-height: 1.4;
}
.atr-map-filter__btn:hover {
    background: color-mix(in srgb, var(--clr-teal) 12%, transparent);
}
.atr-map-filter__btn--active {
    background: var(--clr-teal);
    color: #fff;
}

/* Google Maps InfoWindow — kill the scrollbar, remove all default padding */
.gm-style-iw-d {
    overflow: hidden !important;
}
.gm-style-iw,
.gm-style-iw-c {
    padding: 0 !important;
}
/* Close button + its wrapper div — both gone */
button.gm-ui-hover-effect,
.gm-style-iw-chr {
    display: none !important;
}

/* ─── Print ────────────────────────────────────────────────────────────────── */

@media print {
    .site-header, .site-footer, .filter-panel, .review-single__sidebar { display: none; }
    .review-single__body { display: block; }
    .review-content { font-size: 12pt; }
}