/* Site design layer — loads on EVERY page (standardization). Card depth/motion for all cards +
 * the homepage "system band". Uses theme tokens (var(--surface)/--line/--accent/--text) so it is
 * correct in BOTH light and dark mode. Reversible: remove the enqueue + do_shortcode_tag filter
 * in bgw-theme.php and this file. */

/* ================= UNIFIED CARD SYSTEM (site-wide) =================
 * One card language everywhere. Two tiers:
 *   TIER 1 (interactive content tiles) — full elevation: surface + line, radius 16,
 *           layered shadow, animated top accent bar, lift on hover.
 *   TIER 2 (static section / form / account panels) — same radius + a subtle static
 *           depth so they read as the same family, but no hover lift or accent bar.
 * All colors come from theme tokens, so every card is correct in light AND dark mode. */

/* ---- TIER 1: Story (.bgwa-card), Journal (.bgw-card), About action cards (.bgwap-card) ---- */
.bgwa-card, .bgw-card, .bgwap-card{
  position:relative; overflow:hidden;
  background:var(--surface,#fbf9f4);
  border:1px solid var(--line,rgba(26,23,20,.10));
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.07);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.bgwa-card::before, .bgw-card::before, .bgwap-card::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--accent,#9b2f2c),var(--accent2,#b24a47));
  transition:width .3s ease;
}
.bgwa-card:hover, .bgw-card:hover, .bgwap-card:hover{
  transform:translateY(-6px);
  box-shadow:0 2px 6px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.16);
  border-color:var(--line2,rgba(26,23,20,.16));
}
.bgwa-card:hover::before, .bgw-card:hover::before, .bgwap-card:hover::before{ width:100%; }
.bgwa-more i, .bgwa-more svg{ transition:transform .2s ease; }
.bgwa-card:hover .bgwa-more i, .bgwa-card:hover .bgwa-more svg{ transform:translateX(4px); }

/* ---- Shared radius: one corner value across the whole card family ---- */
.bgw-card, .bgw-feature, .bgw-author, .bgw-gate, .comment-respond, .bgw-c,
.bgwap-card, .bgwt-stat, .bgwtp-card, .bgwtp-card-feat,
.bgwl-libcard, .bgwl-start-card, .bgwl-buybox, .bgwl-buybar, .bgwl-navbtn, .bgwl-mini,
.bgwc-side-card, .bgwc-side-img, .bgwe-inner, .bgw-lp-peek,
.pmpro_card, .bgw-acard, .bgw-side-img, .bgwt-login-side-card, .bgwt-login-side-img{
  border-radius:16px !important;
}

/* ---- TIER 2: static content panels get a subtle, matching depth (no lift, no bar) ---- */
.bgw-feature, .bgw-author, .bgw-gate, .comment-respond,
.bgwl-libcard, .bgwl-start-card, .bgwl-buybox,
.bgwc-side-card, .bgwc-side-img, .bgwe-inner, .bgw-lp-peek{
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05);
}

/* ---- Buttons: gentle lift (site-wide) ---- */
.bgwh-btn, .bgwr-btn, .bgwn-form button{
  transition:transform .18s ease, box-shadow .18s ease, background .2s ease !important;
}
.bgwh-btn:hover, .bgwr-btn:hover, .bgwn-form button:hover{ transform:translateY(-2px); }

/* ================= THE SYSTEM BAND (injected after the hero) ================= */
.bgwt-band{
  width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  background:var(--bg2,#ebe7dc); overflow:hidden;
  /* gutter lives on the full-bleed band (like a Bricks section's 6vw), so the inner is TRUE 1180 content
     that lines up edge-for-edge with the hero, Story grid, and every other section. */
  padding-left:6vw; padding-right:6vw; box-sizing:border-box;
}
.bgwt-band-inner{ position:relative; max-width:1180px; margin:0 auto; padding:80px 0; }
.bgwt-band .eb{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent,#9b2f2c); }
.bgwt-band h2{ font-family:'Fraunces',Georgia,serif; font-weight:600; color:var(--text,#1a1714); font-size:clamp(28px,3.2vw,40px); line-height:1.1; margin:12px 0 0; letter-spacing:-.01em; }
.bgwt-band .lead{ color:var(--text2,#5b5048); max-width:none; margin-top:14px; font-size:16px; line-height:1.6; text-wrap:pretty; }
.bgwt-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px; margin:44px 0 42px; }
.bgwt-stat{ background:var(--surface,#fff); border:1px solid var(--line,rgba(26,23,20,.12)); border-radius:14px; padding:22px 22px; box-shadow:0 1px 2px rgba(26,23,20,.04); transition:transform .2s ease, box-shadow .2s ease; }
.bgwt-stat:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(26,23,20,.10); }
.bgwt-stat .n{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:42px; color:var(--accent,#9b2f2c); line-height:1; }
.bgwt-stat .l{ font-size:13.5px; color:var(--text2,#5b5048); margin-top:9px; }
.bgwt-arch{ display:flex; align-items:flex-start; gap:0; flex-wrap:wrap; }
.bgwt-node{ display:flex; flex-direction:column; align-items:center; text-align:center; flex:1; min-width:96px; position:relative; padding:0 6px; }
.bgwt-node .ic{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(155,47,44,.08); border:1px solid rgba(155,47,44,.28); color:var(--accent,#9b2f2c); font-size:20px; margin-bottom:10px; }
.bgwt-node .t{ font-size:12.5px; font-weight:600; color:var(--text,#1a1714); }
.bgwt-node .d{ font-size:11px; color:var(--muted,#736a5f); margin-top:2px; }
.bgwt-node:not(:last-child)::after{ content:""; position:absolute; top:23px; left:62%; width:76%; height:2px; background:rgba(155,47,44,.18); }
.bgwt-band .cta{ display:inline-flex; align-items:center; gap:9px; margin-top:34px; font-weight:600; font-size:14.5px; color:#fff; background:var(--accent,#9b2f2c); padding:13px 24px; border-radius:10px; box-shadow:0 6px 18px rgba(155,47,44,.26); transition:.2s; }
.bgwt-band .cta:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(155,47,44,.34); }
.bgwt-reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.bgwt-reveal.in{ opacity:1; transform:none; }
@media(max-width:820px){
  .bgwt-node{ flex:0 0 33.33%; margin-bottom:20px; }
  .bgwt-node:not(:last-child)::after{ display:none; }
  .bgwt-band-inner{ padding:60px 0; }
}