/* Article layout for the Eleventy collection pages (insights/reports/
   newsletters): two columns (content + right sidebar) with Further Reading
   below. The article prose itself (.brxe-post-content) is still styled by the
   retained Bricks/wp-block CSS in the bundle; this file only adds the wrapper,
   sidebar widgets, and further-reading grid. Brand: Montserrat display, Lato
   body, palette #2364a9 / #123255 / #3fa6d9 / #ff7f01. */

/* Match the site's .content-container (width:90%, max-width:1536) so the
   article's left edge lines up with the header logo and footer. */
.si-article-wrap {
  width: 90%;
  max-width: 1536px;
  margin: 0 auto;
  padding: 40px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}

/* The article body is the original scraped content region (Bricks markup +
   per-page inline CSS), so it styles itself; we only constrain the column.
   The original .content-container is width:90% + max-width:1536px (sized for a
   full-width single column); inside our narrower grid column that leaves a big
   gap before the sidebar, so make those containers fill the column instead. */
.si-article { min-width: 0; }
/* post-554.min.css (article template) caps the post-body block at width:60%;
   let it fill the content column. The original .content-container (width:90%)
   is kept as-is so its side gutters / Bricks padding are retained. */
.si-article #brxe-erhova { width: 100% !important; max-width: 100% !important; }
/* The body's item-titles are bold text in paragraphs (margin-top:0 from
   Bricks), so they sit tight under the preceding image/columns block. In the
   narrower 2-col layout that reads as cramped — add vertical separation around
   the major body blocks so each section/item breathes. Scoped to the new
   layout; the original scraped pages are untouched. */
.si-article .brxe-post-content .wp-block-columns { gap: 2em; margin-top: 1.25em; margin-bottom: 1.25em; }
.si-article .brxe-post-content p:has(> strong:only-child) { margin-top: 1.5em; }

/* ---- Right sidebar ---- */
.si-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 28px; }
.si-widget {
  background: #fff; border: 1px solid #e7e4de; border-radius: 16px; padding: 22px 22px 8px;
  box-shadow: 0 1px 2px rgba(18, 50, 85, .05), 0 14px 32px -22px rgba(18, 50, 85, .3);
}
.si-widget-title {
  font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #2364a9;
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid rgba(255, 127, 1, .35);
}
.si-widget-sub {
  font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: #5d6b80;
  margin: 18px 0 8px;
}
.si-pick {
  display: flex; gap: 12px; align-items: center; padding: 9px 0; text-decoration: none;
  border-bottom: 1px solid #f0ede7;
}
.si-pick:last-child { border-bottom: 0; }
.si-pick img { width: 56px; height: 42px; object-fit: cover; border-radius: 7px; flex: 0 0 auto; }
.si-pick span {
  font-family: "Montserrat", sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1.3;
  color: #14181f;
}
.si-pick:hover span { color: #2364a9; }

.si-latest {
  display: block; padding: 8px 0; border-bottom: 1px solid #f0ede7; text-decoration: none;
  font-family: "Montserrat", sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: #14181f;
}
.si-latest:last-child { border-bottom: 0; }
.si-latest:hover { color: #2364a9; }

/* ---- Further reading ---- */
.si-further { width: 90%; max-width: 1536px; margin: 64px auto 0; padding: 40px 0 72px; border-top: 1px solid #e7e4de; }
.si-further-title {
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 26px;
  letter-spacing: -.01em; color: #14181f; margin: 0 0 28px;
}
.si-further-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.si-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: #fff; border: 1px solid #e7e4de; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(18, 50, 85, .05), 0 14px 30px -20px rgba(18, 50, 85, .28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.si-card:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(18, 50, 85, .08), 0 24px 44px -18px rgba(18, 50, 85, .4); }
.si-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.si-card-cat {
  font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: #ff7f01; padding: 16px 16px 0;
}
.si-card-title {
  font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 700; line-height: 1.35;
  color: #14181f; padding: 6px 16px 18px;
}

/* ---- Mobile: sidebar stacks below the article ---- */
@media (max-width: 900px) {
  .si-article-wrap { grid-template-columns: 1fr; gap: 36px; }
  .si-sidebar { position: static; }
  .si-further-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .si-further-grid { grid-template-columns: 1fr; }
}