@import url("navigation.css");
@import url("footer.css");

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 13px 19px;
  font-weight: 700;
  transition: transform .18s, box-shadow .18s;
}

.button:hover, .button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

/* Dark text on orange: white on the brand orange is only ~3:1 contrast. */
.orange {
  background: var(--orange);
  color: var(--ink);
}

.white {
  border-color: #fff;
  color: #fff;
}

.purple {
  background: var(--purple);
  color: #fff;
}

.outline {
  border-color: var(--purple);
  color: var(--purple);
}

.eyebrow {
  display: inline-block;
  color: var(--purple);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 700;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}


/* Site search: the header search button + panel, and the search box used on
   the 404 and search results pages (template-parts/search-form.php). */
.site-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 620px;
  margin-top: 26px;
  font-family: var(--font-ui);
}

/* 2026 redesign: a pill field with a magnifier, beside the purple pill button. */
.site-search-field {
  position: relative;
  flex: 1 1 220px;
  display: flex;
  align-items: center;
}

.site-search-field svg {
  position: absolute;
  left: 20px;
  width: 18px;
  height: 18px;
  color: var(--purple);
  pointer-events: none;
}

.site-search input {
  width: 100%;
  height: var(--ds-button-lg);
  padding: 0 20px 0 48px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  color: var(--ink-strong);
  background: #fff;
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.site-search input::placeholder {
  color: var(--muted-strong);
  opacity: 1;
}

.site-search input:focus,
.site-search input:focus-visible {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(79, 23, 168, .15);
  outline: none;
}

/* Phones: every text field, menu and message box at 16px at least. iPhones
   zoom the page into any field under 16px when it is tapped (UI/UX review:
   the forms were 13–15px). !important: it must win over each form's own
   size (search, footer and pop-up sign-up, Contact, Community forms). */
@media (max-width: 767px) {
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="submit"], [type="button"]),
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }
}

.site-search .pill-button {
  height: var(--ds-button-lg);
  padding: 0 28px;
  border: 0;
  font-size: var(--text-ui);
  cursor: pointer;
}

/* ==========================================================================
   2026 redesign, shared: pill buttons and the orange-underlined last word of
   a hero heading (homepage and About heroes).
   ========================================================================== */
/* Design system: one bold weight (700). Browsers render <b> / <strong> as
   "bolder", which turns 700 text into 900. */
b,
strong {
  font-weight: var(--ds-weight-bold);
}

/* Design system: pill buttons at 3 heights (44 / 48 / 54px, --ds-button-*):
   .pill-button is the large one; add --md or --sm. Colours: --primary (purple),
   --secondary (white, outlined), --join (orange with Night text). The label
   is centred, so a button stretched to full width (e.g. the Events "Next up"
   card, phones) keeps it in the middle (UI/UX audit). */
.pill-button {
  height: var(--ds-button-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-ui-md);
  font-weight: 700;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pill-button svg {
  width: 18px;
  height: 18px;
}

.pill-button--primary {
  padding: 0 30px;
  background: var(--purple);
  color: #fff;
  box-shadow: var(--shadow-button);
}

.pill-button--primary:hover {
  background: var(--purple-press);
  color: #fff;
}

.pill-button--secondary {
  background: #fff;
  border-color: var(--line-control);
  color: var(--ink-strong);
}

.pill-button--secondary:hover {
  border-color: var(--purple);
}

.pill-button--join {
  background: var(--join);
  color: var(--night-deep);
}

.pill-button--join:hover {
  background: var(--join-hover);
  color: var(--night-deep);
}

.pill-button--md {
  height: var(--ds-button-md);
  padding: 0 22px;
  font-size: var(--text-ui);
}

.pill-button--sm {
  height: var(--ds-button-sm);
  padding: 0 18px;
  font-size: var(--text-ui-sm);
}

.pill-button--md svg,
.pill-button--sm svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 767px) {
  .pill-button {
    justify-content: center;
    gap: 8px;
  }

  .pill-button svg {
    width: 16px;
    height: 16px;
  }
}

.hero-accent {
  position: relative;
  color: var(--purple);
  white-space: nowrap;
}

