/* ============================================================================
   PRODUCT CARD — catalogue cards
   ----------------------------------------------------------------------------
   Loaded by : products.html
   Depends on: base/tokens.css
   Scripted by: js/catalogue.js (a card with data-modal opens that modal)

   Two card families:
     .pc     text-only card (spec list, no photo)
     .pcard  photo card — the one actually used across the catalogue

   Modifier classes at the bottom of this file replaced inline style="…"
   attributes. Add new variants there rather than reaching for inline styles.
   ============================================================================ */

/* ── Text-only card ─────────────────────────────────────────────────────── */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;}
.pc{
  background:var(--white);border:1px solid var(--border);
  border-radius:8px;padding:1.5rem;transition:all 0.25s;
  display:flex;flex-direction:column;gap:0.65rem;
}
.pc:hover{box-shadow:var(--shadow-md);border-color:#c0cfe8;transform:translateY(-2px);}
.pc-icon{
  width:42px;height:42px;background:var(--light2);
  border-radius:7px;display:flex;align-items:center;
  justify-content:center;font-size:1.2rem;
}
.pc h4{font-size:0.98rem;font-weight:700;color:var(--text-dark);line-height:1.35;}
.pc-model{font-size:0.73rem;font-weight:700;color:var(--blue);letter-spacing:0.8px;text-transform:uppercase;}
.pc-desc{font-size:0.82rem;color:var(--text-mid);line-height:1.65;}
.pc-list{padding:0;}
.pc-list li{font-size:0.8rem;color:var(--text-mid);padding:3px 0 3px 14px;position:relative;line-height:1.55;}
.pc-list li::before{content:'–';position:absolute;left:0;color:var(--navy);}
.pc-badge{
  display:inline-block;background:var(--light2);border:1px solid var(--border);
  color:var(--navy);font-size:0.68rem;font-weight:700;
  letter-spacing:0.8px;text-transform:uppercase;padding:2px 8px;
  border-radius:3px;align-self:flex-start;
}
.pc.wide{grid-column:span 2;}

/* ── Photo card ─────────────────────────────────────────────────────────── */
.prod-grid-img{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;}
.pcard{
  background:var(--white);border:1px solid var(--border);
  border-radius:10px;overflow:hidden;transition:all 0.3s;
  cursor:pointer;display:flex;flex-direction:column;
}
.pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:#b0c4e8;}

.pcard-img{
  width:100%;height:200px;background:var(--light);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-bottom:1px solid var(--border);
}
.pcard-img img{max-width:85%;max-height:85%;object-fit:contain;}
.pcard-img .pcard-icon{font-size:3rem;color:var(--navy);opacity:0.3;}

.pcard-body{padding:1.4rem;flex:1;display:flex;flex-direction:column;gap:0.4rem;}
.pcard-badge{
  display:inline-block;background:var(--light2);border:1px solid var(--border);
  color:var(--navy);font-size:0.65rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;padding:3px 8px;
  border-radius:3px;align-self:flex-start;
}
.pcard-body h4{font-size:0.95rem;font-weight:700;color:var(--text-dark);line-height:1.35;margin-top:0.3rem;}
.pcard-model{font-size:0.72rem;font-weight:700;color:var(--blue);letter-spacing:0.8px;text-transform:uppercase;}
.pcard-spec{font-size:0.78rem;color:var(--text-mid);line-height:1.6;margin-top:auto;}
.pcard-cta{
  display:inline-flex;align-items:center;gap:4px;
  font-size:0.78rem;font-weight:600;color:var(--navy);margin-top:0.8rem;
}
.pcard-cta::after{content:'→';}
.pcard:hover .pcard-cta{text-decoration:underline;}

/* ── Modifiers ──────────────────────────────────────────────────────────── */

/* "Full catalogue" cards — dashed border marks them as a gateway, not a SKU. */
.pcard-featured{border:2px dashed var(--navy);background:var(--light2);}

/* Plain white image well, for brand logos that need no grey backdrop. */
.pcard-img-plain{background:var(--white);}

/* Brand logo sitting inside a card's image well.
   Qualified with img so it outranks `.pcard-img img` above, which is also
   (0,1,1) and would otherwise win on source order. */
img.pcard-brand-logo{max-width:60%;max-height:60%;opacity:0.7;}

/* Inverted badge, for featured cards where the tinted badge lacks contrast. */
.badge-solid{background:var(--navy);color:var(--white);border-color:var(--navy);}

/* Two photos side by side in one image well (colour variants of one product).
   Sizing lives on the descendant selector so each <img> needs no class. */
.pcard-img-dual{display:flex;gap:4px;padding:8px;}
.pcard-img-dual img{width:48%;max-height:180px;object-fit:contain;}

@media(max-width:640px){
  .pc.wide{grid-column:span 1;}
}