/* ============================================================================
   home.css — layout for the redesigned ESG home page (home.html only).

   Reuses ALL existing typography, buttons and spacing from main.css:
     headings .................. .section-title (32px) / .report-title (Montserrat 22px/600)
     body copy ................. .section-content (Arial 18px)
     CTAs ...................... .section-link (arrow link) and the .report_footer
                                 / .report-download / .report-link download button
     section vertical rhythm ... inherited from "#esg section { padding-top:95px }"
   This file ONLY adds structural layout for sections the new design introduces.
   Everything is scoped to #esg so it matches the existing cascade.
   ========================================================================== */

/* --- Hero CTA: reuse .section-link shape, made legible on the dark banner --- */
#esg section.banner .banner-content .section-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #f5f5f5;
  margin-top: 28px;
  padding-top: 0;
}
#esg section.banner .banner-content .section-link > svg path { fill: #f5f5f5; }
/* keep the masthead title + button as the top-most layer above the parallax background */
#esg section.banner .container,
#esg section.banner .banner-content { position: relative; z-index: 5; }

/* --- Vision: centered intro statement --- */
/* theme gives every section 95px top / 0 bottom; match the bottom for consistency */
#esg section.vision { text-align: center; padding-top: 95px; padding-bottom: 95px; }
#esg section.vision .section-title { text-align: center; margin: 0 auto 20px; }
#esg section.vision .section-content { max-width: 760px; margin: 0 auto; text-align: center; }

/* --- Featured Sustainability Report: reuses .framework two-column layout --- */
#esg section.report-featured .framework-content .left-content { text-align: center; }
#esg section.report-featured .framework-content .left-content img {
  width: 420px;
  max-width: 100%;
  height: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
#esg section.report-featured .framework-content .right-content .section-content + .section-content { margin-top: 16px; }
#esg section.report-featured .framework-content .right-content .section-link { margin-top: 24px; }

/* --- Progress at a Glance: the section content is one full-bleed JPEG --- */
#esg section.progress { padding: 0; }
#esg section.progress img { display: block; width: 100%; height: auto; }

/* --- Looking for past reports?: full-width band --- */
#esg section.past-reports { background-color: #0F298F; padding: 48px 0; }
#esg section.past-reports .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
#esg section.past-reports .section-title { color: #f5f5f5; margin: 0 0 6px; }
#esg section.past-reports p { color: #f5f5f5; margin: 0; font-family: Arial; font-size: 18px; line-height: 24px; }
#esg section.past-reports .section-link { color: #f5f5f5; padding-top: 0; white-space: nowrap; }
#esg section.past-reports .section-link > svg path { fill: #f5f5f5; }

/* --- Other Sustainability Resources: stacked image+text cards --- */
#esg section.resources .section-title { text-align: center; margin-bottom: 40px; }
#esg section.resources .resource-card {
  display: flex;
  gap: 30px;
  align-items: center;
  background: #F3F7FA;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 30px;
}
#esg section.resources .resource-card:last-child { margin-bottom: 0; }
#esg section.resources .resource-card .card-img {
  flex: 0 0 38%;
  max-width: 38%;
  align-self: stretch;
  object-fit: cover;
}
#esg section.resources .resource-card .card-body { flex: 1; padding: 30px 30px 30px 0; }
#esg section.resources .resource-card .card-body .report-title { padding: 0; margin: 0 0 16px; }
#esg section.resources .resource-card .card-body .section-content { margin-bottom: 12px; }
#esg section.resources .resource-card .card-body .section-link { margin-top: 8px; }
@media (max-width: 767.98px) {
  #esg section.resources .resource-card { flex-direction: column; gap: 0; }
  #esg section.resources .resource-card .card-img { flex-basis: auto; max-width: 100%; width: 100%; height: 220px; }
  #esg section.resources .resource-card .card-body { padding: 24px; }
}

/* --- Certifications: centered title + intro (existing logo grid unchanged) --- */
#esg section.certification .section-title { text-align: center; }
#esg section.certification .certification-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}

/* --- Beyond Our Certifications (SDIA) --- */
#esg .beyond-certifications {
  display: flex;
  align-items: center;
  gap: 30px;
  background: #fff;
  border-radius: 6px;
  padding: 30px 40px;
  margin-top: 48px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
#esg .beyond-certifications .beyond-logo { flex: 0 0 auto; width: 200px; height: auto; }
#esg .beyond-certifications .beyond-body .report-title { padding: 0; margin: 0 0 10px; }
#esg .beyond-certifications .beyond-body .section-link { margin-top: 14px; }
@media (max-width: 767.98px) {
  #esg .beyond-certifications { flex-direction: column; text-align: center; }
}