/* Theme-filter component — the Stories archive subject filter bar and the fade/lift
   transition on [data-filter-theme] items. Moved verbatim from global.css.
   NOTE: filter items use data-filter-theme, never data-theme — data-theme="dark" on <html> is the
   global dark-mode switch and must not match the filter transition selectors. */

.theme-filter-bar{padding:32px 0 96px;}

.theme-filter-bar .wrap{display:flex;gap:32px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:24px;}

.theme-filter-btn{background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:14px;color:var(--body);padding-bottom:6px;border-bottom:2px solid transparent;transition:color .2s ease, border-color .2s ease;}

.theme-filter-btn:hover{color:var(--heading);}

.theme-filter-btn.active{color:var(--accent);border-color:var(--accent);}

.archive-empty-state{text-align:center;font-family:var(--serif);font-style:italic;color:#8a8d93;padding:48px 0 0;}

/* Theme-filter transition (stories.html) — cards fade/lift in and out
     instead of snapping visible/hidden, and the FLIP transform main.js
     applies to reposition the survivors rides on this same transition. */
[data-filter-theme]{transition:opacity .38s cubic-bezier(.22,.61,.36,1), transform .38s cubic-bezier(.22,.61,.36,1);}

[data-filter-theme].is-leaving{opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;}

[data-filter-theme].is-entering{opacity:0;transform:translateY(14px);}

@media (prefers-reduced-motion: reduce){
[data-filter-theme]{transition:none;}
}

/* Place-filter component — the Places filter bar, custom dropdowns, reset/summary and the
   [data-state] results transition. Moved verbatim from global.css. */

/* FILTER BAR — three cascading selects (State, then City within it,
   then Village/Town within that) rather than a wall of buttons, since
   this list is meant to grow well past what a button row can hold.
   Plain underline selects instead of boxed/shadowed dropdowns, to
   match the site's restrained input style rather than reading as a
   generic SaaS filter widget. */
.places-filter-bar{padding:40px 0 32px;border-bottom:1px solid var(--border);}

.places-filter-row{display:flex;flex-wrap:wrap;align-items:end;gap:32px;}

.places-filter-group{display:flex;flex-direction:column;gap:8px;min-width:190px;}

.places-filter-group label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9a9d94;}

.places-select{appearance:none;background:transparent;border:none;border-bottom:1px solid var(--border);padding:6px 22px 10px 0;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--heading);cursor:pointer;transition:border-color .2s ease;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C46A2D' stroke-width='2'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:14px;}

.places-select:hover,.places-select:focus-visible{border-color:var(--accent);}

/* Hidden once places-custom-select.js enhances it — kept in the DOM
   (not display:none) purely so places-filter.js's existing reads/
   writes on it keep working. Falls back to the plain native select
   above if that script doesn't run. */
.places-select.places-select-native{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;pointer-events:none;}

/* Custom dropdown — the actual answer to "the native popup won't
   take a background color/width/padding": this is a real button +
   listbox built in the page, so it can. */
.places-select-wrap{position:relative;}

.places-select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;border:none;border-bottom:1px solid var(--border);padding:6px 0 10px;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--heading);text-align:left;cursor:pointer;transition:border-color .2s ease;}

.places-select-trigger:hover,.places-select-trigger[aria-expanded="true"]{border-color:var(--accent);}

.places-select-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.places-select-trigger .chevron{width:14px;height:14px;flex-shrink:0;color:var(--accent);transition:transform .2s ease;}

.places-select-trigger[aria-expanded="true"] .chevron{transform:rotate(180deg);}

/* Panel width matches the trigger exactly (100% of the same group),
   and its own border/shadow stand in for the outline a native popup
   would otherwise draw on its own terms. */
.places-select-panel{position:absolute;top:calc(100% + 8px);left:0;width:100%;max-height:260px;overflow-y:auto;margin:0;list-style:none;background:var(--select-panel-bg);border:1px solid var(--select-panel-border);z-index:20;box-shadow:0 14px 30px rgba(20,18,15,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;}

.places-select-panel[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0);}

.places-select-option{padding:11px 16px;font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--select-option-text);cursor:pointer;transition:background .15s ease;}

.places-select-option:hover,.places-select-option.is-active{background:var(--select-option-hover-bg);}

.places-select-option[aria-selected="true"]{font-weight:700;}

.places-filter-reset{align-self:end;appearance:none;background:transparent;border:1px solid var(--border);border-radius:0;padding:10px 20px;margin:0 0 0 12px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--body);cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease;}

.places-filter-reset:hover{color:var(--accent);border-color:var(--accent);}

.places-filter-summary{font-family:var(--sans);font-size:13px;color:var(--body);margin-top:24px;}

.places-filter-summary strong{color:var(--heading);font-weight:600;}

/* Cards leaving/entering the filtered view — mirrors the [data-filter-theme]
   transition contract used by stories.html/experiences.html above,
   scoped to [data-state] since this filter runs on a different
   (AND, three-level) condition than the single-facet theme filter. */
[data-state]{transition:opacity .38s cubic-bezier(.22,.61,.36,1), transform .38s cubic-bezier(.22,.61,.36,1);}

[data-state].is-leaving{opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;}

[data-state].is-entering{opacity:0;transform:translateY(14px);}

@media (prefers-reduced-motion: reduce){
[data-state]{transition:none;}
}

@media (max-width:620px){
.places-filter-row{gap:22px;}
.places-filter-group{min-width:140px;}
}