/* ============================================================
   Product archive — the browse page for one product category.

   Drives taxonomy-gps_product_cat.php at every depth: a top-level
   group, a sub-group, or a sub-sub-group all render through this one
   stylesheet. The reference site uses three hand-built WordPress Pages
   for those three levels; we use one template and one term tree, so
   adding a level in wp-admin needs no new CSS and no new file.

   Card styling is deliberately NOT redefined here. The grid reuses
   .cats__grid / .cat-card from categories.css so the tiles on a
   category page and the tiles on the home page are the same object.
   Change the card once, it changes everywhere.
   ============================================================ */

/* ---------- Placeholder palette ----------
   template-parts/product-placeholder.php draws its glyphs with these, so the
   stand-in artwork is retuned here and nowhere else. Low contrast on purpose:
   it sits where a photograph will sit and must not compete with the label
   under it. */
:root{
  --ph-ink:#b4b8bd;
  --ph-ink-soft:#cfd2d6;
  --ph-banner:#1b1d20;
}

/* The sprite itself is markup, not a picture: keep it out of the flow. */
.gps-ph-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* A real photograph in the media band.

   .cat-card__art is written for an inline SVG: absolutely positioned, padded,
   and with no object-fit, which is right for a drawing and wrong for a photo
   -- it left uploads inset behind a white margin and stretched to the band's
   7:4 regardless of their own ratio. A photograph fills the band and is
   cropped to fit, which is what the reference card does. */
.cat-card__art--photo{
  padding:0;
  object-fit:cover;
  object-position:center;
}

/* A tile with no photograph yet. The glyph is centred and padded rather than
   cropped, so it never touches the card's hairline.

   No background of its own: .cat-card__media is already white, and the card
   behind it is grey, and that two-tone split is what makes the tile read as
   picture-over-label. Painting a ground here flattened the two together. */
.cat-card__art--placeholder{
  /* Percentage padding, not a fixed one. The glyph scales to fit whatever
     box is left, so a fixed inset lets it balloon to fill a single-column
     tile on a phone -- where it stopped reading as a small mark and started
     reading as a broken image. A percentage keeps it the same fraction of
     the tile at every width. */
  padding:9% 20%;
}

/* ---------- Banner ----------
   The reference runs a 1920x540 photograph across the full width above
   the title. We hold the same slot at the same aspect. What fills it is
   the term's featured image when the client sets one in wp-admin, and
   the generated motif below when they have not -- so the page is never
   broken by a missing upload, and never needs code edited to gain one. */
.gps-pagehead{
  position:relative;
  width:100%;
  aspect-ratio:1920/540;
  /* Guard rails: 3.56:1 is very shallow on a phone and very deep on an
     ultrawide. Clamp both ends rather than let the aspect win outright. */
  min-height:9rem;
  max-height:28rem;
  overflow:hidden;
  background:var(--gps-black);
}
.gps-pagehead__art,
.gps-pagehead__photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  object-fit:cover;
}

/* ---------- Title block ----------
   Centred heading over a left-aligned lede, which is what the reference
   does. The asymmetry looks like a mistake in isolation and reads
   correctly on the page: the title is a label, the lede is prose. */
.gps-archive__head{
  padding-block:var(--sp-8) 0;
  text-align:center;
}
.gps-archive__eyebrow{
  margin:0 0 var(--sp-3);
  font-family:var(--font-head);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-caps);
  text-transform:uppercase;
  color:var(--gps-red);
}
.gps-archive__title{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(1.75rem,3.4vw,2.25rem);   /* tops out at the reference's 36px */
  /* 700, not 900. The reference's child theme serves Lato Regular, Bold and
     the italics and no Black face at all, so its page titles are Bold — a
     Black heading here was heavier than anything on the page being matched.
     Change both this and .gps-product__title together if it goes back. */
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-tight);
  line-height:var(--lh-head);
  color:var(--gps-black);
  text-wrap:balance;
}

/* The class archive.php has emitted since it was written, with nothing
   behind it. It has a definition now. */
.gps-archive__intro{
  max-width:none;                /* the reference runs its lede full width */
  margin:var(--sp-5) 0 0;
  font-size:var(--fs-lg);
  line-height:var(--lh-body);
  color:var(--grey-600);
}

/* ---------- Grid ---------- */
.gps-archive__grid{
  margin-block:var(--sp-8) var(--sp-10);
}

/* ---------- Empty state ----------
   A term with no children and no products is a content state, not an
   error. It happens the moment the client adds a category in wp-admin
   and has not filled it yet, so it gets a real message. */
.gps-archive__empty{
  margin:var(--sp-8) 0 var(--sp-10);
  padding:var(--sp-7);
  background:var(--grey-100);
  border:1px solid var(--grey-300);
  border-radius:var(--radius-tile);
  text-align:center;
  color:var(--grey-600);
}

@media (max-width:60rem){
  .gps-archive__head{padding-block:var(--sp-7) 0}
  .gps-archive__grid{margin-block:var(--sp-7) var(--sp-8)}
}

/* ---------- Banner with no picture yet ----------
   Drawn in CSS rather than as an SVG so an unfilled banner costs no markup
   and no request. Two shallow diagonals over a near-black field, and the
   brand rule along the bottom edge that every GPS page header carries. */
.gps-pagehead__art--placeholder{
  background:
    linear-gradient(104deg, transparent 38%, rgba(255,255,255,.028) 38%, rgba(255,255,255,.028) 47%, transparent 47%),
    linear-gradient(104deg, transparent 62%, rgba(255,255,255,.02) 62%, rgba(255,255,255,.02) 74%, transparent 74%),
    var(--ph-banner);
  border-bottom:8px solid var(--gps-red);
}