/* ==========================================================================
   pages/browse.css — browse and results pages (Swiss Editorial).
   Services index, sector, category, location index + show, search, 24/7.
   Adapted from docs/redesign/directions/a-swiss-editorial/styles.css
   ("Results (category)"). Shared primitives (masthead, company row, pager,
   FAQ, strip, words) live in 02-components.css.
   ========================================================================== */

/* ---------- Masthead variants ------------------------------------------- */
.masthead__kicker a { color: inherit; }
.masthead__kicker .dot { vertical-align: 0.1em; }
.masthead__more { max-width: 36em; margin-block-start: calc(var(--s-2) * -1); }
.masthead--search { padding-block: clamp(48px, 6vw, 96px) clamp(40px, 4vw, 64px); }
.masthead--search .masthead__summary { margin-block-end: -16px; }

/* ---------- Directory: hairline link lists with counts ------------------ */
/* <section class="row directory"> · label cols 1–2 · lede + 3-up list cols 3–12 */
.directory__label h2 { font: inherit; letter-spacing: inherit; }
.directory__lede { max-width: 36em; margin-block-end: var(--s-5); color: var(--grey-text); }
.directory__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
.directory__list li { border-top: 1px solid var(--rule); }
.directory__list a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); min-height: 48px; padding-block: 12px; }
.directory__list a span { transition: color 200ms var(--ease); }
.directory__list a:hover span, .directory__list a:focus-visible span { color: var(--grey-text); }
.directory__list small { flex: none; color: var(--grey-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.directory__list .is-empty span { color: var(--grey-text); }
.directory__list .is-empty:hover span { color: var(--ink); }
.directory .row__main .directory__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.directory__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--field); }
.directory[id] { scroll-margin-top: var(--header-h); }
@media (max-width: 63.99rem) {
  .directory__list, .directory .row__main .directory__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory__label { color: var(--ink); }
  .directory__label h2 { font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
  .directory__media { margin-block-start: var(--s-6); }
  .directory__media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 37.49rem) {
  .directory__list, .directory .row__main .directory__list { grid-template-columns: minmax(0, 1fr); }
  .directory__list li:last-child { border-bottom: 1px solid var(--rule); }
}

/* ---------- Results: sticky filter column + company rows ---------------- */
.results { align-items: start; padding-block: var(--s-6) var(--s-10); border-top: 1px solid var(--rule); }
.filters { grid-column: 1 / span 2; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.filters__toggle { display: none; }
.filters__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.filters__group + .filters__group { margin-block-start: var(--s-6); }
.filters__title { display: block; float: none; width: 100%; margin-block-end: 2px; padding: 0; font-size: var(--t-s); color: var(--grey-text); }
.filters .select { text-overflow: ellipsis; }
.filters .btn-row { margin-block-start: var(--s-6); column-gap: var(--s-5); }
.filters .btn { min-height: 44px; padding: 0 16px; }
.results__main { grid-column: 3 / -1; min-width: 0; }
.results__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-block-end: var(--s-6); }
.results__count { font-size: var(--t-xl); line-height: 1.1; font-weight: 500; letter-spacing: var(--track-display); }
.tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); }
.tokens .token { gap: 0; color: var(--ink); }
.tokens .token .token__x { margin-inline-start: 8px; font-size: var(--t-body); color: var(--grey-text); transition: color 200ms var(--ease); }
.tokens .token:hover .token__x { color: var(--ink); }
.sort { display: flex; align-items: center; gap: var(--s-3); }
.sort .select--bare { padding-block: 0; }
.results .companies { grid-column: auto; }
.companies--sponsored-only { margin-block-end: var(--s-6); }
.results .empty-state h3 { font-weight: 500; }
@media (max-width: 63.99rem) {
  .results { padding-block: var(--s-5) var(--s-8); }
  .filters { grid-column: 1 / -1; position: static; margin-block-end: var(--s-6); }
  .filters__toggle { display: flex; justify-content: space-between; list-style: none; cursor: pointer; }
  .filters__toggle::-webkit-details-marker { display: none; }
  .filters__chev { width: 8px; height: 8px; margin-inline-end: 2px; border: solid currentColor; border-width: 0 1.4px 1.4px 0; transform: translateY(-2px) rotate(45deg); }
  .filter-sheet[open] .filters__chev { transform: translateY(2px) rotate(-135deg); }
  .filters__body { padding-block: var(--s-5) var(--s-2); }
  .results__main { grid-column: 1 / -1; }
  .results__bar { margin-block-end: var(--s-5); }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
  /* Two columns of filters on tablets */
  .filters__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--col-gap); }
  .filters__group + .filters__group { margin-block-start: 0; }
  .filters .btn-row { grid-column: 1 / -1; margin-block-start: 0; }
}

/* ---------- House / sponsor strip (placements/_band) -------------------- */
.strip--sponsor { row-gap: var(--s-2); }
.strip--sponsor .sponsored-label { flex-basis: 100%; margin: 0; }
.strip__text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); margin: 0; }
.strip__brand { font-weight: 500; color: var(--ink); }
.strip__logo img { display: block; height: 28px; width: auto; max-width: 96px; object-fit: contain; }

/* ---------- Mid-results slot (placements/_display) ---------------------- */
.promo { margin-block-start: var(--s-8); }
.promo__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.promo__advertise { font-size: var(--t-s); color: var(--grey-text); }
.promo__advertise:hover { color: var(--ink); }
.promo__frame { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; padding-block: var(--s-5); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.promo__text { grid-column: 1 / span 6; display: grid; justify-items: start; gap: 6px; }
.promo__brand { font-size: var(--t-s); color: var(--grey-text); }
.promo__headline { font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); text-wrap: balance; transition: color 200ms var(--ease); }
.promo__frame:hover .promo__headline { color: var(--grey-text); }
.promo__copy { max-width: 34em; color: var(--grey-text); }
.promo__cta { margin-block-start: var(--s-2); }
.promo__media { grid-column: 8 / -1; }
.promo__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--field); }
.promo__media--mono img { filter: grayscale(1) var(--img-filter); }
@media (max-width: 47.99rem) {
  .promo__frame { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  .promo__text, .promo__media { grid-column: 1; }
  .promo__media { order: -1; }
}

/* ---------- "Also consider" on the company page (placements/_sidebar) --- */
.sponsor-note { display: grid; justify-items: start; gap: var(--s-3); padding-block-start: var(--s-4); border-top: 1px solid var(--rule); }
.sponsor-note .sponsored-label { margin: 0; }
.sponsor-note__brand { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
.sponsor-note__copy { color: var(--grey-text); }

/* ---------- FAQ and journal rows under the results ---------------------- */
.browse-faq .faq { grid-column: 3 / span 7; }
.row--continue { border-top: 0; padding-block-start: 0; }
.row--continue .story:last-child { padding-block-end: 0; }
@media (max-width: 63.99rem) {
  .browse-faq .faq { grid-column: 1 / -1; }
}

/* ---------- Port map row (locations index) ------------------------------ */
.browse-map .port-map { display: block; }
.browse-map .port-map__figure { max-width: 60rem; }