/* ========== هرو ========== */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-surface);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../../images/hero/hero-worshop2.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
  animation: hero-zoom 18s ease-in-out infinite alternate;
}

@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,42,61,0.72) 0%, rgba(15,42,61,0.82) 100%);
  z-index: 1;
}

/*  واترمارک لوگو — حالا دیگه چیدمان رو به‌هم نمی‌ریزه */
.hero-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(430px, 60vw);
  height: auto;
  opacity: 0.08;
  z-index: 1;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  padding: var(--space-5) var(--space-3);
}

.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  opacity: 0;
  animation: hero-fade-up 0.7s ease forwards;
}

.hero-text h1 {
  font-size: clamp(1.6rem, 4.5vw, 3.4rem);
  color: var(--color-surface);
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: var(--space-4);
  opacity: 0;
  animation: hero-fade-up 0.7s ease 0.12s forwards;
}

.hero-desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.82);
  margin-bottom: var(--space-5);
  opacity: 0;
  animation: hero-fade-up 0.7s ease 0.24s forwards;
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  opacity: 0;
  animation: hero-fade-up 0.7s ease 0.36s forwards;
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .eyebrow, .hero-text h1, .hero-desc, .hero-actions { animation: none; opacity: 1; }
}

/* ========== آمار — ۳ ستونه (چون ۳ کارت دارید) ========== */
.stats-strip {
  position: relative;
  z-index: 3;
  margin-top: -60px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  width: 100%;
}

.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.stat-card .icon-circle {
  background: rgba(201,151,62,0.12);
  color: var(--color-accent);
}

.stat-number { font-size: 1.7rem; font-weight: 800; color: var(--color-primary-dark); }
.stat-label  { font-size: 0.85rem; color: var(--color-text-secondary); }

/* ========== معرفی هنرستان ========== */
.intro-section { padding-top: calc(var(--space-8) + 60px); }

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

/*  عکس معرفی — محدود و مرتب */
.intro-image img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.intro-content .eyebrow { color: var(--color-primary); opacity: 1; animation: none; }
.intro-content h2 { margin-bottom: var(--space-3); }
.intro-content p  { margin-bottom: var(--space-4); }

/* ========== نوار فراخوان ========== */
.cta-band {
  background: var(--color-primary-dark);
  color: var(--color-surface);
  border-radius: var(--radius-lg);
  margin: 0 var(--space-3);
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  flex-wrap: wrap;
}

/* ========== ریسپانسیو ========== */
@media (max-width: 960px) {
    .intro-grid { grid-template-columns: 1fr; }
    .intro-image img { max-height: 420px; }
}

@media (max-width: 860px) {
    .hero { min-height: 60vh; }
    .hero-bg {
        background-image: url('../../images/hero/hero-workshop-mobail.jpg'),
                          url('../../images/hero/hero-worshop2.jpg');
    }
    .hero-inner { padding: var(--space-5) 20px; }
    .hero-text h1 {
        font-size: clamp(1.4rem, 6vw, 1.9rem);
        overflow-wrap: break-word;
    }
    .hero-desc { font-size: 0.95rem; }

    .stats-strip { margin-top: var(--space-4); }
    .stats-grid { grid-template-columns: 1fr; gap: var(--space-2); }

    .intro-section { padding-top: var(--space-6); }
    .intro-image img { max-height: 300px; }

    .cta-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .hero-inner { padding: var(--space-4) 16px; }
    .hero-text h1 { font-size: 1.35rem; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .stat-card { padding: var(--space-3); }
    .stat-number { font-size: 1.4rem; }
}
/* رفع نهایی بیرون زدگی بنر موبایل */
@media (max-width: 860px) {
    .container.hero-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .hero-text h1 {
        font-size: 1.45rem !important;
        overflow-wrap: break-word;
    }

    .hero-desc {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 1.3rem !important;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }
}