/* ==========================================================================
   TechNode HQ — Responsive Breakpoints
   Mobile-first adjustments for every component and layout across all
   breakpoints: Mobile (≤639px), Tablet (640–1023px), Desktop (1024–1399px),
   Wide (1400px+). Includes print styles.
   ========================================================================== */


/* ==========================================================================
   1. MOBILE — max-width: 639px
   Stack everything, reduce sizes, hamburger menu
   ========================================================================== */

@media (max-width: 639px) {

    /* ---------- Layout ---------- */
    .tnhq-container {
        padding-left: var(--tnhq-space-4);
        padding-right: var(--tnhq-space-4);
    }

    .tnhq-section {
        padding-top: var(--tnhq-space-10);
        padding-bottom: var(--tnhq-space-10);
    }

    .tnhq-section--sm {
        padding-top: var(--tnhq-space-6);
        padding-bottom: var(--tnhq-space-6);
    }

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

    /* ---------- Topbar ---------- */
    .tnhq-topbar {
        display: none; /* Hide topbar on mobile */
    }

    /* ---------- Header ---------- */
    .tnhq-header__inner {
        padding: 0 var(--tnhq-space-4);
    }

    /* Hide desktop nav, show mobile toggle */
    .tnhq-nav {
        display: none;
    }

    .tnhq-mobile-toggle {
        display: flex;
    }

    /* Hide subscribe button on mobile — available in mobile menu footer */
    .tnhq-header__subscribe {
        display: none;
    }

    /* Hide keyboard shortcut hint on mobile/tablet */
    .tnhq-header__kbd {
        display: none;
    }

    /* ---------- Hero ---------- */
    .tnhq-hero__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .tnhq-hero__primary,
    .tnhq-hero__secondary {
        grid-column: auto;
        grid-row: auto;
    }

    .tnhq-hero__primary .tnhq-card__image {
        aspect-ratio: 21 / 9;
    }

    .tnhq-hero__primary .tnhq-card__body {
        padding: var(--tnhq-space-3);
    }

    .tnhq-hero__primary .tnhq-card__title {
        font-size: var(--tnhq-text-xl);
    }

    /* ---------- Content Grids ---------- */
    .tnhq-grid,
    .tnhq-grid--2col,
    .tnhq-grid--3col,
    .tnhq-grid--4col {
        grid-template-columns: 1fr;
    }

    /* ---------- Content + Sidebar ---------- */
    .tnhq-content-sidebar {
        grid-template-columns: 1fr;
        gap: var(--tnhq-space-8);
    }

    .tnhq-content-sidebar__sidebar {
        position: static;
        max-height: none;
        order: 2; /* Sidebar after content */
    }

    /* ---------- Cards ---------- */
    .tnhq-card--horizontal {
        flex-direction: column;
    }

    .tnhq-card--horizontal .tnhq-card__image {
        width: 100%;
        min-width: unset;
        aspect-ratio: 16 / 9;
    }

    .tnhq-card--featured .tnhq-card__title {
        font-size: var(--tnhq-text-xl);
    }

    .tnhq-card__body {
        padding: var(--tnhq-space-4);
    }

    .tnhq-card__footer {
        padding: var(--tnhq-space-3) var(--tnhq-space-4);
    }

    /* ---------- Category Bar ---------- */
    .tnhq-category-bar__inner {
        justify-content: flex-start;
        padding: 0 var(--tnhq-space-4);
    }

    .tnhq-category-bar__tab {
        padding: var(--tnhq-space-3) var(--tnhq-space-4);
    }

    /* ---------- Newsletter ---------- */
    .tnhq-newsletter {
        padding: var(--tnhq-space-10) var(--tnhq-space-4);
    }

    .tnhq-newsletter__heading {
        font-size: var(--tnhq-text-2xl);
    }

    .tnhq-newsletter__form {
        flex-direction: column;
    }

    .tnhq-newsletter__input {
        width: 100%;
    }

    /* ---------- Sponsor Block ---------- */
    .tnhq-sponsor {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--tnhq-space-3);
    }

    .tnhq-sponsor__logo {
        width: 60px;
    }

    /* ---------- Author Bio ---------- */
    .tnhq-author {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .tnhq-author__social {
        justify-content: center;
    }

    /* ---------- Search Overlay ---------- */
    .tnhq-search-overlay {
        padding: var(--tnhq-space-16) var(--tnhq-space-4) var(--tnhq-space-4);
    }

    .tnhq-search-overlay__input {
        font-size: var(--tnhq-text-lg);
        padding: var(--tnhq-space-4) var(--tnhq-space-5);
    }

    /* ---------- Toast ---------- */
    .tnhq-toast-container {
        left: var(--tnhq-space-4);
        right: var(--tnhq-space-4);
        bottom: var(--tnhq-space-4);
    }

    .tnhq-toast {
        min-width: unset;
        max-width: 100%;
    }

    /* ---------- Article Header ---------- */
    .tnhq-article-header {
        padding: var(--tnhq-space-6) var(--tnhq-space-4) var(--tnhq-space-6);
    }

    .tnhq-article-header__title {
        font-size: var(--tnhq-text-3xl);
    }

    .tnhq-article-header__subtitle {
        font-size: var(--tnhq-text-base);
    }

    .tnhq-article-header__image {
        border-radius: var(--tnhq-radius-md);
        margin-top: var(--tnhq-space-6);
    }

    /* ---------- Article Body ---------- */
    .tnhq-article-body {
        font-size: var(--tnhq-text-base);
        line-height: var(--tnhq-leading-normal);
        padding: var(--tnhq-space-6) var(--tnhq-space-4);
    }

    .tnhq-article-body h2 {
        font-size: var(--tnhq-text-2xl);
        margin-top: var(--tnhq-space-8);
    }

    .tnhq-article-body h3 {
        font-size: var(--tnhq-text-xl);
        margin-top: var(--tnhq-space-6);
    }

    .tnhq-article-body h4 {
        font-size: var(--tnhq-text-lg);
    }

    .tnhq-article-body .tnhq-pullquote {
        font-size: var(--tnhq-text-xl);
        padding: var(--tnhq-space-6) var(--tnhq-space-4);
        margin: var(--tnhq-space-8) 0;
    }

    .tnhq-article-body pre {
        padding: var(--tnhq-space-4);
        font-size: var(--tnhq-text-xs);
        border-radius: var(--tnhq-radius-sm);
    }

    .tnhq-article-body .tnhq-ad-zone {
        margin-left: calc(-1 * var(--tnhq-space-4));
        margin-right: calc(-1 * var(--tnhq-space-4));
    }

    /* ---------- TOC ---------- */
    /* Hide sticky sidebar TOC */
    .tnhq-toc {
        position: static;
        max-height: none;
        border-radius: var(--tnhq-radius-md);
        margin: var(--tnhq-space-4);
    }

    .tnhq-toc__toggle {
        display: flex;
        align-items: center;
    }

    /* Collapsible — hidden by default on mobile */
    .tnhq-toc__list {
        display: none;
        padding-top: var(--tnhq-space-3);
    }

    .tnhq-toc__toggle.is-open + .tnhq-toc__list {
        display: flex;
    }

    .tnhq-toc__title {
        display: none; /* Replaced by toggle button */
    }

    /* ---------- Share Bar ---------- */
    /* Hide floating vertical share bar, show horizontal */
    .tnhq-share:not(.tnhq-share--horizontal) {
        display: none;
    }

    .tnhq-share--horizontal {
        display: flex;
    }

    /* ---------- Article Footer ---------- */
    .tnhq-article-tags {
        padding: var(--tnhq-space-4) 0;
    }

    .tnhq-related__grid {
        grid-template-columns: 1fr;
        padding: 0 var(--tnhq-space-4);
    }

    .tnhq-related__title {
        padding: 0 var(--tnhq-space-4);
        font-size: var(--tnhq-text-xl);
    }

    .tnhq-post-nav {
        grid-template-columns: 1fr;
        padding: var(--tnhq-space-6) var(--tnhq-space-4);
    }

    .tnhq-post-nav__item--next {
        text-align: left;
    }

    /* ---------- Footer ---------- */
    .tnhq-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--tnhq-space-8);
        padding: 0 var(--tnhq-space-4);
    }

    .tnhq-footer__bottom {
        flex-direction: column;
        text-align: center;
        padding: var(--tnhq-space-6) var(--tnhq-space-4);
    }

    .tnhq-footer__bottom-links {
        justify-content: center;
    }

    /* ---------- Archive Header ---------- */
    .tnhq-archive-header {
        padding: var(--tnhq-space-8) 0 var(--tnhq-space-6);
    }

    .tnhq-archive-header__title {
        font-size: var(--tnhq-text-3xl);
    }

    /* ---------- Pagination ---------- */
    .tnhq-pagination {
        padding: var(--tnhq-space-6) 0;
    }

    .tnhq-pagination a,
    .tnhq-pagination span {
        min-width: 36px;
        height: 36px;
        font-size: var(--tnhq-text-xs);
    }

    /* ---------- Section Headers ---------- */
    .tnhq-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--tnhq-space-2);
    }

    .tnhq-section-header__title {
        font-size: var(--tnhq-text-xl);
    }

    /* ---------- Skeleton Loaders ---------- */
    .tnhq-skeleton--card .tnhq-skeleton__body {
        padding: var(--tnhq-space-4);
    }

    /* ---------- Ad Zone ---------- */
    .tnhq-ad-zone {
        margin: var(--tnhq-space-6) 0;
    }

    .tnhq-ad-zone--inline {
        margin: var(--tnhq-space-8) 0;
    }

    /* ---------- Sidebar Widgets ---------- */
    .tnhq-sidebar-widget {
        padding: var(--tnhq-space-4);
    }

    /* ---------- Buttons ---------- */
    .tnhq-btn--lg {
        padding: var(--tnhq-space-3) var(--tnhq-space-6);
        font-size: var(--tnhq-text-sm);
    }

    /* ---------- Mobile Menu ---------- */
    .tnhq-mobile-menu {
        width: 100%;
        max-width: 100vw;
    }
}


