/* ============================================================
   BOB Blog teaser — theme-bundled copy for the FROM THE BLOG
   strip. The strip renders from the theme itself (template part
   on a built-in homepage, and the bob-blog/teaser fallback when
   the plugin is off), so its styles ship with the theme. Rules
   mirror plugins/bob-blog/assets/bob-blog.css; when both load
   (plugin active) they are identical, which is harmless.
   Depends on root tokens from main.css (--bg, --ink, --accent,
   .mono, .sec-label/.sec-rule/.wrap/.rv reveal plumbing) and
   loads right after it.
   ============================================================ */

.bob-blog-teaser-sec{padding-block:clamp(3.5rem,8vh,6.25rem)}
.bob-blog-teaser-h{
  font-size:clamp(1.5rem,2.8vw,2.65rem);font-weight:640;font-stretch:104%;
  line-height:1.14;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink,#F5F2EA);
  margin:clamp(1.5rem,3.5vh,2.5rem) 0 clamp(1.25rem,3vh,2rem);
}
.bob-blog-teaser-h .lm{white-space:nowrap}
.bob-blog-teaser-strip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.375rem;align-items:stretch;
}
/* Reel at any fill — magazine hierarchy: the lead card (newest post) spans the
 * full row, everything after sits in halves. One lone post keeps the big
 * centered feature treatment (mirrors the theme's bob-blog-grid--single). */
.bob-blog-teaser-strip--one{display:block;max-width:56rem}
.bob-blog-teaser-card--lead{grid-column:1 / -1}
.bob-blog-teaser-card--lead .bob-blog-teaser-media{aspect-ratio:16/9}
.bob-blog-teaser-card--lead .bob-blog-teaser-title a{font-size:clamp(1.25rem,2vw,1.8rem)}
.bob-blog-teaser-card--lead .bob-blog-teaser-ex{font-size:.9375rem;max-width:44rem}
.bob-blog-teaser-card{
  display:flex;flex-direction:column;gap:.55rem;
  border-radius:1.25rem;overflow:hidden;
  background:linear-gradient(180deg,#1d1d24 0%,#14141a 55%,#101015 100%);
  border:1px solid rgba(255,255,255,.10);
  padding:0 1.15rem 1.15rem;
  transition:transform .35s ease,border-color .35s ease;
}
.bob-blog-teaser-card:hover{transform:translateY(-.3rem);border-color:rgba(255,77,0,.5)}
.bob-blog-teaser-media{display:block;border-radius:1rem;overflow:hidden;aspect-ratio:16/9;margin:0 0 .35rem}
.bob-blog-teaser-media-in{width:100%;height:100%}
.bob-blog-teaser-media-in img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.bob-blog-teaser-card:hover .bob-blog-teaser-media-in img{transform:scale(1.03)}
/* typographic fallback tile (only used if the uploaded placeholder art is missing) */
.bob-blog-teaser-media-in .bob-blog-image-placeholder{
  display:grid;place-items:center;width:100%;height:100%;min-height:10rem;
  background:linear-gradient(180deg,#191920 0%,#101015 100%);
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,242,234,.5);text-align:center;line-height:1.7;
}
.bob-blog-teaser-meta{margin:0;font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,233,224,.55)}
.bob-blog-teaser-title{margin:.1rem 0 0}
.bob-blog-teaser-title a{
  color:var(--ink,#F5F2EA);text-decoration:none;font-weight:700;font-stretch:104%;
  font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.25;
}
.bob-blog-teaser-title a:hover{color:#fff}
.bob-blog-teaser-ex{margin:0;font-size:.8125rem;line-height:1.55;color:rgba(237,233,224,.66)}
.bob-blog-teaser-read{margin-top:auto;padding-top:.55rem;font-size:.5625rem;letter-spacing:.18em;color:rgba(237,233,224,.72);text-decoration:none}
.bob-blog-teaser-read span{display:inline-block;color:var(--accent,#FF4D00);transition:transform .25s ease}
.bob-blog-teaser-card:hover .bob-blog-teaser-read span{transform:translate(2px,-2px)}
.bob-blog-teaser-card:hover .bob-blog-teaser-read:hover{color:#fff}
.bob-blog-teaser-all{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:clamp(1.25rem,3vh,2rem);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink,#F5F2EA);text-decoration:none;
}
.bob-blog-teaser-all span{color:var(--accent,#FF4D00);transition:transform .25s ease}
.bob-blog-teaser-all:hover span{transform:translate(2px,-2px)}
.bob-blog-teaser-all:hover{text-decoration:underline;text-underline-offset:.35em}

/* ---- Responsive ---------------------------------------------------------------------- */
@media (max-width:980px){
  .bob-blog-teaser-strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .bob-blog-teaser-strip{grid-template-columns:1fr}
  .bob-blog-teaser-card{padding:0 .9rem .9rem}
  .bob-blog-teaser-card--lead .bob-blog-teaser-media{aspect-ratio:16/9}
}