/* ===========================================================================
   PumkinGrey — the promotional banner, shared by the homepage hero and the
   mid-grid feature on /Shop.

   These were two blocks of CSS (.home__hero* in pg-home.css, .feature* inside
   the <style> in includes/shop_landing.php) drawing one thing from one row of
   linkstb, and they had drifted: the home hero cropped its picture to fill the
   box, the shop's let it size the box. One file now, loaded by both pages,
   rendered by pg_link_banner() in includes/links.php.

   Nothing here is prefixed with .pg-home or .pg-shop, and nothing here defines
   a colour of its own — the tokens below (--ink, --paper, --yellow, the fonts,
   --radius) are declared identically on both page roots, so the banner is
   coloured by whichever page it lands in.
   =========================================================================== */

.feature {
  /* The inset the picture keeps from the edges of its half of the banner, and
     the two limits on how tall that half is: a floor for when the copy beside
     it is short, and the height it takes once the banner stacks and has no
     copy beside it to measure against. */
  --banner-pad-y: 28px;
  --banner-pad-x: 28px;
  --banner-media-min: 300px;
  --banner-media-max: 420px;

  grid-column: 1 / -1;          /* spans the shop's product grid; inert on /Home */
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 200px;
  margin: 8px 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
}

.feature__txt { padding: 38px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.feature__txt .ey { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: var(--yellow); }
.feature__txt h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.02; letter-spacing: -.02em; margin: 0; }
.feature__txt p { color: rgba(251, 250, 247, .72); margin: 0; max-width: 36ch; }
.feature__txt a {
  align-self: flex-start; margin-top: 6px;
  border: 1px solid rgba(251, 250, 247, .4); border-radius: 100px; padding: 10px 22px;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: 11px;
  transition: background .15s, color .15s, border-color .15s;
}
.feature__txt a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* The <picture> is the grid item and it stretches to the row like any other,
   so its height is the banner's height. It is left at position:relative and
   nothing else: the image inside is taken out of flow, which means the picture
   contributes NO intrinsic height of its own. That is what stops artwork from
   sizing the banner — a square 3375x3375 file used to make a 756px hero that
   pushed the page below the fold. The copy sets the height now; the floor below
   only covers the case where the copy is a single short line. */
.feature picture {
  position: relative; display: block;
  min-width: 0; min-height: var(--banner-media-min);
}
/* The image FITS THE DIV: it is sized to the box less the padding on each
   side, so it fills exactly that box however tall the copy beside it runs.

   The size is stated OUTRIGHT rather than left to auto between four insets,
   which is what an earlier pass did and why the artwork spilled out of the
   banner. An <img> is a REPLACED element: CSS resolves auto width and height on
   an absolutely positioned replaced box from the file's own intrinsic size and
   then drops whichever inset conflicts, so `top/right/bottom/left + auto` laid
   a 3375px image over the banner instead of fitting it to those insets. Only a
   non-replaced box gets sized by its insets. calc() against the percentage is
   immune to that, and the percentages are safe: the containing block is the
   picture's own box, whose height is definite by the time this resolves —
   stretched to the grid row beside the copy, or set outright once stacked.

   object-fit:cover then fills the box without distortion. The trade is
   deliberate: a picture squarer than the box loses a little top and bottom.
   object-position is centre because the subject of a product shot is in the
   middle, so a symmetric trim takes the least interesting part.

   max-width/max-height are reset because .pg-home img carries max-width:100%,
   which would otherwise measure against the box and pull the image back off its
   right edge. */
.feature__img {
  position: absolute;
  top: var(--banner-pad-y); left: var(--banner-pad-x);
  width:  calc(100% - var(--banner-pad-x) * 2);
  height: calc(100% - var(--banner-pad-y) * 2);
  max-width: none; max-height: none;
  object-fit: cover; object-position: center;
  border-radius: calc(var(--radius) / 2);
}

/* Side by side only while the image column can out-measure the copy. Below
   that the two stack, which gives the picture the full width instead of a deep
   band of the panel's dark around it. Note this is above PG_LINK_WIDE_FROM
   (764px): between the two the banner is stacked but still shows the landscape
   cut, which is the right shape for a full-width strip on a tablet. */
@media (max-width: 1024px) {
  .feature { grid-template-columns: 1fr; --banner-media-max: 360px; }
  .feature__txt { padding: 30px; }
  /* Stacked, the picture is a row of its own with nothing beside it to take a
     height from, so it is given one outright — min-height would let the box
     grow and there is nothing here to stop it. */
  .feature picture { height: var(--banner-media-max); min-height: 0; }
}
@media (max-width: 720px) {
  .feature { --banner-pad-y: 18px; --banner-pad-x: 18px; --banner-media-max: 300px; }
}