/**
 * cardgrid.css — Card Grid pattern block.
 * -----------------------------------------------------------------------------
 * Styles ONLY the inner content. The frame (background / angle / seam / glow /
 * 1440 cap) comes from frame.css. Enqueued per-block via block.json.
 *
 * Fleur card back: set per-card via the "Back image" field (tile.backImage),
 * emitted as an inline background-image by render.php. The gold lives ONLY on
 * flip backs — red stays the punctuation everywhere else.
 *
 * Interaction fallbacks:
 *   - flip/reveal trigger on hover AND keyboard focus
 *   - touch (no hover) shows the informative face by default — no dead cards
 *   - prefers-reduced-motion swaps the 3D flip for a cross-fade
 */

.sp-cardgrid{
  --sp-btn:#D42A2A;
  --sp-btn-hover:#EC4444;
  --sp-card-h:340px;
}

/* ---- head ---------------------------------------------------------------- */
.sp-cardgrid__head{margin-bottom:28px}
.sp-cardgrid__eyebrow{
  display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem;
  font-family:'Archivo',sans-serif;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sp-muted);
}
.sp-cardgrid__eyebrow::before{content:"";flex:none;width:1.4rem;height:2px;background:var(--sp-crimson)}
.sp-cardgrid__heading{
  margin:0;font-family:'Anton',sans-serif;font-weight:400;line-height:1;
  letter-spacing:.01em;text-transform:uppercase;
  font-size:clamp(1.6rem,3vw,2.4rem);color:var(--sp-bone);
}
.sp-cardgrid__heading .sp-accent{color:var(--sp-crimson)}
.sp-cardgrid--stats .sp-cardgrid__head{text-align:center}
.sp-cardgrid--stats .sp-cardgrid__heading{font-size:clamp(1.5rem,3vw,2rem)}

/* ---- grid ---------------------------------------------------------------- */
.sp-cardgrid__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.sp-cardgrid--stats .sp-cardgrid__grid{
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  align-items:center;
  text-align:center;
}

/* ---- stats tile ---------------------------------------------------------- */
.sp-cardgrid__stat{padding:8px 12px}
.sp-cardgrid__stat-value{
  display:block;
  font-family:'Anton',sans-serif;
  font-size:clamp(2.4rem,5vw,4rem);
  line-height:1;
  color:var(--sp-crimson);
}
.sp-cardgrid__stat-label{
  display:block;
  margin-top:.55rem;
  font-family:'Archivo',sans-serif;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sp-muted);
}

/* ---- corner pips (shared) ------------------------------------------------ */
.sp-cardgrid__pip{
  position:absolute;z-index:3;pointer-events:none;line-height:1;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.02em;color:var(--sp-tungsten);
}
.sp-cardgrid__pip--tl{top:10px;left:12px}
.sp-cardgrid__pip--br{bottom:10px;right:12px;transform:rotate(180deg)}

/* ---- quote tile ---------------------------------------------------------- */
.sp-cardgrid__quote{
  position:relative;overflow:hidden;margin:0;
  background:linear-gradient(180deg,#12151C,#0C0E13);
  border:0.5px solid var(--sp-edge);border-radius:4px;
  padding:30px 24px 22px;display:flex;flex-direction:column;gap:14px;
}
.sp-cardgrid__quote::before{content:"";position:absolute;top:0;left:24px;width:34px;height:2px;background:var(--sp-crimson)}
/* quote uses one large, faint pip in the corner — not the mirrored pair */
.sp-cardgrid--quote .sp-cardgrid__pip--tl{display:none}
.sp-cardgrid--quote .sp-cardgrid__pip--br{transform:none;bottom:12px;right:16px;font-size:34px;color:var(--sp-bone);opacity:.06}
.sp-cardgrid__qmark{font-family:'Anton',sans-serif;font-size:52px;line-height:.4;color:var(--sp-tungsten);opacity:.55}
.sp-cardgrid__qtext{margin:0;font-size:15px;line-height:1.55;color:var(--sp-bone)}
.sp-cardgrid__qby{
  margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sp-muted);
}
.sp-cardgrid__qby::before{content:"";flex:none;width:16px;height:2px;background:var(--sp-crimson)}
.sp-cardgrid__qby b{color:var(--sp-bone);font-weight:600;letter-spacing:.04em}

/* ---- static box tile ----------------------------------------------------- */
.sp-cardgrid__box{
  position:relative;display:flex;flex-direction:column;
  background:var(--sp-ink-2);border:0.5px solid var(--sp-edge);border-radius:4px;
  overflow:hidden;text-decoration:none;
  transition:border-color .18s ease,transform .18s ease;
}
a.sp-cardgrid__box:hover{border-color:var(--sp-crimson);transform:translateY(-2px)}
.sp-cardgrid__box-photo{display:block;aspect-ratio:4/3;background-size:cover;background-position:center;filter:contrast(1.05) saturate(.95)}
.sp-cardgrid__box-body{position:relative;padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px}
.sp-cardgrid__box-title{font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:var(--sp-bone)}
.sp-cardgrid__box-desc{font-size:13px;line-height:1.5;color:var(--sp-muted)}
.sp-cardgrid__box-go{margin-top:4px;color:var(--sp-crimson);font-size:15px;transition:transform .18s ease}
a.sp-cardgrid__box:hover .sp-cardgrid__box-go{transform:translateX(4px)}

