/* ============================================================================
   Product page (cobb-500.html, the template for every Cross) — sits on top of
   styles.css, sections.css and catalog.css, and borrows the breadcrumb, the
   medallion, the price, the terms list and the lead form. What lives here is
   what a single Cross adds: the head that sets it beside its shelf-mate, the
   day grid of its growing regime, and the kit for its first weeks.
   ============================================================================ */

/* ——— Head: the Cross and its shelf-mate —————————————————————————————— */

/* Three columns: the portrait, the Cross, and its one alternative. The Cross
   and the alternative share row tracks through subgrid, so each fact sits on
   the same line in both columns and the farmer reads Cobb against Ross across
   the page, row by row, without hunting. Row 1 is the breadcrumb, row 2 the
   titles, row 3 the leads, rows 4–7 the four facts, row 8 the actions. */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4.4fr) minmax(0, 3.4fr);
  grid-template-rows: repeat(8, auto);
  column-gap: var(--sp-10);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-16);
}

.pdp__crumbs { grid-column: 1 / -1; grid-row: 1; }

/* The portrait over the homepage's green discs. Every size is a multiple of
   --p, which is a share of this column (the figure is the query container),
   so photo and discs shrink together. The portrait hugs the column's left
   edge: the discs then bleed out towards the page margin, and on the right
   they stop inside the column gap instead of running under the text. */
.pdp__figure {
  --p: min(360 * var(--px), 88cqi);
  container-type: inline-size;
  grid-column: 1;
  grid-row: 2 / -1;
  position: relative;
  isolation: isolate;
}
.pdp__portrait {
  width: var(--p);
  height: var(--p);
  margin-top: calc(var(--p) * 0.4);
}
.pdp__figure::before,
.pdp__figure::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(var(--p) / 2);
  top: calc(var(--p) * 0.9);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  pointer-events: none;
}
.pdp__figure::before {
  width: calc(var(--p) * 1.43);
  translate: -50% calc(-50% - var(--p) * 0.165);
  background: var(--accent-decor);
}
.pdp__figure::after {
  width: calc(var(--p) * 0.6);
  translate: calc(-50% + var(--p) * 0.05) calc(-50% - var(--p) * 0.27);
  background: var(--coco-grass-300);
  opacity: 0.5;
}

.pdp__main,
.pair {
  grid-row: 2 / -1;
  display: grid;
  grid-template-rows: subgrid;
}
.pdp__main { grid-column: 2; padding-top: var(--sp-3); }

.pdp__title { font-size: clamp(40 * var(--px), 5.8vw, 66 * var(--px)); }
.pdp__sub,
.pair__sub {
  margin-top: var(--sp-2);
  font: var(--fw-bold) var(--fs-sm)/1.4 var(--font-narrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--accent);
}
.pdp__lead {
  margin-top: var(--sp-4);
  max-width: 44ch;
  font: var(--text-lead);
  color: var(--text-body);
}

.pdp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-6);
}
.pdp__call {
  display: grid;
  gap: var(--sp-1);
  font: var(--text-caption);
  color: var(--text-muted);
}

/* The shelf-mate: a quiet pale column, smaller in every voice than the Cross
   it stands beside, but carrying the same rows. */
.pair {
  grid-column: 3;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  background: var(--surface-soft);
  border-radius: var(--radius-xl);
}
.pair__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  align-self: end;
}
.pair__photo {
  width: calc(76 * var(--px));
  height: calc(76 * var(--px));
}
.pair__title { font: var(--text-h3); }
.pair__lead {
  margin-top: var(--sp-5);
  font: var(--text-caption);
  color: var(--text-muted);
}
.pair__actions { margin-top: var(--sp-6); align-self: end; }

/* ——— Fact rows ——————————————————————————————————————————————————————— */

.spec {
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  margin: var(--sp-5) 0 0;
  border-bottom: 1px solid var(--border-strong);
}
.spec__row {
  display: grid;
  grid-template-columns: calc(118 * var(--px)) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  padding-block: var(--sp-2);
  border-top: 1px solid var(--border-strong);
}
.spec dt {
  font: var(--fw-bold) var(--fs-2xs)/1.4 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
}
.spec dd {
  margin: 0;
  font: var(--fw-bold) var(--fs-body-lg)/1.35 var(--font-body);
  color: var(--text-heading);
}
.spec--pair dd { font-size: var(--fs-body); }
.spec--pair .price { font-size: var(--fs-h3); }
.pair .spec__row { grid-template-columns: calc(96 * var(--px)) minmax(0, 1fr); }

/* ——— Growing regime: the day grid ————————————————————————————————————— */

/* The meat shelf's ground from the catalogue: this is still a broiler aisle. */
.grow {
  padding-block: var(--sp-16);
  background: var(--surface-shell);
}
.grow__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--sp-10);
  align-items: start;
}
.grow__note {
  margin-top: var(--sp-5);
  max-width: 34ch;
  font: var(--text-default);
  color: var(--text-muted);
}

.brooder { margin: 0; }

