/* Events styles: the overview (events/index.html) and one page per event
   (events/<event>/index.html). Loaded after fonts.css, base.css, motion.css
   and executive-course.css.

   Every events page is built on the executive course page. Its body also
   carries .page--executive-course, so executive-course.css supplies the
   page tokens, the hero, facts row, day cards, program outline (table and
   stacked agenda), instructors and registration form. main.js picks the
   registration success message from the page's .page--event-* class.
   This file adds only what those pages need on top:
     .ev-crumbs        "Events / <event>" breadcrumb in the hero kicker
     .ev-why           positioning band (overview)
     .ev-cards         one card per event, each a link to its page (overview)
     .ev-rows/.ev-row  heading and text rows between 1px rules
     .ev-list          bulleted lists
     .ev-terms         label and value lists (cohort, fee, venue)
     .ev-outline__intro  one line under a program outline heading
     .ev-faculty       faculty intro, equal-height cards, centred last row
     .ev-nowrap        keeps a hyphenated word on one line

   Breakpoints as executive-course.css: desktop from 1440px (the base
   rules), tablet 810px to 1439.98px, phone below 810px. */

/* --------------------------------------------------------------------------
   Shared text
   -------------------------------------------------------------------------- */
/* Section headings here are longer than on the course page: let them wrap
   instead of overflowing below desktop width. */
