/*
 * ENERGY 106 — HOW TO LISTEN MOBILE V1
 *
 * Responsive-only CSS.
 * Desktop styling is not changed.
 * Scoped to the Energy 106 How To Listen page.
 */

/* TABLETS / NARROW CONTENT */

@media (max-width: 980px) {

    .energy-listen-page,
    .energy-listen-page .energy-listen-methods,
    .energy-listen-page .energy-listen-grid,
    .energy-listen-page .energy-listen-help {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* DAB feature becomes one column */
    .energy-listen-page .energy-listen-dab {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .energy-listen-page .energy-listen-dab__main,
    .energy-listen-page .energy-listen-steps {
        min-width: 0;
    }

    /* App and Alexa stack instead of becoming squeezed */
    .energy-listen-page .elm-feature-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .energy-listen-page .elm-app,
    .energy-listen-page .elm-alexa {
        min-width: 0;
        max-width: 100%;
    }
}

/* PHONES */

@media (max-width: 700px) {

    /* Keep the existing standard Vibe page heading size */
    .energy-listen-page {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* DAB+ */
    .energy-listen-page .energy-listen-dab {
        margin-bottom: 23px;
        padding: 18px;
        gap: 18px;
    }

    .energy-listen-page .energy-listen-dab h2 {
        font-size: clamp(21px, 6vw, 25px);
        line-height: 1.12;
    }

    .energy-listen-page .energy-listen-kicker {
        font-size: 11px;
        letter-spacing: .03em;
    }

    .energy-listen-page .energy-listen-dab__main > p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Full-width FIND YOUR ENERGY CTA */
    .energy-listen-page .energy-listen-dab
    .energy-listen-btn--pink {
        display: inline-flex;
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 10px 16px;
        justify-content: center;
        gap: 14px;
        box-sizing: border-box;
    }

    /* Retuning instructions */
    .energy-listen-page .energy-listen-steps {
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
    }

    .energy-listen-page .energy-listen-step {
        gap: 13px;
        min-width: 0;
    }

    .energy-listen-page .energy-listen-step p {
        font-size: 13px;
        line-height: 1.5;
    }

    /* Section heading */
    .energy-listen-page
    .energy-listen-section-heading h2 {
        font-size: 19px;
        line-height: 1.2;
    }

    /* LIVE LISTENING — photographic feature */
    .energy-listen-page .elm-live {
        display: flex;
        align-items: flex-end;
        width: 100%;
        min-width: 0;
        min-height: 345px;
    }

    .energy-listen-page .elm-live__photo {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 62% center;
    }

    .energy-listen-page .elm-live__content {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        padding: 27px 20px 37px;
    }

    .energy-listen-page .elm-live h3 {
        font-size: clamp(33px, 9vw, 44px);
        line-height: 1.02;
    }

    .energy-listen-page .elm-live__content > p {
        max-width: 330px;
        font-size: 14px;
        line-height: 1.5;
    }

    .energy-listen-page .elm-live .elm-button {
        display: inline-flex;
        min-height: 48px;
        max-width: 100%;
        padding: 12px 18px;
        box-sizing: border-box;
    }

    .energy-listen-page .elm-live__corner {
        right: 12px;
        bottom: 9px;
        font-size: 8px;
    }

    /* APP / ALEXA PROMOTIONS */
    .energy-listen-page .elm-feature-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
    }

    .energy-listen-page .elm-app,
    .energy-listen-page .elm-alexa {
        min-height: 0;
        padding: 23px 20px;
    }

    .energy-listen-page .elm-app h3,
    .energy-listen-page .elm-alexa h3 {
        font-size: clamp(27px, 7.5vw, 36px);
        line-height: 1.04;
    }

    .energy-listen-page .elm-app p,
    .energy-listen-page .elm-alexa p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.6;
    }

    /* Remove large decorative APP lettering on phones */
    .energy-listen-page .elm-app__decor {
        display: none;
    }

    /* Real App Store badges */
    .energy-listen-page .elm-app__stores {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        width: 100%;
        min-width: 0;
        margin-top: 8px;
    }

    .energy-listen-page .elm-app__stores a {
        display: flex;
        flex: none;
        width: 100%;
        min-width: 0;
        min-height: 49px;
        padding: 8px 9px;
        gap: 8px;
        box-sizing: border-box;
        justify-content: flex-start;
    }

    .energy-listen-page .elm-app__stores img {
        display: block;
        flex: 0 0 21px;
        width: 21px;
        height: 21px;
        max-width: 21px;
        max-height: 21px;
        filter: brightness(0) invert(1);
    }

    .energy-listen-page .elm-app__stores a > span {
        min-width: 0;
    }

    .energy-listen-page .elm-app__stores small {
        font-size: 9px;
        white-space: normal;
    }

    .energy-listen-page .elm-app__stores strong {
        font-size: clamp(12px, 3.5vw, 16px);
        white-space: normal;
        line-height: 1.1;
    }

    /* Alexa commands remain readable */
    .energy-listen-page .elm-alexa__commands {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        width: 100%;
        min-width: 0;
    }

    .energy-listen-page .elm-alexa__command {
        padding: 14px;
        min-width: 0;
    }

    .energy-listen-page .elm-alexa__command strong {
        font-size: 14px;
        overflow-wrap: break-word;
    }

    /* Radioplayer / TuneIn compact strip */
    .energy-listen-page .elm-platforms {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 19px;
        width: 100%;
        min-width: 0;
    }

    .energy-listen-page .elm-platforms__names {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        min-width: 0;
    }

    .energy-listen-page .elm-platforms__names > span {
        padding: 0;
        font-size: 12px;
    }

    /* Troubleshooting */
    .energy-listen-page .energy-listen-help {
        padding: 18px;
        min-width: 0;
    }

    .energy-listen-page .energy-listen-faq summary {
        display: block;
        position: relative;
        min-height: 48px;
        padding: 15px 35px 15px 0;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 1.5;
        overflow-wrap: break-word;
    }

    .energy-listen-page .energy-listen-faq details > p {
        padding-right: 10px;
        font-size: 14px;
        line-height: 1.65;
    }

    .energy-listen-page .energy-listen-help__footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .energy-listen-page .energy-listen-help__footer
    .energy-listen-btn--contact {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
    }

    /* Optional CMS sections */
    .energy-listen-page .energy-listen-cms-sections {
        min-width: 0;
        max-width: 100%;
    }
}

/* SMALL PHONES */

@media (max-width: 400px) {

    .energy-listen-page .energy-listen-dab,
    .energy-listen-page .energy-listen-help {
        padding: 16px;
    }

    .energy-listen-page .elm-live__content {
        padding: 22px 17px 37px;
    }

    .energy-listen-page .elm-live h3 {
        font-size: 32px;
    }

    .energy-listen-page .elm-app,
    .energy-listen-page .elm-alexa {
        padding: 20px 17px;
    }

    /* Store badges stack if the phone is very narrow */
    .energy-listen-page .elm-app__stores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .energy-listen-page .elm-app__stores a {
        width: 100%;
        min-height: 49px;
    }

    .energy-listen-page .elm-app__stores strong {
        font-size: clamp(11px, 3.5vw, 14px);
    }

    .energy-listen-page .elm-platforms {
        padding: 16px;
    }
}