/* ==========================================================================
   Connect 2026 - Post Event Websites (listing + detail)                T-41/42
   --------------------------------------------------------------------------
   Rebuilt against "connect 2026 - post-event pages.pdf" and card.css/
   button.css/chip.css/tabs.css for every token and pattern this borrows
   rather than reinvents - see post-event-websites.jsp and
   post-event-website.jsp for what each class belongs to.

   DEPENDS ON: tokens.css, components/button.css, components/chip.css,
   components/card.css, components/person.css, components/tabs.css
   ========================================================================== */

/* ======================================================= PLUS BANNER ===== */
.cn-post-event__plus-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-4);
  margin-block: var(--cn-space-5);
  padding: var(--cn-space-4) var(--cn-space-5);
  background: var(--cn-panel-blue);
  border-radius: var(--cn-radius-md);
}
.cn-post-event__plus-banner .cn-body { margin: 0; }


.cn-mb-2  { margin-bottom: var(--cn-space-2); }
.cn-mb-4  { margin-bottom: var(--cn-space-4); }
.cn-mb-5  { margin-bottom: var(--cn-space-5); }
.cn-mb-6  { margin-bottom: var(--cn-space-6); }
.cn-mb-8  { margin-bottom: var(--cn-space-8); }
.cn-mb-10 { margin-bottom: var(--cn-space-10); }   /* p1: five section gaps measure 40-44 */
.cn-mb-12 { margin-bottom: var(--cn-space-12); }
.cn-mb-20 { margin-bottom: var(--cn-space-20); }


.cn-person--speaker .cn-person__name, .cn-person--speaker .cn-person__role, .cn-person--speaker .cn-person__org {
    font-size: 0.8em;
    line-height: 1;
}

/* ============================================================ FILTERS ==== */
/*
   Reuses .cn-chip (chip.css) for the pill shape, but none of these carry a
   data-topic - that attribute is what gives a topic chip its fill, and
   without it a chip is a bare outline. These are a different filter
   (year / My Events, or content type), so they get their own neutral fill
   here instead of chip.css's topic palette.
*/
.cn-post-event__filters,
.cn-post-event__ri-types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-3);
  margin-top: var(--cn-space-6);
}
.cn-post-event__filters .cn-chip,
.cn-post-event__ri-types .cn-chip {
  /* background: var(--cn-surface-2, var(--cn-band-grey)); */
  color: var(--cn-ink-body);
  text-decoration: none;
}
.cn-post-event__filters .cn-chip[aria-pressed="true"],
.cn-post-event__ri-types .cn-chip[aria-pressed="true"] {
  background: var(--cn-cyan);
  color: var(--cn-ink-invert);
  border-color: var(--cn-cyan);
}
.cn-embed--document {aspect-ratio: 770 / 465;}
/* ========================================================= EVENT CARD ==== */
/*
   The listing card - p1's rounded, colour-outlined tile: a ring mark left,
   name + dates right, a separate "Post Event Website" pill below the card
   rather than the whole card being the link (the button carries the access
   check; the card itself is not a plain <a>).

   Brand colour cycles green/purple/gold - same three eventTile.tag already
   uses and the same open question its own Javadoc names: there is no
   colour field on the Event record, so this is assigned, not read from
   data. Values copied from event.css's own --green/--purple/--gold rather
   than re-guessed, so a card here and an event tile elsewhere never drift.
*/
.cn-post-event__grid { row-gap: var(--cn-space-8); }

