/* Events page.
   design/events/docs/02-design-system.md (components, shape, type) and
   03-screens.md (the page order, the states, the narrow-phone rules). Sizes
   and boxes are the measured ones in design/events/reference/specs/*.json.

   Colour comes from the site's tokens in tokens.css, never from the pack's
   screenshots: those were drawn against the pre-redesign brand palette and
   show a hotter pink and a greener yellow than the page uses. The pack's
   tokens.css ends with the name mapping this file follows (--bg -> --bg-0,
   --accent -> --accent-text, --err -> --error).

   Everything is prefixed .ev- and scoped to .ev-page, so nothing here can
   reach another page's markup. There is no JavaScript on this page: every
   state below is rendered by PHP and none of these rules is toggled. */

.ev-page {
  /* Page-only tokens: the site has no equivalent, and tokens.css carries a
     "re-copy from the design pack" warning, so they are declared here rather
     than added to it. */
  --ev-col: 720px;           /* the centred column. 960px from 1000px up */
  --ev-btn-h: 56px;
  --ev-tile-w: 84px;         /* 78 content + two 3px borders. 132 on desktop */
  --ev-shadow-btn: 4px 4px 0;
  --ev-shadow-tile: 4px 4px 0;
  --ev-shadow-open: 6px 6px 0;   /* the "Next up" card */
}

/* The column. The site's .container is 1280px wide; this page's content sits
   in 720 (and 960 on desktop) with the bands running edge to edge, so
   .container is narrowed inside the page rather than replaced. */
.ev-page .container {
  max-width: calc(var(--ev-col) + var(--gutter) * 2);
}

/* ------------------------------------------------------------------ type */

.ev-hero__title,
.ev-heading__title,
.ev-card__title,
.ev-empty__title,
.ev-past__title,
.ev-past__date,
.ev-follow__title,
.ev-tile__month,
.ev-tile__day,
.ev-tile__weekday,
.ev-chip {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .92;
  margin: 0;
}

/* Nothing on this page is ever truncated: a long title, a long venue name and
   a postal code all wrap and the card grows (03-screens.md). No ellipsis, no
   line-clamp, no "read more". */
.ev-card__title,
.ev-meta__text,
.ev-card__desc,
.ev-past__name,
.ev-past__venue {
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------- chips */

.ev-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 10px 0;
  font-size: 17px;
  letter-spacing: .04em;
  white-space: nowrap;
}

.ev-chip--yellow { background: var(--yellow); color: var(--ink); }
.ev-chip--pink   { background: var(--pink);   color: var(--ink); }

/* --------------------------------------------------------------- buttons */

.ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--ev-btn-h);
  padding: 10px 18px;
  border: var(--border) solid transparent;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}

.ev-btn--primary {
  background: var(--yellow);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: var(--ev-shadow-btn) var(--pink);
}

.ev-btn--ghost {
  background: transparent;
  border-color: var(--text);
  color: var(--text);
}

.ev-btn__out { width: 24px; height: 24px; flex: none; }

.ev-icon { width: 22px; height: 22px; flex: none; }

/* ------------------------------------------------------------------ hero */

.ev-hero__block {
  position: relative;
  overflow: hidden;
  background: var(--pink);
  padding-block: 22px 44px;
  /* The diagonal ink stripes. A gradient, not an image: no request, and it
     scales with the block. */
  background-image: repeating-linear-gradient(
    -55deg,
    rgba(19, 19, 22, .10) 0 14px,
    transparent 14px 40px
  );
}

/* The yellow edge the hero sits on. */
.ev-hero__block::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 22px;
  background: var(--yellow);
  clip-path: polygon(0 55%, 100% 0, 100% 100%, 0 100%);
}

.ev-hero__inner { position: relative; }

.ev-hero__chip {
  font-size: 20px;
  min-height: 30px;
}

.ev-hero__title {
  margin-top: 16px;
  font-size: 84px;
  line-height: .9;
  color: var(--white);
  letter-spacing: .005em;
  /* Stroke under fill, so the letterforms keep their weight. */
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3.5px 3.5px 0 var(--pink);
  transform: rotate(-2.5deg);
  transform-origin: left bottom;
}

.ev-intro {
  margin-block: 34px 0;
}

.ev-intro__text {
  margin: 0;
  font-size: 20px;
  line-height: 1.55;
}

/* -------------------------------------------------------- section heading */

.ev-upcoming { margin-top: 56px; }

.ev-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.ev-heading__title { font-size: 46px; }

.ev-heading__count {
  min-height: 28px;
  font-size: 18px;
}

/* ----------------------------------------------------------------- cards */

