/* cr-index.aspx -- page-specific styles. Shared site chrome (header,
   footer, base typography, color tokens) lives in cr-style.css;
   everything here is unique to the 3-column index layout. */

.cr-idx-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 56px;
}

/* body's default background is var(--off-white) -- other pages
   (cr-subject.aspx's .art-layout/.art-main/.art-sidebar-right) override
   back to white for the actual content area, same override here. */
.cr-idx-layout,
.cr-idx-mobile-controls {
    background: #fff;
}

.cr-idx-col-heading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #888;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dde3ec;
}

/* ===== DESKTOP 3-COLUMN LAYOUT (22:50:28) ===== */
.cr-idx-layout {
    display: grid;
    grid-template-columns: 2.2fr 5fr 2.8fr;
    gap: 24px;
    align-items: start;
}

/* ===== LEFT: SUBJECT AREAS ===== */
.cr-idx-subject-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cr-idx-subject-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
}
.cr-idx-subject-link:hover { background: #f4f5f7; }
.cr-idx-subject-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #0f2744;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.cr-idx-empty-state {
    font-size: 13px;
    color: #6b7280;
    padding: 24px 0;
}

/* ===== LEFT: LATEST TESTS ===== */
.cr-idx-tests-heading { margin-top: 20px; }
.cr-idx-test-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cr-idx-test-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
}
.cr-idx-test-link:hover { background: #f4f5f7; }
.cr-idx-test-thumb-wrap {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
}
.cr-idx-test-thumb {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    object-fit: cover;
    background: #f1f2f4;
    display: block;
    transition: transform 0.2s;
}
.cr-idx-test-link:hover .cr-idx-test-thumb {
    transform: scale(1.06);
}
.cr-idx-test-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
}
.cr-idx-test-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-idx-test-title { font-size: 17px; font-weight: 600; line-height: 1.35; }
.cr-idx-test-count { font-size: 11px; color: #6b7280; white-space: nowrap; }

/* ===== AD SLOTS ===== */
/* No min-height -- an unfilled ad (expected until real slot IDs are
   set) collapses to nothing instead of reserving blank space. */
.cr-idx-ad-slot { text-align: center; }
.cr-idx-ad-slot:has(ins[data-ad-status="filled"]) { margin: 0 0 24px; }

/* ===== CENTER: SPOTLIGHT ===== */
.cr-idx-spotlight {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    background: #fff;
}
.cr-idx-spotlight-track {
    display: flex;
    transition: transform .4s ease;
}
.cr-idx-spotlight-slide { flex: 0 0 100%; }
.cr-idx-spotlight-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0f172a;
}
.cr-idx-spotlight-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.cr-idx-spotlight-slide:hover .cr-idx-spotlight-thumb img { transform: scale(1.06); }
.cr-idx-play-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #fff;
    background: rgba(0,0,0,.15);
}
.cr-idx-spotlight-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 12px;
}
.cr-idx-spotlight-title {
    font-size: 17px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cr-idx-spotlight-controls { display: flex; gap: 6px; flex-shrink: 0; }
.cr-idx-spotlight-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
}
.cr-idx-spotlight-arrow:hover { background: #f4f5f7; }
.cr-idx-spotlight-dots { display: flex; gap: 6px; justify-content: center; padding-bottom: 12px; }
.cr-idx-spotlight-dot { width: 6px; height: 6px; border-radius: 50%; background: #d1d5db; cursor: pointer; }
.cr-idx-spotlight-dot.active { background: #1f2937; }

/* ===== CENTER: CONTENT/TEST FEED (2-up grid) ===== */
.cr-idx-feed-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.cr-idx-feed-card {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.cr-idx-feed-card:hover { border-color: #cbd2d9; }
.cr-idx-feed-thumb { position: relative; aspect-ratio: 16 / 9; background: #f1f2f4; }
.cr-idx-feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.cr-idx-feed-card:hover .cr-idx-feed-thumb img { transform: scale(1.06); }
.cr-idx-feed-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    color: #9ca3af;
    background: #f1f2f4;
}
.cr-idx-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #111827;
    color: #fff;
}
.cr-idx-type-badge.test { background: #0f6e56; }
.cr-idx-feed-body { padding: 8px 10px 10px; }
.cr-idx-feed-title { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.cr-idx-feed-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== RIGHT: VIDEOS RAIL (single column) ===== */
.cr-idx-video-rail { display: flex; flex-direction: column; gap: 12px; }
.cr-idx-video-card { display: block; text-decoration: none; color: inherit; }
.cr-idx-video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f2f4;
}
.cr-idx-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.cr-idx-video-card:hover .cr-idx-video-thumb img { transform: scale(1.06); }
.cr-idx-video-duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 11px;
    background: rgba(0,0,0,.75);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
}
.cr-idx-video-title { font-size: 17px; margin-top: 8px; font-weight: 700; line-height: 1.35; }
.cr-idx-video-desc {
    font-size: 14px;
    margin-top: 4px;
    color: #6b7280;
    line-height: 1.5;
}

/* ===== MOBILE CONTROLS (hidden on desktop) =====
   Subject Areas chips are hidden outright (desktop and mobile alike)
   -- kept in the DOM/code-behind since removing the control would
   mean also touching the .vb bind call, but never shown. The tabs
   moved out of this container into idxFeedSection (right under the
   "Latest content" heading, see cr-index.aspx) so they get their own
   responsive visibility rule instead of inheriting it from
   .cr-idx-mobile-controls. */
.cr-idx-mobile-controls { display: none; }
.cr-idx-mobile-chips { display: none; }
.cr-idx-chip {
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    color: #374151;
    white-space: nowrap;
}
.cr-idx-mobile-tabs { display: none; gap: 4px; margin: 10px 0 16px; border-bottom: 1px solid #e5e7eb; }
.cr-idx-tab {
    font-size: 13px;
    padding: 8px 10px;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.cr-idx-tab.active { color: #111827; border-bottom-color: #111827; font-weight: 600; }
.cr-idx-mobile-tests { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 4px; }

/* ===== MOBILE: 3 columns collapse into one feed =====
   The center feed and the right video rail both stay, but the
   All/Video/Test/Content tabs (see idxSelectTab in cr-index.aspx,
   now positioned right under the "Latest content" heading instead of
   below all the content) toggle which section is visible so the
   visitor filters before scrolling, not after. */
@media (max-width: 900px) {
    .cr-idx-layout { display: block; }
    .cr-idx-subjects { display: none; }
    .cr-idx-mobile-controls { display: block; margin-bottom: 8px; }
    .cr-idx-mobile-tabs { display: flex; }
    .cr-idx-videos .cr-idx-col-heading { display: none; }
    .cr-idx-video-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}

@media (max-width: 480px) {
    .cr-idx-feed-grid { grid-template-columns: 1fr; }
    .cr-idx-video-rail { grid-template-columns: 1fr; }
}