/* SDG pages: index + detail */

/* ── Detail page ─────────────────────────────────────────────────────────── */
.sdg-hero {
  background: var(--sdg-color);
  color: #fff;
  padding: 2rem 0 1.5rem;
}
.sdg-hero-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.sdg-hero img { width: 160px; height: 160px; border-radius: 16px; flex-shrink: 0; }
.sdg-hero h1 { font-size: 2.75rem; font-weight: 800; margin: 0; }
.sdg-hero .sdg-sub { font-size: 1.1rem; opacity: .85; margin-top: .4rem; }
.sdg-body-content { padding: 2.5rem 0; }
.sdg-description { line-height: 1.8; font-size: 1rem; color: var(--text); }
.sdg-description img { max-width: 100%; border-radius: 10px; }
.sdg-highlight-img { max-width: 480px; width: 100%; border-radius: 12px; display: block; margin: 1.5rem 0; }
.sdg-learn-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.4rem;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: var(--sdg-color);
  transition: opacity .15s;
}
.sdg-learn-btn:hover { opacity: .82; color: #fff; }
.sdg-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.71rem 0;
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}
.sdg-nav-link {
  display: flex;
  align-items: center;
  gap: .86rem;
  text-decoration: none;
  color: var(--muted);
  font-size: .98rem;
  font-weight: 600;
  transition: color .15s;
}
.sdg-nav-link:hover { color: var(--text); }
.sdg-nav-link img { width: 55px; height: 55px; border-radius: 8px; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .85rem;
  margin-bottom: 1rem;
}
.back-link:hover { color: #fff; }

/* ── Index page ──────────────────────────────────────────────────────────── */
.sdg-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.sdg-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.sdg-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.1); color: var(--text); }
.sdg-card-top { height: 5px; }
.sdg-card-body { padding: .85rem; display: flex; align-items: flex-start; gap: .75rem; }
.sdg-card-body img { width: 52px; height: 52px; border-radius: 6px; flex-shrink: 0; }
.sdg-card-num { font-size: .65rem; font-weight: 700; color: var(--muted); }
.sdg-card-title { font-size: .82rem; font-weight: 700; line-height: 1.3; margin: .1rem 0 0; }
.sdg-card-desc { font-size: .72rem; line-height: 1.4; color: var(--muted); margin: .3rem 0 0; }

/* ── Rich content (admin-authored description) ───────────────────────────── */
.sdg-content img { max-width: 100%; height: auto; }
/* display:block (not table) so the last child's bottom margin still collapses as before */
.sdg-content::after { content: ""; display: block; clear: both; }

.sdg-content .sdg-text-left   { text-align: left; }
.sdg-content .sdg-text-center { text-align: center; }
.sdg-content .sdg-text-right  { text-align: right; }
.sdg-content .sdg-text-justify { text-align: justify; }

/* Image sizes (class on the img) */
.sdg-content img.sdg-img-small  { width: 30%; }
.sdg-content img.sdg-img-medium { width: 50%; }
.sdg-content img.sdg-img-large  { width: 75%; }
.sdg-content img.sdg-img-full   { width: 100%; }

/* Image alignment (class on the img) */
.sdg-content img.sdg-img-left   { float: left;  margin: 0 1.25rem 1rem 0; }
.sdg-content img.sdg-img-right  { float: right; margin: 0 0 1rem 1.25rem; }
.sdg-content img.sdg-img-center { display: block; margin-left: auto; margin-right: auto; }

