/**
 * Hello Middleton - Tablet & Desktop Responsive Styles
 * Progressive enhancement for larger screens.
 *
 * Breakpoints:
 * - md: 768px+ (tablets)
 * - lg: 1024px+ (laptops)
 * - xl: 1280px+ (desktops)
 *
 * @requires critical/tokens.css
 */

/* =========================================================================
   TABLET (768px+)
   Two-column layouts, show navigation
   ========================================================================= */

@media (min-width: 768px) {
    /* --- Body Reset --- */
    body {
        /* Remove mobile nav padding */
        padding-bottom: 0;
    }

    /* --- Typography --- */
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
    h4 { font-size: var(--text-xl); }

    /* --- Layout --- */
    .site-content,
    .content-area,
    main {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    /* Two column layout */
    .hm-master-layout {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }

    /* Show sidebars */
    .sidebar,
    .widget-area {
        display: block;
    }

    /* --- Header --- */
    .site-header .container {
        padding: 0 var(--space-6);
        min-height: var(--header-height);
    }

    .site-title {
        font-size: var(--text-xl);
    }

    .custom-logo,
    .site-logo img {
        max-height: 48px;
    }

    /* Show desktop navigation */
    .main-navigation,
    .primary-menu,
    #site-navigation {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    /* --- Hide Mobile Elements --- */
    .mobile-bottom-nav {
        display: none;
    }

    .mobile-menu-backdrop,
    .mobile-menu-sheet {
        display: none;
    }

    /* --- Cards --- */
    .hm-card {
        border-radius: var(--radius-lg);
    }

    .hm-card__content {
        padding: var(--space-4);
    }

    .hm-card__title {
        font-size: var(--text-lg);
    }

    /* Card grid - 2 columns */
    .hm-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }

    /* --- News Hub --- */
    .hm-category-tabs,
    .news-tabs {
        padding: var(--space-3) var(--space-5);
    }

    .hm-tab,
    .news-tab {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }

    /* --- Quick Actions --- */
    .hm-quick-actions {
        padding: var(--space-3) var(--space-5);
    }

    .hm-quick-action {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }

    /* --- Weather Widget --- */
    .weather-bar {
        padding: var(--space-4) var(--space-5);
    }

    .weather-bar-inner {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--space-5);
    }

    .weather-temp {
        font-size: var(--text-3xl);
    }

    .weather-details {
        border-left: 1px solid var(--hm-border);
        border-right: 1px solid var(--hm-border);
        padding: 0 var(--space-4);
    }

    /* --- Section Headers --- */
    .hm-section-header {
        margin-bottom: var(--space-6);
    }

    .hm-section-title {
        font-size: var(--text-2xl);
    }

    /* --- Forms --- */
    .hm-form {
        max-width: 600px;
    }

    /* Inline form groups */
    .hm-form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    /* --- Back to Top --- */
    .hm-back-to-top,
    .back-to-top {
        bottom: var(--space-6);
        right: var(--space-6);
    }

    /* --- Footer --- */
    .site-footer {
        padding-bottom: var(--space-6);
    }
}

/* =========================================================================
   LAPTOP (1024px+)
   Three-column layouts, fuller experience
   ========================================================================= */

@media (min-width: 1024px) {
    /* --- Layout --- */
    .site-content,
    .content-area,
    main {
        max-width: var(--content-width);
        margin-left: auto;
        margin-right: auto;
    }

    /* Three column layout */
    .hm-master-layout {
        grid-template-columns: 280px 1fr 280px;
        gap: var(--space-6);
    }

    /* Alternative: main content with single sidebar */
    .hm-layout-sidebar-right {
        grid-template-columns: 1fr 320px;
    }

    .hm-layout-sidebar-left {
        grid-template-columns: 320px 1fr;
    }

    /* --- Cards --- */
    .hm-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Featured card spans 2 columns */
    .hm-card--featured {
        grid-column: span 2;
    }

    /* --- News Hub --- */
    .hm-news-hub {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: var(--space-6);
    }

    /* --- Navigation --- */
    .main-navigation a,
    .primary-menu a {
        padding: var(--space-2) var(--space-4);
    }

    /* --- Hover Effects --- */
    .hm-card:hover {
        transform: translateY(-4px);
    }

    .hm-btn:hover {
        transform: translateY(-1px);
    }
}

/* =========================================================================
   DESKTOP (1280px+)
   Full experience, wider layouts
   ========================================================================= */

@media (min-width: 1280px) {
    /* --- Layout --- */
    .site-content,
    .content-area,
    main {
        max-width: var(--content-width-wide);
    }

    /* Wider three-column layout */
    .hm-master-layout {
        grid-template-columns: 320px 1fr 320px;
        gap: var(--space-8);
    }

    /* --- Typography --- */
    h1 { font-size: var(--text-5xl); }

    /* --- Cards --- */
    .hm-card-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* --- Padding --- */
    .hm-section {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }

    /* --- Weather Widget --- */
    .weather-bar-inner {
        gap: var(--space-8);
    }
}

/* =========================================================================
   EXTRA LARGE (1440px+)
   Maximum width constraints
   ========================================================================= */

@media (min-width: 1440px) {
    /* Constrain max width */
    .site-content,
    .content-area {
        max-width: 1600px;
    }

    /* More breathing room */
    .hm-master-layout {
        grid-template-columns: 360px 1fr 360px;
    }
}

/* =========================================================================
   PRINT STYLES
   ========================================================================= */

@media print {
    /* Reset colors */
    body {
        background: white;
        color: black;
    }

    /* Hide interactive elements */
    .mobile-bottom-nav,
    .site-header,
    .site-footer,
    .hm-quick-actions,
    .hm-back-to-top,
    .sidebar,
    nav,
    button,
    .hm-btn {
        display: none !important;
    }

    /* Reset layout */
    .hm-master-layout {
        grid-template-columns: 1fr;
    }

    /* Remove shadows and borders */
    .hm-card,
    .rss_item {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    /* Ensure links show URLs */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Hide decorative elements */
    .hm-card::before {
        display: none;
    }
}

/* =========================================================================
   HIGH DPI / RETINA DISPLAYS
   ========================================================================= */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders */
    .hm-card,
    .hm-btn,
    input,
    textarea {
        border-width: 0.5px;
    }
}

/* =========================================================================
   HOVER MEDIA QUERY
   Only apply hover effects on devices that support hover
   ========================================================================= */

@media (hover: hover) and (pointer: fine) {
    /* Card hover effects */
    .hm-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .hm-card:hover::before {
        opacity: 1;
    }

    .hm-card:hover .hm-card__image img {
        transform: scale(1.05);
    }

    /* Button hover effects */
    .hm-btn:hover {
        transform: translateY(-1px);
    }

    /* Link hover effects */
    a:hover {
        color: var(--hm-primary-hover);
    }
}

/* Disable hover effects on touch devices */
@media (hover: none) {
    .hm-card:hover {
        transform: none;
    }

    .hm-card:hover::before {
        opacity: 0;
    }

    .hm-btn:hover {
        transform: none;
    }
}