/* ============================================================
   GLOBAL TILE SYSTEM — Virtual Labs
   ============================================================ */

/* ── Light section white overlay — removed ───────────────── */
.products-section-home,
.products-section {
  position: relative;
}
.products-section-home > *,
.products-section > * {
  position: relative;
  z-index: 1;
}

/* ── Dark tile grid — gap + rounded ─────────────────────── */
.spec-grid {
  gap: 16px !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}
.open-roles    { gap: 16px !important; }
.advantage-grid { gap: 16px !important; }

/* ── Dark tile base style ─────────────────────────────────── */
.spec-item,
.role-card,
.advantage-item {
  border-radius: 0 !important;
  position: relative;
}

/* ── Dark holographic bezel wrapper ──────────────────────── */
.dark-tile-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 17px;
  padding: 2px; /* 2px wide holographic bezel */
  background: conic-gradient(from var(--holo-angle, 135deg),
    rgba( 70, 20, 130, 0.95)  0%,   /* Deep violet-purple */
    rgba(255,255,255, 0.13)   8%,   /* Near-white flash */
    rgba( 15, 60, 150, 0.92) 16%,   /* Dark royal blue */
    rgba( 12,110,  85, 0.87) 25%,   /* Dark teal/jade */
    rgba(255,255,255, 0.10)  33%,   /* Near-white flash */
    rgba( 60, 18, 130, 0.92) 42%,   /* Dark purple */
    rgba( 12, 55, 110, 0.87) 50%,   /* Dark steel blue */
    rgba(110, 28,  18, 0.82) 58%,   /* Dark brick/maroon */
    rgba(255,255,255, 0.95)  66%,   /* White flash */
    rgba(255,255,255, 0.13)  75%,   /* Near-white */
    rgba( 75, 15,  85, 0.90) 83%,   /* Deep magenta-purple */
    rgba( 50, 12, 110, 0.95) 91%,   /* Medium indigo */
    rgba( 70, 20, 130, 0.95) 100%   /* back to deep violet-purple */
  );
  /* box-shadow driven by JS (tiles.js _shadowFromAngle) */
  will-change: transform;
  cursor: default;
}

/* Gray veil over the bezel ring — subdues the raw holographic shimmer
   to the same muted dark appearance shown on mobile. Applied globally
   so desktop matches mobile. The ::before covers only the 2px padding
   ring via mask, leaving tile interior fully transparent.            */
.dark-tile-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 17px;
  padding: 2px;
  background: rgba(40,40,45,0.62);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

.dark-tile-wrap .dark-tile-inner {
  border-radius: 15px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #1c1c1e;
  transition: background 0.2s;
}

/* Tiles with a hyperlink — lighten on hover */
.dark-tile-wrap[data-has-link="true"] .dark-tile-inner {
  cursor: pointer;
}
.dark-tile-wrap[data-has-link="true"]:hover .dark-tile-inner {
  background: #2c2c2e;
}

/* Tiles without a hyperlink — no background change ever */
.dark-tile-wrap[data-has-link="false"] .dark-tile-inner,
.dark-tile-wrap[data-has-link="false"]:hover .dark-tile-inner {
  background: #1c1c1e !important;
}

/* Inner tile transparent so dark-tile-inner bg shows through always */
.dark-tile-wrap .spec-item,
.dark-tile-wrap .role-card,
.dark-tile-wrap .advantage-item {
  border-radius: 14px !important;
  flex: 1;
  min-height: 100%;
  box-sizing: border-box;
  background: transparent !important; /* background is on dark-tile-inner, not here */
}

/* White text */
.dark-tile-wrap .spec-value,
.dark-tile-wrap .advantage-title,
.dark-tile-wrap .role-title {
  color: rgba(255,255,255,0.92) !important;
}
.dark-tile-wrap .advantage-body,
.dark-tile-wrap .spec-label,
.dark-tile-wrap .role-dept {
  color: rgba(255,255,255,0.55) !important;
}
/* Eyebrow numbers — visible but not white */
.dark-tile-wrap .advantage-number {
  color: rgba(255,255,255,0.45) !important;
}
.dark-tile-wrap .role-link {
  color: #6aaeee !important;
}