.cn-post-event-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cn-space-4);
  padding: var(--cn-space-6) var(--cn-space-5);
  /* border: 2px solid var(--cn-border); */
  border-radius: var(--cn-radius-card);
  background: var(--cn-surface);
  text-align: center;
  overflow: hidden;
}
.cn-post-event-card--green  { border-color: #00a80c; }
.cn-post-event-card--purple { border-color: #b430fc; }
.cn-post-event-card--gold   { border-color: var(--cn-fam-gold); }

/*
   THE BANNER IS THE TILE when the CRM has one - same rule eventTile.tag
   follows for events elsewhere on the site (see its own Javadoc). Bleeds to
   the card's rounded top corners via the negative margin undoing the
   card's own padding, rather than restructuring the card into a
   padding-per-child shape just for this one element.
*/
.cn-post-event-card__banner {
  display: block;
  width: calc(100% + 2 * var(--cn-space-5));
  /* margin: calc(-1 * var(--cn-space-6)) calc(-1 * var(--cn-space-5)) 0; */
  aspect-ratio: 231 / 120;
  overflow: hidden;
  /* background: var(--cn-ph-img); */
}
.cn-post-event-card__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-post-event-card__banner--failed { background: var(--cn-band-grey); }
.cn-post-event-card__banner--failed img { display: none; }

.cn-post-event-card__mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
}
.cn-post-event-card__mark-ring {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: var(--cn-radius-pill);
  border: 6px solid currentColor;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-25deg);
}
.cn-post-event-card--green  .cn-post-event-card__mark-ring { color: #00a80c; }
.cn-post-event-card--purple .cn-post-event-card__mark-ring { color: #b430fc; }
.cn-post-event-card--gold   .cn-post-event-card__mark-ring { color: var(--cn-fam-gold); }

.cn-post-event-card__mark-label {
  position: relative;
  font-size: 10px;
  font-weight: var(--cn-fw-semibold);
  line-height: 1.15;
  color: var(--cn-ink-muted);
  text-transform: uppercase;
}

.cn-post-event-card__body { display: flex; flex-direction: column; gap: var(--cn-space-1); }
.cn-post-event-card__name {
  font-size: var(--cn-text-card);
  font-weight: var(--cn-fw-semibold);
  color: var(--cn-ink);
  line-height: 1.2;
}
.cn-post-event-card__dates {
  font-size: var(--cn-text-label);
  color: var(--cn-ink-muted);
}
.cn-post-event-card__cta { width: 100%; }

/* =========================================================== EMPTY/GATE === */
.cn-post-event__empty { margin-top: var(--cn-space-6); color: var(--cn-ink-muted); }

.cn-post-event__locked {
  max-width: 60ch;
  margin-block: var(--cn-space-10);
  display: flex;
  flex-direction: column;
  gap: var(--cn-space-4);
  align-items: flex-start;
}
.cn-post-event__locked-actions { display: flex; flex-wrap: wrap; gap: var(--cn-space-3); }

/* ==================================================== PASSWORD DIALOG ==== */
/*
   UI REFERENCE: connect/PostEvents.jsp's #premiumModalPassProct (see
   WEB-INF/views/user_new/premiumModal.jsp) - a plain white card with a
   heavy soft shadow standing in for a border, a bold centred title, a
   quieter centred subtitle, and one right-aligned pill action. Every
   other legacy content-gate modal on that page fills navy; this one
   deliberately does not, which is why it reads as its own thing rather
   than the Connect Plus upsell - carried across rather than flattened
   into gate.css's navy .cn-gate.

   Native <dialog>, same as .cn-gate - see postEventPasswordDialog.tag
   and postEvent.js's initAccess for open()/close() wiring.
*/
.cn-pw-gate {
  width: min(720px, calc(100vw - var(--cn-space-8)));
  padding: 0;
  border: 0;
  border-radius: var(--cn-radius-card);
  background: var(--cn-surface);
  color: var(--cn-ink-body);
  box-shadow: var(--cn-shadow-raised);
}
.cn-pw-gate::backdrop { background: rgba(0, 28, 100, .55); }

.cn-pw-gate__inner {
  position: relative;
  padding: var(--cn-space-8) var(--cn-space-6) var(--cn-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--cn-space-3);
  text-align: center;
}

.cn-pw-gate__title {
  font-size: var(--cn-text-h3);
  font-weight: var(--cn-fw-semibold);
  color: var(--cn-ink);
}
.cn-pw-gate__subtitle {
  margin: 0;
  font-size: var(--cn-text-body);
  color: var(--cn-ink-muted);
}
.cn-pw-gate__note {
  margin: 0;
  min-height: 1.2em;
  font-size: var(--cn-text-label);
  font-weight: var(--cn-fw-semibold);
  color: var(--cn-fam-red-ink, #b3261e);
}
.cn-pw-gate__input { width: 100%; text-align: center; }

.cn-pw-gate__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--cn-space-2);
}
.cn-pw-gate__submit { border-radius: var(--cn-radius-pill); }

/* Close control sits top-right, same placement gate.css's .cn-gate__close uses. */
.cn-pw-gate__close {
  position: absolute;
  top: var(--cn-space-3);
  right: var(--cn-space-3);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--cn-radius-pill);
  color: var(--cn-ink-muted);
  font-size: 20px;
  line-height: 1;
}
.cn-pw-gate__close:hover { background: var(--cn-band-grey); color: var(--cn-ink); }

