/* Babdoduk news: dates decide now / coming up / past. The page stays a flat list:
   date, title, a short state and one link. The original announcement sits behind 자세히. */
*, *::before, *::after { margin: 0; padding: 0; }

.event-page-wrap {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px var(--space-8);
}

.event-head {
  display: block;
}

.event-section {
  margin-top: var(--space-12);
}

.event-now {
  margin-top: var(--space-8);
}

/* The world cup's start screen in its activity's card (data/content/events.json `entry`): the same
   markup and css/worldcup-entry.css as worldcup.html, a band the width of the page column. Only while
   the activity runs; the link takes over for a past one, and when the script does not run. */
.wc-embed {
  position: relative;
  margin: var(--space-3) -16px 0;
}

.wc-embed .wc-intro {
  margin-inline: 0;
}

.wc-embed:not([data-ready]) .wc-chip {
  display: none;
}

.event-item[data-band="past"] .wc-embed {
  display: none;
}

/* Until the page script has put every row in its band (it sets data-ready), the two sections keep their
   place invisibly and the page takes the first screen, so nothing jumps when the rows move from 지난 활동
   to 지금 and the start screen appears (owner 2026-10-16, layout shift). Without scripting the rows stay
   where the markup has them, visible. */
@media (scripting: enabled) {
  .event-page-wrap:not([data-ready]) {
    min-height: 100vh;
  }

  .event-page-wrap:not([data-ready]) .event-section,
  .event-page-wrap:not([data-ready]) .event-instagram {
    visibility: hidden;
  }
}

/* A running or coming world cup row keeps its start screen's height (755 px on a phone, 915 px from
   561 px) until js/worldcup.js has drawn it, so the past activities below do not jump (owner 2026-10-16,
   layout shift). A failed load gives the place back to the link. */
.event-item:is([data-band="now"], [data-band="upcoming"]) .wc-embed:not([data-ready]):not([data-failed]) {
  min-height: 755px;
}

@media (min-width: 561px) {
  .event-item:is([data-band="now"], [data-band="upcoming"]) .wc-embed:not([data-ready]):not([data-failed]) {
    min-height: 915px;
  }
}

.event-link[data-event-page] {
  display: none;
}

.event-item[data-band="past"] .event-link[data-event-page],
.wc-embed[data-failed] ~ .event-link[data-event-page] {
  display: inline-flex;
}

.event-link[data-event-page] {
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: var(--space-3);
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: #fffdf8;
  font-weight: 800;
  text-decoration: none;
}

.event-link[data-event-page][data-band="past"] {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-divider);
}

.event-section[hidden],
.event-list[hidden],
.event-notices[hidden],
.event-empty[hidden],
.event-state[hidden] {
  display: none;
}

.event-notices {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.event-notice time {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.event-notice strong {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-ink);
}

.event-notice p {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.6;
  color: #3d3935;
  word-break: keep-all;
}

.event-empty {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.event-list {
  list-style: none;
}

/* Archive rows are flat: a rule between them, no card. */
.event-item {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-divider);
}

.event-item:first-child {
  border-top: 0;
  padding-top: var(--space-2);
}

.event-date {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.event-place::before {
  content: '·';
  margin: 0 5px 0 1px;
}

.event-name {
  margin-top: 4px;
  font-size: clamp(1.125rem, 2.6vw, 1.375rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.event-state {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ink-muted);
}

.event-state[data-band="now"],
.event-state[data-band="upcoming"] {
  color: var(--color-accent);
}

.event-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-divider);
  text-underline-offset: 4px;
}

.event-link:hover {
  text-decoration-color: currentColor;
}

.event-empty .event-link {
  margin-top: 0;
}

.event-instagram a:focus-visible,
.event-link:focus-visible,
.event-more summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Current and past rows share the same flat list. The date is the anchor. */
.event-list--now .event-item {
  margin-bottom: 0;
  padding: var(--space-6) 0;
  border: 0;
  border-top: 1px solid var(--color-divider);
  border-radius: 0;
  background: transparent;
}

.event-list--now .event-item:first-child {
  border-top: 0;
  padding-top: var(--space-2);
}

.event-instagram {
  margin-top: var(--space-12);
  padding: var(--space-8) 0 var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.event-instagram a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 32px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
}

.event-instagram a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.event-more {
  margin-top: 2px;
}

.event-more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.event-more summary::-webkit-details-marker {
  display: none;
}

.event-more summary::after {
  content: '+';
  font-weight: 800;
}

.event-more[open] summary::after {
  content: '−';
}

.event-note {
  margin: var(--space-2) 0 var(--space-3);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-muted);
  word-break: keep-all;
}

.event-note:empty {
  display: none;
}

.event-detail {
  font-size: 15px;
  line-height: 1.6;
  color: #3d3935;
}

.event-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.event-detail-sheet {
  display: flex;
  flex-direction: column;
}

.event-detail-row {
  display: grid;
  grid-template-columns: 9.25rem minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  align-items: start;
  padding: 0.55rem 0;
  border-top: 1px solid var(--color-divider);
}

html[lang="en"] .event-detail-row:not(.event-detail-row--solo) {
  grid-template-columns: 10.5rem minmax(0, 1fr);
}

.event-detail-row--solo {
  grid-template-columns: 1fr;
}

.event-detail-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-ink);
}

.event-detail-value {
  font-size: 15px;
  line-height: 1.6;
  color: #3d3935;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.event-detail-value strong {
  color: var(--color-ink);
  font-weight: 700;
}

/* Past participation instructions: kept as announced, labelled as no longer open. */
.event-detail-row.is-historical .event-detail-value,
.event-detail-row.is-historical .event-detail-value strong {
  color: var(--color-ink-muted);
}

.event-detail-historical {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px dashed rgba(30, 29, 26, 0.3);
  background: var(--color-surface-muted);
  color: var(--color-ink-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

@media (max-width: 520px) {
  /* The English label column above is more specific, so it is reset here too. */
  .event-detail-row:not(.event-detail-row--solo),
  html[lang="en"] .event-detail-row:not(.event-detail-row--solo) {
    grid-template-columns: 1fr;
    gap: 0.2rem 0;
  }
}