.ev-cards {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The phone layout: the tile beside the title in row one, then everything
   else across the full width. The title does NOT move under the tile at
   320px -- the column gets narrow and the title gets tall, which is the
   intended behaviour (03-screens.md, narrow phones). */
.ev-card {
  display: grid;
  grid-template-columns: var(--ev-tile-w) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 18px;
  padding: 22px 20px 24px;
  background: var(--bg-1);
  border: var(--border) solid var(--line);
}

/* "Next up" is a word as well as a border: nothing on this page relies on
   colour alone. */
.ev-card--next {
  border-color: var(--text);
  box-shadow: var(--ev-shadow-open) var(--pink);
}

.ev-card__head {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.ev-card__next { align-self: flex-start; }

.ev-card__title {
  font-size: 36px;
  line-height: .98;
}

.ev-card__meta,
.ev-card__desc,
.ev-card__rsvp { grid-column: 1 / -1; }

/* ------------------------------------------------------------ the tile */

/* Decoration: the date is in the <time> below, and this repeats it visually,
   so the markup hides it from screen readers. Its width does not change with
   the number of digits in the day. */
.ev-tile {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  width: var(--ev-tile-w);
  margin: 0;
  background: var(--yellow);
  border: var(--border) solid var(--ink);
  box-shadow: var(--ev-shadow-tile) var(--pink);
  text-align: center;
  color: var(--ink);
}

.ev-tile__month {
  padding: 4px 0 2px;
  background: var(--ink);
  color: var(--yellow);
  font-size: 20px;
  letter-spacing: .12em;
}

.ev-tile__day {
  padding-top: 2px;
  font-size: 52px;
  line-height: .9;
}

.ev-tile__weekday {
  padding-bottom: 6px;
  font-size: 20px;
  letter-spacing: .1em;
}

/* ------------------------------------------------------------- meta rows */

.ev-card__meta {
  display: grid;
  gap: 8px;
}

.ev-meta {
  display: flex;
  align-items: start;
  gap: 12px;
  margin: 0;
}

.ev-meta__icon { color: var(--accent-text); margin-top: 2px; }

.ev-meta__text {
  display: block;
  min-width: 0;
}

/* The date and the time are two lines on a phone and one on desktop; the
   middle dot belongs to the desktop line only. The <time> stays a real
   element rather than `display: contents`, which some screen readers drop
   the semantics of -- and the datetime attribute is the point of it. */
.ev-meta__when { display: block; }
.ev-meta__sep  { display: none; }

.ev-meta__date,
.ev-meta__time,
.ev-meta__venue,
.ev-meta__address,
.ev-meta__lang { display: block; }

.ev-meta__date,
.ev-meta__time,
.ev-meta__venue {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.ev-meta__address,
.ev-meta__lang {
  font-size: 18px;
  line-height: 1.4;
}

.ev-card__desc {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

/* ------------------------------------------------------------- RSVP row */

.ev-card__rsvp {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ev-card__btn { width: 100%; }

.ev-card__note {
  font-size: 16px;
  color: var(--muted);
}

/* A night listed on more than one platform. <details> is a real control with
   no JavaScript: it opens on click, on Enter and on Space, and a screen
   reader announces it as expandable. Nothing here is toggled by script. */

.ev-rsvp { min-width: 0; }

.ev-rsvp__summary {
  width: 100%;
  cursor: pointer;
  /* Both halves of hiding the default triangle: the standard property and
     the one WebKit still needs. */
  list-style: none;
}

.ev-rsvp__summary::-webkit-details-marker { display: none; }

.ev-rsvp__chevron {
  width: 20px;
  height: 20px;
  flex: none;
  transition: transform .12s ease;
}

.ev-rsvp[open] .ev-rsvp__chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .ev-rsvp__chevron { transition: none; }
}

/* The panel sits in the flow rather than over the card: an overlay would
   need positioning and a way to dismiss it, and the card growing by 150px is
   not a problem worth either. On --bg so it reads as a layer above the
   card's --bg-1. */
.ev-rsvp__list {
  margin: 10px 0 0;
  padding: 0;
  background: var(--bg-0);
  border: var(--border) solid var(--line);
  list-style: none;
}

.ev-rsvp__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

.ev-rsvp__list li + li .ev-rsvp__link { border-top: 1px solid var(--line); }

.ev-rsvp__link:hover { background: var(--bg-2); }

.ev-rsvp__out {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--accent-text);
}

/* --------------------------------------------------------- empty state */

.ev-empty {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: 24px 20px 26px;
  background: var(--bg-1);
  border: var(--border) dashed var(--line);
}

.ev-empty__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0;
  background: var(--pink);
  color: var(--ink);
}

.ev-empty__icon { width: 28px; height: 28px; }

.ev-empty__title { font-size: 38px; }

.ev-empty__body {
  max-width: 56ch;
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
}

/* ---------------------------------------------------------- past nights */

/* A flat band, not a slanted one: the design uses the slant for the loud
   sections and this is the quiet one. */
.ev-past {
  margin-top: 64px;
  padding-block: 40px 48px;
  background: var(--bg-1);
}

.ev-past__title {
  margin-bottom: 8px;
  font-size: 38px;
  color: var(--muted);
}

.ev-past__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A rule above every row and one under the last, so the rows read as a table
   without being one -- there is no header and no second dimension. */
.ev-past__row {
  display: grid;
  gap: 2px;
  padding-block: 14px;
  border-top: 1px solid var(--line);
}

.ev-past__row:last-child { border-bottom: 1px solid var(--line); }

.ev-past__date {
  font-size: 24px;
  color: var(--accent-text);
  letter-spacing: .04em;
}

.ev-past__name  { font-size: 19px; font-weight: 700; }
.ev-past__venue { font-size: 18px; color: var(--muted); }

/* ----------------------------------------------------------- follow row */

.ev-follow { padding-block: 56px 64px; }

.ev-follow__title {
  margin-bottom: 18px;
  font-size: 34px;
  color: var(--accent-text);
}

/* The panel variant is shaped for the mobile menu, where it sits under the
   nav links behind a rule and the menu's own side padding. Here it is a
   section of its own, so both are cleared. */
.ev-page .social--panel .social__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  border-top: 0;
  list-style: none;
}

.ev-page .social--panel .social__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
  border: var(--border) solid var(--text);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

.ev-page .social--panel .social__link svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------ 640px up
   Between a phone and the desktop layout the phone's single column is simply
   centred, capped by --ev-col (03-screens.md: "roughly 640 to 1000 px" is not
   designed; use the phone layout in a column no wider than 720). */

@media (min-width: 640px) {
  .ev-hero__title { font-size: 104px; }

  .ev-card__rsvp {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }

  .ev-card__btn { width: 200px; }

  /* The summary matches the single-link button; the panel under it is free
     to be wider, because "Eventbrite" does not fit in 200px beside an icon. */
  .ev-rsvp__summary { width: 200px; }
  .ev-rsvp__list { min-width: 260px; }
}

/* ----------------------------------------------------------- 1000px up
   The desktop layout: a 960px column, the tile beside the whole card body
   rather than beside the title alone. */

@media (min-width: 1000px) {
  .ev-page { --ev-col: 960px; --ev-tile-w: 132px; }

  .ev-hero__block { padding-block: 30px 72px; }
  .ev-hero__title { font-size: 128px; }

  .ev-intro__text { font-size: 22px; }

  .ev-heading__title { font-size: 64px; }

  .ev-cards { gap: 28px; }

  .ev-card {
    grid-template-columns: var(--ev-tile-w) minmax(0, 1fr);
    column-gap: 36px;
    padding: 32px 36px 36px;
  }

  /* The tile now runs beside everything, so every other part of the card
     sits in column two. */
  .ev-tile { grid-row: 1 / -1; }

  .ev-card__head,
  .ev-card__meta,
  .ev-card__desc,
  .ev-card__rsvp { grid-column: 2; }

  .ev-card__head { gap: 10px; }

  .ev-card__title { font-size: 46px; }

  .ev-tile__month   { font-size: 24px; padding: 6px 0 2px; }
  .ev-tile__day     { font-size: 76px; }
  .ev-tile__weekday { font-size: 24px; padding-bottom: 8px; }

  /* One line, with the middle dot between the date and the time. */
  .ev-meta__date,
  .ev-meta__time,
  .ev-meta__sep { display: inline; }

  .ev-card__desc { max-width: 62ch; }

  .ev-empty {
    justify-items: start;
    gap: 18px;
    padding: 36px 40px 40px;
  }

  .ev-empty__title { font-size: 46px; }

  .ev-past {
    margin-top: 64px;
    padding-block: 56px 72px;
  }

  .ev-past__title { font-size: 44px; margin-bottom: 16px; }

  .ev-past__row {
    grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
    padding-block: 16px;
  }

  .ev-past__date { font-size: 26px; }
}

/* ------------------------------------------------------------ narrow phones
   The frames are 390. These rules are what hold the page together at 360 and
   320 (03-screens.md). The side margins stay 20px and the tile stays 84px, so
   the title column narrows to about 134px at 320 and a long title becomes a
   tall column of short lines. That is intended: nothing clips and nothing
   scrolls sideways. */

@media (max-width: 400px) {
  /* The hero title is not shrunk below the comp's 84px; at 320 the rotated
     box stays inside the viewport. */
  .ev-hero__title { font-size: 76px; }
}