/* ==========================================================================
   explore.php: the lake and the town, by minutes from the ramp.
   Page-only rules; the system lives in styles.css. --navh is the measured
   height of the sticky header, so the filter row and the slip numbers can
   stack beneath it without overlapping.
   ========================================================================== */
.dir { --navh: 4.4rem; --filterh: 3.9rem; }
@media (min-width: 900px) { .dir { --navh: 5.85rem; } }

/* ---- Page head: the words left, the overlook right ---- */
.pagehead--lake .pagehead__grid { display: grid; gap: 1.6rem; }
@media (min-width: 900px) {
  .pagehead--lake .pagehead__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; column-gap: 2.5rem; }
}
.pagehead--lake .figure img { border-color: var(--board); }
.pagehead--lake .figure .credit { max-width: 60ch; }
.pagehead__tag { margin-top: 1.1rem; }

/* ---- Filter row: sticks under the header while the bands scroll past ---- */
.filterbar { position: sticky; top: var(--navh); z-index: 90; background: var(--board); border-bottom: var(--frame) solid var(--navy); }
.filterbar__in { display: flex; align-items: center; gap: .7rem; min-height: var(--filterh); padding-block: .45rem; }
.filterbar__lbl { flex: none; font-family: var(--font-display); font-weight: 800; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; }
.filterbar__chips { display: flex; gap: .45rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; padding-block: .2rem; }
@media (min-width: 900px) { .filterbar__chips { flex-wrap: wrap; overflow: visible; } }
.filterbar .chip { flex: none; min-height: 2.75rem; background: transparent; border-radius: 0; cursor: pointer; }
.filterbar .chip[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); }
.filterbar .chip:focus-visible { outline-offset: 2px; }
.filterbar__count { flex: none; font-family: var(--font-mono); font-size: .78rem; color: var(--paint-soft); }
.filterbar__count b { color: var(--paint); font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* The sticky slip number has to clear the filter row as well as the header. */
@media (min-width: 1100px) { .dir .slip__no { top: calc(var(--navh) + var(--filterh) + 1.25rem); } }

/* ---- Directory rows: minutes big in the margin, the place, then its actions ---- */
.dir .row[hidden] { display: none; }
@media (min-width: 720px) { .dir .row { grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: start; } }
.dir .row__when b { display: block; font-size: 1.65rem; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.dir .row__when b.dir__na { font-size: .92rem; line-height: 1.25; padding-top: .25rem; }
.dir .row__when small { margin-top: .3rem; }
.dir__name { display: block; }
.dir__blurb { margin-top: .3rem; max-width: 62ch; }
.dir__addr, .dir__detail { margin-top: .2rem; font-size: .86rem; }
.dir .row__note a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.dir .row__note a:hover { text-decoration-thickness: 2px; }
.dir__confirm { font-family: var(--font-mono); font-size: .76rem; color: var(--paint-soft); }
.dir__meta { white-space: normal; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: .9rem; margin-top: .2rem; }
.dir__cat { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 700; font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; color: var(--paint-soft); }
.dir__act { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; color: var(--navy); text-decoration: none; }
.dir__act:hover { text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 720px) {
  .dir__meta { justify-content: end; justify-items: end; margin-top: 0; }
  .dir__cat { text-align: right; }
}
/* Empty state when a filter leaves a band with nothing in it. */
.dir__rows:not(:has(.row:not([hidden])))::after { content: "Nothing in this band for that filter."; display: block; padding: .9rem 0; font-family: var(--font-mono); font-size: .8rem; color: var(--paint-soft); }

/* ---- Three day trips in the 15 to 45 band, framed alike ---- */
.trip { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 720px) { .trip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trip figure { margin: 0; }
.trip__frame { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border: var(--frame) solid var(--navy); background: var(--board-2); }
.trip__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trip__frame--falls img { object-position: 40% 50%; }
/* The mill photograph was exported sideways (its EXIF turn was dropped); turn it upright here. */
.trip__frame--turn img { position: absolute; left: 50%; top: 50%; width: 133.4%; height: auto; max-width: none; translate: -50% -56%; rotate: 90deg; object-fit: fill; }
.trip figcaption { margin-top: .5rem; font-size: .88rem; color: var(--paint-soft); }
.trip .credit { display: block; margin-top: .25rem; }

/* ---- The lake, on the wall ---- */
.ledger-scroll { overflow-x: auto; }
.dir__lake .ledger th small { display: block; font-family: var(--font-mono); font-size: .7rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--paint-soft); margin-top: .15rem; }
.dir__lake .ledger td a { color: var(--navy); }
.dir__blank { font-family: var(--font-mono); font-size: .74rem; color: var(--paint-soft); }
.dir__farshore { font-size: .92rem; }
.dir__lakefigs img { border-color: var(--board); }
.dir__lakefigs figcaption { color: var(--on-navy-soft); max-width: 60ch; }
@media (min-width: 720px) { .dir__lakefigs { grid-template-columns: 1fr 1fr; } }