/* =============================================================================
   Atlassian Spacing Tokens  —  8px base unit
   https://atlassian.design/foundations/spacing
   Shared conventions with the Penn MEDIATED /about, /home, /grants, and
   /team-leadership repos. Pull values from here rather than introducing new
   ones — see README.md "Style guide."
   ============================================================================= */
:root {
  --space-025:   2px;
  --space-050:   4px;
  --space-075:   6px;
  --space-100:   8px;
  --space-150:  12px;
  --space-200:  16px;
  --space-250:  20px;
  --space-300:  24px;
  --space-400:  32px;
  --space-500:  40px;
  --space-600:  48px;
  --space-800:  64px;
  --space-1000: 80px;

  /* ── Figma colour tokens ── */
  --c-bg:         #ffffff;
  --c-dark:       #0d0d0c;          /* rgb(13,13,12)   */
  --c-light-bg:   #f8f7f4;          /* rgb(248,247,244)*/
  --c-accent:     #5533ee;          /* rgb(85,51,238)  */
  --c-red:        #f03d1f;          /* rgb(240,61,31)  */
  /* Deeper red-orange — the gradient's closing stop, promoted to a token
     of its own. Link text on a white/light ground uses this: --c-red
     only reaches ~3.9:1 against white, this clears 4.5:1. --c-red stays
     the brand accent for fills, borders, icons, tags and labels. */
  --c-red-dark:   #df3611;
  --c-gray:       #888680;          /* rgb(136,134,128)*/
  --c-gray-dark:  #54534f;          /* rgb(84,83,79) — opaque body copy, ~8:1 on white */
  --c-muted:      #c8c6c0;          /* rgb(200,198,192) — date/meta text */
  --c-white:      #ffffff;
  --c-pale-orange: #fce4dc;         /* --c-red tinted ~12% onto white — callout boxes */

  /* Brand gradient — used on every purple-to-red surface, matches /about, /home, /grants */
  --c-gradient: linear-gradient(150deg, #5533ee 0%, var(--c-red-dark) 81%);

  /* ── Figma typography tokens ── */
  /* Two families, no third — and the split is by what the text IS, not by
     heading level. --f-serif: page titles, and titles of works or names of
     people (a post title, a paper title, a person's name), plus pull-quote
     copy. --f-sans: section headings, card and UI labels, running prose,
     metadata, controls and uppercase micro-labels.
     The one that trips people up: a SECTION HEADING IS NOT SERIF. Serif
     marks a thing that has its own name; sans marks the furniture around
     it. See README -> Typography. */
  --f-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --f-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  /* -- Type scale (sitewide -- see README) --------------------------------
     Fluid: each clamp() interpolates between the mobile floor and the
     desktop ceiling, so tablet needs no separate breakpoint override.
     12px is the hard floor; nothing on the site ships smaller.         */
  --fs-display:     clamp(36px, 22.7px + 3.70vw, 76px);
  --fs-h1:          clamp(36px, 29.3px + 1.85vw, 56px);
  --fs-h2:          clamp(26px, 21.3px + 1.30vw, 40px);
  --fs-h3:          clamp(20px, 18.7px + 0.37vw, 24px);
  --fs-lede:        clamp(18px, 17.3px + 0.19vw, 20px);
  --fs-body:        16px;
  --fs-small:       14px;
  --fs-small-serif: 15px;   /* EB Garamond runs ~1px small beside DM Sans */
  --fs-micro:       12px;   /* uppercase labels, tags, meta -- the floor */

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-lede:    1.26;
  --lh-title:   1.3;
  --lh-body:    1.55;

  /* ── Page layout ── */
  --max-w: 1440px;
  --pad-x: var(--space-1000);   /* 80px side padding — page-level rhythm */
}

/* Side padding scales down on smaller screens — same breakpoints as
   /home, /grants, and /team-leadership. */
@media (max-width: 900px) {
  :root { --pad-x: var(--space-400); }  /* 32px */
}
@media (max-width: 480px) {
  :root { --pad-x: var(--space-250); }  /* 20px */
}

/* =============================================================================
   External Link Arrow Badge — copied verbatim from about/home/grants/
   team-leadership. Black circle + white arrow signaling "opens an external
   site," on every card/link that leaves the site. Sliding purple-to-orange
   gradient on hover. Host element needs position: relative. If you touch
   one repo's copy, touch the others'.
   ============================================================================= */
.card-arrow {
  position: absolute;
  top: var(--space-100);
  right: var(--space-100);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-dark);
  color: var(--c-white);
  font-size: var(--fs-micro);
  line-height: 1;
  transition: transform 0.2s ease;
  pointer-events: none;
}
@keyframes card-arrow-slide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
a:hover .card-arrow {
  transform: scale(1.15) translate(2px, -2px);
  background: linear-gradient(100deg, var(--c-accent), var(--c-red), var(--c-accent));
  background-size: 220% 100%;
  animation: card-arrow-slide 1.2s linear infinite;
}

