/* ══════════════════════════════════════
   SUSTAINABILITY PAGE CSS
══════════════════════════════════════ */

/* ─── HERO ─── */
.sust-hero {
  position:relative; min-height:180px;
  display:flex; align-items:center;
  padding:48px 40px; overflow:hidden;
}
.sust-hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center; z-index:0;
}
.sust-hero-bg::after { content:''; position:absolute; inset:0; background:#0F57A4CC; }
.sust-hero-content { position:relative; z-index:1; width:100%; }
.sust-hero h1 { font-size:42px; font-weight:700; color:#fff; margin-bottom:12px; }
.sust-hero p { font-size:15px; color:rgba(255,255,255,0.85); max-width:820px; line-height:1.6; }

/* ─── BREADCRUMB ─── */
.breadcrumb-bar { background:#fff; padding:14px 0 20px; }
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; list-style:none; }
.breadcrumb a { color:#0F57A4; }
.breadcrumb a:hover { color:#0d4a8e; }
.breadcrumb-sep { color:#bbb; display:flex; align-items:center; }
.breadcrumb-current { color:#020A12; }

/* ─── LAYOUT ─── */
.sust-page-wrap { max-width:1280px; margin:0 auto; padding:0 40px; }
.sust-layout { display:grid; grid-template-columns:220px 1fr; min-height:600px; gap:0; }

/* ─── SIDEBAR ─── */
.sust-sidebar { padding:40px 0; position:sticky; top:72px; height:fit-content; }
.sust-nav { list-style:none; }
.sust-nav li a {
  display:block; padding:12px 16px 12px 0;
  font-size:14px; font-weight:500; color:#020A12;
  border-left:3px solid transparent;
  transition:color .2s, border-color .2s, background .2s;
}
.sust-nav li a:hover { color:#0F57A4; }
.sust-nav li a.active {
  color:#0F57A4; font-weight:700;
  border-left-color:#0F57A4;
  background:#F7F7F7; padding-left:16px;
}

/* ─── CONTENT ─── */
.sust-content { padding:40px 0 40px 48px; }

/* Section wrapper */
.sust-section { background:#F7F7F7; border-radius:12px; padding:40px; margin-bottom:32px; }
.sust-section-title { font-size:36px; font-weight:400; color:#0C2545; margin-bottom:28px; }

/* ─── OVERVIEW ─── */
.overview-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px; }
.overview-card {
  background:#fff; border-radius:8px; border:1px solid #E5E5E5; padding:24px 28px;
}
.overview-card-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.overview-card-icon { width:28px; height:28px; flex-shrink:0; }
.overview-card-title { font-size:16px; font-weight:600; color:#0C2545; }
.overview-card-desc { font-size:13.5px; color:#020A12; line-height:1.6; }
.overview-body-text { font-size:14px; color:#020A12; line-height:1.75; }

/* ─── EHSS ─── */
.ehss-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:32px; }
.ehss-card-img { width:100%; height:180px; object-fit:cover; border-radius:8px; margin-bottom:16px; display:block; }
.ehss-card-img-placeholder { width:100%; height:180px; background:#dde8f5; border-radius:8px; margin-bottom:16px; }
.ehss-card-title { font-size:16px; font-weight:700; color:#0C2545; margin-bottom:8px; }
.ehss-card-desc { font-size:13.5px; color:#020A12; line-height:1.6; margin-bottom:12px; }
.ehss-bullets { list-style:none; display:flex; flex-direction:column; gap:4px; }
.ehss-bullets li { font-size:13.5px; color:#020A12; display:flex; align-items:flex-start; gap:8px; line-height:1.5; }
.ehss-bullets li::before { content:'·'; font-size:18px; color:#0C2545; flex-shrink:0; line-height:1.3; font-weight:700; }

/* Supply Chain */
.supply-chain-box { background:#fff; border-radius:8px; border:1px solid #E5E5E5; padding:32px; }
.supply-chain-title { font-size:28px; font-weight:400; color:#0C2545; margin-bottom:6px; text-align:center; }
.supply-chain-sub { font-size:14px; color:#020A12; text-align:center; margin-bottom:28px; }
.supply-chain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.supply-card { background:#F7F7F7; border-radius:6px; padding:20px; }
.supply-card-label { font-size:11px; color:#020A12; text-transform:uppercase; letter-spacing:.7px; margin-bottom:6px; }
.supply-card-value { font-size:15px; font-weight:600; color:#0C2545; }

/* ─── OPERATIONS ─── */
.ops-intro-title { font-size:20px; font-weight:500; color:#0C2545; margin-bottom:4px; }
.ops-intro-sub { font-size:14px; color:#020A12; margin-bottom:24px; }
.sust-accordion { display:flex; flex-direction:column; border-radius:8px; overflow:hidden; border:1px solid #E5E5E5; }
.sust-accordion-item { border-bottom:1px solid #E5E5E5; background:#fff; }
.sust-accordion-item:last-child { border-bottom:none; }
.sust-accordion-btn {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; cursor:pointer;
  font-size:18px; font-weight:400; color:#0C2545;
  background:#fff; border:none; width:100%; text-align:left;
  font-family:inherit; transition:background .2s;
}
.sust-accordion-btn:hover { background:#F7F7F7; }
.sust-accordion-btn svg { width:20px; height:20px; color:#020A12; transition:transform .25s; flex-shrink:0; }
.sust-accordion-btn.open svg { transform:rotate(180deg); }
.sust-accordion-body { display:none; padding:0 24px 20px; }
.sust-accordion-body.open { display:block; }
.sust-accordion-row { display:flex; align-items:flex-start; gap:6px; font-size:14px; color:#020A12; margin-bottom:10px; line-height:1.6; }
.sust-accordion-row:last-child { margin-bottom:0; }
.sust-accordion-row strong { color:#0C2545; font-weight:700; white-space:nowrap; }

/* ─── MOBILE ─── */
@media (max-width:1024px) {
  .ehss-grid { grid-template-columns:1fr 1fr; }
  .supply-chain-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .sust-page-wrap { padding:0 20px; }
  .sust-layout { grid-template-columns:1fr; }
  .sust-sidebar { display:none; }
  .sust-content { padding:24px 0; }
  .sust-section { padding:24px 20px; border-radius:8px; }
  .sust-section-title { font-size:26px; }
  .overview-cards { grid-template-columns:1fr; }
  .ehss-grid { grid-template-columns:1fr; }
  .supply-chain-grid { grid-template-columns:1fr; }
  .sust-hero { padding:36px 20px; }
  .sust-hero h1 { font-size:28px; }
}