/* ==========================================================================
   CARS FOR YOU
   Mobile stylesheet
   carsforyou.site

   Mobile direction:
   - compact dealership website
   - no giant desktop blocks squeezed into phone width
   - no card-heavy UI
   - no fake app look
   - information first
   ========================================================================== */

@media (max-width: 760px) {

    :root {
        --mobile-edge: 16px;
    }

    html {
        background: #f3efe6;
    }

    body {
        background: #f3efe6;
    }

    .site-width,
    .site-main,
    .site-footer {
        width: 100%;
    }


    /* ======================================================================
       TOP STRIP
       ====================================================================== */

    .site-topline {
        font-size: 11px;
    }

    .site-topline__inside {
        width: 100%;

        min-height: auto;

        padding:
            7px
            var(--mobile-edge);

        display: block;
    }

    .site-topline__inside span {
        display: block;
    }

    .site-topline__inside span + span {
        margin-top: 3px;
    }


    /* ======================================================================
       HEADER
       ====================================================================== */

    .site-header {
        box-shadow: none;
    }

    .site-header__inside {
        width: 100%;

        min-height: auto;

        padding:
            17px
            var(--mobile-edge)
            15px;

        display: block;
    }

    .site-logo {
        display: block;
    }

    .site-logo__main {
        font-size: 31px;
        line-height: 1;
    }

    .site-logo__sub {
        margin-top: 7px;

        font-size: 9px;
    }

    .site-header__details {
        min-width: 0;

        margin-top: 13px;
        padding:
            10px
            0
            0;

        border-left: 0;
        border-top:
            1px solid
            var(--line);

        align-items: flex-start;

        text-align: left;
    }

    .site-header__details strong {
        font-size: 15px;
    }

    .site-header__details span,
    .site-header__details a {
        font-size: 11px;
    }


    /* ======================================================================
       NAVIGATION
       ====================================================================== */

    .main-nav {
        border-top-width: 3px;
    }

    .main-nav .site-width {
        width: 100%;
    }

    .nav-toggle {
        width: 100%;
        height: 43px;

        padding:
            0
            var(--mobile-edge);

        display: flex;
        align-items: center;
        justify-content: space-between;

        background: var(--navy);

        border: 0;

        color: #fff;

        text-align: left;

        font-size: 13px;
        font-weight: 700;

        cursor: pointer;
    }

    .nav-toggle::after {
        content: "☰";

        font-size: 16px;
        line-height: 1;
    }

    .nav-toggle[aria-expanded="true"]::after {
        content: "×";

        font-size: 23px;
        font-weight: 400;
    }

    .main-nav__links {
        display: none;

        width: 100%;

        background: #122033;

        border-top:
            1px solid
            rgba(255, 255, 255, .12);
    }

    .main-nav__links.is-open {
        display: block;
    }

    .main-nav__links a {
        min-height: 0;

        padding:
            12px
            var(--mobile-edge);

        display: block;

        border:
            0;

        border-bottom:
            1px solid
            rgba(255, 255, 255, .1);

        font-size: 12px;
    }

    .main-nav__links a:first-child {
        border-left: 0;
    }

    .main-nav__links a.is-active {
        background: var(--wine);
    }


    /* ======================================================================
       PAGE SHELL
       ====================================================================== */

    .site-main {
        margin: 0;

        min-height: 0;

        border:
            0;

        box-shadow: none;
    }


    /* ======================================================================
       HOME HERO
       ====================================================================== */

    .home-lead {
        min-height: 0;

        display: block;

        border-bottom:
            1px solid
            var(--line);
    }

    .home-feature {
        min-height: 0;

        background: #20262c;
    }

    .home-feature > img {
        width: 100%;
        height: 235px;

        min-height: 0;

        object-fit: cover;
    }

    .home-feature__caption {
        position: static;

        padding:
            14px
            var(--mobile-edge)
            15px;

        background: var(--navy);

        color: #fff;
    }

    .home-feature__caption p {
        margin-bottom: 5px;

        font-size: 9px;
    }

    .home-feature__caption h1 {
        font-size: 24px;
        line-height: 1.08;

        text-shadow: none;
    }

    .home-feature__caption strong {
        margin-top: 7px;

        font-size: 18px;
    }

    .home-aside {
        padding:
            20px
            var(--mobile-edge);

        border-left: 0;
        border-top:
            1px solid
            var(--line);

        background: #eee7da;
    }

    .home-aside h2 {
        font-size: 22px;
        line-height: 1.15;
    }

    .home-aside > p {
        margin-top: 10px;

        font-size: 14px;
        line-height: 1.5;
    }


    /* ======================================================================
       QUICK LINKS
       ====================================================================== */

    .quick-links {
        margin-top: 18px;
    }

    .quick-links a {
        padding:
            12px
            0;

        font-size: 12px;
    }


    /* ======================================================================
       NOTICE STRIP
       ====================================================================== */

    .notice-strip {
        min-height: 0;

        padding:
            10px
            var(--mobile-edge);

        display: block;

        font-size: 11px;
        line-height: 1.45;
    }

    .notice-strip span {
        display: block;
    }

    .notice-strip span + span {
        margin-top: 4px;
    }


    /* ======================================================================
       GENERAL SECTIONS
       ====================================================================== */

    .page-section {
        padding:
            22px
            var(--mobile-edge);
    }

    .section-heading {
        font-size: 23px;
    }

    .section-copy {
        margin-bottom: 17px;

        font-size: 13px;
        line-height: 1.55;
    }

    .rule-heading {
        margin-bottom: 14px;

        display: block;
    }

    .rule-heading h2 {
        font-size: 23px;
    }

    .rule-heading a {
        display: inline-block;

        margin-top: 7px;

        font-size: 12px;
    }


    /* ======================================================================
       VEHICLE LIST
       ====================================================================== */

    .vehicle-list {
        border-top:
            1px solid
            var(--line-dark);
    }

    .vehicle-row {
        display: block;

        min-height: 0;

        background: #fff;
    }

    .vehicle-row:nth-child(even) {
        background: #f7f2e9;
    }

    .vehicle-row__image {
        width: 100%;
        height: 210px;

        min-height: 0;

        border-right: 0;
        border-bottom:
            1px solid
            var(--line);
    }

    .vehicle-row__image img {
        width: 100%;
        height: 210px;

        min-height: 0;

        object-fit: cover;

        transition: none;
    }

    .vehicle-row:hover .vehicle-row__image img {
        transform: none;
    }

    .vehicle-row__body {
        padding:
            15px
            var(--mobile-edge)
            17px;
    }

    .vehicle-row__top {
        display: block;
    }

    .vehicle-reference {
        margin-bottom: 4px;

        font-size: 9px;
    }

    .vehicle-row__top h3 {
        font-size: 21px;
        line-height: 1.13;
    }

    .vehicle-price {
        display: block;

        margin-top: 7px;

        font-size: 22px;
    }

    .vehicle-spec-line {
        margin-top: 11px;

        padding:
            7px
            0;

        display: block;

        font-size: 11px;
        line-height: 1.5;
    }

    .vehicle-spec-line span {
        padding: 0;

        border-right: 0;
    }

    .vehicle-spec-line span::after {
        content: " · ";
    }

    .vehicle-spec-line span:last-child::after {
        content: "";
    }

    .vehicle-description {
        margin:
            11px
            0
            13px;

        font-size: 12px;
        line-height: 1.5;
    }


    /* ======================================================================
       VEHICLE SPECS
       ====================================================================== */

    .vehicle-mini-specs {
        grid-template-columns:
            1fr
            1fr;
    }

    .vehicle-mini-specs > div {
        padding:
            7px
            8px;
    }

    .vehicle-mini-specs dt {
        font-size: 8px;
    }

    .vehicle-mini-specs dd {
        font-size: 11px;
    }

    .vehicle-row__actions {
        margin-top: 12px;

        display: block;
    }

    .text-action {
        width: 100%;

        padding:
            10px
            11px;

        display: block;

        text-align: center;

        font-size: 12px;
    }

    .vehicle-row__actions > span {
        display: block;

        margin-top: 7px;

        text-align: center;

        font-size: 10px;
    }


    /* ======================================================================
       HOME CONTENT
       ====================================================================== */

    .home-columns,
    .content-grid {
        display: block;
    }

    .editorial-list li {
        padding:
            12px
            0;

        display: block;
    }

    .editorial-list strong {
        display: block;

        margin-bottom: 4px;

        font-size: 16px;
    }

    .editorial-list span {
        font-size: 13px;
        line-height: 1.5;
    }

    .side-information {
        margin-top: 23px;
        padding:
            17px
            0
            0;

        border-left: 0;
        border-top:
            1px solid
            var(--line-dark);
    }

    .side-information h3 {
        font-size: 19px;
    }

    .side-information p {
        font-size: 12px;
        line-height: 1.55;
    }


    /* ======================================================================
       CATEGORY LINKS
       ====================================================================== */

    .category-links {
        display: block;

        border:
            1px solid
            var(--line-dark);
    }

    .category-links a {
        min-height: 0;

        padding:
            16px
            15px;

        display: block;

        border-bottom:
            1px solid
            var(--line-dark);
    }

    .category-links a:last-child {
        border-bottom: 0;
    }

    .category-links strong {
        font-size: 18px;
    }

    .category-links span {
        margin-top: 6px;

        font-size: 12px;
    }


    /* ======================================================================
       GENERIC PROSE
       ====================================================================== */

    .prose h1 {
        font-size: 29px;
    }

    .prose h2 {
        margin-top: 24px;

        font-size: 22px;
    }

    .prose h3 {
        font-size: 17px;
    }

    .prose p,
    .prose li {
        font-size: 13px;
        line-height: 1.65;
    }


    /* ======================================================================
       LISTING HEADER
       ====================================================================== */

    .listing-intro {
        padding:
            21px
            var(--mobile-edge)
            18px;

        display: block;
    }

    .listing-intro h1 {
        font-size: 28px;
        line-height: 1.1;
    }

    .listing-intro p {
        margin-top: 9px;

        font-size: 13px;
        line-height: 1.5;
    }

    .listing-count {
        min-width: 0;

        margin-top: 15px;
        padding:
            11px
            0
            0;

        border-left: 0;
        border-top:
            1px solid
            var(--line);

        text-align: left;
    }

    .listing-count strong {
        display: inline;

        font-size: 27px;
    }

    .listing-count span {
        display: inline;

        margin:
            0
            0
            0
            6px;
    }


    /* ======================================================================
       FILTERS
       ====================================================================== */

    .inventory-controls {
        padding:
            14px
            var(--mobile-edge);

        display: block;

        background: #e8e1d5;
    }

    .inventory-control {
        margin-bottom: 11px;
    }

    .inventory-control--search {
        grid-column: auto;
    }

    .inventory-control label {
        margin-bottom: 4px;

        font-size: 9px;
    }

    .inventory-control input,
    .inventory-control select {
        height: 42px;

        font-size: 14px;
    }

    .filter-clear {
        width: 100%;
        height: 42px;
    }

    .inventory-status {
        padding:
            9px
            var(--mobile-edge);

        font-size: 11px;
        line-height: 1.4;
    }

    .inventory-empty {
        margin:
            18px
            var(--mobile-edge);

        padding:
            18px;
    }

    .inventory-empty h2 {
        font-size: 21px;
    }

    .inventory-empty p {
        font-size: 12px;
    }


    /* ======================================================================
       GENERIC PAGE HEADER
       ====================================================================== */

    .page-header {
        padding:
            22px
            var(--mobile-edge)
            18px;
    }

    .page-header h1 {
        font-size: 28px;
    }

    .page-header p {
        margin-top: 9px;

        font-size: 13px;
        line-height: 1.5;
    }


    /* ======================================================================
       TABLES
       ====================================================================== */

    .hours-table {
        font-size: 12px;
    }

    .service-table,
    .service-table tbody,
    .service-table tr,
    .service-table td {
        display: block;
        width: 100%;
    }

    .service-table thead {
        display: none;
    }

    .service-table {
        border-top:
            1px solid
            var(--line-dark);
    }

    .service-table tr {
        border-bottom:
            1px solid
            var(--line-dark);
    }

    .service-table td {
        padding:
            9px
            0;

        border: 0;
        border-bottom:
            1px solid
            var(--line);
    }

    .service-table td:last-child {
        border-bottom: 0;
    }

    .service-table td:first-child {
        width: 100%;

        padding-top: 13px;

        font-size: 16px;
    }

    .service-table tr:nth-child(even) td {
        background: transparent;
    }


    /* ======================================================================
       LOCATION
       ====================================================================== */

    .location-panel {
        display: block;
    }

    .location-map {
        min-height: 260px;
    }

    .location-copy {
        padding:
            20px
            var(--mobile-edge);
    }

    .location-copy h2 {
        font-size: 22px;
    }

    .location-copy p {
        font-size: 13px;
    }


    /* ======================================================================
       INFO LIST
       ====================================================================== */

    .info-list li {
        padding:
            12px
            0;
    }

    .info-list strong {
        font-size: 16px;
    }

    .info-list span,
    .info-list p {
        font-size: 12px;
        line-height: 1.5;
    }


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

    .site-footer {
        margin:
            0
            0
            0;

        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .site-footer__columns {
        width: 100%;

        padding:
            24px
            var(--mobile-edge);

        display: block;
    }

    .site-footer__columns > div {
        padding:
            14px
            0;

        border-bottom:
            1px solid
            rgba(255, 255, 255, .12);
    }

    .site-footer__columns > div:first-child {
        padding-top: 0;
    }

    .site-footer__columns > div:last-child {
        padding-bottom: 0;

        border-bottom: 0;
    }

    .footer-heading {
        margin-bottom: 6px;

        font-size: 16px;
    }

    .site-footer p {
        font-size: 11px;
        line-height: 1.5;
    }

    .site-footer__bottom {
        width: 100%;

        padding:
            12px
            var(--mobile-edge)
            16px;

        display: block;

        font-size: 9px;
        line-height: 1.4;
    }

    .site-footer__bottom span {
        display: block;
    }

    .site-footer__bottom span + span {
        margin-top: 4px;
    }
}


/* ==========================================================================
   VERY SMALL PHONES
   ========================================================================== */

@media (max-width: 390px) {

    .site-logo__main {
        font-size: 28px;
    }

    .home-feature > img,
    .vehicle-row__image,
    .vehicle-row__image img {
        height: 190px;
    }

    .home-feature__caption h1 {
        font-size: 22px;
    }

    .vehicle-row__top h3 {
        font-size: 19px;
    }

    .vehicle-price {
        font-size: 20px;
    }

    .vehicle-mini-specs {
        grid-template-columns: 1fr;
    }

    .vehicle-mini-specs > div {
        border-right:
            1px solid
            #d7cfc2;
    }
}