/* ========================================================================
   Report pages — shared CSS classes (AgriFI 5582 & ElectriFI 5584)
   Loaded from the theme: /wp-content/themes/edfi/assets/build/report-pages.css
   ======================================================================== */

/* Brand colours per page */
body.page-id-5582 { --rb-brand: #638c35; --rb-brand-bg: #f5f5f0; }
body.page-id-5584 { --rb-brand: #2C59C6; --rb-brand-bg: #eef3fb; }

/* ── Narrower wrapper + more breathing room on desktop ────────────────
   Client wanted the report to feel like a website article rather than a
   PDF spread, so we tighten the content column and add vertical air
   between blocks. Hero / full-bleed media keep their own width.
   ───────────────────────────────────────────────────────────────────── */
body.page-id-5582 .wrapper,
body.page-id-5584 .wrapper {
  max-width: 1200px;
}

@media (min-width: 1024px) {
  body.page-id-5582 .content-block,
  body.page-id-5584 .content-block {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

@media (min-width: 1440px) {
  body.page-id-5582 .content-block,
  body.page-id-5584 .content-block {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

/* Hero and report header keep their original full wrapper — undo the cap */
body.page-id-5582 .report-hero .wrapper,
body.page-id-5584 .report-hero .wrapper,
body.page-id-5582 .report-header .wrapper,
body.page-id-5584 .report-header .wrapper {
  max-width: none;
}

/* ── Generic 2-col grid ─────────────────────────────────────────────── */
.rb-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.rb-cols-2.rb-cols-2--gap-32 { gap: 32px; }
.rb-cols-2.rb-cols-2--gap-48 { gap: 48px; }
.rb-cols-2.rb-cols-2--center { align-items: center; }
.rb-cols-2.rb-cols-2--start { align-items: start; }
.rb-cols-2.rb-cols-2--stretch { align-items: stretch; }
.rb-cols-2.rb-cols-2--wide-left { grid-template-columns: 1.3fr 1fr; }
.rb-cols-2.rb-cols-2--wide-right { grid-template-columns: 1fr 1.3fr; }
@media (max-width: 768px) {
  .rb-cols-2 { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ── Photo tile (At-a-Glance) ───────────────────────────────────────────
   Markup is plain HTML — img + text — so it is fully visible in the WP
   admin Text editor. CSS positions everything; no inline styles needed.
   ─────────────────────────────────────────────────────────────────────── */
.rb-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 300px;
  background-color: #222;
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate; /* keeps child z-index local */
}
.rb-tile .rb-tile__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}
.rb-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}
.rb-tile .rb-tile__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}
.rb-tile__big {
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  text-align: left;
}
.rb-tile__sub {
  font-size: 0.85rem;
  opacity: 0.92;
  margin-top: 6px;
  font-weight: 300;
  text-align: left;
}
.rb-tile__label {
  font-size: 1.45rem;
  line-height: 1.25;
  color: #fff;
  font-weight: 400;
  text-align: left;
}

/* ── report-text-image wrapper — remove side padding so block lines up
   with the rest of the content wrapper on both pages. ───────────────── */
body.page-id-5582 .report-text-image__wrapper,
body.page-id-5584 .report-text-image__wrapper {
  padding: 0 !important;
}

/* ── Semantic At-a-Glance tile (clean admin HTML, no class spam) ─────
   Markup: .rb-tiles wrapper + <figure> per tile, <img> + <figcaption>
   with <h3> (big + optional <small>) and <p> (label). ──────────────── */
.rb-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 768px) {
  .rb-tiles { grid-template-columns: 1fr !important; gap: 24px !important; }
}
.rb-tiles figure {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  min-height: 300px;
  background-color: #222;
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
}
.rb-tiles figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.rb-tiles figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.6) 100%);
  z-index: 1;
  pointer-events: none;
}
.rb-tiles figure figcaption {
  position: absolute;
  inset: 0;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  z-index: 2;
}
.rb-tiles figure figcaption h3 {
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: left;
}
.rb-tiles figure figcaption h3 small {
  display: block;
  font-size: 0.85rem;
  opacity: 0.92;
  margin-top: 6px;
  font-weight: 300;
}
.rb-tiles figure figcaption p {
  font-size: 1.45rem;
  line-height: 1.25;
  color: #fff;
  font-weight: 400;
  margin: 0;
  text-align: left;
}