/* One column per day between day 1 and day 50, after a column of track names.
   Day d is the grid line d + 1, so a span from day a to day b is simply
   `grid-column: a+1 / b+1`, written inline where the data is. The ticks mark
   only the days the regime names, and run through every track. */
.brooder__grid {
  display: grid;
  grid-template-columns: calc(124 * var(--px)) repeat(49, minmax(0, 1fr));
  grid-template-rows: auto repeat(3, auto);
  row-gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-10) var(--sp-10) var(--sp-8);
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.brooder__axis,
.brooder__tick {
  font: var(--fw-bold) var(--fs-2xs)/1 var(--font-narrow);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.brooder__axis { grid-column: 1; grid-row: 1; align-self: start; }
.brooder__tick {
  grid-row: 1 / -1;
  justify-self: start;
  padding-left: var(--sp-1);
  border-left: 1px dashed var(--coco-line-300);
  white-space: nowrap;
}
.brooder__tick--end {
  justify-self: end;
  padding: 0 var(--sp-1) 0 0;
  border-left: 0;
  border-right: 1px dashed var(--coco-line-300);
}

.brooder__track {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: end;
  position: relative;
  z-index: var(--z-content);
}
.brooder__track--heat { grid-row: 2; }
.brooder__track--light { grid-row: 3; }
.brooder__track--weight { grid-row: 4; }
.brooder__track > * { grid-row: 1; }

.brooder__label {
  grid-column: 1;
  align-self: center;
  padding-right: var(--sp-4);
  font: var(--fw-bold) var(--fs-xs)/1.3 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-heading);
}

.brooder__seg {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
}
.brooder__text,
.brooder__after {
  font: var(--text-caption);
  line-height: 1.4;
  color: var(--text-body);
}
.brooder__text b,
.brooder__after b,
.brooder__mark b {
  font: var(--fw-bold) var(--fs-body)/1.2 var(--font-narrow);
  color: var(--text-heading);
}
.brooder__seg--light-cycle .brooder__text { padding-left: var(--sp-3); }
/* The heat track is empty after day 17, so the end of the ramp is written
   there, level with the bar it finishes. */
.brooder__after {
  margin: 0;
  padding-left: var(--sp-3);
  align-self: end;
  translate: 0 calc(var(--sp-1) * 1.5);
}

.brooder__bar {
  height: calc(10 * var(--px));
  border-radius: var(--radius-pill);
}
/* Heat: brooder clay at 34 °C, cooling a degree a day towards the yolk. */
.brooder__seg--heat .brooder__bar {
  background: linear-gradient(90deg, var(--coco-clay-500), var(--coco-yolk-500) 75%, var(--coco-yolk-400));
}
/* Light: a solid lamp for the first fortnight, then a broken one — the lamp
   may go off for a while each day. */
.brooder__seg--light-on .brooder__bar {
  background: var(--coco-yolk-400);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}
.brooder__seg--light-cycle .brooder__bar {
  background: repeating-linear-gradient(90deg,
    var(--coco-yolk-400) 0 calc(20 * var(--px)),
    var(--coco-yolk-100) calc(20 * var(--px)) calc(26 * var(--px)));
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

/* Weight: a line through the fifty days, a dot growing at each weighed day,
   and a pale band over the days the bird is ready. */
.brooder__line,
.brooder__ready {
  align-self: end;
  margin-bottom: calc(10 * var(--px));
}
.brooder__line {
  height: 2px;
  translate: 0 50%;
  background: var(--accent-decor);
}
.brooder__ready {
  height: calc(22 * var(--px));
  margin-bottom: 0;
  background: var(--coco-grass-100);
  border-radius: var(--radius-pill);
}
.brooder__mark {
  --dot: calc(12 * var(--px));
  justify-self: start;
  display: grid;
  justify-items: start;
  gap: var(--sp-2);
  translate: calc(var(--dot) / -2) 0;
  white-space: nowrap;
}
.brooder__mark::after {
  content: "";
  width: var(--dot);
  height: var(--dot);
  margin-bottom: calc((22 * var(--px) - var(--dot)) / 2);
  border-radius: var(--radius-circle);
  background: var(--accent);
  box-shadow: 0 0 0 calc(3 * var(--px)) var(--surface-card);
}
.brooder__mark--mid {
  --dot: calc(16 * var(--px));
  justify-items: center;
  translate: -50% 0;
}
.brooder__mark--end {
  --dot: calc(22 * var(--px));
  justify-items: end;
  translate: calc(-100% + var(--dot) / 2) 0;
}

.brooder__foot {
  margin-top: var(--sp-5);
  font: var(--text-caption);
  color: var(--text-muted);
}

/* The one authored motion on the page: the grid draws its bars in from day 1
   the first time it comes into view, heat first, then light, then weight.
   Everything is drawn by default; only a grid still out of sight on load is
   held back (see the page script). */
.brooder__bar,
.brooder__line,
.brooder__ready {
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.brooder__mark { transition: opacity 400ms ease-out; }
.brooder__track--light .brooder__bar { transition-delay: 150ms; }
.brooder__track--weight .brooder__line,
.brooder__track--weight .brooder__ready { transition-delay: 300ms; }
.brooder__mark { transition-delay: 700ms; }
.brooder__mark--mid { transition-delay: 850ms; }
.brooder__mark--end { transition-delay: 1000ms; }

.is-pending .brooder__bar,
.is-pending .brooder__line,
.is-pending .brooder__ready { clip-path: inset(0 100% 0 0); }
.is-pending .brooder__mark { opacity: 0; }

/* ——— Kit for the first weeks ————————————————————————————————————————— */

.kit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: var(--sp-10) 0 0;
  padding: 0;
  list-style: none;
}
.kit__item {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--surface-soft);
  border-radius: var(--radius-lg);
}
.kit__photo {
  width: calc(104 * var(--px));
  height: calc(104 * var(--px));
}
/* Most legacy shop photos carry their category printed across the top (and
   the vet kit along the bottom too). The medallion shows the middle of the
   frame, which is the product, and leaves the lettering outside the ring;
   --shift nudges a photo whose lettering runs deeper, and a clean photo
   sets its own --zoom. */
