/* ============================================================================
   sex-reversed-tilapia-fingerlings/srt.css — the /sex-reversed-tilapia-fingerlings/ page
   ----------------------------------------------------------------------------
   Hand-kept. Loaded AFTER tokens.css, template.css and
   where-we-deliver/deliveries.css: the shared pieces (.wwd side margins,
   .crumbs, .wwd-kicker, .wwd-head, .wwd-btn, .place, .wwd-pickup,
   .drop__label, the FAQ rows and the call-to-action box) come from that
   file unchanged. This file adds only this page's own sections.
   The markup is written by scripts/build-srt.mjs.

   Remember: 1rem = 10px on this site (html is 62.5%).
   Breakpoints follow tokens.css: phone <= 667, tablet 668–979, desktop.
   ========================================================================== */

.srt { --srt-gap: 2rem; }

/* A small round icon badge, as in the delivery-area cards. */
.srt-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--c-accent-40);
  background: rgb(53 161 205 / 0.12);
  color: var(--c-accent);
}
.srt-icon svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------------ hero */
.srt-hero.section {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--sp-3);
  min-height: min(92svh, 100rem);
  padding-top: calc(var(--header-full, 13rem) + var(--sp-2));
  padding-bottom: var(--sp-2);
}
.srt-hero::before {   /* the same brand-blue haze as the delivery page */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 60% at 80% 50%, rgb(2 81 134 / 0.45), transparent 70%),
    radial-gradient(40% 40% at 10% 0%, rgb(53 161 205 / 0.10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.srt-hero__text { min-width: 0; }
/* "Sex-reversed" is the longest display line on the site: sized to the
   column so it never clips (big condensed type clips, it does not wrap). */
.srt-hero__h1 .title-lines { margin-bottom: var(--sp-2); font-size: min(var(--fs-d2), 9.4vw); }
.srt-hero__sub { max-width: 46ch; font-size: max(var(--fs-body), 1.8rem); line-height: 1.5; }
.srt-hero__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: var(--sp-3); }
.srt-hero__actions .act { min-height: 56px; padding: 0 2.4rem; font-size: 1.4rem; }
.srt-hero__actions .act svg { width: 18px; height: 18px; }
.srt-hero__actions .act__num { font-size: 1.6rem; }

.srt-chips {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
  color: rgb(255 255 255 / 0.78);
  letter-spacing: 0.1em;
}
.srt-chips li { display: inline-flex; align-items: center; gap: 0.8rem; }
.srt-chips svg { width: 16px; height: 16px; color: var(--c-accent); flex: 0 0 auto; }

.srt-hero__media { margin: 0; min-width: 0; display: flex; justify-content: center; }
.srt-hero__frame {
  position: relative;
  width: 100%;
  max-width: 46rem;
  border: 1px solid var(--wwd-line);
  box-shadow: 0 40px 90px -40px rgb(53 161 205 / 0.65), 0 0 0 10px rgb(53 161 205 / 0.05);
  background: var(--c-ink);
}
.srt-hero__frame::after {   /* a thin accent corner, top right */
  content: '';
  position: absolute;
  top: -12px;
  right: -12px;
  width: 30%;
  height: 30%;
  border-top: 2px solid var(--c-accent);
  border-right: 2px solid var(--c-accent);
  pointer-events: none;
}
.srt-hero__frame picture, .srt-hero__frame img { display: block; width: 100%; height: auto; }
.srt-hero__frame img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ------------------------------------------------- what it means (SRT) */
.srt-meaning__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--wwd-line);
  background:
    radial-gradient(80% 120% at 100% 0%, rgb(53 161 205 / 0.18), transparent 60%),
    var(--wwd-card);
  box-shadow: var(--wwd-glow);
}
.srt-meaning__head .title-lines { margin-bottom: 0; }
.srt-meaning__text {
  margin: 0;
  padding-left: 2.4rem;
  border-left: 2px solid var(--c-accent);
  max-width: 40ch;
  font-size: clamp(2rem, 1.4vw + 1.2rem, 3rem);
  line-height: 1.45;
  text-transform: none;   /* body is uppercase on this site; body-text resets it */
  color: var(--c-white);
}
.srt-tiles {
  list-style: none;
  margin: var(--srt-gap) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--srt-gap);
}
.srt-tile {
  padding: 2.8rem 2.6rem;
  background: var(--wwd-card);
  border: 1px solid var(--wwd-line);
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out);
}
.has-hover .srt-tile:hover { border-color: var(--c-accent-60); transform: translateY(-2px); }
.srt-tile__h,
.srt-buyer__h,
.srt-step__h {
  margin: 2rem 0 1rem;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: var(--ls);
  color: var(--c-white);
}
.srt-tile .body-text, .srt-buyer .body-text { margin: 0; }

