/* ============================================================
   ABOUT.CSS - page-specific styles for /about (אודות).
   Hero (cream) · story split · values grid · stats band · CTA.
   ============================================================ */

/* page sits under the fixed nav (top-bar + main-bar) - dark so the
   padding-top offset matches the dark hero, no grey strip (see catalog.css) */
.about-page { padding-top: 124px; background: #080707; }

/* ---------- hero (dark band) ---------- */
.about-hero {
  background: #080707;
  padding: 56px 0 24px; text-align: center;
}
.about-hero-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px, 5.5vw, 64px); line-height: 1.04;
  color: var(--white); margin-bottom: 8px;
}
.about-hero-subtitle {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 3vw, 30px); line-height: 1.2;
  color: var(--white); margin-bottom: 20px;
}
.about-hero-subtitle span { color: var(--gold); }
.about-hero-lead {
  max-width: 720px; margin: 0 auto; font-size: 17px;
  line-height: 1.8; color: var(--text);
}

/* ---------- story (text + image) - on the dark canvas ---------- */
.about-story-sec { background: #080707; padding: 80px 0; }
.about-story {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
}
.about-story-text .h2 { text-align: start; margin-bottom: 22px; }
.about-story-text .h2 span { color: var(--gold); }
.about-story-text p {
  font-size: 16px; line-height: 1.9; color: var(--text); margin-bottom: 18px;
}
.about-story-text .btn { margin-top: 8px; }
.about-story-img {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3; background: var(--bg-soft); border-radius: var(--radius);
}
.about-story-img picture { display: block; width: 100%; height: 100%; }
.about-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- values / standards grid ---------- */
.about-values-sec { background: #080707; padding: 80px 0; }
.about-values-sec .section-head { margin-bottom: 48px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-card {
  background: var(--bg-soft); border: 1px solid var(--line-gold);
  border-radius: var(--radius); padding: 28px 26px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.value-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
.value-card h3 {
  font-family: var(--font-display); font-size: 19px; font-weight: 800;
  color: var(--white); margin-bottom: 12px;
}
.value-card p { font-size: 14.5px; color: var(--text-dim); line-height: 1.7; }

/* ---------- stats band (dark, photo-less) ---------- */
.about-stats-band { background: #080707; padding: 56px 0; }
.about-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.about-statn {
  text-align: center; color: var(--white);
  padding: 12px 20px; border-inline-start: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.about-statn:first-child { border-inline-start: none; }
.about-stat-num {
  font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: clamp(36px, 5vw, 56px); color: var(--gold-soft);
  /* fixed-height number row so every label starts on the same line,
     regardless of single- vs two-line labels */
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(36px, 5vw, 56px); margin-bottom: 10px;
}
.about-stat-lbl { font-size: 15px; color: var(--text-dim); font-weight: 600; }

/* ---------- closing CTA band (cream - dark text for contrast) ---------- */
.about-cta-band {
  text-align: center; padding: 56px 0;
  background: #f2dcca; border-top: 1px solid rgba(26,22,23,0.12);
}
.about-cta-band h2 {
  font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 800; color: #1f1a1b; margin-bottom: 12px;
}
.about-cta-band p { color: #3a3330; margin-bottom: 26px; font-size: 16px; }
.about-cta-band .about-cta-btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
/* ghost button reads dark on the cream band */
.about-cta-band .btn-ghost { color: #1f1a1b; border-color: #1f1a1b; }
.about-cta-band .btn-ghost:hover { background: #1f1a1b; color: #f2dcca; }

/* tablet + mobile: stack the story and center its text (image on top) */
@media (max-width: 1200px) {
  .about-story { grid-template-columns: 1fr; gap: 32px; }
  .about-story-text { text-align: center; }
  .about-story-text .h2 { text-align: center; }
  .about-story-img { order: -1; aspect-ratio: 16/9; }
}

/* ---------- tablet ---------- */
@media (min-width: 768px) and (max-width: 1200px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .about-story { max-width: 760px; margin: 0 auto; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .about-page { padding-top: 88px; }
  .about-hero { padding: 40px 0 20px; }

  .about-story-sec { padding: 52px 0; }
  .about-story { gap: 28px; }
  .about-story-text .btn { width: 100%; }
  .about-story-img { aspect-ratio: 16/10; }

  .about-values-sec { padding: 52px 0; }
  .values-grid { grid-template-columns: 1fr; gap: 14px; }

  .about-stats-band { padding: 40px 0; }
  .about-cta-band .about-cta-btns { flex-direction: column; }
  .about-cta-band .about-cta-btns .btn { width: 100%; }
}