/* ============================================================================
   istqdam — Custom Arabic-first recruitment homepage (Phase 1.5)
   Self-contained, RTL-native, multilingual-ready. Uses design tokens from
   assets/common/css/arabic-theme.css. Prefix: .ist-h-
   ============================================================================ */

.ist-h {
  font-family: var(--ist-font-ar);
  color: var(--ist-text);
  background: var(--ist-bg);
  line-height: 1.7;
}
.ist-h * { box-sizing: border-box; }
.ist-h__container { max-width: 1180px; margin-inline: auto; padding-inline: 20px; }
.ist-h section { padding-block: 64px; }
.ist-h__eyebrow { color: var(--ist-primary); font-weight: 700; font-size: .95rem; margin-bottom: 10px; }
.ist-h__title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; color: var(--ist-text); margin: 0 0 12px; }
.ist-h__subtitle { color: var(--ist-text-muted); max-width: 640px; margin-inline: auto; }
.ist-h__center { text-align: center; }

/* Buttons */
.ist-h__btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px;
  border-radius: var(--ist-radius); font-weight: 700; font-size: 1rem; cursor: pointer;
  border: 2px solid transparent; transition: .18s; text-decoration: none; }
.ist-h__btn--primary { background: var(--ist-primary); color: #fff; }
.ist-h__btn--primary:hover { background: var(--ist-primary-dark); color: #fff; }
.ist-h__btn--ghost { background: #fff; color: var(--ist-primary); border-color: var(--ist-primary); }
.ist-h__btn--ghost:hover { background: var(--ist-primary-soft); }

/* Hero */
.ist-h__hero { background: linear-gradient(135deg, #0A4E32 0%, #0E6B45 60%, #1a9e8c 100%); color: #fff; }
.ist-h__hero .ist-h__container { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.ist-h__hero-title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 800; line-height: 1.35; margin: 0 0 16px; }
.ist-h__hero-sub { font-size: 1.08rem; opacity: .92; margin-bottom: 26px; }
.ist-h__hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.ist-h__hero .ist-h__btn--ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); }
.ist-h__hero .ist-h__btn--ghost:hover { background: rgba(255,255,255,.22); }
.ist-h__hero-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px; padding: 26px; backdrop-filter: blur(4px); }
.ist-h__hero-search { display: flex; gap: 10px; background: #fff; border-radius: var(--ist-radius); padding: 8px; margin-top: 14px; }
.ist-h__hero-search input { flex: 1; border: 0; outline: none; padding: 10px 12px; font-family: var(--ist-font-ar); color: var(--ist-text); font-size: 1rem; }

/* Trust badges row inside hero card */
.ist-h__trust { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ist-h__trust li { display: flex; align-items: center; gap: 10px; color: #eafaf6; font-weight: 600; }
.ist-h__trust li::before { content: "✓"; display: inline-flex; width: 26px; height: 26px; align-items: center;
  justify-content: center; background: rgba(255,255,255,.2); border-radius: 50%; font-weight: 800; }

/* Stats */
.ist-h__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 30px; }
.ist-h__stat { background: #fff; border: 1px solid var(--ist-border); border-radius: var(--ist-radius); padding: 22px; text-align: center; }
.ist-h__stat-num { font-size: 2rem; font-weight: 800; color: var(--ist-primary); }
.ist-h__stat-label { color: var(--ist-text-muted); font-weight: 600; }

/* Card grids */
.ist-h__grid { display: grid; gap: 20px; }
.ist-h__grid--4 { grid-template-columns: repeat(4,1fr); }
.ist-h__grid--3 { grid-template-columns: repeat(3,1fr); }
.ist-h__card { background: #fff; border: 1px solid var(--ist-border); border-radius: var(--ist-radius);
  padding: 24px; transition: .18s; }
.ist-h__card:hover { box-shadow: 0 10px 30px rgba(14,107,69,.10); transform: translateY(-3px); }
.ist-h__card-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--ist-primary-soft);
  color: var(--ist-primary); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 14px; }
.ist-h__card-title { font-weight: 700; font-size: 1.1rem; margin: 0 0 6px; }
.ist-h__card-text { color: var(--ist-text-muted); font-size: .95rem; margin: 0; }

/* Steps */
.ist-h__steps { counter-reset: step; }
.ist-h__step { position: relative; }
.ist-h__step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--ist-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; margin-bottom: 14px; }

/* Verification badges */
.ist-h__verify { background: var(--ist-primary-soft); }
.ist-h__verify-badges { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.ist-h__verify-badge { background: #fff; border: 1px solid var(--ist-border); border-radius: 999px;
  padding: 12px 22px; font-weight: 700; color: var(--ist-success); display: inline-flex; align-items: center; gap: 8px; }

/* Durations / packages (informational) */
.ist-h__durations { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.ist-h__duration { background: #fff; border: 1px solid var(--ist-border); border-radius: var(--ist-radius);
  padding: 24px; text-align: center; }
.ist-h__duration--featured { border-color: var(--ist-primary); box-shadow: 0 8px 24px rgba(14,107,69,.12); }
.ist-h__duration-name { font-weight: 800; font-size: 1.2rem; color: var(--ist-text); }
.ist-h__duration-hint { color: var(--ist-text-muted); font-size: .9rem; margin-top: 6px; }

/* Worker cards (available) */
.ist-h__worker { background: #fff; border: 1px solid var(--ist-border); border-radius: var(--ist-radius); overflow: hidden; }
.ist-h__worker-body { padding: 18px; }
.ist-h__worker-name { font-weight: 700; margin: 0 0 4px; }
.ist-h__worker-meta { color: var(--ist-text-muted); font-size: .9rem; }
.ist-h__empty { text-align: center; color: var(--ist-text-muted); background: #fff;
  border: 1px dashed var(--ist-border); border-radius: var(--ist-radius); padding: 40px; }

/* Branches */
.ist-h__branch { background: #fff; border: 1px solid var(--ist-border); border-radius: var(--ist-radius); padding: 22px; }
.ist-h__branch-name { font-weight: 700; margin: 0 0 6px; }
.ist-h__branch-meta { color: var(--ist-text-muted); font-size: .92rem; }

/* Testimonials */
.ist-h__quote { background: #fff; border: 1px solid var(--ist-border); border-radius: var(--ist-radius); padding: 24px; }
.ist-h__quote-text { color: var(--ist-text); font-size: 1rem; margin: 0 0 14px; }
.ist-h__quote-author { font-weight: 700; color: var(--ist-primary); }

/* FAQ */
.ist-h__faq { max-width: 800px; margin-inline: auto; }
.ist-h__faq-item { background: #fff; border: 1px solid var(--ist-border); border-radius: var(--ist-radius);
  padding: 18px 22px; margin-bottom: 12px; }
.ist-h__faq-q { font-weight: 700; margin: 0 0 6px; }
.ist-h__faq-a { color: var(--ist-text-muted); margin: 0; }

/* CTA */
.ist-h__cta { background: var(--ist-text); color: #fff; border-radius: 20px; padding: 48px; text-align: center; }
.ist-h__cta .ist-h__title { color: #fff; }
.ist-h__cta .ist-h__subtitle { color: rgba(255,255,255,.8); }

/* Responsive */
@media (max-width: 900px) {
  .ist-h__hero .ist-h__container { grid-template-columns: 1fr; }
  .ist-h__grid--4, .ist-h__durations { grid-template-columns: repeat(2,1fr); }
  .ist-h__grid--3, .ist-h__stats { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ist-h__grid--4, .ist-h__durations { grid-template-columns: 1fr; }
  .ist-h section { padding-block: 44px; }
  .ist-h__hero-search { flex-direction: column; }
}