/* ============================================================
   Things To Do page
   ============================================================ */

.page-head{
  background:var(--ink); color:var(--on-dark);
  padding-top:calc(74px + clamp(3rem,7vw,6rem));
  padding-bottom:clamp(2.5rem,5vw,4rem);
  position:relative; overflow:hidden;
}
.page-head::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--moss), transparent 60%);
}
.page-head h1{ font-size:var(--step-4); margin:0 0 .75rem; max-width:16ch; }
.page-head__lede{ font-size:var(--step-1); color:var(--on-dark-mute); max-width:52ch; margin-bottom:2rem; }
.page-head__actions{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

.crumbs{
  font-family:var(--ui); font-size:.75rem; color:var(--fog);
  margin-bottom:1.5rem; display:flex; gap:.5rem; align-items:center;
}
.crumbs a{ text-decoration:none; color:var(--on-dark-mute); }
.crumbs a:hover{ color:var(--on-dark); }
.crumbs i{ font-style:normal; opacity:.5; }

/* ---------- Filter rail ---------- */
.filters{
  position:sticky; top:74px; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line-light);
  padding-block:1rem;
}
.filters__row{ display:flex; align-items:flex-start; gap:.9rem; }
/* The chip group has to be allowed to shrink, or it wraps below its label. */
.fgroup{ display:flex; gap:.5rem; flex-wrap:wrap; flex:1 1 240px; min-width:0; }
.filters__row + .filters__row{ margin-top:.75rem; }
.filters__label{
  font-family:var(--ui); font-size:.72rem; font-weight:600;
  letter-spacing:0.03em; color:var(--on-light-mute);
  flex:0 0 auto; min-width:72px; padding-top:.72rem;
}
.fchip{
  padding:.5rem 1rem; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid var(--line-light);
  color:var(--on-light-mute);
  font-family:var(--ui); font-size:.82rem; font-weight:600;
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out),
             border-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.fchip:hover,.fchip:focus-visible{ color:var(--on-light); border-color:var(--on-light-mute); transform:translateY(-1px); }
.fchip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--on-dark); }
.filters__clear{
  flex:0 0 auto; margin-left:auto; background:none; border:none; cursor:pointer;
  font-family:var(--ui); font-size:.78rem; font-weight:600;
  color:var(--copper); text-decoration:underline; text-underline-offset:3px;
  padding:.5rem 0;
}
.filters__clear[hidden]{ display:none; }

.results-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; padding-block:2rem 1.25rem;
}
.results-bar p{ margin:0; font-family:var(--ui); font-size:var(--step--1); color:var(--on-light-mute); }
.results-bar b{ color:var(--on-light); }

/* ---------- Cards ---------- */
.grid{
  display:grid; gap:1.15rem;
  grid-template-columns:repeat(auto-fill, minmax(288px,1fr));
  padding-bottom:clamp(4rem,8vw,7rem);
}
.card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--paper-2);
  border:1px solid var(--line-light); border-radius:18px;
  padding:1.4rem 1.35rem 1.2rem;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
             border-color .4s var(--ease-out);
}
.card::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(46,115,97,0.16), transparent 62%);
  transition:opacity .45s var(--ease-out);
}
.card:hover,.card:focus-within{
  transform:translateY(-4px);
  border-color:rgba(46,115,97,0.5);
  box-shadow:0 22px 45px -26px rgba(10,26,32,0.6);
}
.card:hover::before,.card:focus-within::before{ opacity:1; }

.card__kind{
  font-family:var(--ui); font-size:.68rem; font-weight:700;
  letter-spacing:0.05em; margin:0 0 .6rem;
  color:var(--moss-deep);
}
.card__kind.is-food{ color:var(--copper); }
.card h3{ font-size:var(--step-1); margin:0 0 .3rem; }
.card__where{
  font-family:var(--ui); font-size:.78rem; color:var(--on-light-mute);
  margin:0 0 .7rem; display:flex; align-items:center; gap:.4rem;
}
.card__where::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--fog); flex:0 0 5px;
}
.card p{ font-size:.9rem; color:var(--on-light-mute); margin:0 0 1rem; line-height:1.55; }
.card__foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding-top:.9rem; border-top:1px solid var(--line-light);
}
.card__tags{ display:flex; flex-wrap:wrap; gap:.35rem; }
.card__tags span{
  font-family:var(--ui); font-size:.68rem; font-weight:600;
  padding:.2rem .55rem; border-radius:999px;
  background:rgba(18,38,44,0.06); color:var(--on-light-mute);
}
.card__price{
  font-family:var(--display); font-weight:700; font-size:.85rem;
  color:var(--on-light); flex:0 0 auto;
}

.empty{
  border:1px dashed var(--line-light); border-radius:18px;
  padding:clamp(2rem,5vw,3.5rem); text-align:center;
  grid-column:1 / -1;
}
.empty h3{ font-size:var(--step-2); margin:0 0 .5rem; }
.empty p{ margin:0 auto 1.5rem; color:var(--on-light-mute); max-width:42ch; }

/* ---------- Section footnote ---------- */
.footnote{
  background:var(--paper-2); border-top:1px solid var(--line-light);
  padding-block:clamp(2.5rem,5vw,4rem);
}
.footnote h2{ font-size:var(--step-2); }
.footnote p{ color:var(--on-light-mute); font-size:var(--step--1); }

/* When the bar sticks, it collapses to one row so it does not eat the
   viewport. The rest is one tap away rather than permanently parked. */
.filters__more{
  display:none; flex:0 0 auto;
  padding:.5rem 1rem; border-radius:999px; cursor:pointer;
  background:var(--ink); border:1px solid var(--ink); color:var(--on-dark);
  font-family:var(--ui); font-size:.8rem; font-weight:600;
}
.filters.is-compact .filters__more{ display:inline-flex; align-items:center; gap:.4rem; }
.filters.is-compact .filters__row + .filters__row{ display:none; }
.filters.is-compact.is-expanded .filters__row + .filters__row{ display:flex; }
.filters.is-compact{ box-shadow:0 10px 24px -20px rgba(10,26,32,0.9); }
.filters__more i{ font-style:normal; transition:transform .3s var(--ease-out); display:inline-block; }
.filters.is-expanded .filters__more i{ transform:rotate(180deg); }

/* Active-filter summary, only shown while collapsed */
.filters__summary{
  display:none; flex:1 1 auto; min-width:0;
  font-family:var(--ui); font-size:.78rem; color:var(--on-light-mute);
  padding-top:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.filters.is-compact:not(.is-expanded) .filters__summary{ display:block; }

/* On narrow screens the label column wastes too much width, so labels
   sit above their chips instead. When the bar is collapsed it reduces
   to just the summary and the toggle. */
@media (max-width:600px){
  .filters__row{ flex-direction:column; gap:.5rem; }
  .filters__label{ padding-top:0; min-width:0; }
  .filters__clear{ margin-left:0; }
  .filters__summary{ padding-top:0; }
  .filters.is-compact:not(.is-expanded) .filters__row:first-child{
    flex-direction:row; align-items:center; flex-wrap:wrap;
  }
  .filters.is-compact:not(.is-expanded) #fKind,
  .filters.is-compact:not(.is-expanded) #lblKind{ display:none; }
}