/*
 * Mobile / tablet layout for the eCards site.
 *
 * ecards.css (the production stylesheet) is a fixed 801px desktop layout and is left untouched.
 * Everything here sits inside media queries, so screens wider than 860px look exactly as before.
 *
 *   <= 860px  tablet: fluid page width, grids instead of fixed-width floats
 *   <= 600px  phone : 2-column card grids, stacked form, larger touch targets
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ===================================================================== */
/* Tablet and below                                                      */
/* ===================================================================== */
@media (max-width: 860px) {

    /* ---- Page frame -------------------------------------------------- */
    #main {
        width: auto;
        max-width: 801px;
        padding: 12px 16px 24px 16px;
        min-height: 100vh;
        box-sizing: border-box;
    }

    #content img {
        max-width: 100%;
    }

    #upmcBanner {
        width: 170px;
        height: 64px;
        background-size: auto 56px;
        background-position: 0 0;
    }

    /* Banners are 801x229 background images: scale them with the page. */
    #ecardsBanner, #selectBanner, #personalizeBanner, #sendBanner, #tyBanner {
        width: 100%;
        height: auto;
        aspect-ratio: 801 / 229;
        background-size: 100% auto;
    }

    /* ---- Left navigation: category "chips" above the cards ------------ */
    #leftNav {
        float: none;
        width: auto;
        background-image: none;
        display: block;
        padding: 4px 0 14px 0;
        margin: 0 0 16px 0;
        border-bottom: 1px solid #e6dbe4;
    }

        #leftNav br,
        #leftNav #socialLinks + br {
            display: none;
        }

    #leftNav .nav-group {
        margin: 0 0 14px 0;
    }

    #leftNav h2.mainCatagory {
        margin: 0 0 8px 0;
        font-size: 13px;
        letter-spacing: 0.08em;
        color: var(--upmc-purple, #4D104A);
    }

    #leftNav .nav-group ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
        padding: 0;
    }

    #leftNav .subCatagory {
        padding: 0;
        font-size: 14px;
    }

        #leftNav .subCatagory a {
            display: inline-flex;
            align-items: center;
            min-height: 40px;            /* comfortable touch target */
            line-height: 1.2;
            padding: 0 16px;
            border: 1px solid #cfc3cd;
            border-radius: 999px;
            background: #fff;
            color: #4a4f52;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
            transition: background-color .15s, border-color .15s, color .15s;
        }

            #leftNav .subCatagory a:hover {
                border-color: var(--upmc-purple, #4D104A);
                color: var(--upmc-purple, #4D104A);
                text-decoration: none;
            }

            #leftNav .subCatagory a.active,
            #leftNav .subCatagory a.active:hover {
                background: var(--upmc-purple, #4D104A);
                border-color: var(--upmc-purple, #4D104A);
                color: #fff;
            }

            #leftNav .subCatagory a:focus-visible {
                outline: 3px solid var(--upmc-purple, #4D104A);
                outline-offset: 2px;
            }

    /* Back to home appears above the OCCASION chips */
    #backtohome {
        margin-bottom: 10px;
    }

    #backtohome {
        font-size: 13px;
    }

        #backtohome a {
            display: inline-flex;
            align-items: center;
            min-height: 40px;
        }

            #backtohome a::before {
                content: "\2039";       /* single left-pointing angle quote */
                font-size: 20px;
                line-height: 1;
                margin-right: 6px;
            }

    .nav-share {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
    }

    #leftNav p,
    .share-after-cards p {
        margin: 0;
        font-size: 13px;
    }

    #socialLinks .socialText {
        font-size: 13px;
    }

    /* Icon + label on one line */
    #socialLinks a,
    #socialLarge a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        #socialLinks a img,
        #socialLarge a img {
            float: none;
            margin: 0;
        }

    #socialLinks .socialText,
    #socialLarge .socialText {
        white-space: nowrap;
        padding: 0;
        margin: 0;
    }

    /* ---- Home page tiles ---------------------------------------------- */
    #mainBoxes {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

        #mainBoxes > a {
            display: block;
            min-width: 0;
        }

    #mainBoxes .mainBox,
    #holidayBoxes .holidayBox {
        float: none !important;
        width: auto;
        height: auto;
        margin: 0 !important;
        padding: 10px 10px 12px 10px;
        background-position: right 10px bottom 16px;
    }

        #mainBoxes .mainBox .mainCardImage,
        #holidayBoxes .holidayBox .mainCardImage {
            display: block;
            width: 100%;
            height: auto;
        }

    .mainBoxText,
    .holidayBoxText {
        float: none;
        text-align: right;
        padding: 10px 18px 0 0;
        font-size: 16px;
    }

    /* ---- Holiday tiles ------------------------------------------------ */
    #holidayBoxes {
        float: none;
        width: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

        #holidayBoxes > a {
            display: block;
            min-width: 0;
        }

    /* ---- Card thumbnails (category pages) ----------------------------- */
    #subBoxes {
        float: none;
        width: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    #subBoxes .subBox {
        float: none !important;
        margin: 0 !important;
        padding: 10px;
        min-width: 0;
    }

        #subBoxes .subBox .thumbCardImage {
            display: block;
            width: 100%;
            height: auto;
        }


    /* Line breaks and the disclaimer that live inside the grids. */
    #subBoxes > br,
    #holidayBoxes > br {
        display: none;
    }

    /* Share line + disclaimer span the full row under the cards (share line sits right above the disclaimer) */
    #subBoxes > #disclaimer,
    #holidayBoxes > #disclaimer,
    #subBoxes > .share-after-cards,
    #holidayBoxes > .share-after-cards {
        grid-column: 1 / -1;
    }

    /* ---- Personalize ------------------------------------------------- */
    #personalize #card {
        width: auto;
        max-width: 528px;
        height: auto;
        padding: 5% 6% 7% 6%;
        background-size: cover;
    }

        #personalize #card img {
            display: block;
            width: 100%;
            height: auto;
        }

    #personalize #form {
        width: auto;
        max-width: 530px;
    }

    /* ---- Preview ----------------------------------------------------- */
    #preview #card {
        width: auto;
        max-width: 517px;
        padding: 20px 4% 28px 4%;
    }

    .delivery-details {
        max-width: none;
    }

    /* ---- Thank you --------------------------------------------------- */
    #thankyou {
        width: auto;
        height: auto;
        padding: 48px 20px;
        margin: 24px auto 20px auto;
        font-size: 26px;
        background-size: cover;
    }

    #socialLarge {
        width: auto;
        display: flex;
        justify-content: center;
    }

        #socialLarge #twitter {
            margin: 0;
            width: auto;
        }
}