/* =============================================================================
   Reset
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-anchor: none; }
body {
  font-family: var(--f-sans);
  color: var(--c-dark);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-anchor: none;
}
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
a:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}

/* Keep the contact email on one line rather than breaking mid-address
   (appears in .seminar__body and .event-card__desc) (2026-08-31). */
a[href="mailto:contact-us@mediated.upenn.edu"] {
  white-space: nowrap;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border-width: 0;
}

/* =============================================================================
   Shared inner container — same rule/selector convention as the other repos.
   ============================================================================= */
.events-hero__inner,
.seminar__inner,
.past-events__inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* =============================================================================
   Scroll-triggered reveal — same progressive-enhancement pattern as the
   other repos. One-shot only (no .reveal--toggle): this page reads as a
   long, bottom-heavy content page like /team-leadership, where the about
   repo's README documents a "spasming" bug when a toggle-based reveal
   section sits at the very bottom of the page — one-shot sidesteps that.
   ============================================================================= */
.js-reveal-ready .reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), translate 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-reveal-ready .reveal.is-visible {
  opacity: 1;
  translate: none;
}

/* Card children get their own staggered reveal, cued off their parent
   section's .is-visible class — same technique as the other repos'
   school-block / person-card / stats__item stagger. */
.js-reveal-ready .event-card,
.js-reveal-ready .event-card__photo {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), translate 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible .event-card,
.reveal.is-visible .event-card__photo {
  opacity: 1;
  translate: none;
}
.event-card:nth-child(1) { transition-delay: 0.05s; }
.event-card:nth-child(2) { transition-delay: 0.13s; }

/* =============================================================================
   HERO  ("Events")
   Serif accent-purple H1 and a sans lede paragraph filling the full
   padded width.
   ============================================================================= */
.events-hero {
  /* Top of page: 80px from the site menu to the page title, the same on
     every page (--space-1000, the documented page-level rhythm). */
  padding-top: var(--space-1000);
  padding-bottom: var(--space-600);
}

.events-hero__title {
  font-family: var(--f-serif);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: 0;
  color: var(--c-accent);
  margin-bottom: var(--space-250);
}

.events-hero__lede {
  font-family: var(--f-sans);
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: var(--lh-lede);
  color: var(--c-dark);
}

/* =============================================================================
   SEMINAR SCHEDULE
   Full-bleed brand-gradient backdrop — same treatment as /about's Orbital
   section and /team-leadership's Core Team block — so this, the page's
   primary content block, reads as the lead chapter. (Previously a quieter
   light-gray band with a thin gradient top border; the border is gone now
   that the gradient fills the whole section, matching how /orbital,
   /partners, /related-centers, and /team-section--gradient never carry
   one either.)
   ============================================================================= */
.seminar {
  background: var(--c-gradient);
  padding-block: var(--space-1000);
}