/* ==========================================================================
   2. TABLET — 640px to 1023px
   Two-column grids, sidebar below content, reduced headings
   ========================================================================== */

@media (min-width: 640px) and (max-width: 1023px) {

    /* ---------- Topbar ---------- */
    .tnhq-topbar__inner {
        padding: 0 var(--tnhq-space-4);
    }

    /* ---------- Header ---------- */
    /* Hide desktop nav, show mobile toggle */
    .tnhq-nav {
        display: none;
    }

    .tnhq-mobile-toggle {
        display: flex;
    }

    /* Hide subscribe button and kbd hint on tablet */
    .tnhq-header__subscribe,
    .tnhq-header__kbd {
        display: none;
    }

    /* ---------- Hero ---------- */
    .tnhq-hero__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .tnhq-hero__primary {
        grid-column: 1 / 3;
        grid-row: auto;
    }

    .tnhq-hero__primary .tnhq-card__title {
        font-size: var(--tnhq-text-2xl);
    }

    /* ---------- Content Grids ---------- */
    .tnhq-grid,
    .tnhq-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }

    .tnhq-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---------- Content + Sidebar ---------- */
    .tnhq-content-sidebar {
        grid-template-columns: 1fr;
        gap: var(--tnhq-space-8);
    }

    .tnhq-content-sidebar__sidebar {
        position: static;
        max-height: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--tnhq-space-6);
    }

    /* ---------- Cards ---------- */
    .tnhq-card--featured .tnhq-card__title {
        font-size: var(--tnhq-text-2xl);
    }

    /* ---------- Category Bar ---------- */
    .tnhq-category-bar__inner {
        justify-content: flex-start;
    }

    /* ---------- Newsletter ---------- */
    .tnhq-newsletter__heading {
        font-size: var(--tnhq-text-2xl);
    }

    /* ---------- Article Header ---------- */
    .tnhq-article-header__title {
        font-size: clamp(var(--tnhq-text-2xl), 4vw, var(--tnhq-text-4xl));
    }

    /* ---------- Article Body ---------- */
    .tnhq-article-body {
        font-size: var(--tnhq-text-lg);
    }

    .tnhq-article-body h2 {
        font-size: var(--tnhq-text-2xl);
    }

    .tnhq-article-body h3 {
        font-size: var(--tnhq-text-xl);
    }

    /* ---------- TOC — show as sidebar won't be sticky ---------- */
    .tnhq-toc {
        position: static;
        max-height: none;
    }

    .tnhq-toc__toggle {
        display: flex;
        align-items: center;
    }

    .tnhq-toc__list {
        display: none;
    }

    .tnhq-toc__toggle.is-open + .tnhq-toc__list {
        display: flex;
    }

    .tnhq-toc__title {
        display: none;
    }

    /* ---------- Share Bar ---------- */
    .tnhq-share:not(.tnhq-share--horizontal) {
        display: none;
    }

    .tnhq-share--horizontal {
        display: flex;
    }

    /* ---------- Related Articles ---------- */
    .tnhq-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---------- Post Navigation ---------- */
    /* Keep 2 columns on tablet */

    /* ---------- Footer ---------- */
    .tnhq-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--tnhq-space-8);
    }

    /* ---------- Archive Header ---------- */
    .tnhq-archive-header__title {
        font-size: var(--tnhq-text-3xl);
    }

    /* ---------- Section Headers ---------- */
    .tnhq-section-header__title {
        font-size: var(--tnhq-text-xl);
    }
}


