/* ===========================================================================
   FACET, CFR reskin. Shard-clipped tiles with a live stained-glass mosaic
   background (assets/mosaic.js) and pointer bloom. The house alternative to
   Bento cards, ported from the STEMsaic Facet design system via data-ramp.
   Coaches Film Room is a STEMsaic Media property.
   (c) STEMsaic Research Impacts LLC. All rights reserved.

   Markup:
     <div class="facet-grid">
       <a class="facet facet--cut-br" href="...">
         <canvas data-mosaic data-ramp="gate" data-cols="14" data-rows="8"></canvas>
         <div class="facet-scrim"></div>
         <div class="facet-cap">
           <div class="facet-eyebrow">Product line 01</div>
           <h3 class="facet-title">GATE</h3>
           <div class="facet-desc">Tripod it. It films everyone, and clocks them.</div>
           <span class="facet-go">See the line &rarr;</span>
         </div>
       </a>
     </div>
   =========================================================================== */

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

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

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

/* 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)); }

.facet > canvas[data-mosaic] { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* legibility scrim: CFR ink instead of STEMsaic navy */
.facet-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,20,36,0.94) 0%, rgba(10,20,36,0.5) 44%, rgba(10,20,36,0.06) 100%);
  transition: background .28s ease;
}
.facet:hover .facet-scrim { background: linear-gradient(to top, rgba(10,20,36,0.96) 0%, rgba(10,20,36,0.74) 60%, rgba(10,20,36,0.34) 100%); }

/* caption */
.facet-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 26px; z-index: 2; transition: transform .28s ease; }
.facet:hover .facet-cap { transform: translateY(-5px); }
.facet-eyebrow { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: #F0B623; margin-bottom: 9px; }
.facet-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; color: #FFFFFF; margin: 0 0 7px; }
.facet-go { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #F0B623; }

/* reveal-on-hover description */
.facet-desc { font-size: 13px; line-height: 1.5; color: #D8DEE9; margin: 0 0 8px; opacity: 0; transform: translateY(4px); transition: opacity .26s ease, transform .26s ease; }
.facet:hover .facet-desc { opacity: 1; transform: translateY(0); }

/* per-line eyebrow/go tints (set on the .facet) */
.facet--gate .facet-eyebrow, .facet--gate .facet-go { color: #6FE8A8; }
.facet--side .facet-eyebrow, .facet--side .facet-go { color: #FF9E40; }
.facet--stud .facet-eyebrow, .facet--stud .facet-go { color: #9BD1ED; }

/* the "title badge" chip: small mosaic chyron, palette via data-ramp on its canvas */
.facet-badge { position: absolute; top: 14px; left: 14px; z-index: 3; border-radius: 8px; overflow: hidden; border: 1.5px solid rgba(255,255,255,0.85); box-shadow: 0 5px 16px rgba(0,0,0,0.45); }
.facet-badge > div { position: relative; padding: 8px 14px; }
.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: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #0F1B33; }

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