/* masters.md FIRST: Read masters.md BEFORE editing or adding files.
 * Extra stylesheet for the NEW pages of the temporary marketing site
 * (cursuri.html, business.html, contact.html). Loaded AFTER styles.css,
 * which stays untouched so the existing pages are not affected.
 * Same visual identity v1 tokens (--ink / --kraft / --coral / --indigo ...).
 */

/* ---- Cohort band (cursuri.html) --------------------------------------
 * The "when does this actually start" zone, directly under the hero. Ink
 * panel so the date is the first hard fact on the page. */
.cohort-band {
  background: var(--ink); color: var(--cream);
  border-radius: var(--radius-lg); padding: 34px 36px;
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 32px; align-items: start;
}
.cohort-band .eyebrow { color: var(--kraft); }
.cohort-date {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.1; margin: 12px 0 8px; color: var(--cream);
}
.cohort-date em { color: var(--coral); font-style: italic; }
.cohort-band p { color: rgba(250, 247, 241, .74); font-size: .94rem; margin: 0; }
.cohort-band h4 {
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--kraft); margin: 0 0 8px;
}
.cohort-band .hl { color: var(--coral); font-weight: 600; }

@media (max-width: 860px) {
  .cohort-band { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
}

/* ---- Course catalogue (cursuri.html) ----------------------------------
 * Card grid for the course list. Top row = delivery type + enrolment status.
 * The hours/weeks figures sit in their own kraft panel so they read at a
 * glance. Mentor row and the enrol button are pinned to the bottom
 * (.course-foot { margin-top: auto }) so every card in a row lines up.
 * Filter chips above the grid are driven by `data-type` (see the inline
 * script in cursuri.html). Three delivery types only: live / mixt / async. */
.course-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 32px;
}
.chip {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--cream);
}

