/* ============================================================
   FABBRUCCIO: SECTION HEAD + PLP GRID + PRODUCT CARD (section)

   ONE primitive serving two surfaces: the home page's collection preview
   and the /shop/ collection grid. design-language/components.md section 6
   is explicit that "the home preview uses the SAME .grid and .card, three
   items ... there is no separate featured-product component", so this
   file is loaded on BOTH routes by the section map in functions.php.

   Ported from beta2 site.css:308-339 (section head, grid, card) plus
   :387-389 / :397-401 (the two grid breakpoints).

   beta2 -> here
     .sec         -> .fab-sec
     .sec-head    -> .fab-sec-head
     .grid        -> .fab-grid
     .card        -> .fab-card
     .card-stage  -> .fab-card__stage
     .base/.swap  -> .fab-card__base / .fab-card__swap
     .card-meta   -> .fab-card__meta
     .cn / .cp    -> .fab-card__name / .fab-card__price
     .card-note   -> .fab-card__note
     .is-out      -> .is-out   (unchanged)
   ============================================================ */

.fab-sec { padding-block: clamp(56px, 8vw, 110px); }

/* THE SECTION HEAD. A flex row aligned on the BASELINE OF THE BOTTOM
   edge, so an eyebrow-plus-heading-plus-intro on the left and a single
   link on the right sit on the same optical line however tall the left
   column grows. Below 700px it switches to flex-start, because once the
   row wraps, bottom alignment puts the link above its own section. */
.fab-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 40px;
  margin-bottom: clamp(26px, 4vw, 46px);
}
.fab-sec-head .fab-eyebrow { margin-bottom: 10px; }
.fab-sec-head h2 {
  margin: 0;
  font-size: var(--fab-size-heading-s);
  font-weight: var(--fab-weight-medium);
  line-height: var(--fab-leading-heading);
  letter-spacing: var(--fab-track-heading-m);
}
.fab-sec-head p {
  margin: 10px 0 0;
  max-width: var(--fab-measure-intro);
  font-size: var(--fab-size-lede);
  color: var(--fab-ink-secondary);
}
@media (max-width: 700px) {
  .fab-sec-head { align-items: flex-start; }
}

/* ============================================================
   THE GRID. 3 columns, with the ROW gap slightly larger than the column
   gap on purpose, so the rows read as rows. 2 columns at 1000px, 1 at
   520px with a flat 26px gap.
   ============================================================ */
.fab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 40px) clamp(16px, 2.4vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fab-grid > li { margin: 0; }

@media (max-width: 1000px) {
  .fab-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .fab-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ============================================================
   THE PRODUCT CARD. Austere and frameless: the product is a specimen on
   a stage, not a photograph in a frame. No border, no shadow, no radius,
   no hover lift, no quick-add overlay.

   CROP DISCIPLINE, AND WHY 4:3 IS NOT DECORATIVE
   The source studio angles on this install are 2000x1500 and
   1400x1050, which is exactly 4:3, so a 4/3 stage with object-fit:
   CONTAIN crops nothing and the stage colour is never actually visible.
   Contain, never cover. THE BOOT IS NEVER CROPPED ON A CARD. If a source
   ratio ever changes, the stage ratio changes with it: the photograph
   decides the container, not the layout.
   ============================================================ */
.fab-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.fab-card__stage {
  position: relative;
  display: block;
  background: var(--fab-stage-grey);
  aspect-ratio: var(--fab-stage-aspect);
  overflow: hidden;
}
.fab-card__base,
.fab-card__swap {
  position: absolute;
  inset: 0;
  display: block;
}
.fab-card__stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fab-card__swap {
  opacity: 0;
  transition: opacity var(--fab-swap-duration-card) var(--fab-ease);
}

/* HOVER-SWAP, fine pointers only. On a coarse pointer the second image is
   never even downloaded: fab-site.js strips its src at runtime, because a
   card is a LINK and a tap must follow it rather than be swallowed by a
   first-tap-reveals interaction. */
@media (hover: hover) and (pointer: fine) {
  .fab-card:hover .fab-card__swap,
  .fab-card:focus-visible .fab-card__swap { opacity: 1; }
  .fab-card:hover .fab-card__base,
  .fab-card:focus-visible .fab-card__base {
    opacity: 0;
    transition: opacity var(--fab-swap-duration-card) var(--fab-ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fab-card__swap { transition: none; }
}

.fab-card:focus-visible { outline: 1px solid var(--fab-ink); outline-offset: 4px; }

/* THE META. `display: block` IS LOAD-BEARING, not tidiness. The card is an
   <a> and every inner wrapper is a <span> (an <a> may not contain a <div>
   in the HTML content model that the block editor validates against), so
   without this the meta computes to `display: inline` and ITS PADDING-TOP
   DOES NOT LAY OUT: the card measured 328.4px against beta2's 340.4, and
   the 12px missing was exactly this padding. Same reason .fab-card__stage
   declares it.

   Name and price are THE SAME SIZE and THE SAME WEIGHT. The
   only difference between them is colour: name in ink, price in secondary
   ink. That is the minimal-hierarchy rule made concrete, and it is why
   there is no font-size or font-weight difference to "fix" here. Never
   make the price larger than the name. */
.fab-card__meta { display: block; padding-top: 12px; }
.fab-card__name,
.fab-card__price {
  display: block;
  font-size: var(--fab-size-detail);
  font-weight: var(--fab-weight-regular);
  line-height: 1.5;
}
.fab-card__name { color: var(--fab-ink); }
.fab-card__price { color: var(--fab-ink-secondary); }

/* WooCommerce wraps a price in <span class="woocommerce-Price-amount">
   with a nested <bdi> and a currency <span>. Left as-is structurally
   (it carries the microdata and the RTL isolation), just neutralised so
   it inherits the card's own type instead of the plugin's. */
.fab-card__price .woocommerce-Price-amount,
.fab-card__price bdi,
.fab-card__price .woocommerce-Price-currencySymbol {
  font: inherit;
  color: inherit;
}

/* One plain line, never a badge, never a pill, never a colour chip.
   Amber's "Open-toe wedge mule" is the reason this exists: it is the one
   style in the collection that is not a boot, and the grid says so
   before the shopper opens it. */
.fab-card__note {
  display: block;
  margin-top: var(--fab-space-xxs);
  font-size: var(--fab-size-caption);
  color: var(--fab-ink-secondary);
}

/* The filter-hidden state. fab-site.js sets aria-hidden alongside it, so
   the count a screen reader hears matches the one on screen. */
.fab-card.is-out,
.fab-grid > li.is-out { display: none; }