/* Highlight followed by more words ("Highlighted words" box): the whole heading gets a little
   more room between its lines, so the underline clears the next line and every line stays the
   same distance apart (UI/UX review: only the highlighted line used to get extra room, so the
   gap under it was 13px larger). The underline sits a little higher and runs past the word a
   little less. !important: it must win over each hero's own heading line height. */
:is(h1, h2):has(.hero-accent--mid) {
  line-height: 1.16 !important;
}

/* Phones: the heading's lines sit closer at 36px, so a little more room. */
@media (max-width: 767px) {
  :is(h1, h2):has(.hero-accent--mid) {
    line-height: 1.2 !important;
  }
}

.hero-accent--mid svg {
  bottom: -.13em;
  width: calc(100% + .15em);
}

/* A longer highlight (3+ words): all purple, only the last word underlined. */
.hero-accent-group {
  color: var(--purple);
}

/* Runs a little past the word, as in the prototype (186px under a 160px
   "lasts." at 64px; 104px under 90px at 36px). */
.hero-accent svg {
  position: absolute;
  left: 0;
  bottom: -.19em;
  width: calc(100% + .4em);
  height: .25em;
  overflow: visible;
}

/* The curve stretches to the word's width; the stroke keeps the prototype's
   weight (about 5px at 64px, 3.5px at 36px). */
.hero-accent path {
  fill: none;
  stroke: var(--join);
  stroke-width: .085em;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ==========================================================================
   Event card (2026 redesign): template-parts/card-event.php. Date tile,
   type label + status chip, title (the link, stretched over the card),
   summary and meta line. Phones: the mobile prototype's smaller card.
   ========================================================================== */
.ev-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--ink-strong);
  font-family: var(--font-ui);
  transition: border-color .15s ease;
}

.ev-card:hover {
  border-color: var(--line-control);
}

.ev-date {
  flex-shrink: 0;
  width: 84px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius-xl);
  background: var(--purple-wash);
  color: var(--ink-strong);
  text-transform: uppercase;
}

.ev-date.is-past {
  background: var(--held-tile);
  color: var(--muted-ui);
}

/* 12px, the minimum for small labels (UI/UX review: 11px). */
.ev-date-top,
.ev-date-bottom {
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .08em;
}

.ev-date-bottom {
  letter-spacing: .06em;
}

.ev-date-big {
  font-family: var(--font-display);
  font-size: var(--text-ui-tile);
  font-weight: 700;
  line-height: 1;
}

.ev-body {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ev-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ev-type {
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ev-type.is-purple { color: var(--purple); }
.ev-type.is-cyan { color: var(--cyan-ink-strong); }
.ev-type.is-orange { color: var(--orange-ink); }

.ev-status {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.ev-status.is-tbc { background: var(--orange-wash); color: var(--tbc-ink); }
.ev-status.is-open { background: var(--open-wash); color: var(--open-ink); }
.ev-status.is-confirmed,
.ev-status.is-ongoing { background: var(--purple-tint-ui); color: var(--purple); }
.ev-status.is-held { background: var(--held-wash); color: var(--muted-ui); }

.ev-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-card-title);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
}

.ev-title a {
  color: inherit;
  transition: color .15s ease;
}

/* The whole card opens the event. */
.ev-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.ev-card:hover .ev-title a {
  color: var(--purple);
}

.ev-title a:focus-visible {
  outline: none;
}

.ev-card:has(.ev-title a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.ev-desc {
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.ev-meta {
  margin: 0;
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
}

/* Row layout (Events page list, Events.dc.html): date tile | text, the facts under the title as one line with an
   icon each, and no button (UI/UX review: the title is the link, a "Details" button repeated it; the facts, in a
   right-aligned column, were hard to scan). */
.ev-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted-strong);
  font-size: var(--text-ui-sm);
  font-weight: 600;
  line-height: 1.5;
}

/* The icon beside the first line when a fact wraps (a long place on phones). */
.ev-facts li {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}

.ev-facts svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: .2em;
  color: var(--purple);
}