/* ==========================================================================
   3. DESKTOP — 1024px to 1399px
   Full layout: 3 columns, sidebar visible, full nav
   ========================================================================== */

@media (min-width: 1024px) {

    /* Desktop nav is visible by default (display: flex from layouts.css) */
    /* Mobile toggle is hidden by default */

    /* ---------- Navigation — optimize for many items ---------- */
    .tnhq-nav__list > .menu-item > a {
        padding: var(--tnhq-space-2) var(--tnhq-space-3);
        font-size: 0.8125rem;
    }

    /* ---------- Hero ---------- */
    .tnhq-hero__grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
    }

    /* ---------- Content Grids ---------- */
    .tnhq-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ---------- Content + Sidebar — visible and sticky ---------- */
    .tnhq-content-sidebar {
        grid-template-columns: 1fr var(--tnhq-sidebar-width);
    }

    /* ---------- TOC — sticky sidebar ---------- */
    .tnhq-toc {
        position: sticky;
    }

    .tnhq-toc__toggle {
        display: none;
    }

    .tnhq-toc__title {
        display: block;
    }

    .tnhq-toc__list {
        display: flex;
    }

    /* ---------- Share Bar — floating vertical ---------- */
    .tnhq-share:not(.tnhq-share--horizontal) {
        display: flex;
    }

    .tnhq-share--horizontal {
        display: none;
    }

    /* ---------- Related Articles ---------- */
    .tnhq-related__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tighter nav on smaller desktops */
