/* ==========================================================================
   Home page: section spacing, mobile type scale and touch targets.

   The hero slider is deliberately NOT styled here. It uses the theme's own
   rules in myhome.css and myhome-responsive.css, unchanged.

   Everything below is inside the mobile media query, so desktop is untouched.
   ========================================================================== */

@media only screen and (max-width: 768px) {

    /* ---- carousel dots overflow their own section ----
       Owl builds its dots as position:absolute, so they sit outside their
       section's box. They were overflowing it by 28px and landing on the next
       section's heading. Reserve flow space so they fall inside. */
    .normal-section-padding .thm-owl__carousel,
    .normal-section-padding .owl-theme {
        margin-bottom: 46px;
    }

    /* ---- type scale ----
       h1 and h2 were both 30px, so the page title and a section title carried
       identical weight and neither led. Meanwhile the text people actually
       read, sizes and prices, sat at 12px. Headings down, body up. */
    h1.section-title__title {
        font-size: 26px;
        font-weight: 600;
        line-height: 1.22;
    }
    h2.section-title__title {
        font-size: 20px;
        font-weight: 600;
        line-height: 1.28;
    }

    /* A product name on a card, not a headline. At 22px it wrapped to two
       lines on every one of the 20 cards. */
    .pc-card__title {
        font-size: 16px;
        line-height: 1.3;
    }
    .pc-card__subtitle,
    .pc-card__price-request,
    .pc-card__view-details {
        font-size: 13.5px;
    }

    /* The feature headings were also 20px, matching the h2 exactly. A short
       sentence-case line at the same size as a long uppercase heading reads as
       the larger of the two, so the h3 appeared to outrank its own section. */
    .features-one__sub-title {
        font-size: 17px;
        font-weight: 600;
        line-height: 1.32;
    }

    /* ---- guide list rows ----
       The card is a flex row whose body has flex-basis:auto. On a phone the
       title needs more than the space beside the thumbnail, so it wrapped onto
       its own line and stranded the image with 256px of empty space next to
       it. A two column grid holds the intended shape. */
    .mhs-guides .mhs-grow {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 14px;
        row-gap: 5px;
        align-items: start;
    }
    .mhs-guides .mhs-grow__img {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 92px;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border-radius: 8px;
        align-self: start;
    }
    .mhs-guides .mhs-grow__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .mhs-guides .mhs-grow__body {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        font-size: 15px;
        line-height: 1.34;
    }
    .mhs-guides .mhs-grow__meta {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        font-size: 12.5px;
    }

    /* ---- footer links ----
       55 links were 21px tall, well under the 44px touch minimum. Padding
       takes them past it without changing how the footer looks. */
    .mhs-footer__col ul li a {
        display: block;
        padding: 12px 0;
    }
    .mhs-footer__col ul li { margin-bottom: 0; }
    .mhs-footer__bottom ul li a {
        display: inline-block;
        padding: 14px 0;
    }
    .mhs-footer__info-more {
        display: inline-block;
        padding: 12px 0;
    }
}