/* Figures */
.sdg-content figure.image { margin: 1.25rem 0; max-width: 100%; }
.sdg-content figure.image > img { width: 100%; display: block; }
.sdg-content figure.image > figcaption {
  font-size: .9rem;
  color: var(--muted, #6c757d);
  text-align: center;
  margin-top: .5rem;
  line-height: 1.5;
}

/* Figure size: from the inner img classes or the figure itself */
.sdg-content figure.image:has(> img.sdg-img-small),
.sdg-content figure.image.sdg-img-small   { width: 30%; }
.sdg-content figure.image:has(> img.sdg-img-medium),
.sdg-content figure.image.sdg-img-medium  { width: 50%; }
.sdg-content figure.image:has(> img.sdg-img-large),
.sdg-content figure.image.sdg-img-large   { width: 75%; }
.sdg-content figure.image:has(> img.sdg-img-full),
.sdg-content figure.image.sdg-img-full    { width: 100%; }

/* Figure alignment */
.sdg-content figure.image:has(> img.sdg-img-left),
.sdg-content figure.image.sdg-img-left    { float: left;  margin: .25rem 1.25rem 1rem 0; }
.sdg-content figure.image:has(> img.sdg-img-right),
.sdg-content figure.image.sdg-img-right   { float: right; margin: .25rem 0 1rem 1.25rem; }
.sdg-content figure.image:has(> img.sdg-img-center),
.sdg-content figure.image.sdg-img-center  { display: block; margin-left: auto; margin-right: auto; }

/* Image inside a figure must not carry its own float/margins */
.sdg-content figure.image > img.sdg-img-left,
.sdg-content figure.image > img.sdg-img-right,
.sdg-content figure.image > img.sdg-img-center { float: none; margin: 0; }

/* Image rows: a paragraph holding only images, shown as equal cells (2 or 3 per row) */
.sdg-content p.sdg-gallery-2,
.sdg-content p.sdg-gallery-3 { display: grid; gap: .75rem; margin: 1.25rem 0; }
.sdg-content p.sdg-gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sdg-content p.sdg-gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sdg-content p.sdg-gallery-2 > img,
.sdg-content p.sdg-gallery-3 > img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  float: none; margin: 0; display: block; border-radius: 4px;
}
.sdg-content p.sdg-gallery-2 > br,
.sdg-content p.sdg-gallery-3 > br { display: none; }

