/* Topic Lab - Topic Lab Responsive Viewport Overrides */

@media (min-width: 1240px) {
    .td-topic-lab--topic-lab.is-detail-open .td-topic-lab__topic-lab-main {
        grid-template-columns: minmax(0, 1.02fr) minmax(21.5rem, 0.88fr);
        align-items: start;
    }

    .td-topic-lab--topic-lab.is-detail-open .td-topic-lab__topic-lab-landing,
    .td-topic-lab--topic-lab.is-detail-open .td-topic-lab__topic-lab-detail {
        align-self: start;
    }

    .td-topic-lab__topic-lab-back {
        display: none;
    }
}

@container (max-width: 31rem) {
    .td-topic-lab__article-panel--topic-lab-collection .td-topic-lab__article-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1280px) {
    .td-topic-lab--topic-lab {
        --td-topic-lab-sidebar-width: minmax(16rem, 18rem);
    }
}

@media (max-width: 1120px) {
    .td-topic-lab__topic-lab-shell {
        grid-template-columns: 1fr;
    }

    .td-topic-lab__topic-lab-sidebar {
        position: relative;
        top: auto;
        padding: 1.25rem;
    }

    .td-topic-lab__article-stage--topic-lab-collection {
        grid-template-columns: 1fr;
    }

    .td-topic-lab__selected-card--topic-lab-detail {
        position: static;
    }

    .td-topic-lab__decision-modules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .td-topic-lab--topic-lab {
        --td-topic-lab-media-ratio: 1.26;
    }

    .td-topic-lab__topic-lab-landing-lead {
        grid-template-columns: 1fr;
    }

    .td-topic-lab__topic-lab-tile-grid,
    .td-topic-lab__article-panel--topic-lab-collection .td-topic-lab__article-grid {
        grid-template-columns: 1fr;
    }

    .td-topic-lab__topic-lab-tile {
        grid-template-rows: minmax(0, 12rem) auto;
    }

    .td-topic-lab__decision-modules,
    .td-topic-lab__decision-intent-groups {
        grid-template-columns: 1fr;
    }

    /* PREMIUM MOBILE RESPONSIVENESS OVERRIDES */

    /* 1. Compact 2-column sidebar grid to save immense vertical space */
    .td-topic-lab__topic-lab-sidebar-sections {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
    }

    /* 2. Allow elegant multi-line wrapping for items instead of ellipses clipping */
    .td-topic-lab--topic-lab .td-topic-lab__topic-lab-sidebar-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        white-space: normal !important;
        padding: 0.6rem 0.75rem !important;
        border-radius: 0.75rem !important;
        gap: 0.5rem !important;
    }

    .td-topic-lab--topic-lab .td-topic-lab__topic-lab-sidebar-item-label {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        flex-grow: 1 !important;
    }

    /* Hide arrow icon inside items on mobile to keep layout clean and lightweight */
    .td-topic-lab__topic-lab-sidebar-item-arrow {
        display: none !important;
    }

    /* Decrease sidebar container size and spacing on mobile */
    .td-topic-lab__topic-lab-sidebar {
        padding: 1rem !important;
        gap: 0.9rem !important;
        border-radius: var(--td-topic-lab-radius) !important;
    }

    .td-topic-lab__topic-lab-sidebar-item-icon {
        width: 1.85rem !important;
        height: 1.85rem !important;
        border-radius: 0.5rem !important;
        font-size: 0.9rem !important;
    }
}