/* Componente partajate pentru paginile de program (/programe/*).
   Se încarcă după styles.css și refolosește tokenii și clasele de bază
   (.section, .section-inner, .section-kicker, .breadcrumbs, .outcome-list, .contact-*). */

/* Program hero — degrade fin de la gri (stânga, sub text) la alb (dreapta, sub logo),
   fără chenar sau umbră pe caseta logo-ului. */
.program-hero {
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin: 30px calc(50% - 50vw) 0;
  padding: 48px 0 64px;
  background: linear-gradient(100deg, var(--surface) 0%, var(--surface) 32%, #f8f9fa 55%, #ffffff 82%);
}
.program-hero-grid {
  width: var(--page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.62fr);
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}
.program-hero h1 { max-width: 16.5ch; }
.program-hero h1 em { display: block; color: var(--blue); font-style: normal; }
.program-hero .hero-lead { max-width: 560px; }
.program-hero .hero-actions { margin-top: 34px; }
.program-hero-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}
.program-hero-mark img { width: 100%; height: auto; }
.program-identity {
  margin: 34px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.program-identity strong { display: block; color: var(--ink); font-weight: 540; }

.program-pillars {
  width: var(--page);
  margin: clamp(36px, 4vw, 56px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.program-pillars div {
  padding: 22px 24px 0 0;
}
.program-pillars div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.program-pillars strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--blue);
}
.program-pillars span { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Shared section heading (h2 scale reused across new sections) */
.section-heading h2,
.audience-grid h2,
.deliverables-section h2,
.timeline-section h2,
.continuity-section h2,
.router-section h2 {
  margin: 0;
  font-size: clamp(29px, 3.35vw, 45px);
  font-weight: 540;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.section-heading { max-width: 760px; }
.section-heading p:last-child { margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.68; }

/* Audience + signals */
.audience-grid {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
}
.audience-grid > div:first-child p { margin: 18px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.66; }
.audience-grid > div:first-child p + p { margin-top: 14px; color: var(--muted); font-size: 15px; }
.signals-block h3 {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 540;
  letter-spacing: -0.015em;
}
.signals-list {
  display: grid;
  gap: 0;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.signals-list li {
  position: relative;
  padding: 16px 0 16px 26px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.62;
}
.signals-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 24px;
  width: 6px;
  height: 6px;
  background: var(--blue);
}
.not-fit {
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.not-fit ul { margin: 14px 0 0; padding: 0 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.not-fit li + li { margin-top: 6px; }
.not-fit li a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* Deliverables */
.deliverables-section { background: var(--surface); }
.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 56px;
}
.deliverable-card {
  position: relative;
  padding: 30px 26px 34px;
  background: var(--white);
  border: 1px solid var(--line);
  min-height: 200px;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.deliverable-card:hover { border-color: #b7c6d2; box-shadow: 0 22px 60px rgba(18, 41, 61, 0.09); }
.deliverable-card .card-number {
  margin: 0 0 16px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.deliverable-card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 540; letter-spacing: -0.015em; line-height: 1.3; }
.deliverable-card p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.62; }

/* Timeline */
.timeline-section .section-heading { max-width: 820px; }
.duration-note {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.timeline-list {
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.timeline-list li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.timeline-list .index {
  padding-top: 3px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.timeline-period {
  margin: 0 0 6px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.timeline-list h3 { margin: 0 0 8px; font-size: 18px; font-weight: 540; letter-spacing: -0.018em; }
.timeline-list > li > div > p:not(.timeline-period):not(.timeline-result) { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.62; }
.timeline-result { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.timeline-result strong { color: var(--ink); font-weight: 540; }

/* Outcomes reuses .outcome-list from styles.css */

/* Continuity */
.continuity-section .section-heading { max-width: 780px; }
.continuity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 56px;
  background: var(--line);
  border: 1px solid var(--line);
}
.continuity-grid > div { padding: clamp(28px, 3vw, 40px); background: var(--white); }
.continuity-extension { background: var(--blue-dark) !important; color: var(--white); }
.continuity-grid h3 { margin: 0 0 18px; font-size: 17px; font-weight: 540; letter-spacing: -0.015em; }
.continuity-extension h3 { color: var(--white); }
.extension-name {
  margin: -6px 0 18px;
  color: #aac0d3;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.continuity-grid ul { margin: 0; padding: 0; list-style: none; }
.continuity-grid li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.continuity-extension li { border-top-color: var(--line-dark); color: rgba(255, 255, 255, 0.78); }
.continuity-grid li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 21px;
  width: 5px;
  height: 5px;
  background: var(--blue);
}
.continuity-extension li::before { background: #aac0d3; }

/* Requirements accordion */
.requirements-section .section-inner { max-width: 900px; }
.requirements-accordion {
  border: 1px solid var(--line);
  padding: 26px clamp(24px, 3vw, 36px);
}
.requirements-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
.requirements-accordion summary::-webkit-details-marker { display: none; }
.requirements-accordion summary .section-kicker { margin: 0; }
.accordion-icon {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--blue);
  transition: transform 0.3s var(--ease);
}
.requirements-accordion[open] .accordion-icon { transform: rotate(45deg); }
.accordion-body { padding-top: 22px; }
.accordion-body ul { margin: 0; padding: 0 0 0 18px; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.accordion-body li + li { margin-top: 8px; }
.accordion-note { margin: 20px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* Router band */
.router-section { background: var(--surface); }
.router-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}
.router-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.35s var(--ease);
}
.router-card:hover,
.router-card:focus-visible { border-color: var(--blue); transform: translateY(-3px); }
.router-context { color: var(--muted); font-size: 14px; line-height: 1.5; }
.router-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

@media (max-width: 1040px) {
  .program-hero-grid { grid-template-columns: 1fr; }
  .program-hero-mark { max-width: 320px; }
  .audience-grid { grid-template-columns: 1fr; }
  .deliverables-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .router-grid { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .breadcrumbs { margin-top: 20px; }
  .program-hero { padding: 32px 0 48px; }
  .program-pillars { grid-template-columns: 1fr; }
  .program-pillars div + div { padding-left: 0; border-left: 0; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
  .deliverables-grid { grid-template-columns: 1fr; }
  .timeline-list li { grid-template-columns: 1fr; gap: 10px; }
  .continuity-grid { grid-template-columns: 1fr; }
}