/* ------------------------------------------------------------- the strain */
.srt-strain.section {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--sp-3);
  align-items: center;
}
.srt-strain__media { margin: 0; position: relative; }
.srt-strain__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--wwd-line);
  box-shadow: var(--wwd-glow);
}
.srt-strain__media figcaption { margin-top: 1.2rem; color: var(--c-white-56); letter-spacing: 0.12em; }
.srt-strain__text { min-width: 0; }
.srt-strain__text .title-lines { margin-bottom: var(--sp-2); }
.srt-strain__text > .body-text { max-width: 56ch; }

.srt-facts {
  margin: var(--sp-3) 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--wwd-line);
}
.srt-facts > div { padding: 1.6rem 1.6rem 1.6rem 0; border-bottom: 1px solid var(--wwd-line); }
.srt-facts dt { color: var(--c-accent); letter-spacing: 0.14em; margin-bottom: 0.4rem; }
.srt-facts dd { margin: 0; color: var(--c-white); font-size: 1.7rem; line-height: 1.35; }

/* ------------------------------------------------------------- who buys */
.srt-buyer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--srt-gap);
}
.srt-buyer {
  position: relative;
  padding: 2.8rem 2.4rem 2.6rem;
  background: var(--wwd-card);
  border: 1px solid var(--wwd-line);
  box-shadow: var(--wwd-glow);
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out);
}
.has-hover .srt-buyer:hover { border-color: var(--c-accent-60); transform: translateY(-2px); }
.srt-buyer__num { position: absolute; top: 2.4rem; right: 2.4rem; color: var(--c-white-56); letter-spacing: 0.14em; }

/* -------------------------------------------------------- delivery & pickup */
.srt-delivery__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-3);
  align-items: start;
}
.srt-delivery__text .title-lines { margin-bottom: var(--sp-2); }
.srt-regions { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.srt-delivery .wwd-pickup { margin-top: var(--sp-2); }

.srt-latest__h { margin: 0 0 1.6rem; color: var(--c-accent); letter-spacing: 0.16em; font-weight: 400; }
.srt-drops {
  list-style: none;
  margin: 0 0 var(--sp-2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.srt-drop {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--wwd-card);
  border: 1px solid var(--wwd-line);
  color: var(--c-white);
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.has-hover .srt-drop:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.srt-drop:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.srt-drop__photo { position: relative; display: block; overflow: hidden; background: var(--c-ink); }
.srt-drop__photo picture, .srt-drop__photo img { display: block; width: 100%; height: auto; }
.srt-drop__photo img { aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--e-out); }
.has-hover .srt-drop:hover img { transform: scale(1.04); }
.srt-drop .drop__label { top: 1rem; left: 1rem; padding: 0.6rem 1rem 0.6rem 0.8rem; font-size: 1.05rem; }
.srt-drop__body { display: block; padding: 1.6rem 1.6rem 1.8rem; }
.srt-drop__place {
  display: block;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: var(--ls);
  text-transform: uppercase;
}
.srt-drop__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin-top: 0.8rem; color: var(--c-white-56); letter-spacing: 0.08em; }
.srt-drop__meta time { color: var(--c-accent); }

/* ------------------------------------------------------------ how to order */
.srt-order.section {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--sp-3);
  align-items: center;
}
.srt-order__text .title-lines { margin-bottom: var(--sp-2); }
.srt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.srt-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding: 2.2rem 0;
  border-top: 1px solid var(--wwd-line);
}
.srt-step:last-child { border-bottom: 1px solid var(--wwd-line); }
.srt-step__num {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #000;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
}
.srt-step__h { margin: 0.4rem 0 0.8rem; font-size: 3rem; }
.srt-step .body-text { margin: 0; max-width: 52ch; }
.srt-price {
  margin-top: var(--sp-3);
  padding: 2rem 2.4rem;
  border-left: 2px solid var(--c-accent);
  background: rgb(53 161 205 / 0.07);
}
.srt-price__h { margin: 0 0 0.6rem; letter-spacing: 0.16em; }
.srt-price .body-text { margin: 0; }
.srt-order__media { margin: 0; }
.srt-order__media picture, .srt-order__media img { display: block; width: 100%; height: auto; }
.srt-order__media img { border: 1px solid var(--wwd-line); box-shadow: var(--wwd-glow); }
.srt-order__media figcaption { margin-top: 1.2rem; color: var(--c-white-56); letter-spacing: 0.12em; }

