/**
 * @file        recirculation.css
 * @description The recirculation strip — recently-viewed and also-viewed (C-15)
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         bd9be5a6-9528-4fe1-86e5-e327246c8700
 * @version     0.0.0.1
 * @created     2026-09-12
 * @updated     2026-09-12
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* Written AFTER the template and its accessibility contract, per
   .claude/rules/style.md. Nothing here creates, hides or reorders content:
   whether the strip exists at all is decided in PHP, and the markup order of
   also-viewed before recently-viewed is what Story 8.2's "after the primary
   content" assertion reads. A CSS rule that moved either would make the DOM and
   the rendering disagree, which is the failure the markup-order rule exists to
   prevent. */

.recirc-strip {
  /* Quieter than a band: this is the page trailing off, not another section
     competing with the buy band above it. */
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
  border-top: 1px solid var(--border-subtle);
}

/* Two strips in a row on a book page would otherwise show two rules stacked a
   band apart. The second drops its divider and tightens up. */
.recirc-strip + .recirc-strip {
  border-top: 0;
  padding-top: 0;
}

.recirc-strip__heading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
}

.recirc-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.recirc-strip__item {
  /* A readable column rather than a fixed card width: with three books in the
     catalogue a rigid grid leaves one item stranded on its own row at 375px. */
  flex: 1 1 16rem;
  max-width: 22rem;
}

.recirc-strip__link {
  /* Flex rather than block so `align-items` can centre a one- or two-line title
     inside the enforced target height below. */
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  color: var(--text-link);
  /* WCAG 2.5.5. The link is the title alone, so the target has to be given its
     height here — the text is one line and would otherwise be ~22px tall. */
  min-height: var(--touch-min);
}

.recirc-strip__author {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* DESIGN.md §10: the single breakpoint. Below it the strip is a plain stack,
   which is what a flex-wrap row already produces — so there is nothing to
   override, and no second layout to keep in sync. */