@media (min-width: 768px) {
  .ev-card--row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 22px 28px 22px 22px;
  }

  .ev-card--row .ev-date {
    width: 96px;
    height: 104px;
  }

  .ev-card--row .ev-date-big {
    font-size: var(--text-ui-tile-md);
  }

  .ev-card--row .ev-title {
    font-size: var(--text-story-title);
  }

  .ev-card--row .ev-facts {
    margin: 2px 0;
  }

  /* The event's picture on the right (UI/UX review: no pictures on the upcoming rows): whole, over a blurred copy of
     itself, so a poster's own text is never cropped. */
  .ev-card--row.has-thumb {
    grid-template-columns: 96px minmax(0, 1fr) 176px;
  }

  .ev-thumb {
    position: relative;
    width: 176px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--ds-radius-sm);
    background: var(--purple-wash-hover);
  }

  .ev-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .ev-thumb-backdrop {
    object-fit: cover;
    transform: scale(1.25);
    filter: blur(14px) saturate(1.1);
    opacity: .8;
  }

  /* Sized to the picture itself (not the box), so its own corners are rounded; 6px from the edges. */
  .ev-thumb .ev-thumb-whole {
    margin: auto;
    width: auto;
    height: auto;
    max-width: calc(100% - 12px);
    max-height: calc(100% - 12px);
    border-radius: 6px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .2));
  }
}

/* Phones: no thumbnail (the rows stay compact). */
@media (max-width: 767px) {
  .ev-thumb {
    display: none;
  }
}

@media (max-width: 767px) {
  .ev-card {
    gap: 14px;
    padding: 16px;
  }

  .ev-date {
    width: 72px;
    height: 76px;
    gap: 0;
    border-radius: var(--radius-ui);
  }

  /* 12px: the minimum for small labels (UI/UX review: 11px); a tighter spacing keeps "WED–SAT" in the tile. */
  .ev-date-top,
  .ev-date-bottom {
    font-size: var(--text-ui-2xs);
    letter-spacing: .02em;
  }

  .ev-date-bottom {
    letter-spacing: normal;
  }

  .ev-date-big {
    font-size: var(--text-ui-tile-sm);
    line-height: 1.05;
  }

  .ev-body {
    gap: 5px;
  }

  .ev-labels {
    gap: 8px;
  }

  .ev-type {
    font-size: var(--text-ui-2xs); /* 12px: the minimum for small labels (UI/UX review: 11px). */
    letter-spacing: .08em;
  }

  .ev-status {
    padding: 2px 8px;
    font-size: var(--text-ui-2xs); /* 12px: mixed-case text ("Confirmed", "Held"). */
  }

  .ev-title {
    font-size: var(--text-ui-md);
  }

  .ev-desc {
    font-size: var(--text-ui-xs);
    line-height: 1.5;
  }

  .ev-meta {
    font-size: var(--text-ui-2xs);
  }

  .ev-facts {
    gap: 4px 14px;
    font-size: var(--text-ui-xs);
  }

  .ev-facts svg {
    width: 15px;
    height: 15px;
  }
}

/* ==========================================================================
   Full-screen heroes (2026 redesign pages, tablets and computers): every hero
   fills the screen below the header except the last --hero-peek, so the top
   of the next section always shows and the page visibly continues (a hero
   ending exactly at the bottom of the screen looked like the end of the
   page: UI/UX review). On 4K and tall screens the hero stops growing at
   --hero-max-height (taller content still grows it), so it doesn't become a
   large empty block. The breadcrumb stays at the top and the hero's grid sits
   at the bottom of the space left, so the gap to the next section is the same
   on every page and screen (any room left goes under the breadcrumb).
   Heroes: homepage, About, the .page-hero pages with a grid (Membership,
   Events), the event page and the Community pages. List and form pages
   (Events, News, Newsletters, Training Partners, Contact) add .hero--fit:
   their hero fits its content, so the list or form starts on the first screen.
   ========================================================================== */
