/* ================================================================
   Listing pages.

   The two-column arrangement that puts the filter rail beside the
   results. Shared by /colleges/, every course page and every
   specialisation page, so this file is copied to each rather than
   being page specific. It is not in components.css only because it
   is a layout rather than a component; if a fourth page type takes
   it, move it there and delete the copies.
   ================================================================ */

.listing{padding:36px 0 56px}

.listing-grid{display:grid;grid-template-columns:1fr;gap:0}
.listing-grid>*{min-width:0}

/* The rail appears only when the filter panel does. sn_facets()
   returns empty below twelve colleges, the .listing-side element is
   not rendered at all, and this rule never matches, so the results
   run full width without a placeholder column. */
.listing-grid:has(.listing-side){grid-template-columns:236px 1fr;gap:44px}

.listing-side{position:sticky;top:88px;align-self:start}

.listing-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.listing-count{font-size:var(--fs-sm);color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.listing-sort{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2);font-weight:600}
.listing-sort select{font-family:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;min-height:38px;background:#fff;cursor:pointer}
.listing-sort select:hover{border-color:var(--teal)}

.listing-cards{display:flex;flex-direction:column;gap:12px}
.listing-cards .lcard.is-hidden{display:none}

.listing-empty{padding:34px 0;color:var(--ink-2);font-size:var(--fs-base);max-width:52ch}

.listing .srcnote{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}

.listing-controls{display:flex;align-items:center;gap:10px}

@media(max-width:900px){
  /* Filter and Sort sit together on one row under the count.

     Before this, Filter was a full width button in the rail, the count was a
     line of its own, and Sort was a third row: three bands of controls
     stacked above the first result, on the screen with the least room for
     them. They are one decision, so they get one row. */
  .listing-bar{flex-wrap:wrap;gap:10px;padding-bottom:12px;margin-bottom:14px}
  .listing-count{flex:1 0 100%}
  .listing-controls{flex:1 1 auto;width:100%}
  .listing-controls .filters-toggle{flex:0 0 auto}
  .listing-sort{flex:1;justify-content:flex-end;gap:8px;min-width:0}

  /* The word "Sort" goes, the label stays. The select already reads "College
     name, A to Z", which says what it does better than a caption beside it,
     and the 46px it was taking is 46px the select did not have. */
  .listing-sort > span{position:absolute;width:1px;height:1px;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .listing-sort select{flex:1;min-width:0}
}

@media(max-width:900px){
  /* The rail becomes a disclosure above the results. :has() is
     overridden rather than removed, so the same markup serves both. */
  .listing-grid:has(.listing-side){grid-template-columns:1fr;gap:0}
  .listing-side{position:static;margin-bottom:20px}
  /* 16px, not 26px. The head block already ends in a rule and a margin, and
     the gap above the count read as a mistake rather than as separation.
     Set in the shorthand here rather than as padding-top earlier in the file:
     both rules sit in a max-width:900px block, so the shorthand won and the
     override did nothing. */
  .listing{padding:16px 0 44px}
}