/* ========================================================= EVENT HEADER == */
.cn-post-event__header {
  display: flex;
  align-items: center;
  gap: var(--cn-space-4);
  margin-top: var(--cn-space-4);
  border-bottom: 1px solid var(--cn-ink-muted);
  justify-content: space-between;
  padding-bottom: 20px;
}
.cn-post-event__logo { height: 95px; width: auto; max-width: 250px; object-fit: contain; }
.cn-post-event__title { display: flex; flex-direction: column; }
.cn-post-event__name {
  font-size: var(--cn-text-h2);
  font-weight: var(--cn-fw-semibold);
  color: var(--cn-ink);
  line-height: 1.15;
}
.cn-post-event__dates { font-size: var(--cn-text-label); color: var(--cn-ink-muted); }

/* ============================================================ SUB-NAV ==== */
.cn-tabs{
	border-bottom: none;
}
.cn-post-event__tabs { margin-top: var(--cn-space-4); }
/* A CTA, not a section - see the file header on why "Register for next
   year" is not one of the five tabs. Filled, so it reads as an action
   among links that read as navigation. */
.cn-tabs__link--cta {
  background: var(--cn-cyan);
  color: var(--cn-ink-invert);
  border-radius: var(--cn-radius-pill);
  padding-inline: var(--cn-space-4);
}
.cn-tabs__link{
	color: var(--cn-navy);
	border: 1px solid var(--cn-cyan-alt);
    padding: 5px 11px;
    border-radius: 16px;
}
.cn-tabs__list {
    gap: var(--cn-space-3);
}
.cn-tabs__link[aria-current="page"] {
	background: var(--cn-cyan-alt);
    color: #fff;
}
.cn-post-event__cta-row { display: flex; flex-wrap: wrap; gap: var(--cn-space-3); margin-block: var(--cn-space-4); }

/*
   THE SAME "dominant heading" TREATMENT shell.css's own .cn-section-title
   already defines for "Trending this week" / "Content Library" elsewhere
   on the site (cyan, medium, 24px, via the --cn-text-section clamp) -
   this page's markup carries .cn-section-heading instead, which has no
   base rule anywhere in the codebase (checked: home.jsp's own "Trending
   this week" carries the identical class and renders unstyled browser
   default too), so every heading on this page was one browser default
   away from matching the design system it otherwise follows throughout.
   Scoped to this page rather than fixed at .cn-section-heading itself,
   which a dozen other pages carry with no design review of the change
   this session was not asked to make.
*/
.cn-post-event__section-title {
  margin-bottom: var(--cn-space-4);
  font-size: var(--cn-text-section);
  font-weight: var(--cn-fw-medium);
  line-height: var(--cn-lh-tight);
  color: var(--cn-cyan);
}
/* ====================================================== PRESENTATIONS ==== */
.cn-post-event__presentations { display: flex; flex-direction: column; }
.cn-post-event-presentation {
  display: flex;
  align-items: flex-start;
  gap: var(--cn-space-4);
  padding-block: var(--cn-space-4);
  border-bottom: 1px solid var(--cn-border);
}
.cn-post-event-presentation:first-child { padding-top: 0; }

