/* media.css - Styles for media timeline page */

.media-page {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.page-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.4rem;
  margin-bottom: 1.2rem;
}

/* ── Filter bar ─────────────────────────────────────────────────────────── */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.filter-bar-year {
  margin-bottom: 0.8rem;
}

.filter-bar-year .filter-btn {
  font-size: 0.78rem;
  padding: 0.2em 0.55em;
}

.filter-btn {
  padding: 0.25em 0.8em;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Entry count ─────────────────────────────────────────────────────────── */

.entry-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
}

.media-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  line-height: 1.5;
}

.media-table thead th {
  background: var(--bg-surface);
  color: var(--text);
  font-weight: 700;
  padding: 0.4rem 0.6rem;
  text-align: left;
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
}

.media-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.media-table tbody tr:hover {
  background: var(--bg-surface);
}

.media-table td {
  padding: 0.35rem 0.6rem;
  vertical-align: top;
}

/* ── Column widths ───────────────────────────────────────────────────────── */

.col-date    { width: 8rem;  white-space: nowrap; }
.col-type    { width: 4rem;  white-space: nowrap; }
.col-source  { width: 14rem; }
.col-content { }

.entry-date {
  color: var(--text-muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.entry-source {
  color: var(--text);
  font-weight: 500;
}

.entry-content {
  color: var(--text-muted);
}

/* ── Type badges ─────────────────────────────────────────────────────────── */

.type-badge {
  display: inline-block;
  padding: 0.1em 0.45em;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.type-weekly  { background: #3366CC; }
.type-paper   { background: #CC2200; }
.type-monthly { background: #007744; }
.type-book    { background: #DD6600; }
.type-video   { background: #9900BB; }
.type-cd      { background: #0088BB; }
.type-film    { background: #886600; }
.type-goods   { background: #556677; }

/* ── Profiles page ───────────────────────────────────────────────────────── */

.profiles-page .profile-section {
  margin-bottom: 2rem;
}

.profiles-page h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  border-left: 4px solid var(--accent);
  padding-left: 0.6rem;
  margin-bottom: 0.6rem;
}

.profiles-page p,
.profiles-page ul,
.profiles-page dl {
  font-size: 0.95rem;
  line-height: 1.75;
  margin-left: 1rem;
}

.profiles-page ul {
  list-style: disc;
  padding-left: 1rem;
}

.profiles-page .agency-name {
  font-weight: 600;
}

.profiles-page .agency-talent {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.profiles-page .fanclub-name {
  font-weight: 600;
}

.profiles-page .fanclub-note {
  color: var(--accent-dark);
  font-size: 0.88rem;
  font-style: italic;
}

.profiles-page dl.fanclub-detail {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.1rem 1rem;
}

.profiles-page dl dt {
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  align-self: start;
}

.profiles-page dl dd {
  margin: 0;
  font-size: 0.88rem;
}

/* ── Profile table ───────────────────────────────────────────────────────── */

table.profile-table {
  border-collapse: collapse;
  font-size: 0.88rem;
  line-height: 1.55;
  margin-left: 1rem;
  margin-top: 0.5rem;
}

table.profile-table th,
table.profile-table td {
  padding: 0.3rem 1rem 0.3rem 0.5rem;
  border: 1px solid var(--border);
  vertical-align: top;
}

table.profile-table th {
  background: var(--bg-surface);
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
}

table.profile-table tr th:first-child {
  background: var(--bg-surface);
}

table.profile-table td:first-child {
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

table.profile-table tr:hover td {
  background: var(--bg-surface);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .col-date   { width: 6rem; }
  .col-source { width: 8rem; }

  .media-table {
    font-size: 0.8rem;
  }
}