/*
  Capabilities section — matches references/home/3, what we do/
  BRUNNBAUER-Budapest_intro_HU.png, a full export of slide 11 of the
  Brunnbauer intro deck. Unlike hero/about, this reference is Brunnbauer's
  own slide (not a sibling-company reskin), so its copy is kept verbatim.

  Background photo is photo-valve-handwheels-reflection, confirmed by
  extracting image18.jpeg from the pptx and matching it to the already
  curated file. Same overlay tokens as the hero (--color-overlay-navy /
  --overlay-hero-opacity), since this is another full-bleed photo section.

  The reference's round "B S B" certification-body seal has no exported
  equivalent and isn't approximated (real third-party mark) — a generic
  certificate icon (icon-certified-badge-navy.svg, a navy recolor of the
  already-exported white badge glyph) stands in instead, per explicit
  user decision.
*/

.capabilities {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9);
  background: var(--color-navy-900);
}

.capabilities__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.capabilities__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.capabilities__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-navy);
  opacity: var(--overlay-hero-opacity);
}

.capabilities__inner {
  position: relative;
  z-index: var(--z-elevated);
}

.capabilities__eyebrow {
  color: var(--color-slate-200);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.capabilities__title {
  margin-top: var(--space-3);
  max-width: 720px;
  margin-inline: auto;
  color: var(--color-white);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  text-align: center;
}

/* Same treatment as .about__divider, centered under the headline (the
   about-us divider sits left-aligned under a left-aligned headline;
   here the headline itself is centered, per explicit user instruction). */
.capabilities__divider {
  width: 56px;
  height: 3px;
  margin-top: var(--space-5);
  margin-inline: auto;
  background: var(--color-red-600);
  border-radius: 2px;
}

/* ---- Certification box + red tag row (share one horizontal band) ---- */
.capabilities__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.capabilities__cert {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-shrink: 0;
  padding: var(--space-2) var(--space-6);
  background: #b4c7e7; /* one-off light blue per explicit user color pick, not a site token */
  border-radius: 24px 0 24px 0; /* top-left/bottom-right cut per explicit user instruction */
  box-shadow: var(--shadow-lg);
}

.capabilities__cert-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  /* Source SVG's viewBox carries extra canvas from the full compass-logo
     export (see logomark-compass-navy.svg) — its actual seal content is
     a centered circle, so object-fit:cover crops in to just that circle
     instead of squashing the wide canvas into a square. */
  object-fit: cover;
}

.capabilities__cert-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.capabilities__cert-lines p {
  font-weight: var(--fw-bold);
  color: var(--color-navy-900);
}

/* ---- Red tag row ---- */
.capabilities__tags {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  width: 100%;
  max-width: 620px;
}

.capabilities__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: var(--space-3);
  /* 25% opacity on the fill only (not the whole element), so the label
     text inside stays fully readable. rgba() is written literally since
     var(--color-red-600) can't carry its own alpha here. */
  background: rgba(213, 48, 32, 0.65);
  border-radius: 50%;
  text-align: center;
}

.capabilities__tag p {
  color: #b8c6e4; /* one-off light navy-blue per explicit user color pick, not a site token */
  font-weight: var(--fw-bold);
  font-size: calc(var(--fs-small) * 1.265);
  line-height: var(--lh-heading);
}

/* ---- Photo-badge + card grid ---- */
.capabilities__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-9);
}

.capabilities__item {
  --photo-size: clamp(160px, 22vw, 240px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.capabilities__photo {
  position: relative;
  z-index: var(--z-base);
  width: var(--photo-size);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  /* Same 65% translucent red as .capabilities__tag, per explicit user
     instruction. rgba() literal for the same reason as the tag fill —
     var(--color-red-600) can't carry its own alpha here. */
  border: 20px solid rgba(213, 48, 32, 0.65);
  box-shadow: var(--shadow-lg);
}

.capabilities__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.capabilities__card {
  position: relative;
  z-index: var(--z-elevated);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: calc(var(--photo-size) * 0.968);
  margin-top: calc(-1 * var(--space-6) * 1.771);
  padding: 4% 5%;
  background: var(--color-overlay-navy); /* #23304d, per explicit user color pick — matches this token exactly */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.capabilities__card-title {
  color: #b8c6e4; /* one-off light navy-blue per explicit user color pick, not a site token */
  font-weight: var(--fw-bold);
  font-size: calc(var(--fs-body) * 0.968);
  line-height: 1.5;
}

.capabilities__card-list {
  margin-top: 0;
  list-style: none;
  text-align: left;
}

.capabilities__card-list li {
  position: relative;
  padding-left: var(--space-4);
  color: #b8c6e4; /* one-off light navy-blue per explicit user color pick, not a site token */
  font-weight: var(--fw-bold);
  font-size: calc(var(--fs-small) * 0.85);
  line-height: 1.5;
}

.capabilities__card-list li:not(:first-child) {
  margin-top: calc(var(--space-1) / 2);
}

.capabilities__card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  background: #b8c6e4; /* matches .capabilities__card-list li text color, per explicit user instruction */
  border-radius: 50%;
}

.capabilities__card-text {
  margin-top: 0;
  color: #b8c6e4; /* one-off light navy-blue per explicit user color pick, not a site token */
  font-weight: var(--fw-bold);
  font-size: calc(var(--fs-small) * 0.85);
}

/* ---- Tablet / mobile (<= 768px) ---- */
@media (max-width: 768px) {
  .capabilities {
    padding-block: var(--space-8);
  }

  .capabilities__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
  }

  .capabilities__cert {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .capabilities__tags {
    grid-template-columns: repeat(2, 1fr);
    max-width: 420px;
    margin-inline: auto;
  }

  .capabilities__grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-inline: auto;
    gap: var(--space-7);
  }
}

/* ---- Mobile (<= 480px) ---- */
@media (max-width: 480px) {
  .capabilities__tags {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .capabilities__tag {
    padding: var(--space-3);
  }
}