/* photos.css — replace placeholder gradients with real production
   photography. Loaded AFTER tokens.css so these rules win. Images
   are served by nginx alongside this bundle from /images/. */

/* All .gem-photo placeholders use real production .png files.
   The CSS gradient backgrounds defined in tokens.css are
   over-ridden here. We keep `.gem-photo` shape rules
   (aspect-ratio, etc.) and only swap the background. */
.gem-photo {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Hide placeholder SKU label when we have real photography. */
.gem-photo .gem-mark { display: none; }

.gem-photo.ruby        { background-image: url("/images/gemstones/ruby.png") !important; background-color: #4c0519; background: url("/images/gemstones/ruby.png") center/cover no-repeat #4c0519 !important; }
.gem-photo.sapphire    { background: url("/images/gemstones/sapphire.png") center/cover no-repeat #0c1338 !important; }
.gem-photo.emerald     { background: url("/images/gemstones/emerald.png") center/cover no-repeat #052e16 !important; }
.gem-photo.spinel      { background: url("/images/gemstones/spinel.png") center/cover no-repeat #4c0519 !important; }
.gem-photo.paraiba     { background: url("/images/gemstones/paraiba-v2.png") center/cover no-repeat #042f2e !important; }
.gem-photo.tanzanite   { background: url("/images/gemstones/tanzanite.png") center/cover no-repeat #2e1065 !important; }
.gem-photo.alexandrite { background: url("/images/gemstones/alexandrite.png") center/cover no-repeat #052e16 !important; }
.gem-photo.tourmaline  { background: url("/images/gemstones/tourmaline.png") center/cover no-repeat #431407 !important; }
.gem-photo.aquamarine  { background: url("/images/gemstones/aquamarine.png") center/cover no-repeat #082f49 !important; }
.gem-photo.garnet      { background: url("/images/gemstones/garnet.png") center/cover no-repeat #450a0a !important; }
.gem-photo.morganite   { background: url("/images/gemstones/morganite.png") center/cover no-repeat #500724 !important; }
.gem-photo.peridot     { background: url("/images/gemstones/peridot.png") center/cover no-repeat #1a2e05 !important; }
.gem-photo.opal        { background: url("/images/gemstones/opal.png") center/cover no-repeat #cbd5e1 !important; }
.gem-photo.amethyst    { background: url("/images/gemstones/amethyst.png") center/cover no-repeat #2e1065 !important; }
.gem-photo.citrine     { background: url("/images/gemstones/citrine.png") center/cover no-repeat #422006 !important; }
.gem-photo.moonstone   { background: url("/images/gemstones/moonstone.png") center/cover no-repeat #64748b !important; }
.gem-photo.topaz       { background: url("/images/gemstones/topaz.png") center/cover no-repeat #431407 !important; }
.gem-photo.zircon      { background: url("/images/gemstones/zircon.png") center/cover no-repeat #78350f !important; }
.gem-photo.heliodor    { background: url("/images/gemstones/heliodor.png") center/cover no-repeat #451a03 !important; }
.gem-photo.apatite     { background: url("/images/gemstones/apatite.png") center/cover no-repeat #083344 !important; }
.gem-photo.beryl       { background: url("/images/gemstones/beryl.png") center/cover no-repeat #1a2e05 !important; }
.gem-photo.sphene      { background: url("/images/gemstones/sphene.png") center/cover no-repeat #1a2e05 !important; }
.gem-photo.chrysoberyl { background: url("/images/gemstones/chrysoberyl.png") center/cover no-repeat #422006 !important; }
.gem-photo.clinohumite { background: url("/images/gemstones/clinohumite.png") center/cover no-repeat #431407 !important; }
.gem-photo.diamond     { background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%) !important; color: #1f2937; }
.gem-photo.lab-grown   { background: linear-gradient(135deg, #e2e8f0 0%, #475569 100%) !important; color: #fff; }

/* Hero banner — real photo with navy gradient overlay so text on left
   stays readable, and the right side shows the gem photography. */
.hero-bg {
  background-color: #0f1f33;
  background-image:
    linear-gradient(90deg, rgba(15,31,51,0.85) 0%, rgba(15,31,51,0.7) 35%, rgba(15,31,51,0.25) 55%, rgba(15,31,51,0) 65%),
    radial-gradient(circle at 75% 50%, rgba(196,169,90,0.18) 0%, transparent 60%),
    url("/images/hero/head2.png");
  background-size: auto, auto, cover;
  background-position: 0 0, 0 0, center center;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .hero-bg {
    background-image:
      linear-gradient(180deg, rgba(15,31,51,0.7) 0%, rgba(15,31,51,0.55) 100%),
      url("/images/hero/head2.png");
    background-size: auto, cover;
    background-position: 0 0, center center;
  }
}

/* Office cards on About — render Bangkok/Dubai photos as a strip
   above the InfoCard text. We add a `data-city` attribute lookup
   via attribute selectors — but InfoCard itself doesn't expose
   data attrs. We use a different approach: any InfoCard with
   eyebrow="Thailand" / "United Arab Emirates" / "Switzerland"
   gets a photo banner. (Done via JS in patches.jsx — actually
   simpler in pure CSS by hooking onto the eyebrow text — not
   reliable. Skipping; the textual address lockup is fine.) */

/* Diamond/Lab-Grown nice big tile photos on home */
.gem-photo.diamond, .gem-photo.lab-grown {
  /* Keep distinctive look — these aren't in /images/gemstones/ */
}

/* Lab logos: real images now (see screens-home.jsx) */

/* Press logos marquee — infinite horizontal scroll. Track contains
   2x copies of the logo list; -50% translate completes a seamless
   loop. Mask fades both edges. */
.marquee-mask {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  animation: marquee-scroll 38s linear infinite;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.press-logo:hover { opacity: 1 !important; filter: grayscale(0) !important; }
.press-logo.inv {
  /* white-fill SVGs shipped from source; flip to dark for legibility on light background */
  filter: grayscale(1) invert(1) !important;
}
.press-logo.inv:hover { filter: invert(1) !important; }