/* ===========================================================================
   FACET — BTD's interactive mosaic-tile design system.
   (aka "Pane" / the "non-Bento" style. Shared DNA with STEMsaic, BTD palette.)

   A Facet is a full-bleed, shard-clipped tile whose background is a live
   BTD warm-ceramic mosaic (assets/mosaic.js). On hover it lifts and the glass
   blooms toward the cursor; a caption sits over the glass. Use Facets instead
   of rounded Bento cards anywhere you'd group items.

   Color scheme is a one-attribute swap: put data-ramp on the inner
   <canvas data-mosaic>. BTD ramps: amber (core/G1), sage (Eating),
   teal (Transitions), rose (Playing), violet (Uncertainty), navy (neutral).

   Minimal markup:
     <div class="facet-grid">
       <a class="facet facet--wide facet--cut-br" href="...">
         <canvas data-mosaic data-ramp="blue" data-cols="15" data-rows="9" ...></canvas>
         <div class="facet-scrim"></div>
         <div class="facet-cap">
           <div class="facet-eyebrow">Design</div>
           <h3 class="facet-title">Partnership Design</h3>
           <span class="facet-go">View project →</span>
         </div>
       </a>
     </div>

   Requires assets/mosaic.js for the live/interactive background.
   =========================================================================== */

.facet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.facet {
  position: relative; overflow: hidden; display: block; text-decoration: none;
  min-height: 300px;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), filter .28s ease;
}
.facet:hover { transform: translateY(-5px); filter: drop-shadow(0 14px 26px rgba(30,42,66,0.26)); }

/* size modifiers */
.facet--wide { grid-column: span 2; }
.facet--tall { min-height: 384px; }
.facet--sm   { min-height: 178px; }

/* shard clip variants (the "facet" cut). 28px corner notch. */
.facet--cut-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.facet--cut-tl { clip-path: polygon(0 28px, 28px 0, 100% 0, 100% 100%, 0 100%); }
.facet--cut-tr { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.facet--cut-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }

/* the canvas mosaic fills the tile (mosaic.js draws + animates it) */
.facet > canvas[data-mosaic] { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* legibility scrim over the glass */
.facet-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(30,42,66,0.95) 0%, rgba(30,42,66,0.55) 44%, rgba(30,42,66,0.08) 100%);
  transition: background .28s ease;
}
.facet:hover .facet-scrim { background: linear-gradient(to top, rgba(30,42,66,0.97) 0%, rgba(30,42,66,0.78) 60%, rgba(30,42,66,0.4) 100%); }

/* caption */
.facet-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px; z-index: 2; transition: transform .28s ease; }
.facet:hover .facet-cap { transform: translateY(-5px); }
.facet-eyebrow { font-family: 'Montserrat', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: #e8a840; margin-bottom: 10px; }
.facet-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.18; letter-spacing: -0.01em; color: #ffffff; margin: 0 0 8px; }
.facet-go { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; color: #e8a840; }

/* optional reveal-on-hover description (used by the role-mosaic variant) */
.facet-desc { font-size: 12px; line-height: 1.45; color: #ece3d6; margin-top: 6px; opacity: 0; transform: translateY(4px); transition: opacity .26s ease, transform .26s ease; }
.facet:hover .facet-desc { opacity: 1; transform: translateY(0); }

/* the "title badge" chip — a small Facet-mosaic chyron, palette via data-ramp on its canvas */
.facet-badge { position: absolute; top: 16px; left: 16px; z-index: 3; border-radius: 9px; overflow: hidden; border: 1.5px solid rgba(255,255,255,0.88); box-shadow: 0 5px 16px rgba(30,42,66,0.42); }
.facet-badge > div { position: relative; padding: 9px 15px; }
.facet-badge canvas[data-mosaic] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.facet-badge span { position: relative; z-index: 1; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: #1e2a42; }

@media (max-width: 760px) {
  .facet-grid { grid-template-columns: 1fr; }
  .facet--wide { grid-column: span 1; }
  .facet, .facet--tall { min-height: 248px; }
}