/* SourceForge Articles — clean index layout
   Scope: /articles/ index. Removes right sidebar, featured hero + 3-col card grid. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

.sfa-index {
  --sfa-ink: #1d2230;
  --sfa-body: #4a5163;
  --sfa-muted: #7a8193;
  --sfa-line: #e7e9ef;
  --sfa-accent: #ff6600;
  --sfa-link: #1b5fc1;
  --sfa-bg: #ffffff;
  --sfa-soft: #f5f6f9;
  --sfa-max: 1200px;
}

/* ---------- kill sidebar, go full width ---------- */
.sfa-index .l-two-column-page { display: block !important; background: var(--sfa-bg) !important; }
.sfa-index .l-side-column,
.sfa-index .l-gutter { display: none !important; }
.sfa-index .l-content-column { width: 100% !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; }

.sfa-index .blog-body {
  max-width: var(--sfa-max);
  margin: 0 auto !important;
  padding: 0 24px 64px !important;
  font-family: 'Figtree', 'Lato', system-ui, sans-serif;
  color: var(--sfa-body);
  background: transparent !important;
}
.sfa-index .blog-body .row { max-width: none !important; margin: 0 !important; }
.sfa-index .blog-body .columns { padding: 0 !important; float: none !important; width: 100% !important; }

/* ---------- page header ---------- */
.sfa-index .blog-header { position: relative; padding: 36px 0 8px !important; background: none !important; height: auto !important; }
.sfa-index .blog-header .backdrop { display: none !important; }
.sfa-index .blog-header .breadcrumbs { margin: 0 0 6px !important; padding: 0 !important; font-size: 13px; color: var(--sfa-muted); display: flex; gap: 4px; }
.sfa-index .blog-header .breadcrumbs a,
.sfa-index .blog-header .breadcrumbs p { color: var(--sfa-muted) !important; margin: 0 !important; font-size: 13px !important; }
.sfa-index .blog-header h1 {
  font-family: 'Figtree', sans-serif !important; font-weight: 800 !important;
  font-size: 34px !important; line-height: 1.15 !important; letter-spacing: -0.01em;
  color: var(--sfa-ink) !important; margin: 0 !important; padding: 0 !important;
}
.sfa-index .cat-nav-wrapper { display: none !important; }

