/*
============================================================
/css/mobile.css
Gaylord: Newsroom Rewired
Prototype content package
Copyright © 2026 Benjamin Pendleton / Newsroom Rewired
All Rights Reserved.
============================================================
*/

@media (max-width: 1060px) {
    .hero-grid,
    .page-layout,
    .submit-layout,
    .article-hero__grid {
        grid-template-columns: 1fr;
    }

    .daily-brief-panel,
    .site-sidebar,
    .submit-guide {
        position: static;
    }

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

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

    .hero-story {
        min-height: 390px;
    }

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

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

@media (max-width: 820px) {
    .container {
        width: min(100% - 28px, 1180px);
    }

    .utility-strip__inner {
        justify-content: center;
        text-align: center;
    }

    .utility-strip__inner span:first-child,
    .utility-strip__inner a {
        display: none;
    }

    .masthead {
        min-height: 76px;
    }

    .brand-mark {
        width: 52px;
        height: 52px;
        border-radius: 17px;
        font-size: 0.94rem;
    }

    .brand-copy strong {
        font-size: clamp(1.42rem, 7vw, 2.15rem);
    }

    .brand-copy em {
        display: none;
    }

    .masthead-actions .pill-button {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

    .primary-nav {
        display: none;
        background: rgba(255,255,255,0.98);
    }

    .primary-nav.is-open {
        display: block;
    }

    .primary-nav__inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .primary-nav a {
        min-height: 44px;
        border: 1px solid var(--nrw-line);
        border-radius: 14px;
        justify-content: center;
        background: #fff;
    }

    .primary-nav a.is-active {
        border-color: var(--nrw-gold);
        background: #fff8df;
    }

    .hero-stage {
        padding-top: 20px;
    }

    .hero-card {
        min-height: auto;
        border-radius: 26px;
    }

    .hero-card__content {
        padding: 28px;
    }

    .hero-card h1,
    .section-hero h1,
    .article-hero h1 {
        font-size: clamp(3rem, 16vw, 4.5rem);
    }

    .hero-actions {
        display: grid;
    }

    .editorial-strip,
    .split-feature,
    .section-block--dark,
    .category-lead,
    .weather-dashboard,
    .info-grid,
    .principle-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .editorial-strip {
        padding: 22px;
    }

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

    .section-heading {
        align-items: start;
        flex-direction: column;
    }

    .site-sidebar {
        grid-template-columns: 1fr;
    }

    .events-ribbon {
        width: min(100% - 28px, 1180px);
        padding: 22px;
    }

    .footer-bottom {
        flex-direction: column;
    }

    .article-hero__image img {
        height: 260px;
    }

    .category-lead__image img {
        height: 260px;
    }
}

@media (max-width: 580px) {
    .brand {
        gap: 10px;
    }

    .brand-location {
        font-size: 0.66rem;
    }

    .brand-copy strong {
        font-size: 1.42rem;
    }

    .hero-story {
        min-height: 340px;
    }

    .daily-brief-panel,
    .side-card,
    .article-card__body,
    .feature-panel,
    .section-block--dark,
    .story-body,
    .submit-form,
    .submit-guide,
    .weather-now,
    .weather-map-card,
    .mission-statement,
    .principle-grid article,
    .info-grid article,
    .category-lead {
        padding: 18px;
    }

    .article-card__image {
        min-height: 190px;
    }

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

    .event-row {
        grid-template-columns: 1fr;
    }

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

    .mini-story,
    .mini-stack--sidebar .mini-story {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .mini-story img,
    .mini-stack--sidebar .mini-story img {
        width: 86px;
        height: 72px;
    }

    .temp-display {
        font-size: 4.5rem !important;
    }

    .weather-map-card {
        min-height: 320px;
    }

    .map-orbit--one { top: 40%; left: 36%; }
    .map-orbit--two { top: 17%; left: 10%; }
    .map-orbit--three { top: 27%; right: 6%; }
    .map-orbit--four { bottom: 36%; left: 10%; }
}

/*
============================================================
Live Weather Module - Mobile
============================================================
*/

@media (max-width: 760px) {
    .current-weather-lockup {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .weather-detail-grid,
    .forecast-grid,
    .forecast-pair {
        grid-template-columns: 1fr;
    }

    .forecast-period + .forecast-period {
        border-left: 0;
    }

    .weather-source-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 580px) {
    .weather-condition-icon {
        width: 64px;
        height: 64px;
        border-radius: 22px;
        font-size: 2.2rem;
    }

    .weather-alert-count {
        top: 14px;
        left: 14px;
        max-width: calc(100% - 28px);
    }

    .weather-alert-card,
    .weather-clear-card,
    .forecast-card {
        padding: 18px;
    }

    .forecast-card--daily {
        padding: 0;
    }

    .forecast-day-header,
    .forecast-period {
        padding: 18px;
    }

    .forecast-temp {
        font-size: 1.9rem;
    }
}

/*
============================================================
Weather Quickview Dock - Mobile
============================================================
*/

@media (max-width: 900px) {
    .weather-dock {
        overflow-x: auto;
        align-items: flex-start;
        height: 94px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .weather-dock-card {
        min-width: 142px;
        height: 72px;
        flex: 0 0 142px;
        scroll-snap-align: center;
    }

    .weather-dock-card:hover {
        min-width: min(88vw, 450px);
        height: auto;
        flex: 0 0 min(88vw, 450px);
    }
}

@media (max-width: 580px) {
    .weather-quickview {
        padding: 8px 0 0;
    }

    .weather-quickview__inner {
        gap: 12px;
    }

    .weather-quickview h1 {
        font-size: clamp(2.4rem, 13vw, 3.6rem);
    }

    .weather-quickview p {
        font-size: 0.98rem;
    }

    .weather-dock {
        gap: 8px;
        height: 94px;
        min-height: 0;
        padding: 10px 9px;
        border-radius: 22px;
    }

    .weather-dock-card {
        min-width: 136px;
        height: 72px;
        flex-basis: 136px;
        border-radius: 22px;
    }

    .weather-dock-card:hover {
        min-width: min(92vw, 395px);
        height: auto;
        flex-basis: min(92vw, 395px);
        transform: translateY(0) scale(1.018);
    }

    .weather-dock-card__default {
        grid-template-columns: 32px minmax(38px, 1fr) auto;
        column-gap: 6px;
        padding: 8px 9px;
    }

    .weather-dock-card:hover .weather-dock-card__default {
        width: 100%;
    }

    .weather-dock-card__icon {
        width: 32px;
        height: 32px;
        border-radius: 13px;
        font-size: 0.98rem;
    }

    .weather-dock-card__day {
        font-size: 0.68rem;
    }

    .weather-dock-card__date {
        font-size: 0.58rem;
    }

    .weather-dock-card__temp {
        font-size: 1.58rem;
    }

    .weather-dock-card:hover .weather-dock-card__detail {
        max-height: 160px;
        padding: 0 12px 14px;
    }

    .weather-dock-card__detail p {
        display: none;
    }

    .weather-dock-card__meta small,
    .weather-dock-card__night {
        font-size: 0.53rem;
        padding: 4px 7px;
    }
}