/* ==========================================================================
   /about/capabilities — «ظرفیت‌های هیتکو»

   Everything scoped under `.cap`, per CLAUDE.md rule 5. Logical properties
   throughout, so one set of rules serves fa (RTL) and en (LTR) with no
   direction override anywhere.

   Head band matches /catalogues, /partners, /about/csr and /about/awards —
   this is the fifth page in that family.
   ========================================================================== */

.cap {
  --cap-radius: 18px;
}

/* ================================================================== head */

/* ⚠️ THIS HEAD DELIBERATELY MIRRORS THE `/companies` BAND, and is the SAME
   block as `.ptn-head` in partners.css — the user asked for the two to match
   (2026-08-16). Copied rather than shared because page CSS never leaks globally
   (CLAUDE.md rule 5). Change one and change the other. */
.cap-head {
  position: relative;
  background: linear-gradient(160deg, var(--c-primary-soft) 0%, var(--c-paper) 46%, var(--c-surface) 100%);
  border-block-end: 1px solid var(--c-line);
  padding-block: clamp(44px, 6vw, 84px) clamp(32px, 4vw, 60px);
  overflow: hidden;
}
/* The dot field — see the note in partners.css. */
.cap-head::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(46%, 560px);
  background-image: radial-gradient(var(--c-primary) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.13;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 88%);
  mask-image: linear-gradient(to left, #000, transparent 88%);
  pointer-events: none;
}
[dir="ltr"] .cap-head::before {
  -webkit-mask-image: linear-gradient(to right, #000, transparent 88%);
  mask-image: linear-gradient(to right, #000, transparent 88%);
}
.cap-head > .container {
  position: relative;
}

.cap-head__crumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-muted);
  margin-block-end: var(--s-6);
}
.cap-head__crumb a { color: var(--c-muted); }
.cap-head__crumb a:hover { color: var(--c-primary); }

/* ⚠️ RTL gets more leading and no negative tracking — see partners.css. */
.cap-head__title {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0;
}
[dir="rtl"] .cap-head__title {
  letter-spacing: 0;
  line-height: 1.42;
}

/* `border-inline-start`, so the bar sits at the reading edge in both scripts. */
.cap-head__lede {
  margin: var(--s-6) 0 0;
  padding-inline-start: var(--s-5);
  border-inline-start: 3px solid var(--c-primary);
  font-size: var(--t-lg);
  line-height: var(--lh-loose, 1.9);
  color: var(--c-body);
}

/* ======================================================= alternating bands */

.cap-body {
  padding-block: var(--s-12) var(--s-10);
}

/* ⚠️ THE PICTURE IS FIRST IN SOURCE ORDER and `--flip` moves it with `order`,
   not by re-ordering the markup. The heading has to precede its own picture in
   the DOM for the document outline and for a screen reader; the visual swap is
   presentation only. */
.cap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-block-end: clamp(48px, 6vw, 88px);
}
.cap-row:last-child {
  margin-block-end: 0;
}
.cap-row--flip .cap-row__art {
  order: 2;
}
/* No picture: one reading-width column rather than a 50% gap where the photo
   would have been. */
.cap-row--noart {
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: 82ch;
}

/* ⚠️ `overflow: hidden` on the frame and `object-fit: cover` on the image.
   These ARE photographs — a factory yard, a plant, a warehouse — so cropping
   them to a consistent ratio is right, unlike the CSR posters, which carry
   printed captions and must never be cropped. See pages.md. */
.cap-row__art {
  border-radius: var(--cap-radius);
  overflow: hidden;
  background: var(--c-paper);
  box-shadow: 0 18px 44px rgba(14, 31, 39, 0.12);
}
.cap-row__art img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  block-size: auto;
  object-fit: cover;
  display: block;
}

.cap-row__txt {
  position: relative;
}

/* A quiet ordinal. It is decoration — the heading already says what this is —
   so it is aria-hidden in the markup. */
.cap-row__n {
  display: inline-grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
  font-weight: 700;
  font-size: var(--t-sm);
  margin-block-end: var(--s-4);
}

.cap-row__title {
  font-size: var(--t-xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0 0 var(--s-4);
}
/* The green tick under each heading, echoing the head band's rule. */
.cap-row__title::after {
  content: "";
  display: block;
  inline-size: 42px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-green);
  margin-block-start: var(--s-4);
}

.cap-row__text {
  color: var(--c-body);
  line-height: var(--lh-loose, 1.9);
  margin: 0;
}

/* ========================================================== gene explainer */

/* Tinted, bordered band: this is background about the science, not another
   HITCO capability, and it has to read as a step aside from the list above. */
.cap-gene {
  padding-block: var(--s-12) var(--sec-y);
  background: var(--c-paper);
  border-block-start: 1px solid var(--c-line);
}

.cap-gene__title {
  font-size: var(--t-xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  text-align: center;
  margin: 0 0 var(--s-8);
}
.cap-gene__title::after {
  content: "";
  display: block;
  inline-size: 48px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-green);
  margin: var(--s-4) auto 0;
}

.cap-gene__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-5);
}

.cap-gene__card {
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--cap-radius);
  background: var(--c-surface);
}

.cap-gene__h {
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--c-primary-deep);
  margin: 0 0 var(--s-3);
}

.cap-gene__p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-loose, 1.9);
  color: var(--c-body);
}

.cap-gene__art {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}
.cap-gene__art li {
  border-radius: var(--cap-radius);
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.cap-gene__art img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  block-size: auto;
  object-fit: cover;
  display: block;
}

/* ============================================================ responsive */

@media (max-width: 860px) {
  .cap-row {
    grid-template-columns: minmax(0, 1fr);
  }
  /* ⚠️ Picture UNDER the words on a stacked layout, on every row — including
     the flipped ones, whose `order: 2` already puts it there. Resetting the
     order here would put the photo above half the headings. */
  .cap-row__art {
    order: 2;
  }
  .cap-row__art img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .cap-head {
    padding-block: var(--s-10) var(--s-8);
  }
  .cap-gene__grid,
  .cap-gene__art {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Body copy is justified site-wide (`hitco.css`), declared ON the paragraph, so
   it beats a centred container by inheritance — see frontend.md gotcha 00. */
.cap-gene__title {
  text-align: center;
}