/* ===================================================================== */
/* Phones                                                                */
/* ===================================================================== */
@media (max-width: 600px) {

    #main {
        padding: 10px 12px 20px 12px;
    }

    #upmcBanner {
        width: 140px;
        height: 52px;
        background-size: auto 44px;
    }

    #content H1 {
        font-size: 20px;
        margin-top: 16px;
    }

    #mainBoxes,
    #holidayBoxes,
    #subBoxes {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .mainBoxText,
    .holidayBoxText {
        font-size: 15px;
        padding-right: 16px;
    }

    #mainBoxes .mainBox,
    #holidayBoxes .holidayBox {
        background-position: right 8px bottom 16px;
    }

    #subBoxes .subBox {
        padding: 8px;
    }

    #leftNav .subCatagory a {
        min-height: 38px;
        padding: 0 14px;
        font-size: 13px;
    }

    /* Keep the share text + link together, wrapping only if needed */
    .share-after-cards .nav-share {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ---- Personalize form ------------------------------------------- */
    .upmc-form {
        padding: 0 14px 18px 14px;
    }

        .upmc-form .form-row {
            grid-template-columns: 1fr; /* Room / Unit stack on phones */
            gap: 0;
        }

    #personalize #footer {
        font-size: 13px;
    }

    /* ---- Preview ----------------------------------------------------- */
    #preview #card {
        padding: 16px 12px 22px 12px;
        border-radius: 8px;
    }

    .card-inside {
        min-height: 0;
        padding: 22px 18px 10px 18px;
    }

    #content .card-inside-text p {
        font-size: 15px;
    }

    .card-inside-logo img {
        width: 190px;
    }

    .delivery-details {
        padding: 16px;
    }

        .delivery-details dl {
            grid-template-columns: 1fr;
            gap: 10px;
        }

    .button-row {
        flex-direction: column;
        align-items: stretch;
        max-width: 300px;
        margin: 0 auto;
    }

        .button-row .btn {
            width: 100%;
        }

    #personalize #footer #btnPreview.btn {
        width: 100% !important;
    }

    .button-row + .button-row {
        margin-top: 16px;
    }

    /* ---- Thank you --------------------------------------------------- */
    #thankyou {
        font-size: 21px;
        padding: 36px 14px;
    }

    #thankyouFooter {
        font-size: 17px;
        padding: 0 8px;
    }

    #disclaimer p br {
        display: none;
    }
}