@media (min-width: 1024px) and (max-width: 1279px) {
    .tnhq-nav__list > .menu-item > a {
        padding: var(--tnhq-space-1) var(--tnhq-space-2);
        font-size: 0.75rem;
    }

    /* Hide subscribe CTA to save header space */
    .tnhq-header__subscribe {
        display: none;
    }
}


/* ==========================================================================
   4. WIDE DESKTOP — 1400px+
   More generous spacing and slightly larger containers
   ========================================================================== */

@media (min-width: 1400px) {

    /* ---------- Container ---------- */
    .tnhq-container {
        padding-left: var(--tnhq-space-8);
        padding-right: var(--tnhq-space-8);
    }

    /* ---------- Section spacing ---------- */
    .tnhq-section {
        padding-top: var(--tnhq-space-20);
        padding-bottom: var(--tnhq-space-20);
    }

    /* ---------- Hero ---------- */
    .tnhq-hero {
        padding: var(--tnhq-space-10) 0;
    }

    .tnhq-hero__primary .tnhq-card__title {
        font-size: var(--tnhq-text-4xl);
    }

    /* ---------- Content + Sidebar ---------- */
    .tnhq-content-sidebar {
        gap: var(--tnhq-space-12);
    }

    /* ---------- Footer ---------- */
    .tnhq-footer__grid {
        gap: var(--tnhq-space-12);
        padding: 0 var(--tnhq-space-8);
    }

    .tnhq-footer__bottom {
        padding: var(--tnhq-space-6) var(--tnhq-space-8);
    }

    /* ---------- Article Header ---------- */
    .tnhq-article-header {
        padding-top: var(--tnhq-space-12);
    }

    /* ---------- Article Body ---------- */
    .tnhq-article-body {
        font-size: 1.15rem; /* Slightly larger for wide screens */
    }

    /* ---------- Archive Header ---------- */
    .tnhq-archive-header {
        padding: var(--tnhq-space-16) 0 var(--tnhq-space-10);
    }

    /* ---------- Grid gaps ---------- */
    .tnhq-grid {
        gap: var(--tnhq-space-8);
    }

    .tnhq-hero__grid {
        gap: var(--tnhq-space-8);
    }

    .tnhq-related__grid {
        gap: var(--tnhq-space-8);
    }

    /* ---------- Newsletter ---------- */
    .tnhq-newsletter {
        padding: var(--tnhq-space-20) var(--tnhq-space-8);
    }

    /* ---------- Cards ---------- */
    .tnhq-card__body {
        padding: var(--tnhq-space-6);
    }

    .tnhq-card__title {
        font-size: var(--tnhq-text-xl);
    }
}


