/*
============================================================
Manual Rehab NYC
responsive.css

Purpose:
Controls adjustments for smaller screens.

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

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

@media (max-width: 900px) {


    .grid-3 {

        grid-template-columns: repeat(2, 1fr);

    }


    .split {

        grid-template-columns: 1fr;

    }


    h1 {

        font-size: var(--font-size-3xl);

    }


}



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

@media (max-width: 800px) {


    .nav-list {

    flex-wrap: wrap;

    justify-content: center;

    gap: var(--space-xs);

    }


    .nav-link {

    padding: 0.5rem 0.65rem;

    }


    .site-logo-image {

    height: 62px;

    width: auto;

    }


    .site-header {

    padding: 0.75rem 0;

    }


    .container {

        width: min(
            100% - 2rem,
            var(--container-width)
        );

    }


    .section {

        padding-block: var(--space-xl);

    }


    .grid-2,
    .grid-3 {

        grid-template-columns: 1fr;

    }


    h1 {

        font-size: var(--font-size-3xl);

    }


    h2 {

        font-size: var(--font-size-2xl);

    }


}


.about-preview-image::before {
    inset: 0.75rem -0.5rem -0.75rem 0.5rem;
}


@media (max-width: 900px) {

    .conditions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .conditions-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================================
   Testimonials
   ========================================================================== */

@media (max-width: 900px) {

    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .testimonial-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================================
   Learning Center
   ========================================================================== */

@media (max-width: 900px) {

    .article-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .article-grid {
        grid-template-columns: 1fr;
    }

    .article-card {
        padding: var(--space-md);
    }

}




/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

   @media (max-width: 900px) {

    .about-story-grid,
    .about-expectations-grid {
        grid-template-columns: 1fr;
    }

    .about-story-image {
        max-width: 560px;
    }

    .experience-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .page-hero {
        text-align: left;
    }

    .page-hero h1,
    .page-hero-intro {
        margin-right: 0;
        margin-left: 0;
    }

    .experience-grid {
        grid-template-columns: 1fr;
    }

    .about-quote {
        padding-left: var(--space-md);
    }

}


/* ==========================================================================
   TREATMENTS PAGE
   ========================================================================== */

   @media (max-width: 900px) {

    .treatment-overview-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .treatment-grid,
    .treatment-methods-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .treatment-grid,
    .treatment-methods-grid {
        grid-template-columns: 1fr;
    }

    .treatment-overview-content h2 {
        margin-bottom: var(--space-sm);
    }

}


/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

   @media (max-width: 800px) {

    .contact-hero {
    text-align: center;
    }

    .contact-hero-grid {
        grid-template-columns: 1fr;
    }

    .contact-hero-content {
        max-width: 100%;
        text-align: center;
    }

    .contact-hero-image {
        max-width: 520px;
        margin-inline: auto;
    }

}


   @media (max-width: 900px) {

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-wrapper {
        max-width: 700px;
    }

}

@media (max-width: 600px) {

    .contact-details {
        grid-template-columns: 1fr;
    }

    .contact-form-wrapper {
        padding: var(--space-lg);
    }

}


/* ==========================================================================
   FAQ PAGE
   ========================================================================== */


@media (max-width: 900px) {

    .faq-layout {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .faq-section-heading {
        max-width: 650px;
    }

}

@media (max-width: 600px) {

    .faq-item {
        padding: var(--space-md) 0;
    }

}



/* ==========================================================================
   BLOG LANDING PAGE (blog/index.html)
   ========================================================================== */


   @media (max-width: 900px) {

    .featured-article {
        grid-template-columns: 1fr;
    }

    .featured-article-image {
        min-height: 320px;
    }

    .article-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-topics-layout {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .featured-article-content {
        padding: var(--space-lg);
    }

    .featured-article-image {
        min-height: 240px;
    }

    .article-grid,
    .topic-list {
        grid-template-columns: 1fr;
    }

    .article-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

}



/* ==========================================================================
   BLOG ARTICLE TEMPLATE (blog/template.html)
   ========================================================================== */


@media (max-width: 900px) {

    .article-layout {
        grid-template-columns: 1fr;
    }

    .article-sidebar {
        position: static;
    }

    .article-table-of-contents ol {
        grid-template-columns: repeat(2, 1fr);
    }

    .related-article-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .article-hero-content {
        text-align: left;
    }

    .article-summary {
        margin-inline: 0;
    }

    .article-meta-list {
        justify-content: flex-start;
    }

    .article-featured-image img {
        min-height: 240px;
    }

    .article-table-of-contents ol,
    .related-article-grid {
        grid-template-columns: 1fr;
    }

    .article-body blockquote {
        padding: var(--space-md);
    }

}


/* ==========================================================================
   FOOTER
   ========================================================================== */

@media (max-width: 800px) {

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-lg);
    }

.footer-brand {
    grid-column: 1 / -1;
    max-width: 100%;
    text-align: center;
}

.footer-logo {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-md);
}

    .footer-logo-image {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-navigation,
    .footer-contact {
        max-width: 100%;
    }

    .footer-navigation ul {
        grid-template-columns: 1fr;
    }

}