@media all {
  .home main > .hero,
  main > .about-hero,
  main > .page-hero:has(> .wrap > .page-hero-grid),
  main > .evd-hero,
  main > .co-hero,
  main > .nlx-hero {
    min-height: min(calc(100vh - var(--header-height) - var(--hero-peek)), var(--hero-max-height));
    min-height: min(calc(100svh - var(--header-height) - var(--hero-peek)), var(--hero-max-height));
    display: flex;
    flex-direction: column;
  }

  .home main > .hero {
    justify-content: center;
  }

  .home main > .hero > .wrap {
    margin-block: 0;
  }

  main > .about-hero > .wrap,
  main > .page-hero > .wrap,
  main > .evd-hero > .wrap,
  main > .co-hero > .wrap,
  main > .nlx-hero > .wrap {
    flex: 1 0 auto;
    margin-block: 0;
  }

  .about-hero-grid,
  .page-hero > .wrap > .page-hero-grid,
  .evd-hero-grid,
  .co-hero-grid,
  .nlx-hero-grid {
    margin-block: auto 0;
  }
}
/* Phones: heroes fit their content (a full screen left large empty areas
   above and below short heroes, such as a TBC event or Contact). */
@media (max-width: 767px) {
  .home main > .hero,
  main > .about-hero,
  main > .page-hero:has(> .wrap > .page-hero-grid),
  main > .evd-hero,
  main > .co-hero,
  main > .nlx-hero {
    min-height: 0;
  }

  .about-hero-grid,
  .page-hero > .wrap > .page-hero-grid,
  .evd-hero-grid,
  .co-hero-grid,
  .nlx-hero-grid {
    margin-block: 0;
  }
}

/* List and form pages (.hero--fit), tablets and computers: the hero fits its
   content, without the room kept for the prototype's pill above the heading,
   so the list or form below starts on the first screen. Its foot stays the
   prototypes' 96px, as every hero's: hero to first section is the same on
   every page (96px under the hero's content, 96px above the next section's;
   36px and 40px on phones). */
@media (min-width: 768px) {
  main > .page-hero.hero--fit:has(> .wrap > .page-hero-grid),
  main > .nlx-hero.hero--fit {
    min-height: 0;
  }

  .hero--fit .page-hero-text,
  .hero--fit .nlx-hero-text {
    padding-top: 16px;
  }
}

/* ==========================================================================
   Inner-page hero (2026 redesign; Membership so far): breadcrumb, Sora
   heading with orange-underlined last word(s), intro, pill buttons, and a
   frosted card over soft brand blurs on the right. The prototype's small
   pill above the heading is not used; its space (38px + 26px gap) is kept
   above the heading so the layout matches the prototype. Side by side above
   1180px; stacked below; phones follow the mobile prototypes.
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 40px 0 96px;
  background: var(--surface-soft);
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.page-hero-inner {
  width: min(var(--max-wide), calc(100% - 42px));
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.page-breadcrumb {
  display: flex;
  gap: 8px;
  min-width: 0;
  color: var(--muted-strong);
  font-size: var(--text-ui-xs);
  font-weight: 600;
}

.page-breadcrumb a {
  color: var(--purple);
}

.page-breadcrumb a:hover {
  color: var(--purple-press);
}

.page-breadcrumb > * {
  flex-shrink: 0;
}

/* One line: a long current-page title (a story or event) is cut with an ellipsis;
   the full title is the heading below, and screen readers read it in full. */
.page-breadcrumb [aria-current] {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
}

.page-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  padding-top: 64px;
}

.page-hero h1 {
  max-width: none;
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: wrap;
}

.page-hero-lead {
  max-width: 580px;
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-xl);
  line-height: 1.6;
}

.page-hero-lead a {
  color: var(--purple);
  font-weight: 700;
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-hero-actions .pill-button--primary {
  padding: 0 28px;
}

.page-hero-actions .pill-button svg {
  width: 16px;
  height: 16px;
}

.page-hero :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

.page-hero-aside {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.page-blur {
  position: absolute;
  border-radius: var(--radius-round);
  filter: blur(70px);
  pointer-events: none;
}

.page-blur.is-violet {
  right: 260px;
  top: -40px;
  width: 260px;
  height: 260px;
  background: var(--violet);
  opacity: .5;
}

.page-blur.is-orange {
  right: -20px;
  top: 80px;
  width: 220px;
  height: 220px;
  background: var(--join);
  opacity: .4;
}

.page-blur.is-cyan {
  right: 150px;
  bottom: -60px;
  width: 240px;
  height: 240px;
  background: var(--highlight);
  opacity: .4;
}

.glass-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-menu);
}

.glass-card-label {
  margin: 0;
  color: var(--purple);
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .page-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .page-hero-text {
    max-width: 720px;
  }

  .page-hero-aside {
    max-width: 540px;
  }
}

