/* ==========================================================================
   /about/csr — «فعالیت‌های انسان‌دوستانه»

   Everything scoped under `.csr`, per CLAUDE.md rule 5. Logical properties
   throughout, so one set of rules serves fa (RTL) and en (LTR).

   ⚠️ EVERY IMAGE ON THIS PAGE IS OPTIONAL and the layout has to look finished
   without one — see the header comment in templates/csr.php. That is why the
   head and the project cards both carry a `--solo` / `--noart` path rather than
   a fixed two-column grid with a picture slot in it.
   ========================================================================== */

.csr {
  --csr-radius: 18px;
  --csr-shadow: 0 18px 44px rgba(14, 31, 39, 0.1);
}

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

.csr-head {
  position: relative;
  background: linear-gradient(165deg, var(--c-primary-soft) 0%, var(--c-paper) 58%, var(--c-surface) 100%);
  border-block-end: 1px solid var(--c-line);
  padding-block: var(--s-12) var(--s-10);
  overflow: hidden;
}
.csr-head > .container {
  position: relative;
}

.csr-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);
}
.csr-head__crumb a { color: var(--c-muted); }
.csr-head__crumb a:hover { color: var(--c-primary); }

/* Text beside the picture; text alone, and reading-width, without it. */
.csr-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.csr-head__grid--solo {
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: 72ch;
}

.csr-head__eyebrow {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-primary-deep);
  background: #fff;
  padding: 4px var(--s-4);
  border-radius: 20px;
  margin: 0 0 var(--s-4);
}

.csr-head__title {
  font-size: var(--t-2xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0;
}

.csr-head__sub {
  margin: var(--s-3) 0 0;
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--c-primary);
}

.csr-head__rule {
  display: block;
  inline-size: 56px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-green);
  margin-block: var(--s-5);
}

.csr-head__lede {
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--c-body);
  margin: 0;
}

/* ⚠️ `overflow: hidden` + an absolute cap, never `max-block-size: 100%`.
   `hitco.css` sets `img { max-width: 100%; height: auto }` globally, so an
   image takes its box's width and derives its height from its own ratio — the
   percentage cap does not hold it. See frontend.md gotcha 0a. */
.csr-head__art {
  border-radius: var(--csr-radius);
  border: 1px solid var(--c-line);
  background: #fff;
  overflow: hidden;
}
.csr-head__art img {
  inline-size: 100%;
  max-block-size: 420px;
  block-size: auto;
  object-fit: contain;
  border-radius: calc(var(--csr-radius) - 8px);
}

/* ============================================================ intro cards */

.csr-intro {
  padding-block: var(--s-12);
}
.csr-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.csr-intro__title {
  font-size: var(--t-xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0 0 var(--s-4);
}
.csr-intro__txt p {
  color: var(--c-body);
  line-height: var(--lh-loose, 1.9);
  margin: 0 0 var(--s-3);
}
.csr-intro__txt p:last-child { margin-block-end: 0; }

.csr-pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-4);
}

.csr-pillar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--csr-radius);
  background: var(--c-surface);
  text-align: center;
  align-items: center;
}

.csr-pillar__icon {
  display: grid;
  place-items: center;
  inline-size: 54px;
  block-size: 54px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
}
.csr-pillar__icon svg {
  inline-size: 26px;
  block-size: 26px;
}

.csr-pillar__title {
  margin: 0;
  font-size: var(--t-base, 1rem);
  color: var(--c-ink);
}
.csr-pillar__text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--c-muted);
  text-align: inherit;
}

/* ============================================================== projects */

.csr-sec__title {
  font-size: var(--t-xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  text-align: center;
  margin: 0 0 var(--s-3);
}
/* The green underline the rest of the site uses for a centred section title. */
.csr-sec__title::after {
  content: "";
  display: block;
  inline-size: 48px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-green);
  margin: var(--s-4) auto 0;
}

.csr-projects {
  padding-block: var(--s-12);
  background: var(--c-paper);
  border-block: 1px solid var(--c-line);
}

.csr-projects__lede {
  text-align: justify;
  color: var(--c-body);
  line-height: var(--lh-loose, 1.9);
}

/* ⚠️ ALWAYS TWO COLUMNS, not `auto-fit`. The two portrait posters are meant to
   sit side by side and the wide ICU banner spans both (`.csr-card--wide`), so
   the column count has to be fixed — `auto-fit` re-flowed to three columns on a
   wide screen and broke that pairing. `minmax(0, 1fr)`, never `1fr`: a bare
   `1fr` floors at min-content, and a long unbroken caption would then push the
   column wider than its share. Collapses to one column at 640px. */
.csr-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
}
/* One project must not stretch edge to edge on its own. */
.csr-cards--solo {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}

.csr-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--csr-radius);
  background: var(--c-surface);
  overflow: hidden;
}

/* ⚠️ `contain` ON A PLATE, NEVER `cover` IN A FIXED WELL. These are the
   client's own campaign POSTERS, not photographs: each one already carries the
   school's name, its founding year and «بانی: …» printed into the artwork.
   Cropping one to a 3:2 card — which is what this rule used to do — sliced the
   caption off the bottom and destroyed the only place some of those facts
   exist. The plate takes the poster's own shape instead, and the two portrait
   posters and the one wide banner each keep theirs. */
.csr-card__art {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--c-paper);
  border-block-end: 1px solid var(--c-line);
}
.csr-card__art img {
  inline-size: auto;
  max-inline-size: 100%;
  /* Absolute, not a percentage — see frontend.md gotcha 0a. */
  /* max-block-size: 560px; */
  block-size: auto;
  object-fit: contain;
  border-radius: 10px;
}

/* A banner-shaped poster gets the full row to itself: dropped into a portrait
   card's column it would sit as a thin strip above a tall block of white. */
.csr-card--wide {
  grid-column: 1 / -1;
}
/* .csr-card--wide .csr-card__art img {
  max-block-size: 320px;
} */

.csr-card__body {
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
/* With no picture the card is pure type, so it gets a green spine instead —
   otherwise a text-only card reads as an unstyled box next to an illustrated
   one. This is the state the page ships in. */
.csr-card--noart {
  border-inline-start: 3px solid var(--c-green);
}
.csr-card--noart .csr-card__body {
  padding-block: var(--s-7, 28px);
}

.csr-card__title {
  margin: 0;
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}
.csr-card__text {
  margin: 0;
  color: var(--c-body);
  line-height: var(--lh-loose, 1.9);
}

/* ================================================================ impact */

.csr-impact {
  padding-block: var(--s-12) var(--sec-y);
}

.csr-stats {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-5);
}

.csr-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
  padding: var(--s-6) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--csr-radius);
  background: var(--c-surface);
}

.csr-stat__n {
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--c-primary-deep);
}
.csr-stat__label {
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--c-muted);
}

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

@media (max-width: 900px) {
  .csr-head__grid,
  .csr-intro__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Picture under the words on a stacked layout — the headline is what the
     visitor came for and it must not be pushed below the fold. */
  .csr-head__art {
    order: 2;
  }
}

@media (max-width: 640px) {
  .csr-head {
    padding-block: var(--s-10) var(--s-8);
  }
  .csr-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .csr-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

/* Justified body copy is site-wide (`hitco.css`), declared ON the paragraph, so
   it outranks a centred container by inheritance. Every centred block that
   holds a <p> needs this companion — see frontend.md gotcha 00. */
.csr-pillar :where(p),
.csr-projects__lede,
.csr-stat :where(p) {
  text-align: inherit;
}