/* pages/channels.css — implementation of Channels.dc.html.

   Rewritten wholesale: the previous file was legacy CSS for a page that
   borrowed .pricing-page and .library-header, both of which have since been
   re-scoped to their own pages. That left channels rendering the deleted navy
   gradient header. It now uses the shared .page-header partial.

   Departure from the design: the design mocks channel art as an animated
   stripe block because it had no images. All four real channels have
   thumbnails, so the artwork shows and the stripe becomes the fallback. */

.channels-page {
    background: #0A1733;
    min-height: 100vh;
    padding-top: 0;   /* body already offsets the fixed nav */
}

.channels-list { padding: 40px 0 120px; }

.channels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.channel-card {
    display: flex;
    flex-direction: column;
    background: #0D1C3E;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.channel-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold);
}

/* ---------------- artwork ---------------- */
.channel-thumbnail {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: #0E2049;
}
.channel-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease);
}
.channel-card:hover .channel-thumbnail img { transform: scale(1.04); }

/* the design's drifting stripe, kept for channels with no artwork */
.channel-thumbnail-fallback {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(115deg,
        #0E2049 0px, #0E2049 14px, #122A5E 14px, #122A5E 28px);
    animation: stripeDrift 6s linear infinite;
}
@keyframes stripeDrift {
    from { background-position: 0 0; }
    to   { background-position: 80px 0; }
}
.fallback-label {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 246, 251, 0.75);
    background: rgba(6, 13, 31, 0.72);
    padding: 6px 12px;
    margin: 14px;
}

/* ---------------- body ---------------- */
.channel-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 32px 32px 36px;
}
.channel-content .kicker { margin-bottom: 14px; }
.channel-content h2 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    color: var(--text-hi);
}
.channel-content p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-mid);
    margin: 0 0 24px;
    flex: 1;
}
.channel-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.channel-actions .btn-paper,
.channel-actions .btn-line {
    font-size: 13.5px;
    padding: 10px 22px;
}
.channel-actions .btn-line { padding: 9px 22px; }

.channels-empty {
    color: var(--text-mid);
    font-size: 16px;
    padding: 60px 0;
}

/* ---------------- responsive ---------------- */
@media (max-width: 860px) {
    .channels-grid { grid-template-columns: 1fr; }
    .channel-thumbnail { height: 160px; }
    .channel-content { padding: 26px 24px 30px; }
    .channels-list { padding: 32px 0 80px; }
}