/* =============================================
   GHID PAGE – ghid.css
   ============================================= */

/* --- Hero --- */
.ghid-hero .page-hero-title span {
  color: var(--clr-accent);
}

/* --- Trust Badges --- */
.trust-badges {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.trust-badge {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}

/* --- Ghid Context (Problema) --- */
.ghid-context {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}

.ghid-lead {
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--clr-text);
  margin-bottom: var(--sp-4);
  font-weight: 500;
}

.ghid-context-text p:last-child {
  color: var(--clr-text-light);
  line-height: 1.8;
}

.context-stat-card {
  background: var(--clr-primary);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--sp-10) var(--sp-8);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.context-stat-num {
  display: block;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--sp-3);
}

.context-stat-label {
  display: block;
  font-size: var(--text-sm);
  opacity: .8;
  line-height: 1.6;
}

/* --- Cuprins Grid --- */
.ghid-cuprins-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.ghid-cuprins-item {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  position: relative;
  transition: box-shadow .25s ease, transform .25s ease;
}

.ghid-cuprins-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.ghid-cuprins-num {
  display: inline-block;
  background: var(--clr-accent);
  color: #fff;
  font-weight: 800;
  font-size: var(--text-sm);
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-3);
}

.ghid-cuprins-item h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--clr-primary);
  margin-bottom: var(--sp-2);
}

.ghid-cuprins-item p {
  color: var(--clr-text-light);
  font-size: var(--text-base);
  line-height: 1.7;
}

/* --- Cum începem --- */
.cum-incepe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.cum-incepe-step {
  text-align: center;
  padding: var(--sp-6);
}

.cum-incepe-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  color: #fff;
  font-size: var(--text-xl);
  font-weight: 800;
  margin-bottom: var(--sp-4);
}

.cum-incepe-step h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--clr-primary);
  margin-bottom: var(--sp-2);
}

.cum-incepe-step p {
  color: var(--clr-text-light);
  line-height: 1.7;
}

/* --- Pentru cine --- */
.pentru-cine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.pentru-cine-card {
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
}

.pentru-cine-card.da {
  background: #eafaf0;
  border: 1px solid #c3e8d1;
}

.pentru-cine-card.nu {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.pentru-cine-card h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}

.pentru-cine-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pentru-cine-card li {
  padding: var(--sp-2) 0;
  padding-left: 1.5em;
  position: relative;
  color: var(--clr-text);
  line-height: 1.7;
}

.pentru-cine-card.da li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--clr-accent);
  font-weight: 700;
}

.pentru-cine-card.nu li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: #ef4444;
  font-weight: 700;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .ghid-context {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .ghid-cuprins-grid {
    grid-template-columns: 1fr;
  }
  .cum-incepe-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .pentru-cine-grid {
    grid-template-columns: 1fr;
  }
  .trust-badges {
    flex-direction: column;
    align-items: center;
  }
}