.page--events .course-h2 {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Facts values carry a sub-line ("venue to be announced") that is longer
   than the course page's values: wrap instead of being clipped. */
.page--events .course-facts__value {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
/* The four facts items touch (25% each): keep a gap before the next column
   so a wrapped sub-line never runs into its neighbour. */
.page--events .course-facts__item:not(:last-child) { padding-right: 16px; }

.ev-why__text,
.ev-row__body,
.ev-terms__value,
.ev-outline__intro,
.ev-faculty__intro {
  font: 500 20px/1.2em var(--font-sans);
  letter-spacing: 0;
  text-align: left;
  overflow-wrap: break-word;
}

/* Bulleted lists: a small green dot, centred on the first line */
.ev-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.ev-list li {
  position: relative;
  padding-left: 28px;
}
.ev-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(0.6em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-green);
}

/* Label and value list: the facts row's grey label next to body text */
.ev-terms {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.ev-terms__item {
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.ev-terms .course-facts__label {
  flex: none;
  width: 140px;
  white-space: normal;
}
.ev-terms__value { flex: 1 1 0%; min-width: 0; }

/* A hyphenated word in a heading ("in-company") never breaks at the hyphen */
.ev-nowrap { white-space: nowrap; }

/* Links inside running text */
.ev-row__body a,
.ev-why__text a {
  color: var(--c-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Hero kicker: "Events / <event>" breadcrumb on the event pages
   -------------------------------------------------------------------------- */
/* overflow: visible so the link's focus ring (offset 3px) is not cut by the
   kicker box, which is exactly as tall as the link. The list wraps instead. */
.course-hero__kicker.ev-crumbs { width: auto; max-width: 100%; overflow: visible; }
.ev-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.ev-crumbs__list li { display: flex; align-items: center; gap: 8px; }
.ev-crumbs__sep { color: var(--c-grey-666); }
.course-hero__kicker .ev-crumbs__link {
  color: var(--c-grey-999);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--dur-hover) var(--ease-std), text-decoration-color var(--dur-hover) var(--ease-std);
}
.course-hero__kicker .ev-crumbs__link:hover,
.course-hero__kicker .ev-crumbs__link:focus-visible {
  color: var(--c-white);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   Positioning band (overview)
   -------------------------------------------------------------------------- */
.ev-why {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 1296px;
  max-width: 100%;
  padding-top: 40px;
}
.ev-why > .label { margin-bottom: -28px; }   /* kicker sits 12px above the heading */
.ev-why__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 65%;
}

/* --------------------------------------------------------------------------
   Event cards (overview): the day cards, three in a row, each one link
   -------------------------------------------------------------------------- */
.ev-events {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 1296px;
  max-width: 100%;
  scroll-margin-top: 130px;
}
.ev-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
}
.ev-cards__item { display: flex; min-width: 0; }
.ev-card {
  gap: 24px;
  width: 100%;
  color: var(--c-white);
  text-decoration: none;
  cursor: pointer;
}
.ev-card > * { flex-shrink: 0; }
.ev-card .day-card__title {
  font-size: 32px;
  line-height: 40px;
  overflow-wrap: break-word;
}
.ev-card__facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.ev-card__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ev-card__fact dt { font: italic 500 16px/20px var(--font-sans); }
.ev-card__fact dd {
  font: 500 20px/1.2em var(--font-sans);
  overflow-wrap: break-word;
}
.ev-card__promise { padding-top: 6px; }
/* The pill sits at the foot of the card, so the three cards line up. */
.ev-card__cta {
  margin-top: auto;
  max-width: 100%;
}
.ev-card__cta .btn-dark__text { white-space: normal; }

/* The whole card is the link: hovering or focusing it plays the pill's
   own hover (base.css 6.3), and the focus ring is drawn around the card. */
.ev-card:hover .btn-dark__fill,
.ev-card:focus-visible .btn-dark__fill {
  top: -20px;
  height: calc(100% + 40px);
  background-color: var(--c-white);
}
.ev-card:hover .btn-dark__text,
.ev-card:focus-visible .btn-dark__text,
.ev-card:hover .icon-arrow,
.ev-card:focus-visible .icon-arrow { color: var(--c-navy-950); }
.ev-card:hover .icon-arrow,
.ev-card:focus-visible .icon-arrow { transform: rotate(45deg); }
.ev-card:hover .btn-dark__border,
.ev-card:focus-visible .btn-dark__border { border-color: var(--c-green); }

/* --------------------------------------------------------------------------
   Rows: heading left, text right, between 1px rules
   -------------------------------------------------------------------------- */
.ev-rows {
  display: flex;
  flex-direction: column;
  width: 1296px;
  max-width: 100%;
}
.ev-row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0;
  box-shadow: inset 0 -1px 0 var(--ec-rule);
}
.ev-rows--ruled .ev-row:first-child {
  box-shadow: inset 0 1px 0 var(--ec-rule), inset 0 -1px 0 var(--ec-rule);
}
.ev-row__title {
  flex: none;
  width: 35%;
  font: 700 32px/40px var(--font-sans);
  letter-spacing: -0.02em;
  text-align: left;
}
.ev-row__body {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ev-row__body .ev-terms { padding-top: 8px; }

/* Program outline intro line */
.ev-outline__intro { width: 65%; }

/* --------------------------------------------------------------------------
   Faculty
   -------------------------------------------------------------------------- */
.ev-faculty__intro {
  width: 65%;
  text-align: center;
  margin-bottom: 12px;
}
/* Roles are longer than on the course page: equal-height cards, content
   from the top, so the photos stay in one line. */
.ev-faculty .instructors__row { align-items: stretch; }
.ev-faculty .member-card { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   Desktop only: a last faculty row with one card keeps the card width of
   the full rows above it, centred.
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .ev-faculty .ev-faculty__row--solo .member-card {
    flex: 0 0 calc((100% - 80px) / 3);
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   Tablet: 810px to 1439.98px
   -------------------------------------------------------------------------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .ev-why__text,
  .ev-outline__intro,
  .ev-faculty__intro { width: 100%; }

  .ev-row__title { width: 30%; font-size: 28px; line-height: 36px; }

  /* Three narrower cards: smaller type so each line still holds a phrase */
  .ev-cards { gap: 24px; }
  .ev-card { gap: 20px; padding: 30px 20px; }
  .ev-card .day-card__title { font-size: 26px; line-height: 32px; }
  .ev-card__fact dd,
  .ev-card .day-card__text { font-size: 18px; }
  .ev-card__cta .btn-dark__text { font-size: 16px; }
  .ev-card__cta .btn-dark__inner { padding: 12px 18px; }

  /* The single card of the last faculty row sits in the middle column */
  .ev-faculty__row--solo .member-card { grid-column: 2; }
}

/* Narrow tablets: label above value, as on phones, so values keep the full
   row body width instead of a 25 character column; the event cards stack. */
@media (min-width: 810px) and (max-width: 1023.98px) {
  .ev-terms__item { flex-direction: column; gap: 4px; }
  .ev-terms .course-facts__label { width: auto; }

  .ev-cards { grid-template-columns: 1fr; }
  .ev-card { padding: 40px 30px; }
  /* One wide card per row: the phone type sizes, not the three-column ones */
  .ev-card .day-card__title { font-size: 28px; line-height: 36px; }
  .ev-card__fact dd,
  .ev-card .day-card__text { font-size: 20px; }
  .ev-card__cta .btn-dark__text { font-size: 20px; }
  .ev-card__cta .btn-dark__inner { padding: 14px 24px; }
}

/* --------------------------------------------------------------------------
   Phone: below 810px
   -------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  /* The course page spaces its phone sections with paddings; these pages
     have more sections, so they keep a gap instead. */
  .page--events .course { gap: 60px; }
  .page--events .course-hero { height: auto; padding: 40px 0; }
  .page--events .course-hero__title { height: auto; }
  .page--events .course-outline--stacked { padding-top: 0; }
  .page--events .instructors { padding: 0; }
  /* The kicker texts are wider than the course page's fixed 120px kicker
     box: keep them on one line. */
  .page--events .course-hero__kicker .label { width: auto; white-space: pre; }

  .ev-why { gap: 32px; padding-top: 0; }
  .ev-why > .label { margin-bottom: -20px; }
  .ev-why__text { width: 100%; }

  .ev-events { gap: 32px; scroll-margin-top: 90px; }
  .ev-cards { grid-template-columns: 1fr; gap: 20px; }
  .ev-card { gap: 20px; padding: 30px 24px; }
  .ev-card .day-card__title { font-size: 28px; line-height: 36px; }

  .ev-row { flex-direction: column; gap: 20px; padding: 32px 0; }
  .ev-row__title { width: 100%; font-size: 26px; line-height: 34px; }
  .ev-row__body { width: 100%; }

  .ev-terms__item { flex-direction: column; gap: 4px; }
  .ev-terms .course-facts__label { width: auto; }

  .ev-outline__intro,
  .ev-faculty__intro { width: 100%; }

  /* Every faculty name and role wraps on phones (the course page opts in
     per card). */
  .ev-faculty .member-card__name,
  .ev-faculty .member-card__role { width: 100%; white-space: pre-wrap; }
}

/* Narrow phones (below 360px): the longer labels on these pages wrap
   instead of being clipped (CTA pairs), and the facts row gives its button
   room. */
@media (max-width: 359.98px) {
  /* The longest hero word ("governance", 288px at the phone size of 72px)
     fits the 276px hero at 320px */
  .page--events .course-hero__title-text { font-size: 66px; }
  .page--events .course-facts { padding-left: 20px; padding-right: 20px; }
  .page--events .course-cta .btn-gradient,
  .page--events .course-cta .btn-dark,
  .page--events .course-facts__cta .btn-gradient {
    max-width: 100%;
    height: auto;
    min-height: 40px;
  }
  .page--events .course-cta .btn-gradient,
  .page--events .course-facts__cta .btn-gradient {
    white-space: normal;
    text-align: center;
  }
  .page--events .course-cta .btn-dark__inner { padding-top: 8px; padding-bottom: 8px; }
  .page--events .course-cta .btn-dark__text { white-space: normal; }
  .page--events .course-hero__kicker .label { white-space: pre-wrap; }
}