/* ---- logo-wall tile ------------------------------------------------------ */
/* subtle translucent panel that lifts on any tone (black or navy). the logo
   sits behind as a faint monochrome watermark; the name reads over it. */
.sp-cardgrid__logo{
  position:relative;display:flex;align-items:center;justify-content:center;
  text-align:center;
  min-height:150px;padding:24px;overflow:hidden;text-decoration:none;
  background:rgba(244,241,236,.04);border:0.5px solid var(--sp-edge);border-radius:4px;
  transition:border-color .18s ease,background .18s ease;
}
a.sp-cardgrid__logo:hover{border-color:var(--sp-crimson);background:rgba(244,241,236,.06)}
.sp-cardgrid__logo-mark{
  position:absolute;inset:0;margin:auto;max-width:78%;max-height:66%;
  object-fit:contain;
  /* monochrome so full-colour logos don't shatter the palette */
  filter:grayscale(1) brightness(1.5) contrast(.85);
  opacity:.14;transition:opacity .18s ease;
}
a.sp-cardgrid__logo:hover .sp-cardgrid__logo-mark{opacity:.2}
.sp-cardgrid__logo-name{
  position:relative;z-index:1;display:block;width:100%;text-align:center;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--sp-bone);
}

/* ---- flip tile ----------------------------------------------------------- */
.sp-cardgrid__flip{position:relative;display:block;height:var(--sp-card-h);border-radius:11px;text-decoration:none;color:inherit;perspective:1200px;aspect-ratio:5/7;height:auto;width:100%;max-width:280px;margin-inline: auto}
.sp-cardgrid__flip-in{display:block;position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.sp-cardgrid__side{
  position:absolute;inset:0;border-radius:11px;overflow:hidden;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  backface-visibility:hidden;
  /* Firefox can occasionally paint descendants of the hidden face while a
     preserve-3d parent is turning. Opacity swaps at the halfway point as a
     second guard without changing the visible timing of the flip. */
  transition:opacity 0s .3s;
}
/* back — the fleur card back (gold lives only here) */
.sp-cardgrid__flip-back{
  transform:rotateY(0deg);opacity:1;
  background-color:#0B0D12;background-position:center;background-size:cover;background-repeat:no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
}
.sp-cardgrid__flip-back::before{content:"";position:absolute;inset:9px;border:1px solid rgba(233,201,160,.25);border-radius:7px;pointer-events:none}
.sp-cardgrid__flip-emblem{z-index:1;font-size:34px;color:var(--sp-tungsten);opacity:.9;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.sp-cardgrid__flip-cat{z-index:1;font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--sp-bone);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.sp-cardgrid__flip-hint{z-index:1;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sp-muted)}
/* face — photo + title + desc + CTA */
.sp-cardgrid__flip-face{transform:rotateY(180deg);opacity:0;background:#171A22;display:flex;flex-direction:column;justify-content:flex-end}
.sp-cardgrid__flip-photo{position:absolute;inset:0;background-size:cover;background-position:center;filter:contrast(1.03) saturate(.96)}
.sp-cardgrid__flip-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,.15),rgba(10,11,13,.9))}
.sp-cardgrid__flip-photo--empty{background:#20242E}
.sp-cardgrid__flip-body{
  position:relative;z-index:1;width:100%;height:43%;min-height:0;padding:20px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:flex-start;
}
.sp-cardgrid__flip-title{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:18px;letter-spacing:.02em;color:var(--sp-bone);margin-bottom:6px}
.sp-cardgrid__flip-desc{display:block;font-size:12.5px;line-height:1.5;color:#C9CED6;margin-bottom:0}
.sp-cardgrid__flip-cta{display:inline-block;margin-top:auto;padding:9px 18px;background:var(--sp-btn);color:#fff;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;border-radius:2px}
/* trigger the turn on hover + keyboard focus (hover-capable devices) */
@media (hover:hover){
  .sp-cardgrid__flip:hover .sp-cardgrid__flip-in,
  .sp-cardgrid__flip:focus-visible .sp-cardgrid__flip-in,
  .sp-cardgrid__flip:focus-within .sp-cardgrid__flip-in{transform:rotateY(180deg)}

  .sp-cardgrid__flip:hover .sp-cardgrid__flip-back,
  .sp-cardgrid__flip:focus-visible .sp-cardgrid__flip-back,
  .sp-cardgrid__flip:focus-within .sp-cardgrid__flip-back{opacity:0}

  .sp-cardgrid__flip:hover .sp-cardgrid__flip-face,
  .sp-cardgrid__flip:focus-visible .sp-cardgrid__flip-face,
  .sp-cardgrid__flip:focus-within .sp-cardgrid__flip-face{opacity:1}
}
/* touch / no-hover: show the informative face by default — never a dead card */
@media (hover:none){
  .sp-cardgrid__flip-in{transform:rotateY(180deg)}
  .sp-cardgrid__side{transition:none}
  .sp-cardgrid__flip-back{opacity:0}
  .sp-cardgrid__flip-face{opacity:1}
}

/* ---- image-reveal tile --------------------------------------------------- */
.sp-cardgrid__reveal{position:relative;display:block;height:var(--sp-card-h);border-radius:4px;overflow:hidden;text-decoration:none;background:#171A22}
.sp-cardgrid__reveal-photo{position:absolute;inset:0;background-size:cover;background-position:center;filter:contrast(1.03) saturate(.96)}
.sp-cardgrid__reveal-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,.1),rgba(10,11,13,.78))}
.sp-cardgrid__reveal-photo--empty{background:#22262F}
.sp-cardgrid__reveal-title{position:absolute;left:20px;bottom:18px;z-index:2;font-family:'Archivo',sans-serif;font-weight:600;font-size:19px;color:var(--sp-bone);transition:opacity .3s ease,transform .3s ease}
.sp-cardgrid__reveal-scrim{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;padding:24px;background:rgba(8,9,12,.88);border-bottom:3px solid var(--sp-crimson);opacity:0;transition:opacity .3s ease}
.sp-cardgrid__reveal-h{font-family:'Archivo',sans-serif;font-weight:600;font-size:18px;color:var(--sp-bone);margin-bottom:10px}
.sp-cardgrid__reveal-p{font-size:13px;line-height:1.55;color:#C9CED6}
@media (hover:hover){
  .sp-cardgrid__reveal:hover .sp-cardgrid__reveal-scrim,
  .sp-cardgrid__reveal:focus-within .sp-cardgrid__reveal-scrim{opacity:1}
  .sp-cardgrid__reveal:hover .sp-cardgrid__reveal-title,
  .sp-cardgrid__reveal:focus-within .sp-cardgrid__reveal-title{opacity:0;transform:translateY(8px)}
}


/* ---- visible link labels ------------------------------------------------- */
.sp-cardgrid__link-label{
  display:inline-flex;align-items:center;gap:.45rem;width:max-content;max-width:100%;
  margin-top:8px;font-family:'Archivo',sans-serif;font-size:11px;font-weight:600;
  line-height:1.25;letter-spacing:.08em;text-transform:uppercase;color:var(--sp-tungsten);
  transition:color .18s ease,gap .18s ease;
}
.sp-cardgrid__link-label > span{font-size:14px;line-height:1}
a.sp-cardgrid__box:hover .sp-cardgrid__link-label,
a.sp-cardgrid__reveal:hover .sp-cardgrid__link-label,
a.sp-cardgrid__logo:hover .sp-cardgrid__link-label{color:var(--sp-bone);gap:.65rem}
.sp-cardgrid__link-label--logo{position:relative;z-index:1;margin-top:10px}

/* ---- optional button below grid ----------------------------------------- */
.sp-cardgrid__footer{display:flex;justify-content:center;margin-top:32px}
.sp-cardgrid__button{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:12px 22px;border:1px solid var(--sp-crimson);border-radius:2px;
  background:var(--sp-crimson);color:#fff;text-decoration:none;
  font-family:'Archivo',sans-serif;font-size:12px;font-weight:600;line-height:1;
  letter-spacing:.06em;text-transform:uppercase;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.sp-cardgrid__button:hover{background:var(--sp-btn-hover);border-color:var(--sp-btn-hover);transform:translateY(-2px)}
.sp-cardgrid__button:focus-visible{outline:2px solid var(--sp-bone);outline-offset:4px}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .sp-cardgrid__flip-in,
  .sp-cardgrid__box,
  .sp-cardgrid__box-go,
  .sp-cardgrid__reveal-title,
  .sp-cardgrid__reveal-scrim,
  .sp-cardgrid__link-label,
  .sp-cardgrid__button{transition:none}
}
/* flip → cross-fade instead of a 3D spin (hover-capable devices) */
@media (prefers-reduced-motion:reduce) and (hover:hover){
  .sp-cardgrid__flip:hover .sp-cardgrid__flip-in,
  .sp-cardgrid__flip:focus-within .sp-cardgrid__flip-in{transform:none}
  .sp-cardgrid__flip-back{backface-visibility:visible;z-index:2;transition:opacity .2s ease;opacity:1}
  .sp-cardgrid__flip-face{transform:none;backface-visibility:visible;z-index:1;transition:opacity .2s ease;opacity:0}
  .sp-cardgrid__flip:hover .sp-cardgrid__flip-back,
  .sp-cardgrid__flip:focus-within .sp-cardgrid__flip-back{opacity:0}
  .sp-cardgrid__flip:hover .sp-cardgrid__flip-face,
  .sp-cardgrid__flip:focus-within .sp-cardgrid__flip-face{opacity:1}
}