/* SHARED COMPONENT RULES — single source for the small set of structural patterns that have
 * already drifted independently across platforms more than once (see commit history /
 * shared-design-tokens memory for the colour-only precedent this file extends).
 *
 * Scope is DELIBERATELY NARROW: only patterns proven to repeat go here. Brand's hand-tuned
 * marketing CSS (hero/orbs/marquee/tilt) and portal's sparse self-hosted Tailwind build stay
 * platform-local — this file is not a generic shared-component library, just the handful of
 * rules below. <link>ed by brand + portal BEFORE their own stylesheet, so each platform's CSS
 * can still override per-element if a screen genuinely needs to (normal cascade order).
 *
 * Class names are PLATFORM-NEUTRAL (.tile-img / .tile-body), not aliases of either platform's
 * existing names (.pcard-img, .pc-img, etc.) — each platform's product-card markup adds BOTH
 * its own class (for any platform-specific layout rules that stay local) and this shared one
 * (for the rules defined here). See web/brand/index.html .pcard-img / .pcard-body and
 * web/portal/index.html .pc-img / .pc-body for the call sites.
 */

/* Product/category tile image area: square, white, real photo letterboxed (object-fit:contain,
 * never cropped) so 1:1 white-background product shots blend seamlessly into the tile. A
 * hairline border-bottom ALWAYS applies (not just on the placeholder state) so a real photo
 * never merges into the white/tinted info block below it — this is the exact bug that
 * independently recurred on the brand catalogue card, the brand home Trending card, and the
 * portal product card before this file existed. .tile-img.is-ph (no real image yet) swaps to a
 * soft tinted gradient so an empty/placeholder tile reads as deliberately empty, not broken. */
.tile-img {
  aspect-ratio: 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--tile-border, #E5E7EB);
}
.tile-img.is-ph {
  background: linear-gradient(150deg, var(--tile-ph-from, #F4F4F5), var(--tile-ph-to, #ECECEC));
}
.tile-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Info block below a .tile-img: a tinted (never pure-white) background so the image/text
 * boundary stays visible even where the border-bottom alone reads as too subtle (e.g. dense
 * grids, small thumbnails). Platforms set --tile-body-bg to their own neutral tint; falls back
 * to a light grey if unset. */
.tile-body {
  background: var(--tile-body-bg, #FAFAFA);
}