/* ------------------------------------------------------------ FAQ links */
.srt .faq__a a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 0.2em; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1199px) {
  .srt-buyer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* minmax(0, …): the phone swipe strip below has a negative right margin,
     which must not widen the column (it pushed the button off-screen) */
  .srt-delivery__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 979px) {
  .srt-hero.section { grid-template-columns: 1fr; min-height: 0; gap: var(--sp-3); }
  .srt-hero__h1 .title-lines { font-size: min(var(--fs-d2), 15vw); }
  .srt-hero__frame { max-width: 52rem; }
  .srt-strain.section { grid-template-columns: 1fr; }
  .srt-strain__media { max-width: 64rem; }
  .srt-order.section { grid-template-columns: 1fr; }
  .srt-order__media { max-width: 64rem; }
}

@media (max-width: 667px) {
  .srt { --srt-gap: 1.4rem; }
  .srt-hero.section { padding-top: calc(var(--header-full, 11rem) + var(--sp-1)); }
  /* a quarter larger than the phone display size, as on where-we-deliver/;
     the vw cap keeps "Sex-reversed" inside 375 */
  .srt-hero__h1 .title-lines { font-size: min(calc(var(--fs-d2) * 1.25), 22vw); }
  .srt-hero__sub { font-size: 1.7rem; }
  .srt-hero__actions { flex-direction: column; }
  .srt-hero__actions .act { width: 100%; }
  .srt-chips { flex-direction: column; gap: 1rem; }
  .srt-hero__frame::after { top: -8px; right: -8px; }

  .srt-meaning__box { padding: var(--sp-3) 2rem; gap: var(--sp-2); }
  .srt-meaning__text { padding-left: 1.6rem; font-size: 2rem; }
  .srt-tiles { grid-template-columns: 1fr; }
  .srt-tile { padding: 2.2rem 2rem; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.6rem; align-items: center; }
  .srt-tile .srt-icon { grid-row: span 2; }
  .srt-tile__h { margin: 0 0 0.6rem; font-size: 2.8rem; }

  .srt-facts { grid-template-columns: 1fr; }
  .srt-buyer-list { grid-template-columns: 1fr; }
  /* icon beside the words, like the tiles above, so four cards stay short */
  .srt-buyer { padding: 2.2rem 2rem; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.6rem; align-items: center; }
  .srt-buyer .srt-icon { grid-row: span 2; }
  .srt-buyer__num { top: 1.6rem; right: 1.6rem; }
  .srt-buyer__h { font-size: 2.8rem; margin: 0 0 0.6rem; }

  /* the latest deliveries: a swipe strip, the next card peeking in */
  .srt-drops {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-right: calc(var(--wwd-side) * -1);
    padding-right: var(--wwd-side);
  }
  .srt-drops::-webkit-scrollbar { display: none; }
  .srt-drops > li { flex: 0 0 72%; scroll-snap-align: start; }
  .srt-latest .wwd-btn { width: 100%; }
  .srt-strain__text .wwd-btn { width: 100%; }

  .srt-step { gap: 1.4rem; padding: 1.8rem 0; }
  .srt-step__num { width: 44px; height: 44px; font-size: 2.2rem; }
  .srt-step__h { font-size: 2.6rem; }
  .srt-price { padding: 1.6rem; }
}