/* Same two-column grid as .past-events__grid below it (repeat(2, 1fr),
   space-600 gap, top-aligned) — matching that section's spacing and
   column width instead of a bespoke centered composition, so the two
   two-column sections on this page read as one consistent layout
   system. Stacks to one column under 900px. */
.seminar__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-600);
  align-items: start;
}

@media (max-width: 900px) {
  .seminar__inner { grid-template-columns: 1fr; }
}

/* Capped at the same 560px measure as .event-card__desc, for the same
   reading-width consistency — only while it shares a two-column row with
   .seminar__pdf. Once .seminar__inner stacks to one column under 900px,
   the cap is lifted so the copy fills the full single-column width
   instead of leaving a block of empty space on the right (2026-08-31). */
.seminar__copy {
  max-width: 560px;
}

@media (max-width: 900px) {
  .seminar__copy { max-width: none; }
}

/* Matches /team-leadership's .team-section__title exactly — the documented
   "repeated section heading on a light/white surface" pattern. */
.seminar__title {
  font-family: var(--f-sans);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--lh-heading);
  color: var(--c-white);
  margin-bottom: var(--space-300);
}

.seminar__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

/* Same 20px/300 body-copy scale as /about's .mission__body p / /grants'
   .intro__body p, recolored white for the gradient backdrop — same
   treatment as /about's .orbital__lead. */
.seminar__body p {
  font-family: var(--f-sans);
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: var(--lh-lede);
  letter-spacing: 0;
  color: var(--c-white);
  max-width: 900px;
}

.seminar__body a {
  color: var(--c-white);
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: opacity 0.15s;
}
.seminar__body a:hover { opacity: 0.7; }

/* ── Featured schedule PDF ──
   The real flyer (assets/fall-2026-seminar-schedule.pdf, preview rendered
   at assets/fall-2026-seminar-schedule-preview.jpg) replaces the earlier
   hand-transcribed session list — one source of truth instead of two. The
   preview tile reuses the established "white card floating on a gradient,
   card-arrow badge, hover lift" language from /about's school-block /
   center-block / partner-card tiles, just unconstrained by their 4:3
   aspect-ratio since this is a full document page, not a logo. */
/* Capped narrower than its grid column (rather than filling it
   edge-to-edge) and left-aligned at every width, matching how the copy
   column and Past Events content align — no centering breakpoint, so it
   doesn't jump out of alignment with the rest of the page as it narrows. */
.seminar__pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-300);
  width: 100%;
  max-width: 360px;
  /* Flush with the right page margin (the same --pad-x the hero and Past
     Events grid end on) instead of floating mid-column. */
  justify-self: end;
}

/* Stacked: fill the single column so both edges sit on the page margins. */
@media (max-width: 900px) {
  .seminar__pdf { max-width: none; justify-self: stretch; }
}

.seminar__pdf-link {
  position: relative;
  display: block;
  width: 100%;
  background: var(--c-white);
  padding: var(--space-100);
  box-shadow: 0 20px 48px rgba(13, 13, 12, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.seminar__pdf-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px rgba(13, 13, 12, 0.34);
}

.seminar__pdf-img { width: 100%; height: auto; display: block; }

/* Category 3 — document button. Opens a PDF, so it is a filled box rather
   than a text link: on a coloured ground that is a white box with dark text.
   Hover is movement, never a colour change. */
.seminar__pdf-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  padding: var(--space-100) var(--space-200);
  background: var(--c-white);
  color: var(--c-dark);
  border-bottom: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-body);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.seminar__pdf-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(13, 13, 12, 0.22);
}

.seminar__pdf-link { cursor: zoom-in; }

/* Flyer lightbox (built by the script at the bottom of index.html).
   The overlay never scrolls itself: embedded, the WordPress page does the
   scrolling, and an inner scroll area would swallow the visitor's wheel —
   the same trap the blog's post overlay had. The script sets the frame's
   top and --fit-h so the flyer lands inside the part of the page that is
   on screen. */