@media (max-width: 767px) {
  .page-hero {
    padding: 24px 0 36px;
  }

  .page-hero-inner {
    gap: 18px;
  }

  .page-breadcrumb {
    gap: 6px;
    font-size: var(--text-ui-2xs);
  }

  .page-hero-grid {
    gap: 36px;
  }

  .page-hero-text {
    gap: 18px;
    padding-top: 0;
  }

  .page-hero h1 {
    line-height: 1.08;
    letter-spacing: -.03em;
  }

  .page-hero-lead {
    font-size: var(--text-ui-md);
  }

  .page-hero-actions {
    flex-direction: column;
    align-self: stretch;
    gap: 10px;
  }

  /* Every page's hero button size on phones (site-wide uniformity review, 2026-10-29). */
  .page-hero-actions .pill-button {
    height: var(--ds-button-md);
  }

  .page-blur {
    filter: blur(55px);
  }

  .page-blur.is-violet {
    left: -20px;
    right: auto;
    top: 0;
    width: 200px;
    height: 200px;
  }

  .page-blur.is-orange {
    right: -30px;
    top: 60px;
    width: 180px;
    height: 180px;
  }

  .page-blur.is-cyan {
    left: 100px;
    right: auto;
    bottom: 0;
    width: 200px;
    height: 200px;
  }

  .glass-card {
    padding: 24px;
    border-radius: var(--radius-xl);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
  }

  .glass-card-label {
    font-size: var(--text-ui-3xs);
  }
}

/* ---------------------------------------------------------------------------
   Story cards (.ev-recap): the Events page's past list (card-event-recap.php)
   and the News & Media page's stories (card-story.php). The news card layout
   (picture on top) with the Events.dc.html fonts and colours, three across.
   Then the page links (pmilc_news_pagination()) of both lists.
   --------------------------------------------------------------------------- */
.ev-recaps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.ev-recap {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--ink-strong);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ev-recap:hover {
  border-color: var(--line-control);
  box-shadow: var(--shadow-card);
}

.ev-recap-visual {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--held-tile);
}

.ev-recap-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Whose story (PMI MENA / PMI Global), on the picture: a dark chip, readable on any picture (the News page's story
   cards, card-story.php 'source_chip'; past event cards name the organizer in their text, .ev-recap-org). */
.ev-recap-source {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(26, 11, 69, .82);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Poster, cover or infographic: shown whole over a blurred copy of itself. The whole picture is sized to itself
   (not the box), 10px from the edges, so its own corners are rounded (--radius-picture). */
.ev-recap-visual--whole .ev-recap-backdrop {
  transform: scale(1.2);
  filter: blur(18px) saturate(1.1);
  opacity: .85;
}

.ev-recap-visual--whole .ev-recap-whole {
  margin: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  border-radius: var(--radius-picture);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25));
}

/* No picture: the source's logo (white Chapter logo on purple; PMI logo on white). */
.ev-recap-visual--logo {
  display: grid;
  place-items: center;
  background: var(--purple);
}

.ev-recap-visual--logo.is-pmi {
  background: #fff;
}

.ev-recap-visual--logo img {
  position: static;
  width: 58%;
  max-width: 260px;
  height: auto;
  max-height: 60%;
  object-fit: contain;
}

.ev-recap-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 24px;
}

/* "Type · date": every item starts with its own dot, and the row is shifted
   16px left and clipped back, so the dot of whichever item starts a line is cut
   off. On a wrapped row the date moves down with no dot left dangling at the
   end of the first line (UI/UX review). */
.ev-recap-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 2px;
  margin: 0 0 0 -16px;
  clip-path: inset(0 0 0 16px);
  color: var(--muted-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.ev-recap-meta > *::before {
  content: "·";
  content: "·" / "";
  display: inline-block;
  width: 16px;
  color: var(--muted-ui);
  text-align: center;
}

/* The type, then the date on its own line, on every card (UI/UX review: titles in a row started at different
   heights when a long type pushed the date down on some cards only). */
.ev-recap-meta.is-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  clip-path: none;
}

.ev-recap-meta.is-stacked > *::before {
  content: none;
}

