/* ============================================================================
   SEARCH RESULTS                                                        T-33
   ----------------------------------------------------------------------------
   No artboard draws this screen - the nav box is on all 22 boards and none of
   them draws where it lands - so it is built on the Content Library shell:
   the same tab bar, the same rail, the same page rhythm. A reader who has
   learned that bar already knows this one.

   WHAT LIVES HERE

     .cn-search-form   the box repeated on the page itself
     .cn-tabs--search  the library bar carrying result counts
     .cn-tabs__count   the number beside a tab label
     .cn-results       the result list
     .cn-result        one hit - title, type, author, snippet

   A ROW, NOT A CARD. The library draws cards because it is showing a curated
   shelf; results are a list you scan and leave, so the shape is a headline
   row with two lines under it. Cards here would put four results on a screen
   where twelve fit.

   DEPENDS ON: tokens.css, shell.css, tabs.css
   ========================================================================== */


/* ------------------------------------------------ the search box ------- */

/*
   THE HEAD'S OWN GAP. .cn-section carries 80 below it, which collapsed with
   the count line's 32 to put 80 of white between the box and "1035 results"
   - the biggest gap on the page, in the one place the eye has to cross to
   read the answer. p4's library bar sits 9 under its heading; here the box
   is between them, so the count sits 32 under the box and the bar 20 under
   the count.
*/
.cn-search-head { margin-bottom: 0; }

/* The topic chips, 20 under the box - the listings' own row, so its inner
   spacing is theirs (chips.css); only its distance from the box is set here. */
.cn-search-topics { margin-top: var(--cn-space-5); }

.cn-search-form {
  display: flex;
  gap: var(--cn-space-3);
  align-items: stretch;
  margin-top: var(--cn-space-6);
  max-width: var(--cn-col-main-read);
}

.cn-search-form__input {
  flex: 1 1 auto;
  min-width: 0;                       /* or a long value pushes the button out */
  height: var(--cn-search-h);
  padding: 0 var(--cn-space-4);
  font: inherit;
  font-size: var(--cn-text-body);
  color: var(--cn-ink-body);
  background: var(--cn-surface);
  border: 1px solid var(--cn-border);
  border-radius: var(--cn-radius-md);
}

.cn-search-form__input:focus-visible {
  outline: 2px solid var(--cn-cyan);
  outline-offset: 1px;
  border-color: var(--cn-cyan);
}


/* -------------------------------------------- counts on the tab bar ---- */

/* "Showing everything by <name> · clear" under the box, when an expert
   card (or ?author=) brought the reader here. Meta size, body ink. */
.cn-search-author {
  margin: var(--cn-space-3) 0 0;
  font-size: var(--cn-text-meta);
  line-height: var(--cn-lh-body);
  color: var(--cn-ink-body);
}

.cn-search-count {
  margin: var(--cn-space-8) 0 var(--cn-space-5);
  font-size: var(--cn-text-body);
  color: var(--cn-ink-muted);
}

/*
   The count rides inside the tab link rather than beside it, so the whole
   thing - label and number - is one target and one underline.
*/
.cn-tabs__count {
  margin-left: var(--cn-space-1);
  font-size: var(--cn-text-chip);
  font-weight: var(--cn-fw-regular);
  color: var(--cn-ink-faint);
}

.cn-tabs__link[aria-current="page"] .cn-tabs__count { color: var(--cn-cyan); }

/*
   The bar wraps here where the library's does not. The library has nine
   labels and a known width; this has up to ten, each carrying a number, and
   the numbers change with every search - so it is allowed a second line
   rather than being made to scroll sideways.
*/
.cn-tabs--search .cn-tabs__list {
  flex-wrap: wrap;
  row-gap: var(--cn-space-3);
}

