/* Honte Quest — pagina de ofertă B2B (/workshopuri-go-companii/)
   Strat suplimentar: doar componentele noi. Nu modifică styles.css.
   Tokeni, fonturi, culori, grid și motion sunt preluate din sistemul canonic
   și din styles.css. Valorile locale sunt specifice acestei pagini. */

/* ── Hero: H1 pe trei rânduri, limitat la lățimea coloanei ────────
   max-width local. styles.css limitează H1 la 760px pentru
   un slogan pe trei rânduri; aici fraza e mai lungă și trebuie să
   încapă în coloana de text, nu peste imagine. 11ch este cea mai
   lată valoare care încape în coloana de text la 1051px; rândurile
   mai lungi se rup în interiorul propriului span. */
.hero h1 { max-width: 11ch; }

/* ── Carduri de format (3 formate) ─────────────────────────────── */
.formats { background: var(--white); }
.format-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  border-top: 1px solid var(--line);
}
.format-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 256px;
  padding: 36px 32px 48px 0;
}
.format-card + .format-card {
  padding-left: 32px;
  border-left: 1px solid var(--line);
}
.format-card .offer-audience { margin: 0 0 16px; }
.format-card h3 {
  margin: 0 0 16px;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.format-card p:not(.offer-audience) { margin: 0; color: var(--muted); }
.format-card a {
  display: inline-flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 32px;
  font-weight: 600;
  text-decoration: none;
}
.format-card a:hover { color: var(--red); }

/* ── Desfășurare: trei momente ─────────────────────────────────── */
.run-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.run-steps article {
  display: flex;
  flex-direction: column;
  min-height: 288px;
  padding: 32px 32px 48px 0;
}
.run-steps article + article {
  padding-left: 32px;
  border-left: 1px solid var(--line);
}
.run-step {
  margin: 0 0 24px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--red);
}
.run-steps h3 {
  margin: 0 0 16px;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.15;
}
.run-steps p:not(.run-step) { margin: 0; color: var(--muted); }

/* ── Condiții: specificații + nota de preț ──────────────────────── */
.conditions-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
}
.conditions-grid .offer-specs { margin: 0; border-top: 1px solid var(--line); }
.conditions-note {
  padding: 32px 32px 32px;
  border: 1px solid var(--line);
  background: var(--moon);
}
.conditions-note h3 {
  margin: 0 0 16px;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -.02em;
}
.conditions-note p { margin: 0; color: var(--muted); }
.conditions-note p + p { margin-top: 16px; }

/* ── Pași (ol) ─────────────────────────────────────────────────── */
.process-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.process-steps li {
  counter-increment: step;
  min-height: 224px;
  padding: 32px 32px 48px 0;
  border-bottom: 1px solid var(--line);
}
.process-steps li::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: 24px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--red);
}
.process-steps h3 { margin: 0 0 16px; font-size: 1.15rem; font-weight: 600; }
.process-steps p { max-width: 256px; margin: 0; font-size: 1rem; color: var(--muted); }

/* ── Notă de echipă ────────────────────────────────────────────── */
.course-note-wide {
  max-width: 768px;
  margin: 48px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-size: .98rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ── FAQ (details/summary) ──────────────────────────────────────── */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.02em;
  cursor: pointer;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--hq-motion-fast, 150ms) ease;
}
.faq-item[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq-item > summary:hover { color: var(--red); }
.faq-body { padding: 0 0 32px; max-width: 768px; }
.faq-body p { margin: 0; font-size: 1.02rem; line-height: 1.72; color: var(--muted); }

/* ── Contact: e-mail lung pe rândul de contact ──────────────────── */
.contact-row strong { font-size: clamp(1rem, 1.3vw, 1.12rem); word-break: break-word; }

/* ── Adaptări ───────────────────────────────────────────────────── */
@media (max-width: 1050px) {
  .format-cards, .run-steps { grid-template-columns: 1fr; }
  .format-card, .run-steps article { min-height: 0; padding: 24px 0 32px; }
  .format-card + .format-card,
  .run-steps article + article {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .conditions-grid { grid-template-columns: 1fr; gap: 42px; }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  /* plafonează H1-ul ca rândul cel mai lung să încapă în
     shell la 360px. styles.css folosește 14.6vw, prea mult pentru
     o frază de 12 caractere. */
  .hero h1 { font-size: clamp(2.5rem, 10.5vw, 3.6rem); }
  .format-card, .run-steps article { padding: 24px 0; }
  .conditions-grid .offer-specs div { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .conditions-note { padding: 24px 24px 32px; }
  .process-steps { grid-template-columns: 1fr; }
  .process-steps li { min-height: auto; padding: 24px 0 32px; }
  .faq-item > summary { padding: 20px 0; font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item > summary::after { transition: none; }
}