.flyer-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--space-250);
  background: rgba(13, 13, 12, 0.72);
  overflow: hidden;
  animation: flyer-lightbox-in 0.15s ease-out;
}
.flyer-lightbox[hidden] { display: none; }
.flyer-lightbox__frame { position: relative; margin: 5vh 0 0; }
.flyer-lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(900px, calc(100vw - 2 * var(--space-250)));
  max-height: var(--fit-h, 90vh);
  border-radius: 4px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
  background: var(--c-white);
}
.flyer-lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-dark);
  font-family: var(--f-sans);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.flyer-lightbox__close:hover { opacity: 0.85; }
@keyframes flyer-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flyer-lightbox { animation: none; } }

/* =============================================================================
   PAST EVENTS  (two-column: Democratic Repercussions panel / Seminar kickoff)
   ============================================================================= */
.past-events {
  background: var(--c-bg);
  padding-block: var(--space-1000);
}

/* Weight 700: sitewide, 700 is the white-background section-heading
   weight and 600 is reserved for headings on colored blocks. */
.past-events__title {
  font-family: var(--f-sans);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-heading);
  color: var(--c-red);
  margin-bottom: var(--space-300);
}

.past-events__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-600);
  align-items: stretch;
}

@media (max-width: 900px) {
  .past-events__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Bordered white box with a soft shadow — same "card floating on the
   page" treatment as /home's .about-center__card. */
.event-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding: var(--space-800);
  background: var(--c-white);
  border: 1px solid rgba(13, 13, 12, 0.08);
  box-shadow: 0 20px 60px rgba(13, 13, 12, 0.08);
}

@media (max-width: 900px) {
  .event-card { padding: var(--space-400); }
}

.event-card__date {
  font-family: var(--f-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--c-red);
  background: var(--c-pale-orange);
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-075) var(--space-150);
}

.event-card__title {
  font-family: var(--f-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--lh-title);
  color: var(--c-dark);
}

/* Linked photo tile — 16:9 frame showing the real event photo
   (assets/Media-Fragmentation.jpg), same "image tile + card-arrow badge +
   hover lift" language as /about's school-block/center-block/partner-card
   tiles. (Previously an inline YouTube iframe embed; reverted back to a
   linked tile per the real asset now available.) */
.event-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-dark);
  overflow: hidden;
  display: block;
  width: 100%;
  max-width: 560px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.event-card__media:hover {
  box-shadow: 0 12px 24px rgba(13, 13, 12, 0.16);
  transform: translateY(-4px);
}

/* .past-events__grid stacks to one column at this width, so the 560px
   reading-measure cap above (calibrated for the narrower two-column
   layout) is lifted — otherwise the tile leaves a block of empty space
   on the right of its now much wider single column (2026-08-31). */
@media (max-width: 900px) {
  .event-card__media { max-width: none; }
}

.event-card__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card__featuring {
  font-family: var(--f-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gray);
}
.event-card__featuring span {
  display: block;
  margin-top: var(--space-100);
  font-family: var(--f-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-dark);
  line-height: var(--lh-body);
}

.event-card__desc {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--c-dark);
  /* Measure cap, not a layout width. .past-events__grid is two columns,
     so a card is about half the row — 560px lands the same ~70-character
     line as blog's 720px cap does in its single full-width column. The
     two numbers differ ON PURPOSE; matching them would make one of the
     two pages read wrong. See README -> Typography -> Measure. */
  max-width: 560px;
}

/* Same reasoning as .event-card__media above: lift the cap once the grid
   stacks to one column (2026-08-31). */
@media (max-width: 900px) {
  .event-card__desc { max-width: none; }
}

/* Plain text link, not a bordered box — same "dark text, subtle
   underline, turns red only on hover" pattern as /home's
   .about-center__link, so the red/orange only shows up as a hover
   state rather than a permanent border. */
