/* Honte Quest — pagina de ofertă școlară (/ateliere-go-scoli/)
   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 PROPOSAL și marcate. */

/* ── Hero: H1 ────────────────────────────────────────────────────
   PROPOSAL: plafon local pe font. 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.

   Draftul rev. 04 a rescris H1-ul ca "Cursuri și / ateliere /
   de Go pentru școli." — span-ul cel mai lung are acum 19 caractere,
   față de 13 la forma anterioară. .hero h1 din styles.css folosește
   14.6vw sub 700px, ceea ce iese din coloana de text (care ține
   jumătate din shell minus gap) până la ~700px: la 360px, cuvântul
   "ateliere" ar avea nevoie de 219px într-o coloană de 145px.
   Plafonul de 32px e sub limita calculată de 34.7px, deci cel mai
   lung cuvânt rămâne întreg la orice lățime. overflow-wrap:break-word
   rămâne în baseline ca plasă de siguranță. */
@media (max-width: 700px) {
  .hero h1 { font-size: min(14.6vw, 32px); }
}

/* ── Hero: tagline și notă, din draftul rev. 04 ────────────────── */
.hero-tagline {
  max-width: 640px;
  margin: 24px 0 0;
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.02em;
}
.hero-note {
  max-width: 620px;
  margin: 16px 0 0;
  color: var(--muted);
}

/* ── Carduri de format (3 formate) ─────────────────────────────── */
.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); }

/* ── Curs: specificații + competențe ────────────────────────────── */
.course { background: var(--white); }
.course-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
}
.course-specs h3,
.course-skills h3 {
  margin: 0 0 26px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.course-specs .offer-specs { margin-top: 0; border-top: 1px solid var(--line); }
.course-note {
  max-width: 640px;
  margin: 32px 0 0;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--muted);
}
.course-note-wide { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); max-width: 768px; }

.skill-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.skill-list li {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
}
.skill-list strong { display: block; margin-bottom: 8px; color: var(--black); font-weight: 600; }

/* ── Atelier punctual ──────────────────────────────────────────── */
.workshop-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 8px;
}
.workshop-card {
  padding: 32px 32px 48px;
  border: 1px solid var(--line);
  background: var(--moon);
}
.workshop-card h3 {
  margin: 0 0 16px;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.03em;
}
.workshop-card p { margin: 0; color: var(--muted); }

/* ── 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;
  position: relative;
  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 14px; font-size: 1.15rem; font-weight: 600; }
.process-steps p { max-width: 256px; margin: 0; font-size: 1rem; color: var(--muted); }

/* ── Demonstrație ───────────────────────────────────────────────── */
.demo { background: var(--white); }
.demo .why-photo { margin: 0; overflow: hidden; }
.demo .why-photo img { width: 100%; }

/* ── 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 { grid-template-columns: 1fr; }
  .format-card { min-height: 0; padding: 28px 0; }
  .format-card + .format-card { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .course-grid { grid-template-columns: 1fr; gap: 42px; }
  .workshop-split { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  /* PROPOSAL: 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 13 caractere. */
  .hero h1 { font-size: clamp(2.5rem, 10.5vw, 3.6rem); }
  .format-card, .format-card + .format-card { padding: 24px 0; }
  .course-specs .offer-specs div { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .workshop-card { padding: 24px 24px 32px; }
  .process-steps { grid-template-columns: 1fr; }
  .process-steps li { min-height: auto; padding: 24px 0 26px; }
  .faq-item > summary { padding: 24px 0; font-size: 1.05rem; }
}

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

/* ── Fotografie școlară: cadre de grup și demonstrație ──────────────
   Cele trei cadre livrate sunt decupaje 16:9, 4:3 și pătrat ale aceleiași
   scene. Fără o cutie fixă, un decupaj pătrat ar rupe ritmul vertical al
   paginii și browserul ar rezerva o altă înălțime la încărcare. */
.photo-frame { margin: 0; overflow: hidden; }
.photo-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.course-photo { margin: 56px 0 0; }
.course-photo img { border-radius: 2px; box-shadow: 0 18px 60px rgba(35, 31, 32, .12); }

@media (max-width: 700px) {
  .course-photo { margin-top: 36px; }
}