/* ==========================================================================
   THE GENESYS - product card
   Design: "Nuova proposta grafica.dc.html" -> data-screen-label="Web - Risultati"
   (Turn 4)

   Extracted from shop.css. The card markup is emitted by
   woocommerce/content-product.php, which WooCommerce renders through
   `wc_get_template_part('content','product')` - and the parent theme calls that
   from SEVEN places, not just the shop archive:

     woocommerce/archive-product.php          (the shop)
     woocommerce/best-seller-archive.php
     woocommerce/favourite-archive.php
     woocommerce/printer-and-accessories.php
     woocommerce/sales-archive.php
     templates/creator-page.php
     functions.php (AJAX loop)

   ...and an eighth caller that is WooCommerce's own: single-product/related.php
   draws Related products and up-sells on every product page through the same
   template part.

   While these rules lived in shop.css - which only loads on shop screens - the
   other callers rendered the redesigned markup with no styling at all, so the
   cards collapsed to bare text links. That was a regression introduced with the
   shop redesign and this split is the fix: the card travels with its own
   stylesheet, enqueued wherever the loop can run.

   Deliberately NOT scoped to .gns-shop, for the same reason.
   ========================================================================== */

/*
 * ⚠️ `flex-wrap: nowrap` is load-bearing, not tidiness. The card inherits
 * `flex-wrap: wrap` from the parent's card styles, and the body inherits
 * `flex: 0 1 100%`. In a COLUMN, a 100% flex-basis means 100% of the card's
 * HEIGHT - so once the media became a 2:1 band rather than a square, the two
 * children no longer fit in one column and the body wrapped into a second one,
 * 149px wide, beside the picture. Both children are pinned to their content
 * height and the full width instead.
 */
.gns-card {
  border-radius: 14px;
  background: var(--gns-card);
  border: 1px solid var(--gns-border-faint);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-width: 0;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
/*
 * ⚠️ The offending rule is the parent's
 *
 *     @media (max-width: 1200px)
 *     .product.type-product > :last-child { flex-basis: 100% }
 *
 * - written for the float layout, where `:last-child` was a sibling column.
 * It is (0,2,0) and loads after card.css, so a plain `.gns-card > .gns-card__body`
 * ties and loses; `.gns-card.product` takes it to (0,3,0) and settles it without
 * !important. It only bites under 1200px, which is why the desktop grid looked
 * right while every laptop got a card with the text beside the picture.
 */
.gns-card.product > .gns-card__media,
.gns-card.product > .gns-card__body,
.gns-card > .gns-card__media,
.gns-card > .gns-card__body {
  flex: 0 0 auto;
  width: 100%;
}
.gns-card:hover {
  border-color: var(--gns-border-cyan);
  transform: translateY(-2px);
  box-shadow: var(--gns-glow-card);
}
.gns-card--featured {
  border-color: var(--gns-cyan);
  box-shadow: 0 10px 30px rgba(0, 191, 255, .14);
}

/*
 * A LANDSCAPE band, not a square.
 *
 * The reference card is 331 x 247 with the media ending at 165 - a 2:1 stage
 * under a three-line body. The square this used to be came from Turn 4, where
 * the grid is two fixed rows and the media takes whatever height is left; on a
 * page whose rows size themselves it made a card half again as tall as the one
 * the design draws, and four of them no longer read as a row.
 *
 * The glow is the reference's own: closest-side, centred at 50% 70%, cyan at
 * .18 - brighter than the .12 that was here, which is what makes the model look
 * lit from below rather than merely placed on a dark tile.
 */
.gns-card__media {
  position: relative;
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(closest-side at 50% 70%, rgba(0, 191, 255, .18), transparent);
  overflow: hidden;
}
/*
 * The design's signature: the model FLOATS on the tile, centred over the radial
 * glow with a soft shadow under it - it is never a photo cropped to the frame.
 * `cover` was filling the media box edge to edge, which hid the glow entirely
 * and cut the tops and bottoms off tall models.
 *
 * ⚠️ The canvas gets away with this because its renders are cut-outs on
 * transparency (assets/sm-model-*.png). Roughly half of this catalogue is not:
 * the printer photos are opaque JPEGs on white, and the model listings are
 * screenshots at whatever aspect the creator uploaded. `contain` still suits
 * them - an image with its own background reads as a plate resting on the tile
 * rather than as a bleed - and the radius keeps the corners of an opaque source
 * from looking like an accident. The drop shadow is the same one the canvas
 * puts under every model.
 *
 * The 12% inset is what keeps the glow visible AROUND the subject; the canvas
 * runs its renders at 74% of the card width for the same reason.
 */
.gns-card__media img {
  max-width: 76%;
  max-height: 84%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  filter: var(--gns-shadow-model-sm);
}
.gns-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--gns-r-pill);
  background: var(--gns-scrim);
  border: 1px solid var(--gns-border-magenta);
  color: var(--gns-magenta-ink);
  font: 500 9px var(--gns-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  backdrop-filter: blur(4px);
}

/* Type and rhythm from the reference card: 14/16/16 padding, 7px between the
   three lines, 13.5/700 name over an 11.5px meta line. */
