/* article-extras.css
   Reusable additions for long-form articles: responsive tables + diagram figures.
   Brand-consistent (uses the same palette as style.css). Loaded only by article pages
   that need tables/diagrams. CSP-safe: external same-origin stylesheet, no inline styles.
   STAGE 2 NOTE: can be merged into style.css or kept as a separate file. */

/* ---- diagram / figure ---- */
.article-wrap figure.diagram{
  margin:1.8rem 0;
  padding:0;
  overflow:hidden;
}
.article-wrap figure.diagram img,
.article-wrap figure.diagram video{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border:1px solid #E2E8ED;
  border-radius:8px;
  background:#fff;
}
.article-wrap figure.diagram figcaption{
  margin-top:0.6rem;
  font-size:0.8rem;
  color:#9aa;
  line-height:1.6;
  font-style:italic;
}
.article-wrap figure.diagram a{ display:block; }
.article-wrap figure.diagram a img{ cursor:zoom-in; }
.fig-hint{ font-style:normal; color:#b0bec8; }

/* ---- data tables ---- */
.table-scroll{
  overflow-x:auto;
  margin:2rem 0 2.4rem;
  -webkit-overflow-scrolling:touch;
}
table.data{
  width:100%;
  border-collapse:collapse;
  font-size:0.9rem;
  min-width:520px;
}
table.data th,
table.data td{
  text-align:left;
  padding:0.7rem 0.85rem;
  vertical-align:top;
  line-height:1.55;
}
table.data thead th{
  background:var(--navy);
  color:#fff;
  font-weight:700;
  font-size:0.82rem;
}
table.data tbody tr:nth-child(odd){ background:var(--cloud); }
table.data tbody tr:nth-child(even){ background:#fff; }
table.data tbody td{ border-bottom:1px solid #E6EBEF; color:var(--text); }
table.data tbody td strong{ color:var(--navy); }
table.data caption{
  caption-side:top;
  text-align:left;
  font-size:0.8rem;
  color:#9aa;
  margin-bottom:0.5rem;
  font-style:italic;
}

/* term chips used inline in prose */
.term{
  font-weight:700;
  color:var(--navy);
}

/* ---- maritime hero photo binding (matches ph-* pattern in style.css) ----
   Navy base colour shows through if the image is missing, so the hero never breaks. */
.ph-maritime{
  background-color:var(--navy);
  background-image:linear-gradient(to right,rgba(3,35,77,0.92) 30%,rgba(3,35,77,0.55)),url('../assets/img/Carbon_accounting_shippingv2.png');
}
.page-hero.has-photo.ph-maritime{ background-position:50% 85%; }

/* ---- ESG data management article hero ---- */
.ph-esg-data{
  background-color:var(--navy);
  background-image:linear-gradient(to right,rgba(3,35,77,0.92) 30%,rgba(3,35,77,0.66)),url('../assets/img/Carbon_and_data.png');
}
.page-hero.has-photo.ph-esg-data{ background-position:50% 50%; padding-bottom:8rem; }
.ph-esg-data .crumbs{ color:var(--amber); }
.ph-esg-data ~ section.bg-cloud{ padding-top:0 !important; }

/* ---- ECGT article hero ---- */
.ph-ecgt{
  background-color:var(--navy);
  background-image:linear-gradient(to right,rgba(3,35,77,0.92) 30%,rgba(3,35,77,0.6)),url('../assets/img/tungart7-truck-10172919.jpg');
}
.page-hero.has-photo.ph-ecgt{ background-position:50% 60%; }

/* ---- ESG pillar headings (E / S / G colour coding) ---- */
.pillar-head{ font-size:1rem; font-weight:700; margin:1.8rem 0 0.5rem; text-transform:uppercase; letter-spacing:0.05em; }
.pillar-e{ color:#4A7C59; }
.pillar-s{ color:#C49A00; }
.pillar-g{ color:#1A9AC1; }

/* ---- Signal cards (Risk / Cost-saving / Opportunity) ---- */
.signal-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  margin:2rem 0;
}
.signal-card{
  border-radius:10px;
  padding:1.2rem 1.4rem;
  border-left:4px solid currentColor;
}
.signal-card p{ margin:0; font-size:0.9rem; line-height:1.55; color:var(--text); }
.signal-tag{
  display:inline-block;
  font-size:0.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  border-radius:4px;
  padding:0.15rem 0.5rem;
  margin-bottom:0.6rem;
  color:#fff;
}
.signal-risk{ background:#FEF2F2; border-color:#DC2626; }
.signal-risk .signal-tag{ background:#DC2626; }
.signal-cost{ background:#F0FDF4; border-color:#4A7C59; }
.signal-cost .signal-tag{ background:#4A7C59; }
.signal-opp{ background:#EFF9FF; border-color:#1A9AC1; }
.signal-opp .signal-tag{ background:#1A9AC1; }

/* ---- Before / After comparison block ---- */
.before-after{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin:2rem 0;
}
@media(max-width:540px){ .before-after{ grid-template-columns:1fr; } }
.ba-col{
  border-radius:10px;
  padding:1.2rem 1.4rem;
}
.ba-before{ background:#FEF2F2; }
.ba-after{ background:#F0FDF4; }
.ba-label{
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin:0 0 0.7rem;
  color:var(--navy);
}
.ba-col ul{ margin:0; padding-left:1.2rem; }
.ba-col ul li{ font-size:0.88rem; line-height:1.55; margin-bottom:0.35rem; color:var(--text); }

/* ---- Related articles footer links ---- */
.related-articles{
  margin:2.4rem 0 1.2rem;
  padding:1.4rem 1.6rem;
  background:var(--cloud);
  border-radius:10px;
}
.related-label{
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--navy);
  margin:0 0 0.7rem;
}
.related-link{
  display:block;
  font-size:0.9rem;
  color:var(--teal);
  text-decoration:none;
  margin-bottom:0.45rem;
  line-height:1.5;
}
.related-link:hover{ text-decoration:underline; }

/* ---- article sheet: reading column as a white card on a soft grey band ----
   Makes the side margins read as intentional instead of empty white gutters.
   Reading width stays constrained for legibility (~820px). */
.article-band{ padding-top:0; padding-bottom:0; display:flow-root; }
.article-band .article-wrap{
  background:var(--white);
  max-width:840px;
  border-radius:14px;
  box-shadow:0 2px 22px rgba(3,35,77,0.07);
  padding:2.6rem 3rem 3rem;
  margin:3.2rem auto;
}
@media(max-width:640px){
  .article-band .article-wrap{ padding:1.8rem 1.3rem 2.2rem; border-radius:10px; margin:1.8rem auto; }
}

/* ---- inset olive pull-card (sits inside the article column, no full-bleed band) ---- */
.article-wrap .pull-card{
  background:linear-gradient(135deg,#587244,#415836);
  border-radius:12px;
  padding:1.7rem 1.9rem;
  margin:2.2rem 0;
}
.article-wrap .pull-card .pull-label{
  color:var(--amber);
  font-size:0.71rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:0.6rem;
  display:flex;
  align-items:center;
  gap:0.55rem;
}
.article-wrap .pull-card .pull-label::before{
  content:"";
  width:26px;
  height:3px;
  border-radius:2px;
  background:var(--amber);
}
.article-wrap .pull-card .pull-text{
  position:relative;
  color:#fff;
  font-size:clamp(1.02rem,1.7vw,1.24rem);
  line-height:1.42;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
}
.article-wrap .pull-card .pull-text::before{
  content:"\201C";
  position:absolute;
  top:-1.3rem;
  left:-0.15rem;
  font-size:3.2rem;
  font-weight:700;
  color:var(--amber);
  opacity:0.45;
  line-height:1;
}