/* Executive course page styles: hero, summary, program outline,
   instructors and the registration form. Loaded after fonts.css,
   base.css and motion.css.

   Structure (all inside .course, the page's single navy gradient band):
     .course-hero        label, Arapey gradient heading, subtitle, facts row
     .course-summary     "Summary" with the two split-gradient day cards
     .course-outline     "Program outline": --table (desktop) and --stacked
                         (tablet + phone; the original shows a different,
                         stacked variant with partly different content there)
     .instructors        six member cards in two rows
     .registration       form panel (#register)

   Desktop rules are the base; tablet and phone override them, mirroring the
   original's breakpoints. Values come from the original's Framer CSS. */

/* --------------------------------------------------------------------------
   Page tokens and shared text styles
   -------------------------------------------------------------------------- */
.page--executive-course {
  --ec-panel: var(--c-navy-900);              /* schedule panels */
  --ec-form-panel: var(--c-navy-800);         /* registration panel */
  --ec-field-border: rgba(136, 136, 136, 0.1);
  --ec-rule: var(--c-grey-333);               /* facts row bottom rule */
}

.course {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
  padding: 0 72px 110px;
  background: linear-gradient(180deg, var(--c-navy-950) 0%, var(--c-navy-900) 100%);
  overflow: clip;
}

/* Section heading: Urbanist 48/60, -0.03em */
.course-h2 {
  font: 400 48px/60px var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--c-white);
  text-align: left;
  white-space: pre;
}

/* Bold italic for <em><strong> runs (e.g. "(till May 1)") */
.course strong { font-weight: 700; }
.course em { font-style: italic; }

/* Like the original's Framer stacks, flex children never shrink: content
   that does not fit overflows (centred) instead of being squeezed. */
.course-hero > *,
.course-hero__heading > *,
.course-facts > *,
.course-facts__item > *,
.course-facts__fee > *,
.day-card > *,
.registration > *,
.registration__form > * { flex-shrink: 0; }

/* Fixed-width text blocks keep spaces like the original (pre-wrap), so a
   space before a line break still takes room. Only on the text elements
   themselves: containers must keep collapsing their formatting whitespace. */
.course-hero__sub,
.day-card__title,
.day-card__text p,
p.day-card__text,
.course-outline__day,
.schedule__cell,
.agenda__item p,
.registration__note {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* The original keeps its appear-animated layers composited
   (will-change: transform); this also gives the same text rasterisation. */
.course-hero__title,
.course-hero__sub,
.instructors .member-card { will-change: transform; }

/* Pill text centred like the original's button labels */
.course .btn-dark__text { text-align: center; }

/* The gradient pills sit above the grid lines, like the original. */
.course .btn-gradient { z-index: 1; }

/* --------------------------------------------------------------------------
   Hero ("Text Content" in the original)
   -------------------------------------------------------------------------- */
.course-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  padding: 80px 0 30px;
  overflow: hidden;
}

.course-hero__kicker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 26%;
  overflow: hidden;
}
.course-hero__kicker .label { white-space: pre; text-align: left; }

.course-hero__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.course-hero__title {
  font: italic 400 96px/110px var(--font-serif);
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--c-white);
  white-space: pre;
}
.course-hero__title-text {
  font-size: 108px;
  letter-spacing: -0.04em;
}

.course-hero__sub {
  width: 60%;
  text-align: center;
}

/* Facts row: Date | Location | Registration fee | Register */
.course-facts {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 60px 100px;
  box-shadow: inset 0 -1px 0 var(--ec-rule);   /* the original's inner 1px bottom border */
  overflow: hidden;
}
.course-facts__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 25%;
  overflow: hidden;
}
.course-facts__label {
  font: 500 14px/20px var(--font-sans);
  color: var(--c-grey-666);
  text-align: left;
  white-space: pre;
}
.course-facts__value {
  font: 500 20px/1.2em var(--font-sans);
  color: var(--c-white);
  white-space: pre;
}
.course-facts__fee {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  overflow: hidden;
}
.course-facts__old {
  display: block;
  font: 500 16px/20px var(--font-sans);
  text-decoration: line-through;
  text-align: left;
  white-space: pre;
}
.course-facts__cta { display: flex; }

/* --------------------------------------------------------------------------
   Summary: two day cards with split conic gradients
   -------------------------------------------------------------------------- */
.course-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 1296px;
  max-width: 100%;
  overflow: clip;
}

.day-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 65%;
  padding: 40px 30px;
  border-radius: 30px;
  overflow: hidden;
}
.day-card--1 {
  background: conic-gradient(from 0deg at 50% 50%, var(--c-green) 0deg, var(--c-black) 360deg);
}
.day-card--2 {
  background: conic-gradient(from 0deg at 50% 50%, var(--c-black) 0deg, var(--c-teal) 349.2deg);
}
.course-summary__day2 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

.day-card__kicker {
  font: italic 500 16px/20px var(--font-sans);
  text-align: left;
  white-space: pre;
}
.day-card__title {
  width: 100%;
  font: 700 40px/52px var(--font-sans);
  letter-spacing: -0.02em;
  text-align: left;
}
.day-card__text {
  width: 100%;
  font: 500 20px/1.2em var(--font-sans);
}
.day-card__text p + p { margin-top: 20px; }
.day-card__sub {
  font: italic 500 20px/28px var(--font-sans);
  text-align: center;
  white-space: pre;
}

/* Pair of buttons after the summary and after the outline */
.course-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Program outline
   -------------------------------------------------------------------------- */