@media (max-width: 575.98px) {
  .sdg-content p.sdg-gallery-2,
  .sdg-content p.sdg-gallery-3 { grid-template-columns: 1fr; }
  .sdg-content img.sdg-img-left,
  .sdg-content img.sdg-img-right,
  .sdg-content figure.image:has(> img.sdg-img-left),
  .sdg-content figure.image:has(> img.sdg-img-right),
  .sdg-content figure.image.sdg-img-left,
  .sdg-content figure.image.sdg-img-right {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .sdg-content img.sdg-img-small,
  .sdg-content figure.image:has(> img.sdg-img-small),
  .sdg-content figure.image.sdg-img-small { width: 60%; }
  .sdg-content img.sdg-img-medium,
  .sdg-content img.sdg-img-large,
  .sdg-content img.sdg-img-full,
  .sdg-content figure.image:has(> img.sdg-img-medium),
  .sdg-content figure.image:has(> img.sdg-img-large),
  .sdg-content figure.image:has(> img.sdg-img-full),
  .sdg-content figure.image.sdg-img-medium,
  .sdg-content figure.image.sdg-img-large,
  .sdg-content figure.image.sdg-img-full { width: 100%; }
}

/* Mobile overflow fix for long URLs and wide tables */
@media (max-width: 767.98px) {
  .sdg-content a { overflow-wrap: anywhere; }
}

/* Wrapper added by assets/js/sdgs.js only around tables wider than the content area */
.sdg-content .sdg-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Topics (sub pages) ──────────────────────────────────────────────────── */
.sdg-topics { margin-top: 2.5rem; }
.sdg-topics-heading { font-size: 1.4rem; font-weight: 800; margin: 0 0 1rem; color: var(--text); }

.sdg-topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: .75rem;
}
.sdg-topic-link {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  height: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
a.sdg-topic-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  border-color: var(--sdg-color);
  color: var(--text);
}
a.sdg-topic-link:focus-visible,
.sdg-topic-pager-link:focus-visible {
  outline: 3px solid var(--sdg-color);
  outline-offset: 2px;
}
.sdg-topic-num {
  flex-shrink: 0;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  background: var(--sdg-color);
  background: color-mix(in srgb, var(--sdg-color) 18%, transparent);
}
.sdg-topic-title {
  min-width: 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ── Breadcrumb (inside the hero) ────────────────────────────────────────── */
.sdg-breadcrumb { margin-bottom: 1rem; font-size: .85rem; }
.sdg-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
}
.sdg-breadcrumb li { min-width: 0; overflow-wrap: anywhere; color: #fff; }
.sdg-breadcrumb li + li::before { content: "\203A"; margin-right: .5rem; opacity: .7; }
.sdg-breadcrumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.sdg-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.sdg-breadcrumb a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sdg-breadcrumb li[aria-current="page"] { font-weight: 700; }

/* ── Sub page layout ─────────────────────────────────────────────────────── */
.sdg-subpage-article { min-width: 0; }
.sdg-subpage .sdg-topic-nav {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}
.sdg-topic-nav-heading { font-size: 1rem; font-weight: 800; margin: 0 0 .75rem; color: var(--text); }
.sdg-topic-list--compact { grid-template-columns: 1fr; gap: .35rem; }
.sdg-topic-list--compact .sdg-topic-link {
  padding: .5rem .65rem;
  border-color: transparent;
  border-left: 3px solid transparent;
  border-radius: 8px;
}
.sdg-topic-list--compact .sdg-topic-num { min-width: 1.6rem; height: 1.6rem; font-size: .75rem; }
.sdg-topic-list--compact .sdg-topic-title { font-size: .88rem; }
.sdg-topic-list--compact .is-current > .sdg-topic-link {
  font-weight: 700;
  border-left-color: var(--sdg-color);
  background: color-mix(in srgb, var(--sdg-color) 12%, transparent);
}
.sdg-topic-list--compact .is-current .sdg-topic-title { font-weight: 700; }

/* ── Topic pager + footer links ──────────────────────────────────────────── */
.sdg-topic-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.sdg-topic-pager-side { flex: 1 1 14rem; min-width: 0; }
.sdg-topic-pager-side--next { text-align: right; }
.sdg-topic-pager-link {
  display: block;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.sdg-topic-pager-link:hover { border-color: var(--sdg-color); box-shadow: 0 4px 14px rgba(0,0,0,.08); color: var(--text); }
.sdg-topic-pager-label { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); }
.sdg-topic-pager-title { display: block; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.sdg-subpage-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 1.5rem;
}
.sdg-subpage-links .sdg-nav-link { overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
  .sdg-topic-pager-side--next { text-align: left; }
}

/* Sub page hero: long topic titles stay beside the SDG icon instead of wrapping below it */
.sdg-hero--subpage .sdg-hero-inner > div { flex: 1 1 320px; min-width: 0; }
.sdg-hero--subpage h1 { overflow-wrap: anywhere; }

/* Insert-block: stat cards */
.sdg-content .sdg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.25rem 0 1.75rem; }
.sdg-content .sdg-stat { background: color-mix(in srgb, var(--sdg-color, #3B6D11) 7%, #fff); border-left: 6px solid var(--sdg-color, #3B6D11); padding: 1.5rem 1rem; text-align: center; }
.sdg-content .sdg-stat .counter { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--sdg-color, #3B6D11); font-variant-numeric: tabular-nums; }
.sdg-content .sdg-stat-label { font-weight: 700; margin-top: .6rem; }
.sdg-content .sdg-stat-sub { font-size: .9rem; color: #6c757d; margin-top: .2rem; }
/* Insert-block: rankings table */
.sdg-content table.sdg-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.75rem; font-variant-numeric: tabular-nums; }
.sdg-content table.sdg-table th, .sdg-content table.sdg-table td { border: 1px solid #dfe5d6; padding: .7rem .9rem; text-align: center; }
.sdg-content table.sdg-table thead th { background: color-mix(in srgb, var(--sdg-color, #3B6D11) 7%, #fff); font-weight: 700; }