/* ── report-cards block — container/grid for the .rb-deal cards ─────── */
.report-cards__subtitle { margin-bottom: 20px; }
.report-cards__subtitle h3,
.report-cards__subtitle h4 { color: var(--rb-brand); margin: 0 0 8px; }
.report-cards__grid {
  display: grid;
  gap: 20px;
}
.report-cards__grid--cols-1 { grid-template-columns: 1fr; }
.report-cards__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-cards__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.report-cards__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 768px) {
  .report-cards__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ── Deal card (company investments) ────────────────────────────────── */
.rb-deal {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rb-deal__photo {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
}
.rb-deal__body {
  padding: 18px 20px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rb-deal__name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 36px;
}
.rb-deal__name {
  color: var(--rb-brand);
  margin: 0;
  font-weight: 400;
}
.rb-deal__logo {
  max-height: 36px;
  max-width: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.rb-deal__desc {
  font-size: 0.88em;
  margin: 0;
  line-height: 1.45;
}
.rb-deal__model { font-size: 0.85em; margin: 0; }
.rb-deal__footer {
  border-top: 1px solid #e0e0e0;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--rb-brand);
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Quote box — full border in brand colour, transparent background ─── */
.rb-quote {
  border: 2px solid var(--rb-brand);
  padding: 22px 26px;
  background: transparent;
  margin: 0;
  font-style: normal;
  border-radius: 6px;
}
.rb-quote p { margin: 0 0 12px; }
.rb-quote p:last-child { margin: 0; }
.rb-quote__role { font-size: 0.92em; opacity: 0.75; }

/* ── Highlight box ──────────────────────────────────────────────────── */
.rb-highlight {
  background: var(--rb-brand-bg);
  padding: 20px 24px;
  border-radius: 4px;
}
.rb-highlight p { margin: 0; }

/* ── Section heading (single span to prevent theme flex split) ─────── */
.rb-section-title {
  display: block !important;
  font-weight: 400;
  margin: 0 0 20px;
}
.rb-section-prefix {
  opacity: 0.65;
  font-size: 0.85em;
  margin: 0 0 8px;
  font-style: italic;
}

/* ── Full-width image with overlay text (e.g. 4.6X) ───────────────── */
.rb-overlay-img {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}
.rb-overlay-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 280px;
}
.rb-overlay-img__caption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  color: #fff;
}
.rb-overlay-img__caption-big {
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.rb-overlay-img__caption-label {
  font-size: 1.05rem;
  margin-top: 4px;
  font-weight: 400;
}

/* ── Pill / instrument tag ──────────────────────────────────────────── */
.rb-pill {
  display: inline-block;
  background: var(--rb-brand);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── AgriFI-style statistic deal cards (logo on top, amount/desc/pill bottom) ─── */
.rb-stat-top { text-align: center; padding: 8px 0; }
.rb-stat-top__logo { max-height: 80px; width: auto; margin: 0 auto 16px; display: block; }
.rb-stat-top__country { margin: 0; font-size: 0.9em; opacity: 0.75; }
.rb-stat-bottom { text-align: left; padding: 8px 0; }
.rb-stat-bottom__amount { margin: 0 0 12px; }
.rb-stat-bottom__purpose { font-size: 0.92em; line-height: 1.5; margin: 0 0 16px; }
.rb-stat-bottom__amount-sub { font-weight: normal; opacity: 0.7; font-size: 0.7em; }

/* ── Plain image (rounded) ──────────────────────────────────────────── */
.rb-img { width: 100%; height: auto; display: block; border-radius: 4px; }
.rb-img--cover { object-fit: cover; }
.rb-img--mt { margin-top: 24px; }
.rb-img--sticky { position: sticky; top: 24px; }

/* ── Methodology / footnote text ────────────────────────────────────── */
.rb-footnote {
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.75;
}

/* ── Indented bullet list ───────────────────────────────────────────── */
.rb-list { padding-left: 40px; margin: 16px 0; }
.rb-list li { margin-bottom: 8px; }

/* ========================================================================
   Brand colour overrides for report-header-text / report-text-image titles
   ======================================================================== */

/* AgriFI: section titles + bullet markers in brand green */
body.page-id-5582 .report-header-text__title,
body.page-id-5582 .report-text-image__title,
body.page-id-5582 .report-text-image__title h2,
body.page-id-5582 .report-text-image__title h3 {
  color: #638c35 !important;
}
body.page-id-5582 .content-block ul li::marker,
body.page-id-5582 .content-block ol li::marker {
  color: #638c35;
}

/* ElectriFI: keep the default theme blue for titles & markers */
body.page-id-5584 .content-block ul li::marker,
body.page-id-5584 .content-block ol li::marker {
  color: #2C59C6;
}

/* Indent every bullet/ordered list inside report content (both pages) */
body.page-id-5582 .content-block ul:not(.rb-list),
body.page-id-5584 .content-block ul:not(.rb-list),
body.page-id-5582 .content-block ol:not(.rb-list),
body.page-id-5584 .content-block ol:not(.rb-list) {
  padding-left: 60px !important;
  margin: 16px 0 !important;
  list-style-position: outside;
}
body.page-id-5582 .content-block ul:not(.rb-list) li,
body.page-id-5584 .content-block ul:not(.rb-list) li,
body.page-id-5582 .content-block ol:not(.rb-list) li,
body.page-id-5584 .content-block ol:not(.rb-list) li {
  margin-bottom: 10px;
  padding-left: 6px;
}

/* ========================================================================
   Page-scoped border suppression (intro/subsection → its content)
   ======================================================================== */

/* AgriFI page */
body.page-id-5582 [id="seeds-to-transformation"] + .content-block,
body.page-id-5582 [id="2025-dealbook"] + .content-block,
body.page-id-5582 [id="overall-portfolio"] + .content-block,
body.page-id-5582 [id="impact-and-mobilisation"] + .content-block,
body.page-id-5582 [id="four-stages"] + .content-block,
/* ElectriFI page */
body.page-id-5584 [id="electrifi-2025-deals"] + .content-block,
body.page-id-5584 [id="energy-economic-cards"] + .content-block,
body.page-id-5584 [id="impact-and-mobilisation"] + .content-block {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 24px !important;
}

/* ========================================================================
   Per-page header — uses the per-page ACF override (image + repeater of
   icons) so logos render as real <img> tags with no CSS backgrounds /
   white frames. The actual image swap is handled in header-report.php.
   ======================================================================== */
body.page-id-5582 .report-header__icons,
body.page-id-5584 .report-header__icons {
  display: flex;
  gap: 28px;
  align-items: center;
}

/* ── "Index" toggle (replaces hamburger icon on report pages) ──────── */
body.page-id-5582 .report-header__toggle--text,
body.page-id-5584 .report-header__toggle--text {
  padding: 8px 18px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--rb-brand);
  text-transform: none;
  line-height: 1;
}
body.page-id-5582 .report-header__toggle--text:hover,
body.page-id-5584 .report-header__toggle--text:hover {
  opacity: 0.75;
}
body.page-id-5582 .report-header__toggle-label,
body.page-id-5584 .report-header__toggle-label {
  display: inline-block;
}

/* ── Indent sub-links under their parent in the report navigation ─── */
body.page-id-5582 .report-header__nav-sublinks,
body.page-id-5584 .report-header__nav-sublinks {
  padding-left: 20px;
  border-left: 2px solid rgba(0,0,0,0.08);
  margin-left: 4px;
}
body.page-id-5582 .report-header__nav-sublink,
body.page-id-5584 .report-header__nav-sublink {
  font-size: 0.95rem;
  padding-left: 4px;
}

/* ========================================================================
   ElectriFI hero — remove the white-filter overlay and use a soft dark
   gradient at the bottom so white text remains readable.
   ======================================================================== */
body.page-id-5584 .report-hero__image:after {
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 100%) !important;
}
body.page-id-5584 .report-hero__content,
body.page-id-5584 .report-hero__content h1,
body.page-id-5584 .report-hero__content h1 strong,
body.page-id-5584 .report-hero__content h2,
body.page-id-5584 .report-hero__content h3,
body.page-id-5584 .report-hero__content h4,
body.page-id-5584 .report-hero__content h5,
body.page-id-5584 .report-hero__content p,
body.page-id-5584 .report-hero__content em {
  color: #fff !important;
}

/* ========================================================================
   AgriFI page footer — small footer band with green logo + green text
   (added inline via a final block on the page)
   ======================================================================== */
.agrifi-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 0 20px;
  flex-wrap: wrap;
}
.agrifi-footer__logo {
  width: 130px;
  height: 44px;
  background: url('https://edfi.inthemaking.be/wp-content/uploads/2026/05/header-agrifi-logo-clean.jpg') no-repeat left center / contain;
  flex-shrink: 0;
}
.agrifi-footer__text {
  color: #638c35;
  font-size: 0.92rem;
  flex: 1;
  text-align: right;
}
.agrifi-footer__icons {
  display: flex;
  gap: 24px;
  align-items: center;
}
.agrifi-footer__icons-eu {
  width: 120px;
  height: 40px;
  background: url('https://edfi.inthemaking.be/wp-content/uploads/2026/05/header-funded-eu-clean.jpg') no-repeat center / contain;
}
.agrifi-footer__icons-gg {
  width: 70px;
  height: 50px;
  background: url('https://edfi.inthemaking.be/wp-content/uploads/2026/05/header-global-gateway-clean.jpg') no-repeat center / contain;
}