.course-outline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 1296px;
  max-width: 100%;
  overflow: clip;
}
.course-outline--stacked { display: none; }

.course-outline__day {
  width: 100%;
  font: italic 500 20px/28px var(--font-sans);
  text-align: left;
}

/* Desktop table: a header bar plus rows on one navy panel */
.schedule {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 20px;
  border-radius: 0 0 30px 30px;
  background-color: var(--ec-panel);
  overflow: hidden;
}
.schedule__head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: 68px;
  border-radius: 30px 30px 20px 20px;
  background-color: var(--ec-panel);
}
.schedule__th {
  font: italic 500 20px/28px var(--font-sans);
  text-align: left;
}
.schedule__th--time { width: 10%; }
.schedule__th--session,
.schedule__th--people { width: 24%; }
.schedule__th--focus { width: 35%; }

.schedule__row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background-color: var(--ec-panel);
  overflow: hidden;
}
.schedule__cell {
  font: 500 20px/1.2em var(--font-sans);
  text-align: left;
}
.schedule__cell--time { width: 10%; }
.schedule__cell--session,
.schedule__cell--people { width: 25%; }
.schedule__cell--focus { width: 35%; }

/* Tablet + phone agenda: one stacked item per slot */
.agenda {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 20px;
  border-radius: 0 0 30px 30px;
  background-color: var(--ec-panel);
  overflow: hidden;
}
.agenda__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
}
.agenda__item p {
  width: 100%;
  font: 500 20px/1.2em var(--font-sans);
  text-align: left;
}

/* --------------------------------------------------------------------------
   Program Instructors
   -------------------------------------------------------------------------- */
.instructors {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  padding-top: 40px;
  overflow: hidden;
}
.instructors__row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 1296px;
  max-width: 100%;
  overflow: hidden;
}
.instructors .member-card {
  flex: 1 0 0px;
  width: 1px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Registration
   -------------------------------------------------------------------------- */
.registration {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
  padding: 40px 40px 90px;
  border-radius: 20px;
  background: var(--ec-form-panel);
  scroll-margin-top: 50px;
}

.registration__form {
  --field-border: var(--ec-field-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  padding-top: 28px;
  overflow: hidden;
}
.registration__form > .field { width: 100%; }
.registration__pair {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  overflow: hidden;
}
.registration__pair .field { flex: 1 0 0px; width: 1px; }

.registration .field--textarea { min-height: 100px; }
.registration .field--textarea .field__input {
  min-height: 100px;
  height: 100px;
  overflow-y: auto;
}
.registration .field--textarea .field__input::-webkit-resizer {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='m1.5 8 7-7M9 5.5l-3 3' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}

.registration__submit { width: 20%; }

.registration__note {
  width: 100%;
  font: italic 500 16px/20px var(--font-sans);
  text-align: left;
}
.registration__note a { color: var(--c-white); text-decoration: none; }
.registration__note a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Tablet: 810px to 1439.98px
   -------------------------------------------------------------------------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .course-hero__title {
    width: 100%;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  .course-facts { flex-wrap: wrap; padding: 40px; }
  .course-facts__item { width: 50%; padding-bottom: 20px; }
  .course-facts__fee { width: 50%; padding-bottom: 20px; }

  .course-summary,
  .course-outline { width: 100%; }
  .day-card { width: 100%; }
  .course-cta { flex-direction: column; }

  .course-outline--table { display: none; }
  .course-outline--stacked { display: flex; }

  .instructors__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }
  .instructors .member-card {
    width: 100%;
    height: 100%;
    align-self: start;
  }

  .registration__submit { width: 50%; }
}

/* --------------------------------------------------------------------------
   Phone: below 810px
   -------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .course {
    gap: 0;
    padding: 0 22px 110px;
  }
  .course-h2 {
    width: 100%;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  .course-hero {
    height: 1000px;
    padding: 40px 0;
  }
  .course-hero__kicker { width: 100%; }
  .course-hero__kicker .label { width: 120px; white-space: pre-wrap; }
  .course-hero__title {
    width: 100%;
    height: 422px;
    font-size: 60px;
    line-height: 80px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
  .course-hero__title-text { font-size: 72px; }
  .course-hero__sub { width: 100%; }

  .course-facts { flex-wrap: wrap; padding: 40px; }
  .course-facts__item { gap: 4px; width: 100%; padding-bottom: 20px; }
  .course-facts__fee { gap: 4px; padding-bottom: 20px; }

  .course-summary,
  .course-outline { width: 100%; }
  .day-card { width: 100%; }
  .day-card__sub { white-space: pre-wrap; }
  .course-cta { flex-direction: column; }

  .course-outline--table { display: none; }
  .course-outline--stacked { display: flex; padding-top: 80px; }

  .instructors { padding: 80px 0; }
  .instructors__row {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .instructors .member-card { flex: none; width: 100%; }
  .instructor--hans { height: 519px; }
  /* Only some names/roles keep their single-line (pre) layout on phones */
  .instructor--hans .member-card__role,
  .instructor--tba-1 .member-card__name,
  .instructor--tba-1 .member-card__role,
  .instructor--tba-2 .member-card__name,
  .instructor--tba-2 .member-card__role,
  .instructor--wesley .member-card__name,
  .instructor--wesley .member-card__role { width: 100%; white-space: pre-wrap; }

  .registration__pair { flex-direction: column; }
  .registration__pair .field { flex: none; width: 100%; }
  .registration__submit { width: 100%; }
}