/* ==========================================================================
   Product cards — the home page's catalogue cards (.prod), the catalogue
   page's grid cards (.gal-card), and the pieces both share: the model code
   and the photo-count badge.
   ========================================================================== */

/* A real card surface — background + padding + shadow — instead of the
   photo and meta text floating directly on the section's own background.
   Square corners (no border-radius) to match .ph-prod's own squared-off
   treatment right below, rather than reintroducing a curve at the card
   level that was just removed at the photo level. position:relative so
   the ::before category chip below can anchor to this box. */
.prod {
  position: relative;
  background: var(--color-bg); padding: var(--space-4);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.prod:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--color-accent); }
/* Category tag, read straight off the card's own data-cat (already there
   for the quick-view dialog) rather than duplicating it into new markup —
   sits over the photo's top corner like a spec label on a catalog sheet. */
.prod::before {
  content: attr(data-cat);
  position: absolute; z-index: 1;
  top: calc(var(--space-4) * 2); inset-inline-start: calc(var(--space-4) * 2);
  background: color-mix(in srgb, var(--color-accent-2-900) 85%, transparent);
  color: var(--color-neutral-100);
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  letter-spacing: var(--tracking-kicker); text-transform: uppercase;
  padding: 5px 10px;
}
html[dir="rtl"] .prod::before { font-weight: 600; }
.prod-media { position: relative; }
/* Square corners here specifically, overriding .ph's shared border-radius —
   just for the catalogue cards, not every other .ph photo on the page. The
   slow, deliberate 0.5s transform (vs. the rest of this card's quicker
   0.25s transitions) is what makes the hover zoom read as a considered
   reveal instead of a twitch.

   aspect-ratio:1/1 + background-size:contain (not .ph-photo's own cover):
   every real catalogue photo (assets/products/*.png) is itself a square
   render, so a square box is what lets contain fill it completely edge to
   edge — matching the box to the image's own shape, rather than cropping
   the image to fit a taller/wider box, is what actually satisfies "no
   cropping, no distortion". The background-color fill is a fallback for
   the split second before an image loads (a square box + a square photo
   leaves no letterbox gap to matte once it has). contain wins over
   .ph-photo's cover for the shared background-size property simply by
   being the later rule in the cascade (same 1-class specificity). */
.ph-prod {
  aspect-ratio: 1 / 1; border-radius: 0; transition: transform 0.5s ease;
  background-size: contain; background-repeat: no-repeat; background-color: var(--color-surface);
}
.prod:hover .ph-prod { transform: scale(1.06); }
/* .ph-rect used to switch row 1's wider feature cards to a 4:3 crop — now
   redundant (row 1's photos are the same square renders as rows 2–3), kept
   as a no-op override rather than removed so the .ph-rect class already on
   those cards in index.html stays harmless if a future non-square photo
   set needs it again. */
.ph-prod.ph-rect { aspect-ratio: 1 / 1; }

/* Second product photo, hover-revealed — lives inside .ph-prod (not
   .prod-media) so it inherits that element's own overflow:hidden/
   border-radius clip for free instead of needing its own copy. Only cards
   with a genuine lifestyle photo to show get one of these in the markup;
   cards without one just have nothing to fade in, rather than faking a
   second angle that doesn't exist. */
.prod-img-alt {
  position: absolute; inset: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-color: var(--color-surface);
  opacity: 0; transition: opacity 0.18s ease;
}
.prod:hover .prod-img-alt, .prod:focus-within .prod-img-alt { opacity: 1; }

.prod-media .quick {
  position: absolute; left: 50%; bottom: var(--space-4); z-index: 1;
  transform: translate(-50%, var(--space-6)); opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: var(--shadow-md);
}
.prod:hover .quick, .prod:focus-within .quick { opacity: 1; transform: translate(-50%, 0); }
/* Touch/coarse pointers have no :hover — reveal on :active instead (finger
   actually down on the card) rather than the permanently-visible treatment
   this used to have on every touch device, by request: lighter at rest on
   small screens. :focus-within still covers keyboard users, who reach this
   the same way on any pointer type. Scoped to mobile width too, not just
   hover:none, so a touch laptop/large tablet above 720px keeps the
   always-visible behavior (still coarse pointer, but not the cramped
   small-screen case this was asked for). */
@media (hover: none) and (max-width: 720px) {
  .prod:active .quick, .prod:focus-within .quick { opacity: 1; transform: translate(-50%, 0); }
  /* Smaller pill — the 44px-icon-button touch-target reasoning below
     (.prod-img-nav) doesn't apply here, this is a text pill sized by its
     own padding, not a fixed circle. */
  .prod-media .quick { font-size: 12px; padding: 7px 14px; }
}
/* Left/right browsing straight on the grid card (added by
   js/components/product-card-photos.js) — same reveal-on-hover/
   reveal-on-touch treatment as .quick above, so a card with 4+ photos
   doesn't sit under a permanently cluttered overlay of chip + count badge +
   2 arrows at rest. Full 44px (matching .prod-slider-nav) rather than a
   scaled-down circle at this size — mobile gets its own smaller size below
   instead. Same navy/gold color pair reused rather than a third arrow
   style. */