/* ==========================================================================
   5. HOVER / POINTER MEDIA QUERY
   Only apply hover effects on devices with a fine pointer (not touch).
   ========================================================================== */

@media (hover: none) {
    .tnhq-card:hover {
        transform: none;
        box-shadow: none;
    }

    .tnhq-card:hover .tnhq-card__image img {
        transform: none;
    }

    .tnhq-btn:active {
        transform: none;
    }
}


/* ==========================================================================
   6. REDUCED MOTION
   Disable non-essential animations for accessibility.
   Already handled in design-system.css, but reinforce here for components.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .tnhq-card,
    .tnhq-btn,
    .tnhq-tag,
    .tnhq-search-overlay,
    .tnhq-mobile-menu,
    .tnhq-nav__dropdown {
        transition-duration: 0.01ms !important;
    }

    .tnhq-toast {
        animation: none !important;
    }

    .tnhq-skeleton,
    .tnhq-skeleton--card .tnhq-skeleton__image,
    .tnhq-skeleton--card .tnhq-skeleton__line {
        animation: none !important;
        background: var(--tnhq-bg-surface-hover);
    }

    .tnhq-progress-bar__fill {
        transition: none !important;
    }
}


/* ==========================================================================
   7. PRINT STYLES
   Clean, ink-friendly output for printing articles.
   ========================================================================== */

@media print {

    /* ---------- Hide non-essential elements ---------- */
    .tnhq-topbar,
    .tnhq-header,
    .tnhq-footer,
    .tnhq-content-sidebar__sidebar,
    .tnhq-ad-zone,
    .tnhq-share,
    .tnhq-share--horizontal,
    .tnhq-toc,
    .tnhq-newsletter,
    .tnhq-sponsor,
    .tnhq-toast-container,
    .tnhq-progress-bar,
    .tnhq-search-overlay,
    .tnhq-mobile-menu,
    .tnhq-mobile-menu-overlay,
    .tnhq-category-bar,
    .tnhq-post-nav,
    .tnhq-related,
    .tnhq-pagination,
    .tnhq-header__hamburger,
    .tnhq-skeleton {
        display: none !important;
    }

    /* ---------- Reset backgrounds & colors ---------- */
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
        line-height: 1.5;
    }

    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        border-color: #ccc !important;
    }

    /* ---------- Typography ---------- */
    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
        page-break-after: avoid;
        orphans: 3;
        widows: 3;
    }

    p {
        color: #333 !important;
        orphans: 3;
        widows: 3;
    }

    /* ---------- Links — show URLs ---------- */
    .tnhq-article-body a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        font-weight: normal;
        color: #666 !important;
    }

    /* Don't show URL for internal anchor links */
    .tnhq-article-body a[href^="#"]::after {
        content: "";
    }

    /* ---------- Images ---------- */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    .tnhq-article-header__image {
        border-radius: 0 !important;
    }

    /* ---------- Article layout ---------- */
    .tnhq-article-header {
        padding: 1rem 0;
    }

    .tnhq-article-body {
        max-width: 100%;
        padding: 1rem 0;
        font-size: 12pt;
    }

    .tnhq-article-body pre {
        border: 1px solid #ccc !important;
        padding: 0.5em;
        white-space: pre-wrap;
        word-break: break-word;
        page-break-inside: avoid;
    }

    .tnhq-article-body blockquote {
        border-left: 3px solid #999 !important;
        padding-left: 1em;
        margin-left: 0;
        font-style: italic;
    }

    .tnhq-article-body table {
        border: 1px solid #ccc;
    }

    .tnhq-article-body th,
    .tnhq-article-body td {
        border: 1px solid #ccc !important;
        padding: 0.5em;
    }

    /* ---------- Cards (for archive print) ---------- */
    .tnhq-card {
        border: 1px solid #ccc !important;
        backdrop-filter: none !important;
        page-break-inside: avoid;
    }

    /* ---------- Page breaks ---------- */
    .tnhq-article-tags {
        page-break-before: avoid;
    }

    .tnhq-article-author {
        page-break-inside: avoid;
    }

    /* ---------- Badge colors reset ---------- */
    .tnhq-badge {
        border: 1px solid #999 !important;
    }

    .tnhq-tag {
        border: 1px solid #999 !important;
    }

    /* ---------- Content + Sidebar → full-width ---------- */
    .tnhq-content-sidebar {
        display: block;
    }

    .tnhq-grid {
        display: block;
    }

    .tnhq-grid .tnhq-card {
        margin-bottom: 1rem;
    }
}