/*
 * /kerjasama/ — the sponsorship media kit.
 *
 * Loaded via the `pageCss` front-matter hook in _includes/main.njk so the rest
 * of the site does not pay for these rules. Everything here follows DESIGN.md:
 * flat, sharp-cornered, 2px group borders and 1px dashed list separators (no
 * 4px splits here), with colour reserved for hover and structure.
 */

.kerjasama-page h2 {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--border-color);
}

.kerjasama-lede {
  max-width: 65ch;
  font-size: 1.125rem;
}

.kerjasama-cta {
  display: inline-block;
  padding: 0.875rem 1.25rem;
  border: 2px solid var(--border-color);
  font-family: "Martian Mono", "JetBrains Mono", monospace;
  font-size: 0.875rem;
  text-decoration: none;
}

.kerjasama-cta:hover {
  background-color: var(--accent-acid);
  color: #0a0b0d;
}

/* Three-up on desktop, stacking to one column on narrow screens. */
.kerjasama-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.kerjasama-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 1.5rem;
  border: 2px solid var(--border-color);
}

.kerjasama-stat:hover {
  background-color: var(--accent-cobalt);
  color: #ffffff;
}

.kerjasama-stat-figure {
  font-family: Unbounded, system-ui, sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.kerjasama-stat-label,
.kerjasama-stat-note {
  font-family: "Martian Mono", "JetBrains Mono", monospace;
  font-size: 0.75rem;
  line-height: 1.4;
}

.kerjasama-stat-note {
  opacity: 0.7;
}

.kerjasama-note {
  max-width: 65ch;
  color: var(--meta-color);
  font-size: 0.9375rem;
}

.kerjasama-stat:hover .kerjasama-stat-note {
  opacity: 0.85;
}

/* Wide content scrolls inside its own box; the page body never does. */
.kerjasama-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.kerjasama-table th,
.kerjasama-table td {
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-color);
  text-align: left;
  white-space: nowrap;
}

.kerjasama-table th {
  font-family: "Martian Mono", "JetBrains Mono", monospace;
  font-size: 0.75rem;
}

.kerjasama-videos {
  padding-left: 0;
  list-style: none;
}

/* Titles come from the YouTube API, so a long unbroken token (a URL, a
   hashtag chain, a compound word) can't be assumed to break cleanly. */
.kerjasama-videos li {
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--border-color);
  overflow-wrap: anywhere;
}

.kerjasama-video-meta {
  display: block;
  color: var(--meta-color);
  font-family: "Martian Mono", "JetBrains Mono", monospace;
  font-size: 0.75rem;
}

.kerjasama-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-left: 0;
  list-style: none;
}

.kerjasama-brands li {
  padding: 0.5rem 0.875rem;
  border: 2px solid var(--border-color);
  font-family: "Martian Mono", "JetBrains Mono", monospace;
  font-size: 0.8125rem;
}

.kerjasama-brands li:hover {
  background-color: var(--accent-acid);
  color: #0a0b0d;
}

.kerjasama-updated {
  color: var(--meta-color);
  font-family: "Martian Mono", "JetBrains Mono", monospace;
  font-size: 0.75rem;
}