.cn-post-event-presentation__avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--cn-radius-pill);
  background: var(--cn-panel-blue);
}
.cn-post-event-presentation__initials { color: var(--cn-navy); font-weight: var(--cn-fw-semibold); }
.cn-post-event-presentation__avatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cn-post-event-presentation__title { display: block; font-size: var(--cn-text-card); font-weight: var(--cn-fw-semibold); color: var(--cn-ink); }
/*
   Each speaker is .cn-author (shell.css) - name in cyan, ", role" italic
   muted, ", company" semibold ink, the same three-weight byline every
   card and authorRow.tag already draws. This wrapper only styles the
   "; " separators between multiple speakers; it used to also re-declare
   em/strong to fake the same three colours with a hardcoded hex per span
   in the JSP, which drifted from the token if the palette ever changed.
*/
.cn-post-event-presentation__speakers { display: block; margin-top: var(--cn-space-1); font-size: var(--cn-text-body); color: var(--cn-ink-muted); }

/* ============================================================ SPEAKERS === */
.cn-post-event__speakers { row-gap: var(--cn-space-8); }
.cn-post-event-speaker { display: flex; flex-direction: column; align-items: center; gap: var(--cn-space-3); text-align: center; }
.cn-post-event-speaker__actions { display: flex; gap: var(--cn-space-2); align-items: center; }
/* actionBar.tag renders a <ul class="cn-actions"> with one <li> for a
   single-author follow pill - flattened here to sit inline beside "View
   Content" rather than stack as its own list. */
.cn-post-event-speaker__actions .cn-actions,
.cn-post-event-speaker__actions .cn-actions li { display: contents; }
.cn-post-event-speaker__actions .cn-action { font-size: var(--cn-text-tiny); min-height: var(--cn-btn-h-sm); padding-inline: var(--cn-space-4); border-radius: var(--cn-radius-pill); background: var(--cn-btn-primary-bg); color: var(--cn-btn-primary-ink); border: 1px solid transparent; }
/*
   MEASURED on p4: the LinkedIn mark sits between Follow and View Content,
   a rounded-square badge at the row's own height - fa-linkedin (the
   brand glyph with its square backdrop built in, not fa-linkedin-in,
   which draws no backdrop of its own and needs one built for it, the
   way footer.jsp's circular social row does).
*/
.cn-post-event-speaker__linkedin {
  display: grid;
  place-items: center;
  width: var(--cn-btn-h-sm);
  height: var(--cn-btn-h-sm);
  border-radius: var(--cn-radius-sm);
  font-size: 18px;
  color: #0a66c2;
  flex: 0 0 auto;
}
.cn-post-event-speaker__linkedin:hover { color: var(--cn-cyan); }

