/* ================================================================
   ghiduri.css — pagina de ghiduri
   Restructurata: taburi in loc de carduri de rol, pasi ca lista la
   orice latime, fara font script, fara decor si fara codare pe culori.
   Blocurile de carusel, stepper si tente per rol au fost eliminate
   odata cu markupul care le folosea.
================================================================ */

/* ── PAGE ────────────────────────────────────────────────────── */
.guide-page {
  background: var(--c-bg, #FAFAFA);
  min-height: 100vh;
}

/* ── HERO ────────────────────────────────────────────────────── */
.guide-hero {
  background: #F7F7F7;
  /* Padding pe toate laturile, nu doar sus: `section` primeste din
     dor-de-mare.css un padding global de pana la 80px, care se adauga
     jos peste cel din -inner si dezechilibra hero-ul. */
  padding: 72px 0 0; /* 72px = inaltimea navbarului */
  border-bottom: 1px solid var(--c-border, #E8ECF1);
}

[data-theme="dark"] .guide-hero {
  background: var(--c-bg, #0D1117);
}

.guide-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 48px;
}

.guide-hero h1 {
  font-family: var(--font, 'Inter', sans-serif);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--c-text, #111827);
  margin: 0 0 12px;
}

/* Pe desktop numele brandului curge in acelasi rand cu restul titlului;
   pe mobil trece pe rand propriu, ca sa nu se rupa in "Dor" / "de Mare". */
.gh-brand { display: inline; }

.guide-hero-sub {
  font-size: clamp(0.9rem, 1.1vw, 0.98rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-text-secondary, #4B5563);
  margin: 0;
  max-width: 56ch;
}

/* ── TABURI DE ROL ───────────────────────────────────────────
   Acelasi tipar ca bara de taburi din blog. Portat aici pentru ca
   pagina nu incarca blog.css. */
.tab-bar {
  display: flex;
  gap: 6px;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 48px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-secondary, #4B5563);
  background: transparent;
  border: 1px solid var(--c-border, #E8ECF1);
  border-radius: var(--r-pill, 999px);
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s var(--ease, ease),
              background 0.18s var(--ease, ease),
              border-color 0.18s var(--ease, ease);
}

.tab-btn:hover {
  color: var(--c-primary, #0082B5);
  border-color: var(--c-primary, #0082B5);
}

.tab-btn.active {
  color: #FFFFFF;
  background: var(--c-primary, #0082B5);
  border-color: var(--c-primary, #0082B5);
  font-weight: 600;
}

/* ── PANOURI ─────────────────────────────────────────────────── */
.guide-panels {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 48px 96px;
}

.guide-panel { display: none; }
.guide-panel.active { display: block; }

/* ── Eticheta de sectiune ────────────────────────────────────── */
.guide-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
}

.guide-section-label + * + .guide-section-label,
.faq-list + .guide-section-label,
.tips-grid + .guide-section-label,
.guide-steps + .guide-section-label {
  margin-top: 64px;
}

.guide-section-label-line {
  flex: 1;
  height: 1px;
  background: var(--c-border, #E8ECF1);
}

.guide-section-label-text {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-tertiary, #9CA3AF);
  white-space: nowrap;
}

/* ── PASI ────────────────────────────────────────────────────
   Lista numerotata, aceeasi la orice latime. Inlocuieste stepper-ul
   mobil si cardurile de pas de pe desktop. */
.guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.guide-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 0 0 26px;
  position: relative;
}

.guide-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 4px;
  width: 1px;
  background: var(--c-border, #E8ECF1);
}

.guide-step-num {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-primary, #0082B5);
  background: var(--c-primary-pale, rgba(0, 130, 181, 0.09));
  position: relative;
  z-index: 1;
}

.guide-step-body h3 {
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-text, #111827);
  margin: 4px 0 6px;
}

.guide-step-body p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--c-text-secondary, #4B5563);
  margin: 0;
}

.guide-step-body strong {
  font-weight: 600;
  color: var(--c-text, #111827);
}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--c-border, #E8ECF1);
}

.faq-item:first-child {
  border-top: 1px solid var(--c-border, #E8ECF1);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--c-text, #111827);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font, 'Inter', sans-serif);
  transition: color 0.15s;
  letter-spacing: -0.01em;
}

[data-theme="dark"] .faq-q {
  color: var(--c-text, #E6EDF3);
}

.faq-q:hover {
  color: var(--c-primary, #0082B5);
}

.faq-chevron {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  flex-shrink: 0;
  transition: transform 0.24s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
  opacity: 0.5;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
  font-size: 0.875rem;
  color: var(--c-text-secondary, #4B5563);
  line-height: 1.7;
  padding: 0;
}

.faq-a-inner {
  padding: 0 0 20px 16px;
  border-left: 2px solid var(--c-primary, #0082B5);
  margin-left: 2px;
}

.faq-item.open .faq-a {
  max-height: 400px;
}

/* ── SFATURI ─────────────────────────────────────────────────── */
.tips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tip-card {
  background: var(--c-surface, #FFFFFF);
  border: 1px solid var(--c-border, #E8ECF1);
  border-radius: 16px;
  padding: 20px 22px;
  transition: box-shadow 0.18s, transform 0.18s;
}

[data-theme="dark"] .tip-card {
  background: var(--c-surface, #161B22);
}

.tip-card:hover {
  box-shadow: var(--s, 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04));
  transform: translateY(-2px);
}

.tip-card h3 {
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-text, #111827);
  margin: 0 0 6px;
}

.tip-card p {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--c-text-secondary, #4B5563);
  margin: 0;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .guide-hero-inner { padding: 36px 32px; }
  .tab-bar { padding: 18px 32px 0; }
  .guide-panels { padding: 36px 32px 72px; }
}

@media (max-width: 768px) {
  .guide-hero { padding-top: 60px; }
  .guide-hero-inner { padding: 28px 20px; }
  .gh-brand { display: block; }
  .tab-bar { padding: 16px 20px 0; }
  .guide-panels { padding: 30px 20px 64px; }

  .tips-grid { grid-template-columns: 1fr; }

  .guide-section-label + * + .guide-section-label,
  .faq-list + .guide-section-label,
  .tips-grid + .guide-section-label,
  .guide-steps + .guide-section-label {
    margin-top: 48px;
  }
}

@media (max-width: 420px) {
  .guide-step { gap: 14px; }
  .guide-step:not(:last-child)::before { left: 14px; }
  .guide-step-num { width: 29px; height: 29px; }
}