/* ============================================================
   _card-home.css — homepage "Most Popular Turbochargers" card
   ------------------------------------------------------------
   PREVIEW BUILD. Files starting with "_" are skipped by deploy.py.

   WHY A SEPARATE FILE
   The homepage card (pg-card) and the product-list card (pcard-v5)
   are different components that only ever appear on different
   pages, so each keeps its own stylesheet. This file reuses the
   same design tokens as card-v5.css so the two read as one system.

   WHAT CHANGES (owner request 2026-11-03)
     - the card no longer shows "Send OE Number" — WhatsApp is the
       single call to action, and it is the only Pulsar-red element
     - MOQ / lead-time line removed
     - layout tightened: the title block is the hand-written
       curated label (part number + application), and the OE
       cross-reference numbers are added below it — the homepage
       had no OE numbers at all before
     - the grid follows the owner's card grid spec (4 / 2 / 1)

   Colours come from the site's own tokens (styles.css):
     --accent #e60012 | --ink #000 | --ink-soft #828282
     --line #e5e5e5 | --graphite #2f3338
   ============================================================ */

/* ============================================================
   1. GRID — owner card grid spec: desktop 4 | tablet 2 | phone 1
   ------------------------------------------------------------
   styles.css carries `.ax-featured .pg-grid { repeat(5, …) }` at
   specificity (0,2,0). Every responsive rule for the grid in
   styles.css targets the bare `.pg-grid` at (0,1,0), so the 5-up
   rule out-ranks all of them — the section stayed 5 columns on a
   390px phone (70px per card). The rules below repeat the same
   (0,2,0) specificity in a later file, so they win, and each
   breakpoint is stated explicitly instead of relying on the
   styles.css cascade.
   ============================================================ */
.ax-featured .pg-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 20px;
}
@media (max-width: 1180px) {
  .ax-featured .pg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }
}
@media (max-width: 620px) {
  .ax-featured .pg-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ============================================================
   2. THE CARD
   ============================================================ */
.pgv2 {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  padding: 12px 12px 14px;
  position: relative;
  transition: box-shadow .2s, transform .2s;
}
.pgv2:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .10);
  transform: translateY(-3px);
  z-index: 2;
}
/* Red hover frame — same treatment as the product-list card. */
.pgv2::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 8px;
  opacity: 0; transition: opacity .2s ease;
}
.pgv2:hover::after { opacity: 1; }

/* ---------- image — the site's ORIGINAL treatment ----------
   1:1 square, #f4f5f6 plate, 12px padding, 8px radius,
   object-fit contain — identical to .pcard-img / .pcard-v5-img,
   so the same product photo reads the same on both pages. */
.pgv2-img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4f5f6;
  position: relative;
  border-radius: 8px;
  padding: 12px;
}
.pgv2-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .pgv2-img:hover img { transform: scale(1.05); }
}

/* ---------- title — the ORIGINAL supplier title, 3 lines ----------
   The title is the original catalogue title ("858864-0004 DSGT2260S
   Turbocharger, Replacement Turbo Repair Spare Part for Nissan …
   "). It is far longer than the curated short label, so it needs
   a fixed three-line box:

     - line-clamp 3  -> never grows past three lines
     - min-height    -> always reserves three lines, so the 20 cards
                        line up with each other instead of the grid
                        row height being set by the longest title

   The curated fitment line ("Nissan / Renault M9T 2.3D") sits under
   it as a separate one-liner.

   There is no badge row above the title (owner instruction
   2026-11-03), so the top margin here replaces what the badge
   row's own margin used to provide. */
.pgv2-pn {
  display: -webkit-box;
  text-decoration: none;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.38;
  color: var(--ink);
  /* three lines of 0.875rem at 1.38 = 65.2px. Writing it as three
     times the line-height (rather than a fixed pixel value) keeps it
     exact when the browser font size changes — the site sizes
     everything in rem. The homepage card and the product-list card
     use the same rhythm, so a product reads the same on both pages. */
  min-height: calc(3 * 1.38 * 0.875rem);
}
.pgv2-sub {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Roboto", sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 3px;
}
.pgv2-pn:hover { color: var(--accent); }

/* ---------- the three text rows + their "+" buttons ----------
   Owner request (2026-11-04): the title, the fitment and the OE
   numbers are all cut off on the card, so each of them now ends in
   a "+" button that unfolds the row and lets the buyer read the
   whole text. The button itself lives in card-expand.css so both
   card systems share it.

   The rows are flex lines: the text takes the space it needs, the
   button sits at the right, aligned with the LAST visible line —
   the same place the text is cut off. */
.pgv2-row {
  margin: 0 0 8px;
}
.pgv2-row--title { margin: 10px 0 8px; }
.pgv2-row--fit { margin: 0 0 8px; }
.pgv2-row--oe { margin: 0 0 8px; }

/* The fitment line opens a second block underneath with the
   complete vehicle list from the catalogue — the curated
   one-liner stays on top as the headline. */
.pgv2-fitfull {
  display: none;
  font-family: "Roboto", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 4px;
  word-break: break-word;
}
.cx-row.is-open .pgv2-fitfull { display: block; }

/* ---------- OE cross-reference numbers ----------
   The homepage never showed the OE numbers. For a buyer whose
   only handle on a turbo is the number stamped on the old unit,
   this is the single most useful line on the card.

   Two lines, same rule as the product-list card; the full list is
   in the tooltip. The height is reserved as well, so a one-line OE
   list does not lift the button below it by a whole line and the
   20 cards stay the same height. */
.pgv2-oe {
  font-family: "Roboto", sans-serif;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-soft);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* two lines of 0.75rem at 1.5 = 40.5px */
  min-height: calc(2 * 1.5 * 0.75rem);
}

/* ---------- CTA — the one Pulsar-red element ---------- */
.pgv2-cta { margin-top: auto; }
.pgv2-wa {
  display: block;
  width: 100%;
  text-align: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1.5px solid var(--accent);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.pgv2-wa:hover { background: var(--accent-dark); border-color: var(--accent-dark); }