/* ===========================================================================
   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>
   =========================================================================== */

/* Four cards now: Sideline, Studio, AutoClip, Media Library. auto-fit rather
   than a fixed count so the row reflows instead of squeezing four into three
   columns' worth of space. */
.facet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 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; }
.facet--lib  .facet-eyebrow, .facet--lib  .facet-go { color: #E8C547; }

/* Characteristics replace the old repeated "See what it does" links. Three
   cards ending in the same call to action read as filler; the actual
   capabilities do the selling and cost the reader nothing to scan. Always
   visible, not hover-revealed: a phone has no hover. */
.facet-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.facet-list li {
  position: relative;
  padding-left: 13px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #C9D3E0;
  text-align: left;
  text-wrap: pretty;
}
.facet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: currentColor;
  opacity: .5;
}
.facet--side .facet-list li::before { background: #FF9E40; opacity: .85; }
.facet--stud .facet-list li::before { background: #9BD1ED; opacity: .85; }
.facet--gate .facet-list li::before { background: #6FE8A8; opacity: .85; }
.facet--lib  .facet-list li::before { background: #E8C547; opacity: .85; }

/* 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; }
/* Light veil between the mosaic canvas and the label. The badge sets dark navy
   text over a live mosaic, and the mosaic paints dark grout as well as bright
   tiles: measured, 63-77% of each badge failed 3:1 against that text, so the
   labels were largely unreadable depending on which tiles landed. The veil
   keeps the mosaic reading as a tint while giving the text a consistent light
   base. Sits under the label (z-index 1) and over the canvas (z-index 0). */
.facet-badge > div::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 255, 255, 0.78);
}
.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; }

/* keep captions clear of the shard-cut corners */
.facet--cut-br .facet-cap { padding-right: 54px; }
.facet--cut-bl .facet-cap { padding-left: 54px; }

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

/* the "mark" — circular product-logo badge in the opposite (top-right) corner from
   facet-badge/facet-cap text. Gold ring is the one constant, cross-brand Facet
   signature (matches STEMsaic/BTD); fill is a warm off-white (not pure white) so
   the badge doesn't read as stark against CFR's dark-ink mosaic ramps. Marks:
   *-mark.png (flood-filled transparent). No usages yet -- add per product line as
   art exists; see stemsaic/brand/project-assets.json for the asset registry. */
.facet-mark {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 124px; height: 124px; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #fbf8f2 0%, #f3ede0 58%, #e9e0cd 100%);
  box-shadow: 0 0 0 6px #d4a843, 0 8px 22px rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.facet-mark img { width: 82%; height: 82%; object-fit: contain; display: block; }
@media (max-width: 760px) { .facet-mark { width: 100px; height: 100px; } }

/* the "app-icon" mark — small CFR film-frame/play mark, top-right of the line
   card, parallel branding to the mosaic itself. Distinct from .facet-mark
   above (that one is the larger circular per-product badge, unused). Sits
   above the mosaic canvas + scrim; below the caption text. */
.facet-icon {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 108px; height: 108px; padding: 14px;
  border-radius: 22px;
  background: rgba(15, 27, 51, 0.62);
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
  pointer-events: none;
}
.facet-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 760px) { .facet-icon { width: 72px; height: 72px; padding: 10px; top: 12px; right: 12px; border-radius: 16px; } }

/* per-bundle emblem ring — the shared CFR mark, ringed in the bundle's accent
   colour, IS the bundle identifier: green = AutoClip, orange = Sideline,
   blue = Studio. Same logo, three unmistakable bundle colours. */
.facet--gate .facet-icon { box-shadow: 0 0 0 3px #34D97B, 0 6px 22px rgba(0,0,0,0.5); }
.facet--side .facet-icon { box-shadow: 0 0 0 3px #FF6D00, 0 6px 22px rgba(0,0,0,0.5); }
.facet--stud .facet-icon { box-shadow: 0 0 0 3px #6BB8E0, 0 6px 22px rgba(0,0,0,0.5); }

/* the three apps inside each bundle — persistent under the title so the card
   shows WHAT the bundle contains, in the bundle's accent colour. */
.facet-apps { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.02em; margin: 0 0 9px; }
.facet--gate .facet-apps { color: #6FE8A8; }
.facet--side .facet-apps { color: #FF9E40; }
.facet--stud .facet-apps { color: #9BD1ED; }

/* ghosted H8 athlete sketch — sits between the mosaic canvas (z-index 0) and
   the scrim (z-index 1) so mosaic tiles still show through underneath the
   sketch, and the scrim still darkens over it for caption legibility. Kept
   low-opacity and upper-weighted so it never fights the title/caption. */
.facet-ghost {
  position: absolute; inset: 0; z-index: 1; /* same layer as .facet-scrim (also z-index:1); DOM order
    places this markup before .facet-scrim so the scrim still paints on top and darkens it */
  width: 100%; height: 100%; object-fit: contain; object-position: 50% 30%;
  opacity: 0.13; mix-blend-mode: luminosity;
  pointer-events: none;
}
@media (max-width: 760px) { .facet-ghost { object-position: 50% 22%; } }