/* stay-directory.css - filterable hotel directory on the hotel guide pages (rev 37, 2026-10-05).
   Cards are rendered into the page HTML by the directory build script; stay-directory.js only
   filters, sorts and pages them. Written against the site tokens so it follows theme-dark.css. */
.sd{padding:56px 0 64px}
.sd .container{max-width:var(--container)}
.sd-head{margin-bottom:22px}
.sd-head h2{margin:0 0 .35em;font-size:clamp(1.6rem,2.8vw,2.2rem)}
.sd-head p{color:var(--slate);max-width:72ch;margin:0}
.sd-trust{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--cream);font-size:.9rem;color:var(--slate);line-height:1.55;max-width:900px}
.sd-trust b{color:var(--ink,var(--charcoal))}
.sd-trust svg{flex:0 0 auto;margin-top:2px;color:var(--pine-text,var(--pine))}
.sd-bar{position:sticky;top:62px;z-index:20;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-md);margin:22px 0 14px}
.sd-budget{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;border:0}
.sd-budget legend{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:700;margin-bottom:6px;padding:0;width:100%}
.sd-budget label{position:relative;cursor:pointer}
.sd-budget input{position:absolute;opacity:0;width:1px;height:1px}
.sd-budget span{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--cream);font-size:.88rem;font-weight:700;color:var(--ink,var(--charcoal));transition:.15s;white-space:nowrap}
.sd-budget span small{font-weight:400;color:var(--slate);font-size:.76rem}
.sd-budget input:checked+span{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
.sd-budget input:checked+span small{color:rgba(255,255,255,.85)}
.sd-budget input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.sd-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.sd-f{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 150px}
.sd-f label,.sd-f .sd-lbl{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-weight:700}
.sd-f select,.sd-f input[type=search]{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 10px;font-size:.92rem;background:var(--cream);color:var(--ink,var(--charcoal));font-family:inherit}
.sd-f.sd-q{flex:2 1 200px}
.sd-more-f{border:0;background:none;color:var(--terracotta);font-weight:700;font-size:.88rem;cursor:pointer;padding:9px 4px;white-space:nowrap}
.sd-amen{display:none;flex-wrap:wrap;gap:6px 16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.sd-bar.open .sd-amen{display:flex}
.sd-amen label{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;color:var(--ink,var(--charcoal));cursor:pointer}
.sd-amen input{accent-color:var(--terracotta);width:16px;height:16px}
.sd-status{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin:4px 0 16px;font-size:.92rem;color:var(--slate)}
.sd-status b{color:var(--ink,var(--charcoal))}
.sd-reset{border:0;background:none;color:var(--terracotta);font-weight:700;cursor:pointer;font-size:.88rem;padding:4px}
.sd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sd-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.sd-card[hidden]{display:none}
/* before the script runs, show only the first page so the layout does not jump; a noscript style
   on the page shows every card when JavaScript is off */
.sd:not(.sd-ready) .sd-grid>.sd-card:nth-child(n+25){display:none}
.sd-img{position:relative;display:block;aspect-ratio:3/2;background:var(--cream);overflow:hidden}
.sd-img img{width:100%;height:100%;object-fit:cover;display:block}
.sd-img .sd-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--slate);font-size:.82rem;text-align:center;padding:12px}
.sd-type{position:absolute;left:10px;top:10px;background:rgba(16,14,12,.78);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:999px}
.sd-body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.sd-body h3{margin:0;font-size:1.06rem;line-height:1.25;letter-spacing:-.01em}
.sd-body h3 a{color:var(--ink,var(--charcoal));text-decoration:none}
.sd-body h3 a:hover{color:var(--terracotta)}
.sd-en{display:block;font-size:.78rem;font-weight:400;color:var(--slate);margin-top:2px;letter-spacing:0}
.sd-loc{margin:0;font-size:.84rem;color:var(--slate);line-height:1.45}
.sd-rate{margin:0;font-size:.86rem;color:var(--slate);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.sd-rate .sd-star{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--ink,var(--charcoal))}
.sd-rate .sd-star::before{content:"\2605";color:var(--gold)}
.sd-tags{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 0;padding:0;list-style:none}
.sd-tags li{font-size:.74rem;padding:3px 8px;border-radius:999px;background:var(--cream);border:1px solid var(--line);color:var(--slate)}
.sd-tags li.sd-c{border-color:var(--gold);color:var(--gold)}
.sd-foot{margin-top:auto;padding-top:8px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;border-top:1px dashed var(--line)}
.sd-price{font-size:.78rem;color:var(--slate);line-height:1.3}
.sd-price b{display:block;font-size:1.18rem;color:var(--ink,var(--charcoal));font-weight:800}
.sd-price.na b{font-size:.92rem;font-weight:700;color:var(--slate)}
.sd-act{display:flex;gap:6px;flex:0 0 auto}
.sd-act a{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:36px;padding:7px 11px;border-radius:999px;border:1px solid var(--line);font-size:.8rem;font-weight:700;color:var(--ink,var(--charcoal));text-decoration:none;background:var(--cream)}
.sd-act a:hover{border-color:var(--terracotta);color:var(--terracotta)}
.sd-act a.sd-go{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
.sd-pager{display:flex;justify-content:center;margin-top:22px}
.sd-pager button{border:1px solid var(--line);background:var(--paper);color:var(--ink,var(--charcoal));font-weight:700;padding:12px 22px;border-radius:999px;cursor:pointer;font-size:.95rem}
.sd-pager button:hover{border-color:var(--terracotta);color:var(--terracotta)}
.sd-empty{grid-column:1/-1;text-align:center;padding:40px 16px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--slate)}
.sd-method{margin-top:26px;font-size:.86rem;color:var(--slate);line-height:1.6;max-width:900px}
.sd-method summary{cursor:pointer;font-weight:700;color:var(--ink,var(--charcoal))}
/* data tables on the guide pages */
.sd-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin:18px 0 8px;-webkit-overflow-scrolling:touch}
.sd-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
.sd-table th,.sd-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.sd-table th{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);background:var(--cream);font-weight:700}
.sd-table tr:last-child td{border-bottom:0}
.sd-table td.num,.sd-table th.num{text-align:right;white-space:nowrap}
.sd-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0}
.sd-kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.sd-kpi b{display:block;font-size:1.6rem;line-height:1.1;color:var(--ink,var(--charcoal));font-weight:800}
.sd-kpi span{font-size:.82rem;color:var(--slate)}
@media (max-width:1024px){.sd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .sd{padding:40px 0 48px}
  .sd-grid{grid-template-columns:minmax(0,1fr)}
  .sd-bar{position:static;padding:12px}
  .sd-budget{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .sd-f{flex:1 1 calc(50% - 10px)}
  .sd-f.sd-q{flex-basis:100%}
  .sd-kpi b{font-size:1.3rem}
}