/* Channel customization on the channel page (SPEC 27): the uploaded banner, the header's chips and links, the channel
   trailer and the About tab with "Get to know me". Linked from channel.html; tokens come from style.css (light and dark). */

/* Tabs (the same rules as posts.css, which only channels with posts load) */
.channel-tabs { display: flex; gap: 4px; margin: -8px 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.channel-tabs a {
  padding: 10px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font-weight: 700; font-size: 15px; color: var(--text-2); white-space: nowrap;
}
.channel-tabs a:hover { color: var(--text); }
.channel-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); }
/* Videos, Live, Posts and About side by side on the narrowest phones */
@media (max-width: 380px) { .channel-tabs a { padding: 10px 12px; } }

/* Banner: 2560 x 640 (4:1). Computers see all of it (a very wide screen trims a little off the top and bottom, never the
   middle); phones see exactly the middle 1546 x 423 safe area: the image is drawn 2560/1546 of the box's width and
   centred, so the box shows that area and nothing else. */
.channel-banner.has-image { position: relative; height: auto; aspect-ratio: 4 / 1; max-height: 320px; overflow: hidden; background: var(--surface-2); }
.channel-banner-img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 720px) {
  .channel-banner.has-image { aspect-ratio: 1546 / 423; max-height: none; border-radius: 12px; }
  .channel-banner.has-image .channel-banner-img {
    position: absolute; left: 50%; top: 50%; width: 165.588%; height: auto; transform: translate(-50%, -50%); object-fit: fill;
  }
}

/* Header: training chips and links */
.channel-chips, .channel-links { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.channel-chip-tag {
  padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text);
  font-size: 13px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere;
}
.channel-links { gap: 4px 14px; }
/* A long website name shrinks to an ellipsis instead of widening the page: the items may be narrower than their text */
.channel-links li, .about-links li { min-width: 0; max-width: 100%; }
.channel-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; max-width: 100%;
  color: var(--text-2); font-size: 14px; font-weight: 600;
}
.channel-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-link .icon { flex: none; color: var(--text); }
.channel-link:hover { color: var(--text); }
.channel-link:hover span:not(.visually-hidden) { text-decoration: underline; }

/* Channel trailer: a large card with a Play button (no player on the channel page) */
.trailer {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: center;
  margin: 0 0 30px; padding-bottom: 28px; border-bottom: 1px solid var(--line);
}
.trailer-media {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--surface-2);
}
.trailer-media img, .trailer-media .thumb-fallback { width: 100%; height: 100%; object-fit: cover; }
.trailer-play {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px;
  transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0, 0, 0, 0.62); color: #fff;
  transition: transform 0.15s ease, background 0.15s ease;
}
.trailer-play .icon { fill: currentColor; margin-left: 4px; }
.trailer-media:hover .trailer-play { transform: translate(-50%, -50%) scale(1.06); background: var(--accent); }
.trailer-text { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.trailer-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.trailer-title { font-size: 22px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.trailer-title a:hover { text-decoration: underline; }
.trailer-desc { color: var(--text-2); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.trailer-btn { margin-top: 6px; }
.trailer-btn .icon { fill: currentColor; }
.trailer-note { margin-top: 2px; }

/* About tab */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; max-width: 1100px; }
.about-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); max-width: 72ch; }
.about-text a { color: var(--accent-text); font-weight: 600; }
.about-text a:hover { text-decoration: underline; }
.about-side {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.about-side-title { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.about-side-title + * { margin-bottom: 8px; }
.about-facts, .about-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.about-facts li { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); font-size: 14.5px; overflow-wrap: anywhere; }
.about-facts .icon { flex: none; color: var(--text-2); }

.getknow { margin-top: 28px; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.getknow-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.getknow-title .icon { flex: none; color: var(--accent); }
.getknow-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.getknow-item { min-width: 0; }
.getknow-item.is-story { grid-column: 1 / -1; }
.getknow-item dt { font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-3); }
.getknow-item dd { margin: 2px 0 0; font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.getknow-item.is-story dd { white-space: pre-wrap; }
.getknow-entries { margin: 0; padding-left: 1.15em; }
.getknow-entries li + li { margin-top: 2px; }
.getknow-empty { margin-top: 18px; }

@media (max-width: 860px) {
  .trailer { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 480px) {
  .getknow { padding: 14px 14px 16px; }
  .getknow-list { grid-template-columns: minmax(0, 1fr); }
  .trailer-play { width: 60px; height: 60px; }
  .trailer-title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .trailer-play { transition: none; } }