/* Ben's Blog Displays 1.1 — scoped, local, privacy-friendly styles. */
.bbd-display{
  --bbd-cols:var(--bbd-cols-desktop,3);--bbd-gap:22px;--bbd-radius:24px;
  --bbd-peek-px:0px;--bbd-peek-gap:0px;
  --bbd-text:#20223b;--bbd-subtle:#70788e;--bbd-surface:#fff;
  --bbd-card-border:rgba(112,114,157,.12);--bbd-canvas:rgba(247,247,253,.55);
  --bbd-shadow:0 10px 36px rgba(43,41,90,.06),0 2px 7px rgba(33,29,78,.04);
  --bbd-accent:121,92,243;
  position:relative;isolation:isolate;max-width:100%;width:100%;margin:2rem auto;
  padding:25px 24px 28px;border-radius:30px;color:var(--bbd-text);
  background:var(--bbd-canvas);font-family:inherit;box-sizing:border-box;
}
.bbd-display,.bbd-display *,.bbd-display *::before,.bbd-display *::after{box-sizing:border-box}
.bbd-display.bbd-skin-midnight{
  --bbd-text:#f5f5ff;--bbd-subtle:#afb5cc;--bbd-surface:#242638;
  --bbd-card-border:rgba(211,206,255,.12);--bbd-canvas:#161727;
  --bbd-shadow:0 12px 38px rgba(0,0,0,.22)
}
.bbd-display.bbd-accent-ocean{--bbd-accent:30,151,235}
.bbd-display.bbd-accent-coral{--bbd-accent:233,108,113}
.bbd-display.bbd-accent-gold{--bbd-accent:213,156,64}
.bbd-display.bbd-corners-soft{--bbd-radius:12px}
.bbd-display.bbd-corners-square{--bbd-radius:0px}
.bbd-display:before{content:"";position:absolute;z-index:-1;top:0;right:0;width:48%;height:220px;pointer-events:none;background:radial-gradient(ellipse at 68% 0%,rgba(var(--bbd-accent),.085),transparent 72%)}
.bbd-display-header{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:20px;min-width:0}
.bbd-display-header--compact{justify-content:flex-end;margin-bottom:8px}
.bbd-display .bbd-title-group{min-width:0}
.bbd-display .bbd-kicker{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:750;line-height:1.4;letter-spacing:.15em;color:rgb(var(--bbd-accent));text-transform:uppercase}
.bbd-display .bbd-kicker-spark{font-size:18px;line-height:1}
.bbd-display .bbd-display-title{font-size:clamp(23px,2.5vw,36px);line-height:1.17;letter-spacing:-.045em;font-weight:780;color:var(--bbd-text);margin:7px 0 0;overflow-wrap:anywhere}
.bbd-display .bbd-navigation{display:flex;gap:9px;align-items:center;flex-shrink:0}
.bbd-display .bbd-arrow{display:grid;place-items:center;border-radius:999px;width:43px;height:43px;border:1px solid var(--bbd-card-border);background:var(--bbd-surface);color:var(--bbd-text);box-shadow:0 2px 10px rgba(30,22,85,.06);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.bbd-display .bbd-arrow svg{height:18px;width:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bbd-display[data-bbd-peek-side="left"] .bbd-arrow svg{transform:scaleX(-1)}
.bbd-display .bbd-arrow:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 22px rgba(var(--bbd-accent),.21);background:rgba(var(--bbd-accent),.1)}
.bbd-display .bbd-arrow:disabled{opacity:.33;cursor:not-allowed;box-shadow:none}
.bbd-display :is(a,button,.bbd-track):focus-visible{outline:3px solid rgba(var(--bbd-accent),.75);outline-offset:3px}
.bbd-display .bbd-track{min-width:0;gap:var(--bbd-gap);scrollbar-color:rgba(var(--bbd-accent),.32) transparent;scrollbar-width:thin}
.bbd-display .bbd-track--carousel{display:flex;align-items:flex-start;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-padding-inline:3px;scroll-behavior:smooth;padding:9px 3px 20px;margin:0 -3px -14px}
.bbd-display .bbd-track--grid{display:grid;grid-template-columns:repeat(var(--bbd-cols),minmax(0,1fr));align-items:start;padding:5px 0 12px}
.bbd-display.bbd-with-peek{--bbd-peek-px:var(--bbd-peek-size,60px);--bbd-peek-gap:var(--bbd-gap)}
/* Two rules for gap counting avoid unintended stretching and card-body dead space. */
/* Explicit formulas avoid experimental CSS multiplication/division with custom numeric variables. */
.bbd-display .bbd-track--carousel .bbd-card{flex:0 0 calc(100% - var(--bbd-peek-px) - var(--bbd-peek-gap));scroll-snap-align:start;scroll-snap-stop:normal}
.bbd-display[data-bbd-columns="2"] .bbd-track--carousel .bbd-card{flex-basis:calc((100% - var(--bbd-gap) - var(--bbd-peek-px) - var(--bbd-peek-gap)) / 2)}
.bbd-display[data-bbd-columns="3"] .bbd-track--carousel .bbd-card{flex-basis:calc((100% - var(--bbd-gap) - var(--bbd-gap) - var(--bbd-peek-px) - var(--bbd-peek-gap)) / 3)}
.bbd-display[data-bbd-columns="4"] .bbd-track--carousel .bbd-card{flex-basis:calc((100% - var(--bbd-gap) - var(--bbd-gap) - var(--bbd-gap) - var(--bbd-peek-px) - var(--bbd-peek-gap)) / 4)}
.bbd-display .bbd-card{
  min-width:0;align-self:start;position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid var(--bbd-card-border);border-radius:var(--bbd-radius);
  background:var(--bbd-surface);box-shadow:var(--bbd-shadow);color:var(--bbd-text);
}
/* Only the image is magnified, never the whole card or the adjacent cards. */
.bbd-display .bbd-card-media{
  aspect-ratio:16/10;display:block;position:relative;flex-shrink:0;overflow:hidden;
  border-radius:max(0px,calc(var(--bbd-radius) - 1px)) max(0px,calc(var(--bbd-radius) - 1px)) 0 0;
  background:linear-gradient(145deg,rgba(var(--bbd-accent),.12),rgba(var(--bbd-accent),.4));
  transition:box-shadow .35s ease;isolation:isolate;
}
.bbd-display .bbd-card:not(:has(.bbd-card-body)) .bbd-card-media{border-radius:var(--bbd-radius)}
.bbd-display .bbd-card-image{position:relative;z-index:0;display:block!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover;transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .4s ease;border-radius:0!important}
.bbd-display.bbd-with-bulge .bbd-card-media:is(:hover,:focus-within) .bbd-card-image{transform:scale(1.105);filter:brightness(1.04) saturate(1.08)}
.bbd-display.bbd-with-bulge .bbd-card-media:is(:hover,:focus-within){box-shadow:inset 0 0 35px rgba(var(--bbd-accent),.12)}
.bbd-display .bbd-image-link{position:absolute;inset:0;display:block;z-index:2;cursor:pointer}
.bbd-display .bbd-image-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.64),transparent 33%),linear-gradient(135deg,rgba(var(--bbd-accent),.45),rgba(var(--bbd-accent),.18) 64%,rgba(var(--bbd-accent),.62))}
.bbd-display .bbd-image-placeholder>span{font-size:56px;filter:drop-shadow(0 8px 14px rgba(31,28,69,.25))}
.bbd-display .bbd-media-shine{position:absolute;z-index:1;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.14) 52%,transparent 68%);transform:translateX(-125%);transition:transform .7s ease;pointer-events:none}
.bbd-display .bbd-card-media:hover .bbd-media-shine{transform:translateX(125%)}
.bbd-display.bbd-with-glow .bbd-card-media::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(175px circle at var(--bbd-pointer-x,50%) var(--bbd-pointer-y,50%),rgba(var(--bbd-accent),.28),transparent 75%);opacity:0;transition:opacity .2s}
.bbd-display.bbd-with-glow .bbd-card-media:is(:hover,:focus-within)::after{opacity:1}
/* Flexible body: exactly as tall as actual text and optional link. */
.bbd-display .bbd-card-body{position:relative;isolation:isolate;overflow:hidden;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:7px;flex:0 0 auto;padding:12px 16px 14px;background:var(--bbd-surface)}
.bbd-display .bbd-card-body>:not(.bbd-title-backdrop){position:relative;z-index:1}
.bbd-display .bbd-title-backdrop{position:absolute;inset:-10px;display:block;z-index:0;pointer-events:none;background-image:var(--bbd-card-title-image,none);background-size:cover;background-position:var(--bbd-title-focus,center bottom);filter:blur(var(--bbd-title-blur,12px));opacity:var(--bbd-title-opacity,.17);transform:scale(var(--bbd-title-zoom,1.13))}
.bbd-display .bbd-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bbd-display .bbd-category-tag{display:inline-block;background:rgba(var(--bbd-accent),.095);border:1px solid rgba(var(--bbd-accent),.14);color:rgb(var(--bbd-accent));font-size:10px;font-weight:730;letter-spacing:.01em;line-height:1.25;border-radius:99px;padding:4px 8px}
.bbd-display .bbd-meta time{font-size:11px;color:var(--bbd-subtle)}
.bbd-display .bbd-card-title{font-size:clamp(16px,1.38vw,20px);line-height:1.28;letter-spacing:-.024em;font-weight:740;margin:0;color:var(--bbd-text);overflow-wrap:anywhere}
.bbd-display .bbd-card-title a{color:inherit;text-decoration:none!important}
.bbd-display .bbd-card-title a:hover{color:rgb(var(--bbd-accent))}
.bbd-display .bbd-card-excerpt{font-size:13px;color:var(--bbd-subtle);line-height:1.46;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bbd-display .bbd-readmore{display:inline-flex;align-items:center;gap:7px;margin:1px 0 0;padding:0;width:fit-content;font-size:12px;font-weight:760;color:rgb(var(--bbd-accent));text-decoration:none!important}
.bbd-display .bbd-readmore span{font-size:16px;transition:transform .22s ease}
.bbd-display .bbd-readmore:hover span{transform:translate(3px,-3px)}
/* Overlay mode: an off-white title highlight hugs just the lettering, not the photo. */
.bbd-display .bbd-title-overlay{position:absolute;z-index:3;bottom:15px;left:13px;right:13px;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .27s ease,transform .27s ease}
.bbd-display .bbd-title-overlay .bbd-card-title{font-size:clamp(16px,1.45vw,22px);line-height:1.7}
.bbd-display .bbd-title-overlay .bbd-card-title a{
  pointer-events:none;display:inline;padding:5px 9px 6px;border-radius:3px;
  color:#1b2132!important;background:rgba(255,255,255,.93);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  box-shadow:0 4px 16px rgba(0,0,0,.1);text-decoration:none!important;
}
.bbd-display .bbd-card-media:is(:hover,:focus-within) .bbd-title-overlay{opacity:1;transform:translateY(0);pointer-events:auto}
.bbd-display .bbd-card-media:is(:hover,:focus-within) .bbd-title-overlay a{pointer-events:auto}
@media(hover:none){
  .bbd-display .bbd-title-overlay{opacity:1;transform:none;pointer-events:auto}
  .bbd-display .bbd-title-overlay a{pointer-events:auto!important}
  .bbd-display.bbd-with-bulge .bbd-card-media:hover .bbd-card-image{transform:none;filter:none}
}
@media(max-width:940px){
  .bbd-display{--bbd-cols:2;--bbd-peek-px:0px;padding:22px 17px 25px}
  .bbd-display.bbd-with-peek{--bbd-peek-px:min(var(--bbd-peek-size,60px),48px)}
  .bbd-display[data-bbd-columns] .bbd-track--carousel .bbd-card{flex-basis:calc((100% - var(--bbd-gap) - var(--bbd-peek-px) - var(--bbd-peek-gap)) / 2)}
  .bbd-display .bbd-card-body{padding:12px 13px 13px}
  .bbd-display .bbd-display-title{font-size:27px}
}
@media(max-width:580px){
  .bbd-display{--bbd-cols:1;border-radius:20px;padding:16px 12px 21px}
  .bbd-display.bbd-with-peek{--bbd-peek-px:min(var(--bbd-peek-size,60px),38px)}
  .bbd-display-header{align-items:center;margin-bottom:13px}
  .bbd-display .bbd-display-title{font-size:24px}
  .bbd-display .bbd-kicker{font-size:9px;letter-spacing:.1em}
  .bbd-display .bbd-arrow{width:35px;height:35px}
  .bbd-display .bbd-navigation{gap:6px}
  .bbd-display .bbd-track--carousel{padding-bottom:18px;margin-bottom:-10px}
  .bbd-display[data-bbd-columns] .bbd-track--carousel .bbd-card{flex-basis:calc(100% - var(--bbd-peek-px) - var(--bbd-peek-gap))}
  .bbd-display .bbd-card-title{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .bbd-display,.bbd-display *,.bbd-display *::before,.bbd-display *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .bbd-display.bbd-with-bulge .bbd-card-media:is(:hover,:focus-within) .bbd-card-image{transform:none!important}
  .bbd-display .bbd-media-shine{transform:none!important}
  .bbd-display .bbd-title-overlay{transform:none!important}
}