.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.course-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.course-card:hover {
  border-color: var(--border-strong); transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.course-card[hidden] { display: none; }

/* Alternating card background so the cards read as separate objects instead of
   one continuous field. `.is-alt` is applied by the filter script to every
   other VISIBLE card — not via :nth-child, which would keep counting the cards
   a filter has hidden and leave the stripes looking random. In the 2- and
   3-column grids this lands as a checkerboard; on mobile it is a plain
   alternation. The inner panels get their borders nudged so they still read
   against the darker kraft. */
.course-card.is-alt {
  background: var(--kraft);
  border-color: rgba(27, 28, 31, .10);
}
.course-card.is-alt .course-stats {
  background: rgba(255, 253, 249, .55);
  border-color: rgba(27, 28, 31, .10);
}
.course-card.is-alt .course-stats div + div { border-left-color: rgba(27, 28, 31, .10); }
.course-card.is-alt .course-mentor { border-top-color: rgba(27, 28, 31, .12); }
.course-card.is-alt .mentor-avatar.is-tba { border-color: rgba(27, 28, 31, .30); }
.course-card.is-alt .tag-early { border-color: rgba(27, 28, 31, .20); }
.course-card.is-alt .btn-outline { border-color: rgba(27, 28, 31, .34); }
.course-card.is-alt .btn-outline:hover { background: rgba(255, 253, 249, .6); }
.course-card.is-alt:hover { border-color: rgba(27, 28, 31, .28); }

.course-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
/* Catalogue number, first thing in the top row. Hardcoded in the HTML rather
   than counted in CSS/JS so it stays the SAME number when a filter is active —
   the point of it is being able to say "drop 23" and have that mean one course.
   Renumber when courses are actually added or removed. */
.course-nr {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  color: var(--fog); letter-spacing: .06em;
  padding-right: 2px;
}
.tag {
  font-family: var(--font-mono);
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
/* Delivery type */
.tag-live  { background: rgba(59, 63, 224, .10);  color: var(--indigo); }
.tag-mixt  { background: rgba(167, 156, 135, .22); color: #6E5F42; }
.tag-async { background: rgba(27, 28, 31, .07);   color: var(--muted); }
/* Start date — pushed to the right edge of the top row. Always month + year.
   .tag-nov = confirmed cohort (ink, reads as a commitment);
   .tag-early = estimated month for a course still in the pipeline, so it is
   deliberately quieter than the confirmed one. */
.tag-status { margin-left: auto; }
.tag-nov    { background: var(--ink); color: var(--cream); }
.tag-early  { background: transparent; border: 1px solid var(--border); color: var(--muted-2); }

.course-card h3 { font-size: 1.18rem; margin: 0 0 8px; line-height: 1.3; }
.course-card > p { color: var(--muted); font-size: .93rem; margin: 0 0 20px; }

/* Hours + weeks. Visible at a glance, but deliberately quieter than the course
   title — this is supporting detail, not the headline. */
.course-foot { margin-top: auto; }
.course-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin: 0 0 14px;
}
.course-stats div { padding: 9px 10px; text-align: center; }
.course-stats div + div { border-left: 1px solid var(--border); }
.course-stats .v {
  font-family: var(--font-sans); font-size: .95rem; font-weight: 600;
  line-height: 1.2; color: var(--ink);
}
.course-stats .k {
  font-family: var(--font-mono); font-size: .56rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--fog); margin-top: 1px;
}
.course-pace {
  font-family: var(--font-mono); font-size: .64rem; color: var(--fog);
  text-align: center; margin: -6px 0 12px;
}

.course-mentor {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.mentor-avatar {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--kraft); color: var(--ink);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
}
/* Mentor not announced yet — dashed ring so it reads as a placeholder. */
.mentor-avatar.is-tba {
  background: transparent; border: 1px dashed var(--border-strong);
  color: var(--fog); font-size: .58rem; font-weight: 700;
}
.mentor-name { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.mentor-role {
  font-family: var(--font-mono); font-size: .68rem;
  color: var(--fog); letter-spacing: .03em;
}

.course-cta { display: block; width: 100%; text-align: center; margin-top: 16px; }
/* Small print under the button. On pre-enrolment cards it carries two lines:
   the "-10% early bird" label, then the plain-language terms (no payment now,
   the voucher applies at launch) — so nobody thinks they are being charged. */
.course-note {
  font-family: var(--font-mono); font-size: .63rem; color: var(--muted-2);
  text-align: center; margin: 10px 0 0; letter-spacing: .02em; line-height: 1.55;
}
.course-note .hl {
  color: var(--coral-deep); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; font-size: .62rem;
}

.course-empty {
  display: none; padding: 40px 0;
  font-family: var(--font-mono); font-size: .84rem; color: var(--muted);
}

/* Legend under the grid — what the three delivery types actually mean. */
.type-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.type-legend div { border-left: 2px solid var(--border); padding-left: 14px; }
.type-legend h4 {
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink); margin: 0 0 6px;
}
.type-legend p { color: var(--muted); font-size: .86rem; margin: 0; }

@media (max-width: 980px) {
  .course-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .course-grid { grid-template-columns: 1fr; }
  .type-legend { grid-template-columns: 1fr; }
  .course-filters { gap: 8px; }
  .chip { padding: 8px 13px; font-size: .68rem; }
}

/* ---- Business page (business.html) --------------------------------- */
.biz-list { counter-reset: bizstep; display: grid; gap: 0; }
.biz-list > div {
  display: grid; grid-template-columns: 64px 1fr; gap: 20px;
  padding: 26px 0; border-bottom: 1px solid var(--border);
}
.biz-list > div:last-child { border-bottom: 0; }
.biz-list .n {
  font-family: var(--font-mono); font-size: .8rem; color: var(--coral);
  letter-spacing: .06em; padding-top: 4px;
}
.biz-list h3 { margin: 0 0 6px; font-size: 1.2rem; }
.biz-list p { margin: 0; color: var(--muted); font-size: .96rem; }

.logo-strip {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px;
}
.logo-strip span {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 15px;
}
@media (max-width: 620px) {
  .biz-list > div { grid-template-columns: 1fr; gap: 6px; }
}

/* ---- Enrolment modal (cursuri.html) ----------------------------------
 * Native <dialog>, so focus trapping, Escape-to-close and the backdrop come
 * from the browser. See inscriere.js. */
.enrol-dialog {
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--foreground);
  padding: 34px; width: min(480px, calc(100vw - 32px)); max-height: 90vh;
  box-shadow: 0 24px 60px rgba(27, 28, 31, .22);
  position: relative; /* containing block for .enrol-close */
}
.enrol-dialog::backdrop { background: rgba(27, 28, 31, .55); }
.enrol-dialog[open] { display: block; }

.enrol-close {
  position: absolute; top: 14px; right: 16px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--fog); padding: 4px 8px;
}
.enrol-close:hover { color: var(--ink); }

.enrol-course {
  font-size: clamp(1.4rem, 3.4vw, 1.8rem); line-height: 1.2;
  margin: 12px 0 12px; padding-right: 24px;
}
.enrol-terms { color: var(--muted); font-size: .94rem; margin: 0 0 24px; }
.enrol-form button[type="submit"] { width: 100%; }
.enrol-form .field input { background: var(--surface-3); }
.enrol-status { margin: 16px 0 0; }
.enrol-consent {
  font-family: var(--font-mono); font-size: .64rem; color: var(--fog);
  line-height: 1.6; margin: 14px 0 0;
}

@media (max-width: 560px) {
  .enrol-dialog { padding: 26px 20px; }
}