/*
  Explore Marks — the dedicated search/filter page. Reuses front.css's
  tokens and .mark-grid/.mcard/.gli-fallback-tile; the filter rail gets
  its own warm tinted card (var(--canvas), same tone as the site's
  ".tint" sections) with an accordion — one group open at a time, so
  it never grows past a fixed number of open sections.
*/

.explore-hero{
  position:relative; padding:150px 0 56px;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:26px 26px; background-position:-6px -6px;
}
.explore-hero .wrap{ max-width:900px; }
.explore-hero h1{ font-size:clamp(34px,5.4vw,56px); line-height:1.02; margin-top:14px; }

.explore-search{
  margin-top:32px; display:flex; border:1.5px solid var(--ink); border-radius:var(--radius-sm);
  overflow:hidden;
}
.explore-search input[type="text"]{
  flex:1; border:none; outline:none; padding:16px 18px; font-size:16px; min-width:0;
  font-family:'Manrope',sans-serif; color:var(--ink); background:var(--paper);
}
.explore-search input::placeholder{ color:var(--ink-faint); }
.explore-search button{
  flex:none; background:var(--ink); color:#fff; padding:0 26px; font-weight:700; font-size:14px;
  display:flex; align-items:center; gap:8px; transition:background .25s ease;
}
.explore-search button:hover{ background:var(--magenta); }

.explore-section{ padding-top:56px; }
.explore-layout{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:36px; align-items:start; }

/* Filter panel */
.explore-filters{
  background:var(--canvas); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:24px 22px; position:sticky; top:110px; display:flex; flex-direction:column;
}
.explore-filters-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.explore-filters-head .mono{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.explore-filters-head .clear-all{ font-size:12px; font-weight:700; color:var(--magenta); text-decoration:underline; text-decoration-color:rgba(229,19,107,.4); }
.explore-filters-head .clear-all:hover{ text-decoration-color:var(--magenta); }

/* Accordion: each group is a toggle button + a collapsible body, only
   one open at a time (see assets/js/explore.js), so the panel never
   grows past its own fixed height. */
.filter-group{ border-bottom:1px solid var(--line); }
.filter-group:last-of-type{ border-bottom:none; }
.filter-group-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 0; font-family:inherit; text-align:left;
}
.filter-group-label{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); transition:color .2s ease;
}
.filter-group.has-active .filter-group-label{ color:var(--ink); }
.filter-group-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--magenta); color:#fff; font-size:10.5px; font-weight:700;
}
.filter-group-chev{ flex:none; color:var(--ink-faint); transition:transform .25s var(--ease); }
.filter-group-toggle[aria-expanded="true"] .filter-group-chev{ transform:rotate(180deg); }
.filter-group-body{ padding-bottom:16px; }

.filter-pill{ display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer; font-size:13.5px; color:var(--ink-soft); transition:color .2s ease; }
.filter-pill:hover{ color:var(--ink); }
.filter-pill input{ accent-color:var(--magenta); width:15px; height:15px; flex:none; cursor:pointer; }
.filter-pill input:checked ~ span{ color:var(--ink); font-weight:700; }
.filter-pill .count{ color:var(--ink-faint); font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; font-weight:400 !important; }

.explore-apply{ margin-top:18px; width:100%; justify-content:center; background:var(--magenta); border-color:var(--magenta); }
.explore-apply span{ color:#fff; }

/* Results */
.explore-results-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.results-count{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:18px; }
.active-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.active-filter{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  padding:6px 12px; border:1px solid var(--ink); border-radius:999px; transition:background .2s ease, color .2s ease;
}
.active-filter:hover{ background:var(--ink); color:#fff; }
.active-filter span{ font-size:14px; line-height:1; }

/* A fixed 3-across grid for this page specifically — the shared
   .mark-grid elsewhere auto-fills by available width, but here the
   results column already shares the row with the filter panel, so a
   fixed count reads more deliberate than however many 220px tiles
   happen to fit. */
.explore-results .mark-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }

.explore-results .pagination{ margin-top:36px; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.explore-results .pagination .page-numbers{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:13px; border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:9px 14px; color:var(--ink-soft); transition:border-color .2s ease, color .2s ease;
}
.explore-results .pagination .page-numbers:hover{ border-color:var(--ink); color:var(--ink); }
.explore-results .pagination .page-numbers.current{ background:var(--ink); border-color:var(--ink); color:#fff; }
.explore-results .pagination .page-numbers.dots{ border-color:transparent; }

.wrap.explore-layout {
  min-width: 100% !important;
}

.btn.explore-apply {
  background-color: #e5136b !important;
}

@media (max-width:1100px){
  .explore-results .mark-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px){
  .explore-layout{ grid-template-columns:1fr; }
  .explore-filters{ position:static; }
  .explore-results .mark-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:680px){
  .explore-hero{ padding:120px 0 40px; }
  .explore-search{ flex-direction:column; }
  .explore-search button{ padding:14px; justify-content:center; }
  .explore-results .mark-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:480px){
  .explore-results .mark-grid{ grid-template-columns:1fr; }
}