/*
====================================================

The Resource Hub
Patient Access Center Learning Resource Hub

File:
responsive.css

Version:
1.0 Alpha

Sprint:
2.1

Story:
TRH-002F

Description:
Dashboard Responsive Refinement

====================================================
*/


/* ==========================================
   Large Desktop
========================================== */

@media (min-width: 1440px) {

    #app-content {

        max-width:
            var(--content-max-width);

        margin:
            0 auto;

    }

}


/* ==========================================
   Laptop
========================================== */

@media (max-width: 1200px) {

    :root {

        --sidebar-width:
            240px;

    }

    .rh-experience-options {

        gap:
            var(--space-md);

    }

}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

    .rh-layout {

        grid-template-columns:
            1fr;

    }

    #app-sidebar {

        display:
            none;

    }

    .rh-experience-options {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }

}


/* ==========================================
   Small Tablet
========================================== */

@media (max-width: 768px) {

    html {

        font-size:
            15px;

    }

    #app-content {

        padding:
            var(--space-lg);

    }

    .rh-experience-options {

        grid-template-columns:
            1fr;

    }

    .rh-experience-option {

        min-height:
            100px;

    }

    .rh-search-placeholder {

        grid-template-columns:
            1fr;

    }

    .rh-search-placeholder label {

        grid-column:
            auto;

    }

    .rh-search-placeholder .rh-button {

        width:
            100%;

    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 480px) {

    html {

        font-size:
            14px;

    }

    #app-content {

        padding:
            var(--space-md);

    }

    .rh-dashboard-header {

        padding-bottom:
            var(--space-md);

    }

    .rh-highlight-card-content,
    .rh-resource-card-content {

        padding:
            var(--space-md);

    }

}
/* ==========================================
   Resource Page Responsive Behavior
========================================== */

@media (max-width: 768px) {

    .rh-resource-meta {

        grid-template-columns:
            1fr;

    }

    .rh-resource-purpose {

        font-size:
            var(--font-size-md);

    }

    .rh-header-content {

        padding:
            0 var(--space-md);

    }

    .rh-footer-content {

        flex-direction:
            column;

        gap:
            var(--space-xs);

    }

}