.gns-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; }
.gns-card__name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gns-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gns-card__name a { color: inherit; text-decoration: none; }
.gns-card__meta {
  font-size: 11.5px;
  color: var(--gns-secondary-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gns-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-top: 4px;
}
/*
 * The price is set in DM Mono, as the reference card sets it. It is not a
 * decorative choice: mono digits are tabular, so the prices line up down a
 * column of cards instead of drifting with the width of each glyph - and the
 * FREE label that occupies this same slot on most of the catalogue is already
 * mono, so the two now belong to one another.
 */
.gns-card__price {
  font: 500 12.5px var(--gns-font-mono);
  color: var(--gns-text);
}
/* Free is the norm in this catalogue, so it reads as a positive label rather
   than an absent price. */
.gns-card__price--free {
  color: var(--gns-cyan-ink);
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gns-card__price del { color: var(--gns-muted); font-weight: 400; margin-right: 4px; }
.gns-card__nodes { font-size: 10.5px; color: var(--gns-cyan-ink); white-space: nowrap; }
/*
 * The G-Coin figure. Magenta is the design's choice for it and it is the only
 * magenta text on the card, which is what makes the second currency read as a
 * second currency rather than as a discount or a badge. --gns-magenta-ink
 * rather than the brand magenta: this is TEXT, so it takes the ink alias that
 * clears 4.5:1 in both palettes (see tokens.css).
 */
.gns-card__gcoin {
  font-size: 11.5px;
  color: var(--gns-magenta-ink);
  white-space: nowrap;
}

/* ====================================================== grid item sizing === */
/*
 * ⚠️ The card is a grid item, and three stylesheets still size it for the float
 * layout it replaced:
 *
 *   woocommerce-layout.css  li.product { float:left; width:22.05% }
 *   parent style.css        @media (max-width:1200px)  width: calc(33.33% - 10px)
 *                           @media (max-width:1000px)  width: calc(50%  - 20px)
 *                           @media (max-width: 767.98px) width: 49% !important
 *
 * In a grid the float is ignored but the width is not, and a percentage width
 * on a grid item resolves against its GRID AREA rather than the container - so
 * 33.33% of an already-divided track left every card at 71px between 1000 and
 * 1200px, and 49% of a single-column track left it half-width on every phone.
 *
 * This lived in shop.css and was therefore scoped to `.gns-shop`, which is why
 * the fix reached the shop and not best-seller, sales, favourites, printers or
 * the creator store - the same seven-caller trap this file was split out to
 * solve in the first place. It belongs with the card.
 *
 * The parent's selector is (0,4,2); `.woocommerce ul.products[class*="columns-"]
 * li.gns-card` matches it, and card.css loads after both, so equal specificity
 * resolves here. The phone rule answers !important with !important because
 * nothing else can.
 */
ul.products li.gns-card,
.products li.gns-card,
.woocommerce ul.products[class*="columns-"] li.gns-card,
.woocommerce .products[class*="columns-"] li.gns-card {
  float: none;
  clear: none;
  width: auto;
  margin: 0;
}

@media (max-width: 767.98px) {
  .woocommerce ul.products[class*="columns-"] li.gns-card,
  .woocommerce .products[class*="columns-"] li.gns-card,
  ul.products li.gns-card,
  .products li.gns-card {
    width: auto !important;
  }
}


/* ===================================== the card the canvas actually draws ===
   Two changes, and they depend on each other.

   1. THE BAND IS SQUARE, NOT 2:1. Measured against the reference card - 264
      wide, 355 tall, media ending at ~268, i.e. very close to 1:1 under an
      ~87px body. The 2:1 band above produced a 221px card against the
      reference's 355.

   2. THE IMAGE BLEEDS. The rule above floated it at 76%/84% with a 6px radius
      and a drop shadow, which is what made every product read as a photo
      pasted onto the tile rather than as the card's own picture.

   ⚠️ This REVERSES a documented decision, so here is the evidence for it. The
   note above chose `contain` because most of this catalogue is not cut-outs,
   and it is right about that: of 174 products with a featured image, 43 are
   JPEG - a format with no alpha channel at all - and five of six PNGs fetched
   from creatorapi.thegenesys.tech sampled opaque at all four corners. Nothing
   in CSS can background-remove them.

   What changed is the band. That note also records why `cover` was abandoned:
   it "cut the tops and bottoms off tall models". That was true of a 2:1 band -
   a 487x610 portrait loses about 60% of its height to it. In a 1:1 band the
   same image loses about 20%. Squaring the band for reason 1 is what makes
   reason 2 affordable, which is why these are one change and not two.

   ⚠️ The radial glow below is deliberately kept even though a covering image
   hides it: it is the ground an image that fails to load falls back to, and
   this catalogue's images come from a third-party host.
   ========================================================================= */

.gns-card__media {
  aspect-ratio: 1 / 1;
  /* The photo now reaches the card's edges, so the top corners have to be the
     card's own or it squares them off. */
  border-radius: var(--gns-r-card) var(--gns-r-card) 0 0;
}

.gns-card__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  /* Slightly above centre: product shots put the subject in the upper half far
     more often than the lower one, so a square crop of a tall source keeps
     more of the object and less of the surface it stands on. */
  object-position: 50% 45%;
  border-radius: 0;
  filter: none;
}

/*
 * On a phone the grid drops to two columns and then one, and a square band on
 * a full-width card is a 350px photograph for a single product - about two
 * products a screen. 4:3 keeps the bleed and gives the screen back.
 */
@media (max-width: 620px) {
  .gns-card__media { aspect-ratio: 4 / 3; }
}