.kit__photo img {
  scale: var(--zoom, 1.45);
  translate: 0 var(--shift, 0);
}
.kit__title { font: var(--text-h4); }
.kit__note {
  margin-top: var(--sp-1);
  font: var(--text-caption);
  line-height: 1.45;
  color: var(--text-muted);
}
.kit__price {
  margin-top: var(--sp-3);
  font: var(--text-caption);
  color: var(--text-muted);
}
.kit__price .price { font-size: var(--fs-h3); }

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

@media (max-width: 1024px) {
  /* Two columns: the portrait beside the Cross, and the shelf-mate below
     them at full width, its facts beside its name. The rows no longer need
     to align across the page, so the subgrids let go. */
  .pdp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-rows: repeat(8, auto) auto;
  }
  .pdp__figure { grid-row: 2 / 9; }
  .pdp__main { grid-row: 2 / 9; }
  .pair {
    grid-column: 1 / -1;
    grid-row: 9;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--sp-10);
    margin-top: var(--sp-12);
  }
  .pair__head,
  .pair__lead,
  .pair__actions { grid-column: 1; }
  .pair__head { align-self: start; }
  .pair__actions { align-self: start; }
  .pair .spec {
    grid-column: 2;
    grid-row: 1 / -1;
    grid-template-rows: none;
    margin-top: 0;
    align-self: start;
  }

  .grow__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .grow__note { max-width: 60ch; }
}

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

@media (max-width: 680px) {
  /* One column. As on the homepage, the discs stay behind on a phone. */
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .pdp__figure,
  .pdp__main,
  .pair { grid-column: 1; }
  .pdp__figure {
    --p: min(280px, 72cqi);
    grid-row: 2;
    display: grid;
    justify-items: center;
    margin-top: var(--sp-6);
  }
  .pdp__figure::before,
  .pdp__figure::after { display: none; }
  .pdp__portrait { margin-top: 0; }
  .pdp__main { grid-row: 3; grid-template-rows: none; padding-top: var(--sp-8); }
  .pdp__main .spec { grid-template-rows: none; }
  .pdp__title { font-size: clamp(32px, 12.5vw, 66px); }
  .pair {
    grid-row: 4;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    padding: var(--sp-6) var(--sp-5);
  }
  .pair .spec { grid-column: 1; grid-row: auto; margin-top: var(--sp-5); }
  .pair__actions { margin-top: var(--sp-6); }
}

@media (max-width: 620px) {
  .pdp { padding-bottom: var(--sp-12); }
  .pdp__actions .btn { width: 100%; }
  .spec__row,
  .pair .spec__row { grid-template-columns: calc(108 * var(--px)) minmax(0, 1fr); }

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

  /* The track names move above their bars and give the days the full width. */
  .brooder__grid {
    grid-template-columns: 0 repeat(49, minmax(0, 1fr));
    row-gap: var(--sp-6);
    padding: var(--sp-6) var(--sp-5) var(--sp-8);
  }
  /* The axis word would sit in the zero-width name column; it stays only to
     hold the tick row open. */
  .brooder__axis { visibility: hidden; }
  /* Days 45 and 50 are five columns apart here; the numbers drop their
     tracking and hug their lines so both ends of the ready band stay named. */
  .brooder__tick {
    padding-left: 2px;
    letter-spacing: 0;
  }
  .brooder__tick--end { padding-right: 2px; }
  .brooder__track { row-gap: var(--sp-2); }
  .brooder__track > * { grid-row: 2; }
  .brooder__track > .brooder__label {
    grid-row: 1;
    grid-column: 2 / -1;
    padding: 0;
  }
  .brooder__text,
  .brooder__after { font-size: var(--fs-xs); }
  .brooder__text b,
  .brooder__after b,
  .brooder__mark b { font-size: var(--fs-sm); }
  .brooder__seg--light-cycle .brooder__text { padding-left: var(--sp-2); }

  .kit { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .kit__item { padding: var(--sp-4); }
  .kit__photo { width: 84px; height: 84px; }
}