/* Two-column guide layout only when a sticky card exists */
@media (min-width: 1024px) {
  main.container:has(> .sticky-card) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); /* ~75% / 25% */
    gap: 24px;
    align-items: start;
  }
  main.container:has(> .sticky-card) > article {
    grid-column: 1;
  }
  main.container:has(> .sticky-card) > .sticky-card {
    grid-column: 2;
    position: sticky;
    top: 88px;                /* adjust to clear your header */
    height: max-content;      /* shrink-wrap to content */
  }
  .sticky-card .card { width: auto; }
}

/* === Guides: 2-col layout + full-width main card in left column === */
@media (min-width: 1024px) {
  main.container:has(.sticky-card) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  main.container:has(.sticky-card) article { grid-column: 1; margin: 0; }
  main.container:has(.sticky-card) article > .card:first-of-type { max-width: none; width: 100%; }
  main.container:has(.sticky-card) .sticky-card { grid-column: 2; position: sticky; top: 88px; height: max-content; }
}

/* === Sticky sidebar card styling to match site cards === */
.sticky-card { display: grid; gap: 12px; }
.sticky-card .card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.04); padding:16px 18px; }
.sticky-card h3, .sticky-card h4 { margin:0 0 10px; font-weight:700; line-height:1.2; font-size:16px; }
.sticky-card ul { list-style:none; margin:0; padding:0; }
.sticky-card li { margin:6px 0; }
.sticky-card a { text-decoration:none; } .sticky-card a:hover { text-decoration:underline; }
.sticky-card .btn { width:100%; display:inline-flex; justify-content:center; }
@media (max-width:1023px){ .sticky-card { margin-top:16px; } }


/* ===== Guides: two-column layout + sticky aside ===== */
.guide-layout{
  display:grid !important;
  grid-template-columns: 1fr;       /* mobile default */
  gap: 24px;
}

/* Switch to two columns on reasonably wide screens */
@media (min-width: 900px){
  .guide-layout{
    grid-template-columns: minmax(0,1fr) 320px; /* article | sidebar */
    align-items: start;                          /* needed for position:sticky */
  }
  .guide-layout .blog-article{ min-width: 0; }  /* prevent overflow clipping */
  .guide-layout .sticky-side{
    position: sticky;
    top: 16px;            /* adjust to clear header */
    height: fit-content;  /* prevents stretching */
  }
}

/* Optional: if your container has a max width that’s too narrow */
@media (min-width: 1200px){
  .container { max-width: 1100px; } /* tune to taste */
}

/* ===== Guides: two-column layout + sticky aside ===== */
.guide-layout{
  display:grid !important;
  grid-template-columns: 1fr;       /* mobile default */
  gap: 24px;
}

/* Switch to two columns on reasonably wide screens */
@media (min-width: 900px){
  .guide-layout{
    grid-template-columns: minmax(0,1fr) 320px; /* article | sidebar */
    align-items: start;                          /* needed for position:sticky */
  }
  .guide-layout .blog-article{ min-width: 0; }  /* prevent overflow clipping */
  .guide-layout .sticky-side{
    position: sticky;
    top: 16px;            /* adjust to clear header */
    height: fit-content;  /* prevents stretching */
  }
}

/* Optional: if your container has a max width that’s too narrow */
@media (min-width: 1200px){
  .container { max-width: 1100px; } /* tune to taste */
}
/* ===== Guides: two-column layout + sticky aside ===== */
.guide-layout{
  display:grid !important;
  grid-template-columns: 1fr;       /* mobile default */
  gap: 24px;
}

/* Switch to two columns on reasonably wide screens */
@media (min-width: 900px){
  .guide-layout{
    grid-template-columns: minmax(0,1fr) 320px; /* article | sidebar */
    align-items: start;                          /* needed for position:sticky */
  }
  .guide-layout .blog-article{ min-width: 0; }  /* prevent overflow clipping */
  .guide-layout .sticky-side{
    position: sticky;
    top: 16px;            /* adjust to clear header */
    height: fit-content;  /* prevents stretching */
  }
}

/* Optional: if your container has a max width that’s too narrow */
@media (min-width: 1200px){
  .container { max-width: 1100px; } /* tune to taste */
}
/* --- Card + spacing (safe override) --- */
.card{
  background:#fff;
  border:1px solid #e5e7eb;        /* light gray */
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.pad{ padding:18px; }
.guide-layout{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:900px){
  .guide-layout{ grid-template-columns:minmax(0,1fr) 320px; align-items:start; }
  .sticky-side{ position:sticky; top:16px; height:fit-content; }
}
.container{ max-width:1100px; margin:0 auto; }

.guide-hero { margin: 1.25rem 0 1.75rem; }
.guide-hero img { display:block; width:100%; height:auto; border-radius:12px; }

/* === Normalize guide images (hero + in-body) === */
.blog-article .guide-hero,
.blog-article .guide-inline {
  margin: 1.5rem 0;
  text-align: center;
}

.blog-article .guide-hero img,
.blog-article .guide-inline img {
  max-width: 780px;     /* match hero look */
  width: 100%;
  height: auto !important;   /* kill any height:100% from global styles */
  aspect-ratio: auto;        /* don’t force a ratio */
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}