/* ============================================================================
   Catalogue group page (catalog.html) — sits on top of styles.css and
   sections.css and borrows their components: the product card, the medallion,
   the species strip, the lead form. What lives here is only what a group page
   adds: the head with its purpose guide, the sticky shelf rail, the shelves.
   ============================================================================ */

:root {
  /* The rail's height, shared with everything that has to clear it: the
     sticky shelf heads, and the scroll target of every shelf anchor. */
  --rail-h: calc(64 * var(--px));
}

/* Anchored shelves and the form land below the stuck rail, not under it. */
.shelf,
#lead { scroll-margin-top: var(--rail-h); }

/* ——— Group head ————————————————————————————————————————————————————— */

.catalog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
  padding-top: var(--sp-6);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--fw-bold) var(--fs-2xs)/1.4 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--coco-line-450);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current] { color: var(--text-heading); }

.catalog-head__title { margin-top: var(--sp-6); }

.catalog-head__lead {
  margin-top: var(--sp-5);
  max-width: 46ch;
  font: var(--text-lead);
  color: var(--text-body);
}

/* The purpose guide is the beginner's door: three medallions that answer
   "what is the bird for" and jump to the first shelf that serves it. The
   farmer who already knows the Cross skips it for the rail below. */
.purpose {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--surface-soft);
  border-radius: var(--radius-xl);
}
.purpose__prompt {
  grid-column: 1 / -1;
  margin-bottom: var(--sp-2);
  font: var(--text-caption);
  color: var(--text-body);
  text-align: center;
}
.purpose .species-card__photo {
  width: calc(104 * var(--px));
  height: calc(104 * var(--px));
}

/* ——— Shelf rail ————————————————————————————————————————————————————— */

/* Sticks to the top once the head scrolls away, so the farmer can jump between
   shelves from anywhere. It works because .page clips with overflow-x: clip
   rather than hidden (see styles.css). */
.shelf-rail {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-header) - 1);
  margin-top: var(--sp-6);
  background: var(--surface-page);
  border-block: var(--border-hairline);
}
.shelf-rail__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--rail-h);
}
.shelf-rail__list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-width: 0;
  margin: 0;
  padding: var(--sp-2) 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.shelf-rail__list::-webkit-scrollbar { display: none; }

/* Shelves serving one purpose sit together; a hairline parts the purposes. */
.shelf-rail__group {
  display: flex;
  gap: var(--sp-1);
  flex: 0 0 auto;
}
.shelf-rail__group + .shelf-rail__group {
  padding-left: var(--sp-5);
  border-left: var(--border-hairline);
}

.shelf-rail__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  border-radius: var(--radius-pill);
  font: var(--fw-bold) var(--fs-nav)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-heading);
  white-space: nowrap;
}
.shelf-rail__list a:hover { color: var(--accent); background: var(--accent-soft); }
.shelf-rail__list a[aria-current] {
  color: var(--accent);
  background: var(--accent-soft);
}

.shelf-rail__count {
  display: inline-grid;
  place-items: center;
  min-width: calc(22 * var(--px));
  height: calc(22 * var(--px));
  padding: 0 var(--sp-1);
  border-radius: var(--radius-pill);
  background: var(--surface-shell);
  font: var(--fw-bold) var(--fs-2xs)/1 var(--font-narrow);
  letter-spacing: 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.shelf-rail__list a[aria-current] .shelf-rail__count {
  background: var(--accent);
  color: var(--text-inverse);
}

.shelf-rail__cta { margin-left: auto; flex: 0 0 auto; }

/* ——— Shelves ——————————————————————————————————————————————————————— */

/* The ground changes with the purpose, not with the shelf: meat, then
   meat-and-eggs, then eggs, each an aisle of its own. Two shelves serving one
   purpose share a ground and are parted only by a hairline and their titles,
   so the page body says what the rail says. */
.shelf { padding-block: var(--sp-10) var(--sp-16); }
.shelf[data-purpose="meat"],
.shelf[data-purpose="eggs"] { background: var(--surface-shell); }
.shelf[data-purpose="dual"] + .shelf[data-purpose="dual"],
.shelf[data-purpose="eggs"] + .shelf[data-purpose="eggs"] { padding-top: 0; }
.shelf[data-purpose="dual"] + .shelf[data-purpose="dual"] .shelf__inner,
.shelf[data-purpose="eggs"] + .shelf[data-purpose="eggs"] .shelf__inner {
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border-strong);
}

