/* Activities hub — activities-hub-spec.md §8. Uses the site tokens in styles.css. */
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.hub{padding-top:18px; padding-bottom:40px;}
.page-hero--compact{padding:22px 40px 0; border-bottom:0;}

/* ---------- Filters ---------- */
.hub-filters{display:flex; flex-direction:column; gap:14px; margin-bottom:18px;}
.hub-filters fieldset{border:0; min-width:0;}
.hub-search{position:relative; max-width:520px; width:100%; margin:0 auto;}
.hub-search svg{position:absolute; left:16px; top:50%; transform:translateY(-50%); width:17px; height:17px; fill:none; stroke:var(--text-softer); stroke-width:2;}
.hub-search input{width:100%; padding:13px 18px 13px 44px; border:1px solid var(--line); border-radius:100px; background:#fff; font-size:14px; color:var(--ink);}
.hub-search input:focus{outline:2px solid var(--accent); outline-offset:1px;}
.hub-selects{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px;}
.hub-selects select{width:100%;}
.hub-selects label, .hub-sort{display:flex; flex-direction:column; gap:5px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-softer); font-weight:600;}
.hub select{appearance:none; -webkit-appearance:none; padding:10px 34px 10px 14px; border:1px solid var(--line); border-radius:8px; font:500 13.5px 'Inter',sans-serif; color:var(--ink); letter-spacing:0; text-transform:none; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230B2A47' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 13px center;}
.hub select:focus{outline:2px solid var(--accent); outline-offset:1px;}
.hub-toggles{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; font-size:13.5px; color:#3E4650;}
.toggle{display:inline-flex; align-items:center; gap:8px; cursor:pointer;}
.toggle input{width:16px; height:16px; accent-color:var(--ink);}
.hub-more-filters{display:none;}
.hub-reset, .linklike{background:none; border:0; padding:0; font:inherit; font-size:13px; color:var(--accent); text-decoration:underline; cursor:pointer;}

/* ---------- Type / state / collection pages ---------- */
.hub-landing-hero{text-align:center;}
.hub-crumbs{font-size:12.5px; color:var(--text-softer); margin-bottom:10px;}
.hub-crumbs a{color:var(--accent); text-decoration:underline;}
.hub-landing-lead{max-width:62ch; margin:12px auto 0; font-size:15px; color:var(--text-soft);}
.hub-landing .hub-bar{align-items:center;}
.hub-landing-filter{background:#fff;}

/* ---------- Result bar ---------- */
.hub-bar{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:16px 0; border-top:1px solid var(--line); margin-bottom:28px;}
.hub-count{font-size:14px; color:var(--text-soft);}
.hub-count span{font-weight:600; color:var(--ink);}
.hub-bar-right{display:flex; align-items:flex-end; gap:12px;}
.hub-shortlist-btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:#fff;}
.hub-shortlist-btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;}
.hub-shortlist-btn span{min-width:20px; padding:1px 6px; border-radius:100px; background:var(--accent-soft); font-size:11.5px; font-weight:600;}

/* ---------- Grid + tile ---------- */
.hub-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;}
.hub-tile{position:relative; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; transition:box-shadow .15s, border-color .15s; display:flex;}
.hub-tile:hover{border-color:var(--ink); box-shadow:0 16px 34px rgba(11,42,71,.1);}
.hub-tile[hidden], .hub-tile.is-paged{display:none;}
.hub-tile-link{display:flex; flex-direction:column; width:100%;}
.hub-tile-link:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.hub-tile-img{position:relative; aspect-ratio:3/2; background:var(--accent-soft); overflow:hidden;}
.hub-tile-img img{width:100%; height:100%; object-fit:cover;}
.hub-tile-chips{position:absolute; left:12px; bottom:12px; display:flex; gap:6px; flex-wrap:wrap;}
.hub-tile-chips span{font-size:11px; font-weight:600; padding:4px 10px; border-radius:100px; background:rgba(247,249,252,.94); color:var(--ink);}
.hub-tile-chips .chip-deal{background:var(--ink); color:var(--paper);}
.hub-tile-body{display:flex; flex-direction:column; gap:6px; padding:18px 20px 18px; flex:1;}
.hub-tile-type{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600;}
.hub-tile-place{font-size:12.5px; color:var(--text-softer);}
.hub-tile h3{font-size:19px; line-height:1.3; margin:2px 0 4px;}
.hub-tile-meta{display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--text-soft); margin-bottom:10px;}
.grade{display:inline-flex; align-items:center; gap:7px;}
.grade-meter{display:inline-flex; gap:3px;}
.grade-meter i{width:7px; height:7px; border-radius:50%; border:1.5px solid var(--accent); display:block;}
.grade-1 .grade-meter i:nth-child(-n+1), .grade-2 .grade-meter i:nth-child(-n+2),
.grade-3 .grade-meter i:nth-child(-n+3), .grade-4 .grade-meter i:nth-child(-n+4){background:var(--accent);}
.dur::before{content:"·"; margin-right:14px; color:var(--text-softer);}
.hub-tile-foot{margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--line); font-size:12.5px; color:var(--text-soft);}
.hub-tile-foot .price strong{font-size:16px; color:var(--ink); font-weight:600;}
.rating{font-size:12px; color:var(--text-soft); white-space:nowrap;}
.hub-save{position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%; border:0; background:rgba(247,249,252,.94); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(11,42,71,.15);}
.hub-save svg{width:18px; height:18px; fill:none; stroke:var(--ink); stroke-width:2;}
.hub-save[aria-pressed="true"] svg{fill:#C2412D; stroke:#C2412D;}
.hub-save:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ---------- Interrupts, empty, more, note ---------- */
.hub-interrupt{grid-column:1 / -1; background:var(--accent-soft); border-radius:10px; padding:30px 34px;}
.hub-interrupt .kicker, .hub-empty .kicker{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:8px;}
.hub-interrupt h3{font-size:24px; margin-bottom:8px;}
.hub-interrupt p{font-size:14px; color:var(--text-soft); max-width:70ch; margin-bottom:14px;}
.hub-interrupt p:last-child{margin-bottom:0;}
.hub-empty{text-align:center; padding:60px 20px; border:1px dashed var(--line); border-radius:10px;}
.hub-empty h2{font-size:28px; margin-bottom:10px;}
.hub-empty p{color:var(--text-soft); margin:0 auto 20px; max-width:48ch; font-size:14.5px;}
.hub-empty .btn{border:0; cursor:pointer;}
.hub-more{text-align:center; margin-top:36px;}
.hub-more .btn{cursor:pointer; background:#fff;}
.hub-note{font-size:12px; color:var(--text-softer); margin-top:36px; max-width:80ch;}

/* ---------- Trust band ---------- */
.hub-trust{border-top:1px solid var(--line); background:#fff; padding:52px 0;}
.hub-trust-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:36px;}
.hub-trust h3{font-size:21px; margin-bottom:8px;}
.hub-trust h3 em{font-style:italic;}
.hub-trust-pos{font-style:italic; font-weight:400; font-size:.8em; color:var(--text-soft);}
.hub-trust p{font-size:14px; color:var(--text-soft);}
.hub-trust a{color:var(--accent); text-decoration:underline;}

/* ---------- Shortlist drawer + compare ---------- */
.hub-drawer{position:fixed; inset:0; z-index:60;}
.hub-drawer[hidden]{display:none;}
.hub-drawer-backdrop{position:absolute; inset:0; background:rgba(11,42,71,.35);}
.hub-drawer-panel{position:absolute; top:0; right:0; bottom:0; width:min(560px, 100%); background:var(--paper); overflow-y:auto; padding:26px 28px 40px; box-shadow:-20px 0 44px rgba(11,42,71,.18);}
.hub-drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.hub-drawer-head h2{font-size:26px;}
.hub-drawer-head .icon-btn{background:#fff; font-size:14px;}
.hub-drawer-note{font-size:13.5px; background:var(--accent-soft); padding:10px 14px; border-radius:8px; margin-bottom:14px;}
.hub-drawer-empty{font-size:14px; color:var(--text-soft);}
.hub-drawer-list{list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:18px;}
.hub-drawer-list li{display:grid; grid-template-columns:auto 76px 1fr auto; gap:12px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px;}
.hub-drawer-list img{width:76px; height:51px; object-fit:cover; border-radius:4px;}
.hub-drawer-list .t{font-size:13.5px; font-weight:500; line-height:1.35;}
.hub-drawer-list .m{font-size:12px; color:var(--text-soft);}
.hub-drawer-list input{width:17px; height:17px; accent-color:var(--ink);}
.hub-drawer-list .rm{background:none; border:0; color:var(--text-softer); cursor:pointer; font-size:12px; text-decoration:underline;}
.hub-drawer-actions[hidden]{display:none;}
.hub-drawer-actions{display:flex; gap:10px; flex-wrap:wrap;}
.hub-drawer-actions .btn{cursor:pointer; border:1px solid var(--ink);}
.hub-drawer-actions .btn.outline{border-color:var(--line); background:#fff;}
.hub-drawer-actions .btn[disabled]{opacity:.45; cursor:not-allowed;}
.hub-drawer-status{font-size:12.5px; color:var(--accent); min-height:1.4em; margin-top:8px;}
.hub-compare{margin-top:16px; overflow-x:auto;}
.hub-compare table{width:100%; border-collapse:collapse; font-size:13px; background:#fff; border:1px solid var(--line); border-radius:8px;}
.hub-compare th, .hub-compare td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
.hub-compare thead th{font-family:'Newsreader',serif; font-weight:500; font-size:15px; line-height:1.3;}
.hub-compare tbody th{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-softer); font-weight:600; white-space:nowrap;}
.hub-compare a{color:var(--accent); font-weight:600;}

@media (max-width:980px){
  .hub-grid{grid-template-columns:repeat(2, 1fr);}
  .hub-selects{grid-template-columns:repeat(3, minmax(0,1fr));}
}
@media (max-width:640px){
  .hub{padding-top:14px;}
  .wrap.hub{padding:14px 16px 32px;}
  .page-hero--compact{padding:18px 16px 0;}
  .hub-grid{grid-template-columns:1fr; gap:20px;}
  .hub-selects{grid-template-columns:repeat(2, minmax(0,1fr));}
  /* Filter collapse (1 Oct 2026): with JS, phones see search + Activity + "More filters" until it's pressed. */
  .hub.js-collapse .hub-more-filters{display:flex; align-items:center; justify-content:center; align-self:end; height:41px; padding:0 14px; border:1px solid var(--line); border-radius:8px; background:#fff; font:500 13.5px 'Inter',sans-serif; color:var(--ink); cursor:pointer;}
  .hub.js-collapse .hub-more-filters::after{content:""; width:8px; height:8px; margin-left:9px; border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:translateY(-2px) rotate(45deg); transition:transform .15s;}
  .hub.js-collapse .is-open .hub-more-filters::after{transform:translateY(2px) rotate(-135deg);}
  .hub.js-collapse .hub-more-filters:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  .hub.js-collapse .hub-filters:not(.is-open) .hub-selects > label:not(:first-child),
  .hub.js-collapse .hub-filters:not(.is-open) .hub-toggles{display:none;}
  .hub-bar{flex-direction:column; align-items:stretch;}
  .hub-landing .hub-bar{flex-direction:row; flex-wrap:wrap; align-items:center;}
  .hub-bar-right{justify-content:space-between;}
  .hub-trust-grid{grid-template-columns:1fr; gap:24px;}
  .hub-trust .wrap{padding:0 16px;}
  .hub-interrupt{padding:24px 20px;}
  .hub-drawer-panel{padding:20px 16px 32px;}
}
.hub-landing-hero h1{line-height:1.15; max-width:24ch; margin-left:auto; margin-right:auto;}