/* The type with, for a PMI MENA / PMI Global event, its organizer as a small teal pill beside it (in the card's text,
   not over the picture: the owner's request; teal, as PMI stories on the news cards). */
.ev-recap-kind {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.ev-recap-org {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--cyan-wash);
  color: var(--cyan-ink-strong);
  font-size: var(--text-ui-3xs);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  text-transform: none;
}

.ev-recap-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-story-title);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
}

.ev-recap-title a {
  color: inherit;
  transition: color .15s ease;
}

/* The whole card opens the event. */
.ev-recap-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ev-recap:hover .ev-recap-title a {
  color: var(--purple);
}

.ev-recap-title a:focus-visible {
  outline: none;
}

.ev-recap:has(.ev-recap-title a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.ev-recap-desc {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* The facts: the icon line of the upcoming rows (.ev-facts), as on them (UI/UX review: a 13px grey line here). */
.ev-recap-facts {
  margin: 0;
}

/* "Slides" / "Recording" chips: what the event page offers beyond the recap. */
.ev-recap-has {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev-recap-has li {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--purple-tint-ui);
  color: var(--purple);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.ev-recap-link {
  margin-top: auto;
  padding-top: 6px;
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

/* Page links (markup from pmilc_news_pagination(), as on the news listing). */
.ev-list .news-pagination ul,
.news-page .nmx-news .news-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.ev-list .news-pagination a,
.news-page .nmx-news .news-pagination a,
.ev-list .news-pagination span,
.news-page .nmx-news .news-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: var(--ds-button-sm);
  padding: 0 16px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-strong);
  font-family: var(--font-ui);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  transition: border-color .15s ease, color .15s ease;
}

.ev-list .news-pagination a:hover,
.news-page .nmx-news .news-pagination a:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.ev-list .news-pagination .current,
.news-page .nmx-news .news-pagination .current {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

.ev-list .news-pagination .dots,
.news-page .nmx-news .news-pagination .dots {
  border-color: transparent;
}

@media (max-width: 1100px) {
  .ev-recaps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .ev-recaps {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .ev-recap-body {
    gap: 8px;
    padding: 18px;
  }

  .ev-recap-meta {
    font-size: var(--text-ui-2xs); /* 12px: dates stay readable on phones. */
  }

  .ev-recap-title {
    font-size: var(--text-ui-lg);
  }

  .ev-recap-desc {
    font-size: var(--text-ui-xs);
    line-height: 1.5;
  }

  .ev-recap-link {
    font-size: var(--text-ui-xs);
  }

  .ev-list .news-pagination ul,
  .news-page .nmx-news .news-pagination ul {
    margin-top: 28px;
  }

  .ev-list .news-pagination a,
  .news-page .nmx-news .news-pagination a,
  .ev-list .news-pagination span,
  .news-page .nmx-news .news-pagination span {
    padding: 0 14px;
    font-size: var(--text-ui-xs);
  }
}
/* Phones: each filter group (News sources / topics, Events sources / topics)
   is one row that scrolls sideways and runs to the screen edges, instead of
   wrapping into several rows above the list (navigation.js brings the chosen
   pill into view). "main" outweighs the pages' own wrapping rules, which load later. */
@media (max-width: 767px) {
  /* A soft fade at the right edge says the row scrolls on (UI/UX review: pills cut off with no hint); the extra end
     padding lets the last pill scroll clear of it. */
  main .nmx-filters,
  main .event-switch.source-filter {
    flex-wrap: nowrap;
    margin-inline: -21px;
    padding: 2px 48px 2px 21px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 21px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  }

  .nmx-filters::-webkit-scrollbar,
  .event-switch.source-filter::-webkit-scrollbar {
    display: none;
  }

  main .nmx-filters a,
  main .event-switch.source-filter a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
/* Phones: bigger tap areas for small stand-alone text links (breadcrumbs,
   "All … →" links, "Full PDU guide →", the footer's legal links). The extra
   padding is cancelled by a negative margin, so nothing moves. */
@media (max-width: 767px) {
  .page-breadcrumb a,
  .stx-more-all,
  .evd-more-all,
  .nle-more-all,
  .evd-pdu-guide,
  .footer-legal nav a {
    display: inline-block;
    padding-block: 10px;
    margin-block: -10px;
  }
}