/* ==========================================================================
   IndoSpiceHub — Export Capability Page
   Page-specific styles. Shared components live in components.css.
   ========================================================================== */

/* Page hero, hero action row, CTA band, and packaging card system now
   live in components.css as shared components. This page only adds
   what's unique to Export Capability. */

/* ---------- Operational capability cards ---------- */
.capability-grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (min-width: 640px) { .capability-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .capability-grid { grid-template-columns: repeat(3, 1fr); } }

.capability-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--color-gold-500);
  color: var(--color-gold-600);
  border-radius: 50%;
  margin-bottom: var(--space-3);
}
.capability-card__icon svg { width: 20px; height: 20px; }
.capability-card h3 {
  font-family: var(--font-body);
  font-size: var(--text-h6);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.capability-card p { color: var(--color-charcoal-60); font-size: 0.9375rem; }

/* ---------- Full-bleed operations banner (Own Warehouse / Operational Capability) ---------- */
.ops-banner {
  position: relative;
  overflow: hidden;
  min-height: 65vh;
  display: flex;
  align-items: flex-end;
}
.ops-banner__media { position: absolute; inset: 0; background: var(--color-forest-900); }
.ops-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.ops-banner__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13,26,19,0.97) 0%, rgba(13,26,19,0.55) 55%, rgba(13,26,19,0.15) 100%);
}
.ops-banner__content { position: relative; z-index: 1; color: var(--color-ivory); padding-block: var(--space-7); width: 100%; }
.ops-banner__content h2 { font-size: var(--text-h2); margin-bottom: var(--space-3); }
.ops-banner__content p { opacity: 0.85; font-size: var(--text-body-lg); max-width: 58ch; }

/* ---------- Working With IndoSpiceHub — image + numbered journey ---------- */
.journey-grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 960px) {
  .journey-grid { grid-template-columns: 1fr 1.15fr; gap: var(--space-8); }
  /* If the companion photo fails to load, the JS onerror handler (see
     export-capability.html) hides .journey-grid__media and adds this
     modifier — without it, the aspect-ratio'd image box still reserves
     its full height even though nothing paints inside it, leaving a
     large empty gap beside the process list. Collapse to one column
     and cap the list width so it reads as a deliberate layout, not a
     stray leftover half-page. */
  .journey-grid--no-media { grid-template-columns: 1fr; }
  .journey-grid--no-media .process { max-width: 640px; margin-inline: auto; }
}
.journey-grid__media { overflow: hidden; background: var(--color-forest-100); position: sticky; top: 104px; }
.journey-grid__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* ---------- Working With IndoSpiceHub: process-step polish ----------
   .process / .process__step / .process__index are the shared list
   primitives (components.css); this section is their only consumer
   sitewide, so refinements are scoped here rather than touching the
   shared definitions. Baseline-aligns each step's number with its
   title's first line — the only change; colors and borders are
   untouched. */
.journey-grid .process__step { align-items: baseline; }

/* ---------- Documentation list spacing ---------- */
.doc-list p { max-width: 60ch; }

/* ---------- Real Export Operations: authentic proof photograph ---------- */
.real-operations__desc {
  max-width: 62ch;
  margin: 0 auto var(--space-6);
  text-align: center;
  color: var(--color-charcoal-60);
  font-size: var(--text-body-lg);
}

.real-operations__figure {
  margin: 0 auto var(--space-6);
  max-width: 900px;
  background: var(--color-forest-100);
}
.real-operations__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1536 / 1024;
  object-fit: cover;
  display: block;
}

.real-operations__indicators {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .real-operations__indicators { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.real-operations__indicators li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-charcoal);
}
.real-operations__indicators svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--color-forest-700);
}