.shelf__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--sp-10);
  align-items: start;
}

/* The head rides along while its cards scroll past, so a long shelf never
   loses its name and its purpose note. It starts level with the top of the
   first row of medallions. */
.shelf__head {
  position: sticky;
  top: calc(var(--rail-h) + var(--sp-8));
}
.shelf__count {
  margin-top: var(--sp-3);
  font: var(--fw-bold) var(--fs-xs)/1 var(--font-narrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--accent);
}
.shelf__note {
  margin-top: var(--sp-5);
  max-width: 30ch;
  font: var(--text-default);
  color: var(--text-muted);
}

.shelf__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* ——— Cross card ——————————————————————————————————————————————————————
   The homepage product card with one change: some Crosses have a second name
   and some do not, so the footer is pushed to the bottom and prices line up
   across a row whatever sits above them. */

.cross-card {
  display: flex;
  flex-direction: column;
  color: var(--text-body);
}
.cross-card:hover { color: var(--text-body); }
.cross-card .card__text { margin-top: var(--sp-1); }
.cross-card .card__footer {
  margin-top: auto;
  padding-top: var(--sp-5);
}
.cross-card__cta {
  font: var(--text-button);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  color: var(--accent);
  white-space: nowrap;
}
.cross-card:hover .cross-card__cta {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ——— Terms ————————————————————————————————————————————————————————— */

.terms {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--sp-10);
  align-items: start;
}
.terms__title { font: var(--text-h2); }
.terms__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
}
.terms__item dt {
  font: var(--fw-bold) var(--fs-2xs)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--accent);
}
.terms__item dd {
  margin: var(--sp-3) 0 0;
  font: var(--text-default);
  color: var(--text-body);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .catalog-head { grid-template-columns: minmax(0, 1fr); align-items: start; }

  /* One column: the head sits above its cards and no longer needs to ride. */
  .shelf__inner,
  .terms { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .shelf__head { position: static; }
  .shelf__note { max-width: 60ch; }
}

@media (max-width: 860px) {
  .shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  :root { --rail-h: 56px; }

  .purpose { gap: var(--sp-3); padding: var(--sp-6) var(--sp-3); }
  .purpose .species-card__photo { width: 84px; height: 84px; }
  .purpose .species-card__title { margin-top: var(--sp-3); font-size: var(--fs-sm); }

  .shelf-rail { margin-top: var(--sp-10); }
  /* The rail itself scrolls sideways on a phone; the form stays one tap away
     in the header menu, so the button would only crowd the chips. */
  .shelf-rail__cta { display: none; }
  .shelf-rail__inner { padding-inline: 0; }
  /* Tighter chips let the third one show at 390px, so the row visibly
     continues past the edge instead of ending on a clean chip. */
  .shelf-rail__list { gap: var(--sp-3); }
  .shelf-rail__group + .shelf-rail__group { padding-left: var(--sp-3); }
  .shelf-rail__list a { padding: 0 var(--sp-3); }
  /* The chips run past the screen edge, so the edge fades out in the page
     ground to say there is more; the extra end padding lets the last chip
     scroll clear of the fade. */
  .shelf-rail__list {
    padding-inline: var(--container-pad) var(--sp-12);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--sp-8)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--sp-8)), transparent);
  }

  .shelf { padding-block: var(--sp-8) var(--sp-12); }

  /* Two cards abreast keep twenty Crosses from becoming a mile of scrolling;
     the medallion shrinks and the footer stacks to fit the narrower card. */
  .shelf__grid { gap: var(--sp-6) var(--sp-3); }
  .cross-card {
    margin-top: 52px;
    padding: 0 var(--sp-3) var(--sp-4);
  }
  .cross-card .medallion {
    width: 104px;
    height: 104px;
    margin-top: -52px;
    border-width: var(--ring-medallion-sm);
  }
  .cross-card .card__title { margin-top: var(--sp-3); font-size: var(--fs-body); }
  .cross-card .card__text { font-size: var(--fs-xs); }
  .cross-card .card__footer {
    flex-direction: column;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
  }
  .cross-card .price { font-size: var(--fs-h3); }

  .terms__list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}