/* =====================================================================
   Brave & Boundless — "Fresh From the Fire" dynamic blog section
   ---------------------------------------------------------------------
   Styles the [bb_fresh_from_fire] shortcode output. Self-contained and
   scoped to .bb-fff (with its own tokens) so it renders correctly whether
   it sits inside the #bb-home embed or anywhere else. Values ported from
   design/home-redesign/wp-embed.html so it matches the home redesign.
   ===================================================================== */
.bb-fff {
  --bb-paper:#F7F4F0; --bb-ink:#161210; --bb-rust:#C9512A; --bb-muted:#6f6862;
  --bb-line:rgba(22,18,16,.12); --bb-maroon:#800717; --bb-ember:#ED5D37;
  --bb-display:'brandon-grotesque','Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bb-radius:18px;
  background:var(--bb-paper); color:var(--bb-ink);
  padding:clamp(64px,9vw,130px) 0;
  font-family:var(--bb-display); line-height:1.6;
}
.bb-fff *, .bb-fff *::before, .bb-fff *::after { box-sizing:border-box; }
.bb-fff img { max-width:100%; height:auto; display:block; }
.bb-fff-container { width:100%; max-width:1180px; margin-inline:auto; padding-inline:clamp(20px,5vw,64px); }

.bb-fff-head { text-align:center; max-width:720px; margin:0 auto clamp(36px,5vw,56px); }
.bb-fff-eyebrow { font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--bb-rust); margin:0 0 14px; }
.bb-fff-title { font-family:var(--bb-display); font-weight:800; letter-spacing:-.02em; line-height:1.05; font-size:clamp(32px,5vw,60px); margin:0 0 .4em; }
.bb-fff-lead { font-size:clamp(18px,2.2vw,23px); color:var(--bb-muted); margin:0; }

.bb-fff-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bb-fff-post { background:#fff; border-radius:var(--bb-radius); overflow:hidden; border:1px solid var(--bb-line); box-shadow:0 10px 30px -20px rgba(22,18,16,.4); display:flex; flex-direction:column; transition:transform .2s ease; }
.bb-fff-post:hover { transform:translateY(-5px); }

.bb-fff-thumb { display:block; height:184px; position:relative; overflow:hidden; }
.bb-fff-thumb img { width:100%; height:100%; object-fit:cover; }
/* Gradient fallback when a post has no featured image */
.bb-fff-thumb.is-fallback-1 { background:linear-gradient(150deg,#9c0a1d,#800717); }
.bb-fff-thumb.is-fallback-2 { background:linear-gradient(150deg,#db5e33,#C9512A); }
.bb-fff-thumb.is-fallback-3 { background:linear-gradient(150deg,#56664a,#47553C); }
.bb-fff-thumb span { position:absolute; left:16px; bottom:14px; color:#fff; font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.92; }

.bb-fff-body { padding:24px; display:flex; flex-direction:column; flex:1; }
.bb-fff-meta { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bb-rust); margin-bottom:10px; }
.bb-fff-body h3 { font-family:var(--bb-display); font-weight:800; letter-spacing:-.02em; line-height:1.1; font-size:22px; margin:0 0 10px; }
.bb-fff-body h3 a { color:inherit; text-decoration:none; }
.bb-fff-body h3 a:hover { color:var(--bb-rust); }
.bb-fff-excerpt { font-size:15px; color:var(--bb-muted); margin:0; flex:1; }
.bb-fff-link { margin-top:16px; font-weight:700; font-size:14px; color:var(--bb-rust); text-decoration:none; }
.bb-fff-link:hover { color:var(--bb-maroon); }

.bb-fff-cta { text-align:center; margin-top:clamp(36px,5vw,52px); }
.bb-fff-btn { display:inline-flex; align-items:center; gap:.6em; font-family:var(--bb-display); font-weight:700; font-size:16px; letter-spacing:.02em; padding:16px 30px; border-radius:999px; background:var(--bb-ink); color:#fff; text-decoration:none; transition:transform .18s ease, background .18s ease; }
.bb-fff-btn:hover { transform:translateY(-2px); background:var(--bb-maroon); }

@media (max-width:900px) { .bb-fff-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .bb-fff-grid { grid-template-columns:1fr; } }