.prod-img-nav {
  position: absolute; top: 50%; z-index: 1; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--color-accent-2-900); color: var(--color-neutral-100);
  border: 1px solid var(--color-accent-2-900); box-shadow: var(--shadow-sm);
  opacity: 0;
  /* Opacity gets its own slower, gentler ease-out — a soft fade, not the
     snappier 0.2s the color/transform hover-feedback below still uses. */
  transition: opacity 0.35s ease-out, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.prod-img-nav:hover {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text);
  transform: translateY(-50%) scale(1.08);
}
.prod-img-prev { inset-inline-start: var(--space-2); }
.prod-img-next { inset-inline-end: var(--space-2); }
[dir="rtl"] .prod-img-nav svg { transform: scaleX(-1); }
.prod:hover .prod-img-nav, .prod:focus-within .prod-img-nav { opacity: 1; }
/* Same :active-reveal + mobile-only scoping as .quick above — finger down
   on the card shows the arrows, rather than them sitting on permanently.
   Shrunk from the 44px touch-target size (still right for tablets/desktop
   touch above 720px) down to something that reads as a light hint rather
   than a heavy control on a small screen. */
@media (hover: none) and (max-width: 720px) {
  .prod:active .prod-img-nav, .prod:focus-within .prod-img-nav { opacity: 1; }
  .prod-img-nav { width: 32px; height: 32px; }
}
.prod-meta { margin-top: var(--space-3); }
.prod-meta h3 {
  position: relative; display: inline-block;
  font-size: 17px; margin: 0 0 var(--space-1); transition: color 0.2s ease;
}
.prod:hover .prod-meta h3 { color: var(--color-accent-700); }
/* Underline grows in on hover rather than just sitting there — echoes the
   corner-chip/photo-zoom pair above as one more "this card is alive" cue. */
.prod-meta h3::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
[dir="rtl"] .prod-meta h3::after { left: auto; right: 0; transform-origin: right; }
.prod:hover .prod-meta h3::after { transform: scaleX(1); }
.model-code {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  /* 65%, not 55% (3.8:1, under AA) — this is the reference number shoppers
     are told to quote when ordering, so it has to be readable. */
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

@media (max-width: 720px) {
  /* Catalog refinement pass (see css/pages/home.css) — the card itself. */
  .prod { padding: var(--space-3); }
  /* Corner chip pulled in from the desktop rule's 2×space-4 inset — on a
     ~225px-wide card that read as floating too far from the edge. */
  .prod::before { top: var(--space-3); inset-inline-start: var(--space-3); padding: 4px 8px; }
  .prod-meta { margin-top: var(--space-2); }
  .prod-meta h3 { font-size: 15px; }
  .model-code { font-size: 12px; }
}

/* --- Catalogue page card (.gal-card) --------------------------------------
   Real catalogue photography is square (1:1) — .gal-card-media matches
   that natively instead of forcing the 3:4 .ph-prod crop used elsewhere. */

.gal-card {
  cursor: pointer; border: none; background: none; padding: 0; text-align: start;
  transition: transform 0.25s ease;
}
.gal-card:hover, .gal-card:focus-visible { transform: translateY(-4px); }
.gal-card-media {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm); transition: box-shadow 0.25s ease;
}
.gal-card:hover .gal-card-media, .gal-card:focus-visible .gal-card-media { box-shadow: var(--shadow-md); }
.gal-card-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.5s ease, opacity 0.25s ease;
}
.gal-card:hover .gal-card-photo:not(.gal-card-photo-alt), .gal-card:focus-visible .gal-card-photo:not(.gal-card-photo-alt) { transform: scale(1.06); }
.gal-card-photo-alt { opacity: 0; }
.gal-card:hover .gal-card-photo-alt, .gal-card:focus-visible .gal-card-photo-alt { opacity: 1; }
.gal-card-cat {
  position: absolute; z-index: 1; top: var(--space-3); inset-inline-start: var(--space-3);
  background: color-mix(in srgb, var(--color-accent-2-900) 85%, transparent);
  color: var(--color-neutral-100);
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  letter-spacing: var(--tracking-kicker); text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
html[dir="rtl"] .gal-card-cat { font-weight: 600; }
.gal-card-count {
  position: absolute; z-index: 1; bottom: var(--space-3); inset-inline-end: var(--space-3);
  display: inline-flex; align-items: center; gap: 4px;
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 4px 8px; border-radius: 999px;
  unicode-bidi: isolate;
}
.gal-card-meta { margin-top: var(--space-3); }
.gal-card-name {
  font-size: 15px; margin: 0 0 2px;
  transition: color 0.2s ease;
}
.gal-card:hover .gal-card-name, .gal-card:focus-visible .gal-card-name { color: var(--color-accent-700); }
.gal-card-model { margin: 0; font-size: 12px; }