.event-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-400);
  margin-top: var(--space-050);
}

.event-card__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  padding-bottom: var(--space-050);
  font-family: var(--f-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-dark);
  border-bottom: 1px solid rgba(13, 13, 12, 0.35);
  transition: color 0.15s, border-color 0.15s;
}
.event-card__links a:hover {
  color: var(--c-red-dark);
  border-color: var(--c-red-dark);
}

/* Photo-pair grid — the kickoff card's two captioned photos. Capped to
   the same 560px measure as .event-card__desc so its right edge lines
   up with the body copy above it (the alignment concern behind the
   Aug 30 "stack them" change), but deliberately kept as a 2-up grid at
   every width rather than stacked — collapsing to one column on narrow
   screens dropped the second photo underneath the first and blew each
   one up disproportionately, throwing off the side-by-side balance
   with the Media Fragmentation card next to it. At 560px each photo is
   ~272px, which reads fine paired with its caption. */
.event-card__photo-grid {
  display: grid;
  /* minmax(0, 1fr), not bare 1fr: Safari sizes a bare 1fr track to the photo's
     natural width, which pushed the second photo past the card on phones. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-150);
  max-width: 560px;
}

/* Same reasoning as .event-card__media above: lift the cap once the grid
   stacks to one column (2026-08-31). */
@media (max-width: 900px) {
  .event-card__photo-grid { max-width: none; }
}

@media (max-width: 480px) {
  .event-card__photo-grid { gap: var(--space-100); }
}

.event-card__photo {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}

/* Placeholder fill (image pending — see README "Updating content"); once a
   real <img> is dropped in here, this background simply sits behind it. */
.event-card__photo-frame {
  aspect-ratio: 4 / 3;
  background: var(--c-light-bg);
  border: 1px solid rgba(13, 13, 12, 0.08);
}
.event-card__photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card__caption {
  font-family: var(--f-sans);
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--c-gray);
}
/* In-text links (Hyperlinks category 1) on a white/light ground:
   --c-red, no underline, fading to opacity 0.7 on hover — the same
   fade the coloured-ground rule uses. Colour is the affordance here;
   the underline belongs to category 2's independent links. */
.event-card__desc a,
.event-card__caption a {
  color: var(--c-red-dark);
  font-weight: 500;
  transition: opacity 0.15s;
}
.event-card__desc a:hover,
.event-card__caption a:hover {
  opacity: 0.7;
}

@media (max-width: 640px) {
  .events-hero { padding-bottom: var(--space-600); }
  .seminar { padding-block: var(--space-800); }
  .past-events { padding-block: var(--space-800); }
}

/* ── Trailing-margin guard ─────────────────────────────────────────────────
   These pages are embedded in an iframe that is resized to the height this
   page reports, and that height is measured from document.body.

   A bottom margin on the last element COLLAPSES THROUGH body and out to
   <html>. It never appears in body.scrollHeight, but it does extend
   documentElement.scrollHeight — so the frame gets sized short of the real
   document, the embedded page is left with a few px it can scroll, and it
   swallows the visitor's wheel events: the outer page then only scrolls when
   the cursor is over its scrollbar. It has bitten twice (home, 64px;
   grants-overview, 80px) and it is invisible in the builder.

   display: flow-root makes body a block formatting context, so descendant
   margins can no longer escape it and the measured height is always the whole
   document. Cheap, and it removes a whole class of bug rather than one
   instance. If a page grows here, something was relying on a margin escaping
   — convert that margin to padding rather than removing this.
   ====================================================================== */
body { display: flow-root; }

/* ── Page end ──────────────────────────────────────────────────────────
   Sitewide (Sept 2026): the last section sits flush on the global footer,
   which opens with its own 132px white signal band. That band is the gap
   before the footer on every page. The old 80px trailing space on top of it
   left 200px+ of white at the end of some pages. */
.past-events { padding-bottom: 0; }