/* ==========================================================================
   salmoe -- intentional divergences from the reference design
   ==========================================================================

   Everything under src/components/salmoe/design/ is generated verbatim from the
   deployment and carries a do-not-edit header, because regenerating it would
   discard any hand edits. Requested changes to those pages therefore live here
   instead, as CSS, which survives regeneration.

   Loaded after public/salmoe-design.css (see the <link> order in
   app/layout.jsx), so it wins on equal specificity without needing !important.

   Because these are CSS-only, the structural audit against the reference
   deployment still reports the DOM as identical -- element counts, classes and
   attributes are untouched. The audit will NOT catch divergences declared here,
   so each one is recorded below with its reason.

   Log of divergences:
     1. "Trout Vs Salmon" heading block centred horizontally on the homepage
        (2026-08-12).
     2. "Trout Vs Salmon" heading centred vertically against the background
        image on the homepage (2026-08-12).
     3. "Trout Vs Salmon" whole block -- heading and comparison table together --
        centred vertically against the background image (2026-08-12).
     4. Partner logos enlarged 40%, from the design's 36px to 50px (2026-08-20).
     5. Fish-on-ice panel given the picture's own aspect ratio at lg and up,
        instead of collapsing to whatever height was left over (2026-08-20).
   ========================================================================== */

/* 1. Trout Vs Salmon -- centre the heading block.
 *
 * The design left-aligns the desktop variant inside a block pushed over with
 * `ml-40`; the mobile variant is already centred by its own `text-center`, so
 * this only needs to address the desktop one.
 *
 * Scoped with :has(#farmer-network) because that id exists only on the
 * homepage. The same `.ml-40.mt-12.space-y-3` block also appears on /about, and
 * the request was for the homepage specifically. Scoping this way avoids adding
 * a wrapper element, which would otherwise show up as a difference against the
 * reference.
 */
body:has(#farmer-network) .ml-40.mt-12.space-y-3 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* The heading block is a flex child; centring its text is not enough on its own
 * once the parent switches to a row at lg, so centre it as a column too. */
body:has(#farmer-network) .ml-40.mt-12.space-y-3 > * {
  margin-left: auto;
  margin-right: auto;
}

/* 2. Trout Vs Salmon -- centre the heading vertically against the background image.
 *
 * The design pins the heading to the top of the row (`lg:items-start`) and pushes
 * it down with `mt-12`, which left it high above the centre of the image card.
 * Measured before the change: the row spans 453px with its centre at -25 and the
 * comparison table beside it centres at -17, while the heading centred at -159.
 *
 * Centring the row's items lines the heading up with the table, which is the
 * content filling the background image. `mt-12` has to go too, or it skews the
 * centred position back down by 3rem.
 *
 * The parent is selected via :has(>) rather than by its own class list, because
 * that list carries `lg:` variants whose colons need escaping and which are more
 * likely to change than the structural relationship.
 */
body:has(#farmer-network) div:has(> .ml-40.mt-12.space-y-3) {
  align-items: center;
}

body:has(#farmer-network) .ml-40.mt-12.space-y-3 {
  margin-top: 0;
}

/* 3. Trout Vs Salmon -- centre the WHOLE block (heading + table) against the
 *    background image, not just the heading within its row.
 *
 * Measured: the background image and its card are 693px tall, centred at 82.
 * The row holding the heading and the comparison table is 453px and centred at
 * 2 -- 80px high -- because the inner container uses `justify-between`, which
 * pins the row to the top and pushes a decorative wordmark to the bottom.
 *
 * Switching to `center` moves the row to the middle. The wordmark is taken out
 * of flow and pinned to where it already sat (bottom: 24px puts it back at the
 * same 314px offset), so centring the row does not drag it upwards with it.
 *
 * The vertical padding is also equalised to 24px. The design has 40px top and
 * 24px bottom, and with a centred child that asymmetry offsets the result by
 * 8px; matching them lands the row centre on 82, exactly the image centre. Top
 * padding no longer affects anything visible here, since nothing is anchored to
 * the top of this container any more.
 */
body:has(#farmer-network) div:has(> div > .ml-40.mt-12.space-y-3) {
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

body:has(#farmer-network) div:has(> div > .ml-40.mt-12.space-y-3) > .pointer-events-none {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
}


/* 4. Partner logos -- 40% larger than the design draws them.
 *
 * The design sizes these at h-9 (36px). That worked for its Logoipsum
 * placeholders, which were flat wordmarks with nothing to lose, but the real
 * marks are institutional: a University of Kashmir crest with legible text in
 * it, and a circular Department of Fisheries badge. `w-auto` means a square
 * badge gets 36px of width as well as height, so it arrived as an unreadable
 * disc roughly the size of a favicon.
 *
 * This lives here rather than in the markup because the design pages load only
 * the design's own compiled stylesheet, which contains exactly the utilities
 * the design itself uses. `h-9` is in it; an arbitrary `h-[3.15rem]` is not, so
 * writing that class into the generated markup would resolve to nothing and
 * drop the height constraint entirely -- each mark would then render at its
 * full intrinsic size, up to 392px tall.
 *
 * Selecting on the src keeps this pointed at the partner row specifically, and
 * it survives regeneration, since scripts/design-content.mjs rewrites those
 * same paths.
 *
 * Height only: width stays auto so each mark keeps its own aspect ratio.
 */
img[src*="/salmoe/partner-"] {
  height: 3.15rem; /* 36px x 1.4 */
}


/* 5. "Fresh fish on ice" panel -- show the whole picture instead of a sliver.
 *
 * The right-hand column is a two-row grid, `auto minmax(0,1fr)`: the text card
 * takes what it needs and this panel gets the remainder, sized so the column
 * ends level with the photo beside it. The design also drops the panel's
 * min-height at lg (`lg:min-h-0`), so there is no floor under that remainder.
 *
 * With the real copy in the card -- a two-line heading and a two-line paragraph
 * -- the card grew to 206px of the column's 309px, leaving the panel 63px. The
 * image is 679x175, and it is a `fill` image with object-cover, so 63px of box
 * showed a 63px horizontal slice through the middle of the fish. It read as an
 * empty rounded rectangle, not as a cropped photo, which is why it looked like
 * a missing image rather than a layout problem.
 *
 * Letting the row size to its content and giving the panel the image's own
 * 679:175 ratio renders it at exactly its natural proportions -- 544x140 at
 * this breakpoint. The column then runs taller than the photo beside it, and
 * because the grid is `items-stretch` that photo grows to match, which is fine:
 * it is also object-cover, so it simply shows more of itself.
 *
 * lg and up only. Below that the grid is a single column and the design's
 * `min-h-[200px]` applies, which is a deliberate crop rather than a collapse,
 * so it is left alone.
 *
 * Keyed on the image's src rather than its alt text: both come from the design,
 * but the asset name is the thing this project also controls through
 * scripts/design-content.mjs, so the two stay in step.
 */
@media (min-width: 1024px) {
  div:has(> div > img[src$="/salmoe/fish-on-ice.webp"]) {
    grid-template-rows: auto auto;
  }

  div:has(> img[src$="/salmoe/fish-on-ice.webp"]) {
    aspect-ratio: 679 / 175;
    min-height: 0;
  }
}