/* ============================================================
   BUTTON BEZELS
   ============================================================ */

/* Shared button wrap */
.btn-bezel {
  display: inline-flex;   /* flex kills the baseline/descender gap that made bottom wider */
  align-items: center;
  border-radius: 100px;
  padding: 2px; /* 2px wide holographic bezel */
  text-decoration: none;
}
.btn-bezel .btn {
  display: inline-flex;
  border-radius: 100px;
  overflow: hidden;
}

/* ── DARK / LIGHT BUTTON BEZEL ───────────────────────────────
   Background gradient is set entirely by JS (tiles.js) at wrap-time
   and updated on mousemove / gyro. No CSS gradient here so there's
   no mismatch between the at-rest and hover states.
   ──────────────────────────────────────────────────────────── */
.btn-bezel-dark,
.btn-bezel-light {
  /* background intentionally left unset — controlled by JS */
}

/* Dark buttons — 2px bezel + gray veil over bezel ring only (matches mobile) */
.btn-bezel-dark {
  padding: 2px;
  position: relative;
}
.btn-bezel-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px;
  padding: 2px;
  background: rgba(40,40,45,0.62);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* Light buttons: 2px bezel (matches tiles) — shadow driven by JS */
.btn-bezel-light {
  padding: 2px;
}

/* ============================================================
   CANONICAL LIGHT TILE BEZEL
   Single source of truth for the at-rest pastel gradient on
   all light tiles sitewide. JS overrides background on
   mousemove using the same stop palette (LIGHT_TILE_STOPS).
   Apply .light-tile-bezel to any new light tile wrapper.
   ============================================================ */
.light-tile-bezel,
.product-grid-home .product-card,
.product-grid .product-card {
  background: conic-gradient(from 135deg,
    rgba(255, 210, 228, 0.90)  0%,   /* Rose pink */
    rgba(218, 205, 255, 0.85) 10%,   /* Lavender/soft violet */
    rgba(200, 220, 255, 0.90) 20%,   /* Periwinkle blue */
    rgba(190, 240, 235, 0.85) 30%,   /* Seafoam/aqua */
    rgba(205, 240, 200, 0.80) 40%,   /* Sage green */
    rgba(255, 255, 255, 0.95) 50%,   /* White flash */
    rgba(255, 255, 255, 0.87) 60%,   /* Near-white */
    rgba(255, 238, 200, 0.85) 70%,   /* Warm gold/wheat */
    rgba(255, 218, 205, 0.85) 80%,   /* Soft peach/salmon */
    rgba(255, 200, 220, 0.90) 90%,   /* Hot pink */
    rgba(255, 210, 228, 0.90) 100%   /* back to rose */
  );
  /* box-shadow driven by JS (tiles.js _shadowFromAngle) */
}

/* ── Button face backgrounds — never let bezel color bleed through ──
   Rule of thumb:
     btn-bezel-dark  → dark face (#1c1c1e), white text, regardless of btn class
     btn-bezel-light → light face (#f5f5f7), dark text, regardless of btn class
   This ensures btn-light inside a dark section gets a dark face when wrapped
   with btn-bezel-dark, and vice versa.
────────────────────────────────────────────────────────────────────── */

/* DARK bezel wrapper → dark face on every button variant inside it */
.btn-bezel-dark .btn {
  background: #1c1c1e !important;
  color: var(--white) !important;
  border: none !important;
}
.btn-bezel-dark .btn:hover {
  background: #2c2c2e !important;
}

/* LIGHT bezel wrapper → light face on every button variant inside it */
.btn-bezel-light .btn {
  background: #f0f0f2 !important; /* slightly darker at rest */
  color: var(--off-black) !important;
  border: none !important;
}
.btn-bezel-light .btn:hover {
  background: #ebebed !important;
}

/* (mobile-only overrides removed — dark tile + button veil now applied globally above) */