/* ==========================================================================
   צמיגי י. רומנו — אודות (about.css)
   ========================================================================== */

/* ===== סיפור: טקסט + תמונה ===== */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.story .photo-slot { min-height: 380px; }
.story h2 { margin-bottom: .5em; }
.story .signature { margin-top: 20px; font-weight: 700; color: var(--steel); }
.story .signature span { display: block; font-weight: 500; color: var(--muted); font-size: .9rem; }

/* ===== ערכים ===== */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ===== מסע / ציר זמן (עיצוב חדש) ===== */
.journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; }
.journey::before {
  content: ""; position: absolute; top: 38px; right: 16%; left: 16%; height: 3px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--steel-light) 0 12px, transparent 12px 24px); opacity: .6;
}
.jx { position: relative; z-index: 1; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 24px 28px; box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.jx:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.jx .jx-ico { width: 76px; height: 76px; margin: -58px auto 16px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--steel), var(--navy)); border: 5px solid #fff; box-shadow: 0 10px 24px rgba(27,46,60,.2); }
.jx .jx-ico svg { width: 34px; height: 34px; }
.jx .yr { display: inline-block; background: rgba(232,163,61,.15); color: var(--cta-dark); font-weight: 800; font-size: .82rem; padding: 4px 14px; border-radius: 999px; margin-bottom: 10px; }
.jx h3 { margin-bottom: 8px; font-size: 1.2rem; }
.jx p { margin: 0; }

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 30px; }
  .story .photo-slot { min-height: 280px; order: -1; }
  .values-grid { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; gap: 50px; }
  .journey::before { display: none; }
}