/* ===========================================================================
   about.css — אודות / מי אנחנו
   Agent 20 (2026-06-01): aligned to actual #about markup (`.about__body`,
   `.about__lede`, `.about__stats > .about__stat > dt/dd`). Added stat-number
   styling for the animated counter. Section uses .section-rail--end.
   ========================================================================= */


.about {
  padding-block: var(--section-pad);
  background: var(--bg);
}

/* 2026-06-02: switched from section-rail--end (text floats right, half the
   section was empty) to a 2-column grid with a B&W venue photo on the right
   (RTL reading start) and copy on the left. Photo is desaturated for an
   editorial feel that matches the brass/cocoa palette. */
.about__container {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-24));
  align-items: center;
}

.about__media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  aspect-ratio: 4 / 5;
}

.about__photo {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.96);
}

.about__copy {
  min-inline-size: 0;
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.about__lede {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.5vw, 1.4rem);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  margin: 0 0 var(--space-4) 0;
}

.about__usp {
  list-style: none;
  margin: 0 0 var(--space-8) 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.about__usp li {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: var(--lh-base);
  color: var(--fg);
  padding-inline-start: var(--space-6);
  position: relative;
}
.about__usp li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.7em;
  inline-size: var(--space-4);
  block-size: 1px;
  background: var(--brass);
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin: 0;
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--border);
}

.about__stat {
  margin: 0;
  text-align: center;
}

.about__stat dt {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-block-end: var(--space-2);
}

.about__stat dd {
  font-family: var(--font-display-luxury);
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: 700; /* lightened from 900 with the 2026-06-15 site-wide weight pass */
  color: var(--accent);
  line-height: 1;
  margin: 0;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

/* Stat number wrapper — keeps digits LTR inside Hebrew flow, isolates bidi.
   The counter animation in js/counters.js reads data-value and writes
   textContent; we just need the layout primitives. */
.stat-number {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
}

/* Mobile — stack stats into 1 column, keep typography readable */
@media (max-width: 600px) {
  .about__stats {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* Tablet & narrower — collapse the 2-column grid into a single column.
   DOM order is copy-first, photo-second; on mobile we keep that order so
   the user reads the headline before scrolling past the image. */
@media (max-width: 900px) {
  .about__container {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .about__media {
    aspect-ratio: 16 / 10;
    max-block-size: 60vh;
  }
}