/* ==========================================================================
   bq3 — Featured Blog + Blog List
   Namespace: every rule is scoped under .bq3-featured / .bq3-list
   No :root writes. No element selectors. Safe to load beside home.css.
   ========================================================================== */

.bq3-featured,
.bq3-list{
  /* ---- tokens (scoped, not global) ---- */
  --bq3-ink:#1f1f1f;
  --bq3-muted:#5f6368;
  --bq3-line:#e3e3e3;
  --bq3-surface:#ffffff;
  --bq3-pill-bg:#f1f3f4;
  --bq3-pill-bg-hover:#e4e6e8;
  --bq3-media-bg:#0b0b0c;

  --bq3-shell:1440px;
  --bq3-gutter:clamp(20px, 4vw, 64px);

  --bq3-r-lg:28px;
  --bq3-r-sm:18px;

  --bq3-font:'DM Sans','Helvetica Neue',Arial,sans-serif;

  --bq3-ease:cubic-bezier(.2,.7,.2,1);

  background:var(--bq3-surface);
  color:var(--bq3-ink);
  font-family:var(--bq3-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.bq3-featured,
.bq3-featured *,
.bq3-featured *::before,
.bq3-featured *::after,
.bq3-list,
.bq3-list *,
.bq3-list *::before,
.bq3-list *::after{
  box-sizing:border-box;
}

/* ---- shared shell ---- */
.bq3-shell{
  width:100%;
  max-width:var(--bq3-shell);
  margin-inline:auto;
  padding-inline:var(--bq3-gutter);
}

/* ---- shared meta row ---- */
.bq3-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(12px, 1.5vw, 24px);
  margin-top:clamp(16px, 2vw, 26px);
  font-size:clamp(13px, .95vw, 15px);
  font-weight:400;
  line-height:1.4;
  color:var(--bq3-muted);
}

/* ---- shared pill button ---- */
.bq3-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:clamp(20px, 2.2vw, 32px);
  padding:clamp(12px, 1.1vw, 17px) clamp(22px, 2vw, 32px);
  border:1px solid transparent;
  border-radius:999px;
  background:var(--bq3-pill-bg);
  color:var(--bq3-ink);
  font-family:inherit;
  font-size:clamp(14px, 1.05vw, 17px);
  font-weight:500;
  line-height:1;
  letter-spacing:0;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .18s ease, transform .18s ease;
}
.bq3-pill:hover{ background:var(--bq3-pill-bg-hover); }
.bq3-pill:active{ transform:translateY(1px); }
.bq3-pill:focus-visible{
  outline:2px solid var(--bq3-ink);
  outline-offset:3px;
}
.bq3-pill-sm{
  padding:clamp(10px, .9vw, 14px) clamp(18px, 1.6vw, 26px);
  font-size:clamp(13px, .95vw, 15px);
}


/* ==========================================================================
   SECTION 01 — FEATURED
   ========================================================================== */

.bq3-featured{
  padding-block:clamp(48px, 6vw, 100px) clamp(28px, 3.5vw, 56px);
}

.bq3-feat-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(32px, 5vw, 88px);
  align-items:start;
}

.bq3-feat-copy{
  padding-top:clamp(0px, .5vw, 8px);
}

.bq3-eyebrow{
  display:block;
  margin-bottom:clamp(18px, 2.4vw, 34px);
  font-size:clamp(15px, 1.15vw, 19px);
  font-weight:400;
  line-height:1.2;
  color:var(--bq3-ink);
}

.bq3-feat-title{
  margin:0;
  font-size:clamp(2.25rem, 4.5vw, 4.25rem);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.bq3-feat-title a{
  color:inherit;
  text-decoration:none;
}
.bq3-feat-title a:hover{
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:1px;
}
.bq3-feat-title a:focus-visible{
  outline:2px solid var(--bq3-ink);
  outline-offset:4px;
  border-radius:4px;
}

.bq3-feat-media{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:var(--bq3-r-lg);
  overflow:hidden;
  background:var(--bq3-media-bg);
  text-decoration:none;
  isolation:isolate;
}
.bq3-feat-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s var(--bq3-ease);
}
.bq3-feat-media:hover img{ transform:scale(1.035); }
.bq3-feat-media:focus-visible{
  outline:2px solid var(--bq3-ink);
  outline-offset:4px;
}


/* ==========================================================================
   SECTION 02 — BLOG LIST
   ========================================================================== */

.bq3-list{
  padding-block:clamp(24px, 3vw, 48px) clamp(56px, 7vw, 120px);
}

.bq3-list-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:clamp(40px, 5.2vw, 84px);
  row-gap:0;
}

.bq3-item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(112px, 15.5vw, 240px);
  gap:clamp(18px, 3vw, 48px);
  align-items:start;
  padding-block:clamp(30px, 3.4vw, 54px);
  border-bottom:1px solid var(--bq3-line);
}

.bq3-item-copy{
  min-width:0;
}

.bq3-item-title{
  margin:0;
  font-size:clamp(1.35rem, 2.2vw, 2.2rem);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.bq3-item-title a{
  color:inherit;
  text-decoration:none;
}
.bq3-item-title a:hover{
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
}
.bq3-item-title a:focus-visible{
  outline:2px solid var(--bq3-ink);
  outline-offset:4px;
  border-radius:4px;
}

.bq3-item-media{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:var(--bq3-r-sm);
  overflow:hidden;
  background:var(--bq3-media-bg);
  text-decoration:none;
  isolation:isolate;
}
.bq3-item-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s var(--bq3-ease);
}
.bq3-item:hover .bq3-item-media img{ transform:scale(1.04); }

/* Uncomment to drop the divider on the final row (2-col desktop only).
.bq3-list-grid .bq3-item:nth-last-child(-n+2){ border-bottom:0; }
*/


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1024px){
  .bq3-feat-grid{
    grid-template-columns:minmax(0, 1fr);
    gap:clamp(24px, 4vw, 40px);
  }
  .bq3-feat-media{ order:-1; }
  .bq3-eyebrow{ margin-bottom:14px; }
}

@media (max-width:860px){
  .bq3-list-grid{ grid-template-columns:minmax(0, 1fr); }
  /* single column: last item keeps no divider */
  .bq3-list-grid .bq3-item:last-child{ border-bottom:0; }
}

@media (max-width:640px){
  .bq3-br{ display:none; }
  .bq3-feat-title{ letter-spacing:-.015em; }
}

@media (max-width:520px){
  .bq3-item{
    grid-template-columns:minmax(0, 1fr) 96px;
    gap:16px;
  }
  .bq3-item-media{ border-radius:12px; }
  .bq3-feat-media{ border-radius:18px; }
}

@media (prefers-reduced-motion:reduce){
  .bq3-feat-media img,
  .bq3-item-media img,
  .bq3-pill{
    transition:none;
  }
  .bq3-feat-media:hover img,
  .bq3-item:hover .bq3-item-media img{
    transform:none;
  }
}