/* ======================================================= EVENT PARTNERS == */
/*
   MEASURED on p5: a plain square-cornered box holds only the logo (thin
   dark rule, not the card.css rounded-corner treatment); the tier pill
   overlaps its top edge, centred, roughly twice this component's old
   font-size; Visit Website / View insights are both solid cyan pills
   (not one filled and one outline, and not centred - they start flush
   with the box's own left edge), sitting below the box rather than
   inside a shared bordered/padded card.
*/
.cn-post-event__partners { row-gap: var(--cn-space-8); }
.cn-event-partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cn-space-3);
  margin-top: var(--cn-space-8);
  margin-bottom: var(--cn-space-8);
}
.cn-event-partner-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  padding: var(--cn-space-2) var(--cn-space-8);
  border-radius: var(--cn-radius-pill);
  font-size: var(--cn-text-label);
  font-weight: var(--cn-fw-semibold);
  white-space: nowrap;
}
.cn-event-partner-card__badge--gold  { background: var(--cn-fam-gold); color: var(--cn-ink-invert); }
.cn-event-partner-card__badge--navy  { background: var(--cn-navy); color: var(--cn-ink-invert); }
.cn-event-partner-card__badge--cyan  { background: var(--cn-cyan); color: var(--cn-ink-invert); }
.cn-event-partner-card__logo-wrap {
  display: grid;
  place-items: center;
  min-height: 100px;
  width: 100%;
  padding: var(--cn-space-0) var(--cn-space-3);
  border: 1px solid var(--cn-ink-body);
}
.cn-event-partner-card__logo { max-width: 100%; max-height: 150px; object-fit: contain; }
.cn-event-partner-card__logo-fallback { font-size: var(--cn-text-card); font-weight: var(--cn-fw-semibold); color: var(--cn-ink); }
.cn-event-partner-card__actions { display: flex; flex-wrap: wrap; gap: var(--cn-space-2); justify-content: space-around; }

/* =========================================================== PHOTO GALLERY == */
/*
   REAL MASONRY, measured on p6 - four columns of photos at THEIR OWN
   aspect ratios (a tall portrait cover tile beside two stacked landscape
   shots, a wide table shot spanning where a square grid would crop it),
   not a uniform 1:1 crop in a 4-across grid. CSS multi-column is the
   plain-CSS way to get that without measuring every image server-side
   for a real grid-template-rows: masonry (Firefox-only) or a JS layout
   pass - break-inside: avoid keeps each figure whole across the column
   break. Not photoStrip.tag's auto-looping 4-wide marquee either (built
   for the Events page's ambient strip, not a browsable, savable
   gallery) - see the rough stub's history in post-event-website.jsp for
   why this is new markup rather than that tag reused.
*/
.cn-post-event__gallery {
  columns: 4;
  column-gap: var(--cn-space-3);
}
.cn-post-event-photo {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 var(--cn-space-3);
  break-inside: avoid;
  border-radius: var(--cn-radius-md);
  overflow: hidden;
  background: var(--cn-ph-img);
}
.cn-post-event-photo__img { width: 100%; height: auto; display: block; }
/*
   SQUARE, OUTLINED, MEASURED on p6's cover tile - a hairline white
   stroke box per icon, not a circular filled badge. The navy tint
   behind each icon is not on the artboard (its own example sits on a
   dark cover image and needs none) but stays here so the icon still
   reads against a light photo, which most of this gallery's are.
*/
.cn-post-event-photo__save,
.cn-post-event-photo__download {
  position: absolute;
  bottom: var(--cn-space-2);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--cn-ink-invert);
  border-radius: var(--cn-radius-sm);
  background: rgba(0, 28, 100, 0.35);
  color: var(--cn-ink-invert);
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
}
.cn-post-event-photo__save   { right: calc(var(--cn-space-2) + 36px); }
.cn-post-event-photo__download { right: var(--cn-space-2); }
.cn-post-event-photo__save::before { content: "\2661"; }
.cn-post-event-photo__save.is-saved { background: var(--cn-cyan); border-color: var(--cn-cyan); }
.cn-post-event-photo__save.is-saved::before { content: "\2665"; }

/* ========================================================== DOWNLOAD CTA == */
.cn-post-download { display: flex; justify-content: flex-start; }

/* =========================================================== RESPONSIVE == */
@media (max-width: 1024px) {
  .cn-post-event__gallery { columns: 3; }
}
@media (max-width: 767px) {
  .cn-post-event__gallery { columns: 2; }
  .cn-post-event__header { flex-wrap: wrap; }
}
@media (max-width: 479px) {
  .cn-post-event__gallery { columns: 1; }
}