/*
   AND NO FADE. Below 1280 tabs.css masks the bar's right edge to say "there
   is more to scroll" - right for the library's one scrolling row, wrong for
   a bar that wraps: it was fading out the last 32px of every row, so
   "Magazine 159" read as "Magazine 15" at tablet and phone widths. Nothing
   scrolls here, so nothing is masked.
*/
@media (max-width: 1279px) {
  /* Doubled class: tabs.css loads after this file and its rule has the same
     specificity, so a plain .cn-tabs--search would lose the cascade. */
  .cn-tabs--search.cn-tabs--search {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .cn-tabs--search .cn-tabs__list { overflow: visible; }
}


/* ---------------------------------------------------- the results ------ */

.cn-results {
  margin: var(--cn-space-8) 0 0;
  padding: 0;
}

/*
   A rule between rows, not around each one. Twelve bordered boxes read as
   twelve things to decide about; twelve ruled rows read as one list.
*/
/*
   PICTURE LEFT, WORDS RIGHT. The thumbnail is a fixed width so every row
   starts its text at the same place - a column of headlines that steps in and
   out with the artwork is harder to scan than one with no pictures at all.
*/
.cn-result {
  display: flex;
  gap: var(--cn-space-5);
  align-items: flex-start;
  padding-block: var(--cn-space-5);
  border-top: 1px solid var(--cn-border);
}

.cn-result__thumb {
  flex: 0 0 var(--cn-result-thumb, 160px);
  width: var(--cn-result-thumb, 160px);
  /* The listing card ratio, so a banner that was cropped for a card is not
     cropped to a different shape here. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--cn-radius-md);
  background: var(--cn-band-grey);
}

.cn-result__thumb a { display: block; height: 100%; }

/*
   COVER. These are banners, drawn to be filled - unlike a magazine cover,
   which reader.css deliberately contains so it is never cropped.
*/
.cn-result__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No banner, or a banner that would not load: the mark, contained, on the
   same grey frame - the row keeps its shape and the headline its column. */
.cn-result__thumb img.cn-result__thumb--mark {
  object-fit: contain;
  padding: 22% 18%;
  box-sizing: border-box;
}

/* Takes the rest of the row, and may shrink - without this a long unbroken
   title pushes the thumbnail out of the flex line. */
.cn-result__text { flex: 1 1 auto; min-width: 0; }

.cn-result:first-child { border-top: 0; padding-top: 0; }

@media (max-width: 640px) {
  /* Below this the thumbnail leaves too little for the words: at 160px of
     picture plus the gap, a headline was wrapping to four lines. */
  .cn-result { --cn-result-thumb: 96px; gap: var(--cn-space-4); }
}

.cn-result__link {
  display: block;
  font-size: var(--cn-text-card);
  font-weight: var(--cn-fw-semibold);
  line-height: var(--cn-lh-snug);
  color: var(--cn-ink);
  text-decoration: none;
}

.cn-result__link:hover,
.cn-result__link:focus-visible { color: var(--cn-cyan); text-decoration: underline; }

/*
   A record with no usable address renders as text. It still answers the
   reader's question - the piece exists and here is what it is called - and
   the alternative is a link to a page that cannot resolve.
*/
.cn-result__link--dead { color: var(--cn-ink-muted); cursor: default; }

.cn-result__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-2) var(--cn-space-4);
  margin: var(--cn-space-2) 0 0;
  font-size: var(--cn-text-label);
  color: var(--cn-ink-muted);
}

/* The type is the one piece of meta that tells you which tab you are in. */
.cn-result__type {
  font-weight: var(--cn-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cn-tracking-label);
  color: var(--cn-cyan);
}

.cn-result__snippet {
  margin: var(--cn-space-2) 0 0;
  max-width: 80ch;                    /* a measure, not the whole column */
  font-size: var(--cn-text-body);
  line-height: var(--cn-lh-body);
  color: var(--cn-ink-body);
}


@media (max-width: 640px) {
  /* The button under the box rather than beside it - at this width they
     were fighting over about 90px and the input won by being unusable. */
  .cn-search-form { flex-direction: column; }
}