/* ---------- featured hero ---------- */
.sfa-index .feature-article { margin: 28px 0 48px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.sfa-index .feature-article > .columns {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 40px; align-items: start;
}
.sfa-index .feature-article .thumbnail { grid-column: 1; grid-row: 1 / span 5; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.sfa-index .feature-article .thumbnail img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block; }
.sfa-index .feature-article .sfa-eyebrow { grid-column: 2; margin-top: 6px; }
.sfa-index .feature-article h1 { grid-column: 2; margin: 8px 0 14px !important; padding: 0 !important; line-height: 1.12 !important; }
.sfa-index .feature-article h1 a {
  font-family: 'Figtree', sans-serif !important; font-weight: 700 !important;
  font-size: 38px !important; letter-spacing: -0.015em; color: var(--sfa-ink) !important; text-decoration: none !important;
}
.sfa-index .feature-article h1 a:hover { color: var(--sfa-accent) !important; }
.sfa-index .feature-article p { grid-column: 2; grid-row: 3; font-size: 16px !important; line-height: 1.55 !important; color: var(--sfa-body) !important; margin: 0 0 18px !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sfa-index .feature-article .meta { grid-column: 2; grid-row: 4; }

/* ---------- shared bits ---------- */
.sfa-index .sfa-eyebrow {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sfa-link); text-decoration: none !important; margin: 0 0 8px;
}
.sfa-index .blog-body .meta {
  display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 14px !important; color: var(--sfa-body) !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.sfa-index .blog-body .meta .author-image {
  width: 36px; height: 36px; border-radius: 50%; flex: none; margin-right: 4px !important;
  background: var(--sfa-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='18' fill='%23ff6600'/%3E%3Csvg x='7.5' y='8.6' width='21' height='18.4' viewBox='0 0 117.2 102.6' fill='%23fff'%3E%3Cpath d='M66.9,54.5c0-19.1-6.8-27.8-10.4-31.1c-0.7-0.6-1.8-0.1-1.7,0.9c0.7,10.8-12.9,13.5-12.9,30.4h0c0,0,0,0.1,0,0.1c0,10.3,7.8,18.7,17.4,18.7c9.6,0,17.4-8.4,17.4-18.7c0,0,0-0.1,0-0.1h0c0-4.8-1.8-9.4-3.6-12.8c-0.4-0.7-1.4-0.4-1.3,0.2C75.1,56.7,66.9,65.7,66.9,54.5z'/%3E%3Cpath d='M46.2,94.8c-0.4,0-0.9-0.2-1.2-0.5L0.5,49.8c-0.6-0.6-0.6-1.7,0-2.4l47-47C47.8,0.2,48.2,0,48.6,0h13.5c0.8,0,1.3,0.5,1.5,1c0.2,0.5,0.2,1.2-0.4,1.8L19.1,47c-0.9,0.9-0.9,2.3,0,3.2L54,85.2c0.6,0.6,0.6,1.7,0,2.4l-6.7,6.8C47,94.6,46.6,94.8,46.2,94.8z'/%3E%3Cpath d='M55.1,102.6c-0.8,0-1.3-0.5-1.5-1c-0.2-0.5-0.2-1.2,0.4-1.8l44.2-44.2c0.4-0.4,0.7-1,0.7-1.6c0-0.6-0.2-1.2-0.7-1.6L63.2,17.4c-0.6-0.6-0.6-1.7,0-2.4l6.8-6.8c0.3-0.3,0.7-0.5,1.2-0.5S72,8,72.3,8.3l44.4,44.5c0.3,0.3,0.5,0.7,0.5,1.2s-0.2,0.9-0.5,1.2l-47,47c-0.3,0.3-0.7,0.5-1.2,0.5H55.1z'/%3E%3C/svg%3E%3C/svg%3E") center/cover no-repeat !important;
  display: inline-block !important; float: none !important;
}
.sfa-index .blog-body .meta sm { font-weight: 600; color: var(--sfa-ink); }
.sfa-index .blog-body .meta .sfa-author { font-weight: 600; color: var(--sfa-link); }
.sfa-index .blog-body .meta time { color: var(--sfa-muted); }
.sfa-index .blog-body .meta time::before { content: "·"; margin: 0 6px 0 2px; color: var(--sfa-muted); }

/* ---------- filter / search toolbar ---------- */
.sfa-index .sfa-toolbar {
  display: flex; align-items: center; gap: 16px; padding: 14px 0; margin: 0 0 28px;
  border-top: 1px solid var(--sfa-line); border-bottom: 1px solid var(--sfa-line);
}
.sfa-index .sfa-toolbar .sfa-label { font-size: 15px; color: var(--sfa-body); flex: none; }
.sfa-index .sfa-pills { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.sfa-index .sfa-pills::-webkit-scrollbar { display: none; }
.sfa-index .sfa-pill {
  flex: none; padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--sfa-ink) !important; text-decoration: none !important; white-space: nowrap; transition: background .15s, color .15s;
}
.sfa-index .sfa-pill:hover { background: var(--sfa-soft); }
.sfa-index .sfa-pill.is-active { background: var(--sfa-accent); color: #fff !important; }
.sfa-index .sfa-search { display: flex; align-items: center; flex: none; margin: 0 !important; position: relative; }
.sfa-index .sfa-search input[type=text] {
  width: 220px; height: 38px !important; margin: 0 !important; padding: 0 14px 0 36px !important;
  border: 1px solid var(--sfa-line) !important; border-radius: 999px !important; box-shadow: none !important;
  font: 14px 'Figtree', sans-serif !important; color: var(--sfa-ink); background: var(--sfa-soft) !important;
}
.sfa-index .sfa-search input[type=text]:focus { outline: none; border-color: var(--sfa-accent) !important; background: #fff !important; }
.sfa-index .sfa-search::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8193' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sfa-index .sfa-search input[type=submit] { display: none !important; }

/* ---------- card grid ---------- */
.sfa-index .article-wrapper { padding: 0 !important; background: none !important; }
.sfa-index .article-wrapper > .columns {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px;
}
.sfa-index .article-wrapper article {
  display: flex !important; flex-direction: column; margin: 0 !important; padding: 0 0 28px !important;
  border: 0 !important; border-bottom: 1px solid var(--sfa-line) !important; background: none !important; box-shadow: none !important;
}
.sfa-index .article-wrapper article .thumbnail { width: 100% !important; float: none !important; margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; }
.sfa-index .article-wrapper article .thumbnail img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block; }
.sfa-index .article-wrapper article .wrapper { display: flex; flex-direction: column; flex: 1; width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; }
.sfa-index .article-wrapper article .heading { order: 1; margin: 0 !important; padding: 0 !important; }
.sfa-index .article-wrapper article h2 { margin: 0 0 10px !important; padding: 0 !important; line-height: 1.25 !important; }
.sfa-index .article-wrapper article h2 a {
  font-family: 'Figtree', sans-serif !important; font-weight: 700 !important; font-size: 21px !important;
  color: var(--sfa-ink) !important; text-decoration: none !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sfa-index .article-wrapper article h2 a:hover { color: var(--sfa-accent) !important; }
.sfa-index .article-wrapper article .entry { order: 2; margin: 0 0 18px !important; padding: 0 !important; }
.sfa-index .article-wrapper article .entry p {
  font-size: 15px !important; line-height: 1.55 !important; color: var(--sfa-body) !important; margin: 0 !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sfa-index .article-wrapper article .article-buttons { display: none !important; }
.sfa-index .article-wrapper article .meta { order: 3; margin-top: auto !important; }

/* ---------- pagination ---------- */
.sfa-index .nav-archive {
  grid-column: 1 / -1; display: flex !important; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 16px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 15px;
}
.sfa-index .nav-archive * { float: none !important; }
.sfa-index .nav-archive a,
.sfa-index .nav-archive span {
  min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--sfa-ink) !important; text-decoration: none !important; font-weight: 600; background: none !important; border: 0 !important;
}
.sfa-index .nav-archive a:hover { background: var(--sfa-soft) !important; }
.sfa-index .nav-archive .current { background: var(--sfa-accent) !important; color: #fff !important; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .sfa-index .article-wrapper > .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sfa-index .feature-article h1 a { font-size: 30px !important; }
}
@media (max-width: 720px) {
  .sfa-index .blog-body { padding: 0 16px 48px !important; }
  .sfa-index .feature-article > .columns { display: block !important; }
  .sfa-index .feature-article .thumbnail { margin-bottom: 18px !important; }
  .sfa-index .feature-article h1 a { font-size: 26px !important; }
  .sfa-index .article-wrapper > .columns { grid-template-columns: minmax(0, 1fr); }
  .sfa-index .sfa-toolbar { flex-wrap: wrap; }
  .sfa-index .sfa-search, .sfa-index .sfa-search input[type=text] { width: 100%; }
}

/* ---------- fixes ---------- */
.sfa-index .blog-body .main-content { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
.sfa-index .blog-body .row.feature-article { margin: 24px 0 56px !important; }
.sfa-index .blog-body .thumbnail { height: auto !important; max-height: none !important; overflow: visible !important; }
.sfa-index .blog-body .thumbnail a { display: block; }
.sfa-index .blog-body .thumbnail img { max-width: 100% !important; }
.sfa-index .blog-body .thumbnail a:hover img { opacity: .92; }
.sfa-index .sfa-pills { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); padding-right: 40px; }
.sfa-index .blog-body .thumbnail { display: block !important; }