/*
 * Neural LLM — nllm responsive.css
 *
 * PURPOSE:
 *   Mobile-first breakpoint overrides for all template and component styles.
 *   Base styles (no media query) target 320px+ mobile. Each successive
 *   @media block progressively enhances for larger viewports.
 *
 * ARCHITECTURE:
 *   Load order: tokens.css → template.css → components.css → responsive.css
 *   Breakpoints mirror Cassiopeia / Bootstrap 5:
 *     sm:  576px+  (large mobile / landscape phone)
 *     md:  768px+  (tablet)
 *     lg:  1024px+ (desktop)
 *     xl:  1280px+ (wide desktop)
 *     2xl: 1440px+ (ultra-wide)
 *
 * DEPENDENCIES:
 *   ../../../media/com_neurallicense/brand/tokens.css  (--nllm-space-* tokens)
 *   template.css + components.css (layout classes must be defined first)
 *
 * [claude:sonnet-4.6][hurc:v0.7.0]
 *
 * @copyright  (C) 2026 Neural LLM. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

/* ─────────────────────────────────────────────────────────────────────────────
   BASE / MOBILE (320px+)
   Default styles — single-column, compact spacing, large tap targets.
   ───────────────────────────────────────────────────────────────────────────── */

/* Header: stack brand + nav vertically on very small screens */
.nllm-header {
    flex-wrap: wrap;
    padding-inline: var(--nllm-space-md);
    padding-block: var(--nllm-space-sm);
    gap: var(--nllm-space-sm);
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Mobile nav = collapsible panel behind the hamburger. The old behavior
   forced the menu into a single horizontally-scrolling row (overflow-x:auto +
   flex-wrap:nowrap), which read as "stacked/awkward" and pushed items off the
   right edge. Now the nav is hidden by default and drops below the header as a
   full-width vertical panel only when the toggler adds `.is-open`. */
.nllm-header__actions {
    /* Push cart + hamburger to the right edge of the top row */
    margin-inline-start: auto;
}

.nllm-header__nav {
    display: none;        /* collapsed until the toggler opens it */
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--nllm-space-2xs, 0.25rem);
}

.nllm-header__nav.is-open {
    display: flex;
}

/* Stack menu items vertically inside the open panel — full-width tap targets */
.nllm-header__nav .nav,
.nllm-header__nav ul {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    gap: var(--nllm-space-2xs, 0.25rem);
    padding-block: var(--nllm-space-xs);
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Cassiopeia's bundled `template.min.css` ships `.container-header
   .mod-menu > li + li { margin-left: 1.55em }` inside `@media (min-width:
   992px)` — a legacy inline-menu margin. Its specificity is (0,2,2); a plain
   `.nllm-header__nav li` reset (0,1,1) loses to it, so on desktop every nav
   item kept a stray ~25px left margin that shoved the 7-item inline nav past
   its container and forced a broken multi-line wrap. This override matches
   that (0,2,2) specificity and, loading later than `template.min.css`, wins
   the cascade — so every breakpoint relies on `gap` alone for item spacing. */
.nllm-header .nllm-header__nav ul > li {
    margin: 0;
}

.nllm-header__nav .nav-link,
.nllm-header__nav a {
    width: 100%;
}

/* Toggler is mobile-only — hidden at md+ where the nav renders inline */
.nllm-header__toggler {
    display: inline-flex;
}

/* Hero: compact on mobile */
.nllm-hero {
    padding-block: var(--nllm-space-2xl) var(--nllm-space-xl);
}

.nllm-hero__inner {
    padding-inline: var(--nllm-space-md);
}

.nllm-hero__ctas {
    flex-direction: column;
    align-items: stretch;
}

.nllm-hero__ctas .nllm-btn {
    width: 100%;
    justify-content: center;
}

/* Pricing: single column stack on mobile */
.nllm-pricing-grid {
    grid-template-columns: 1fr;
    padding-inline: var(--nllm-space-md);
    gap: var(--nllm-space-md);
}

/* Featured card: reset scale on mobile (no room to lift) */
.nllm-pricing-card--featured {
    transform: none;
}

.nllm-pricing-card--featured:hover {
    transform: translateY(-4px);
}

/* Features grid: single column on mobile */
.nllm-features-grid,
.nllm-features-grid--4col {
    grid-template-columns: 1fr;
    padding-inline: var(--nllm-space-md);
}

/* Download buttons: full width on mobile */
.nllm-download-group {
    flex-direction: column;
    align-items: stretch;
}

.nllm-download-btn {
    justify-content: center;
}

/* Footer: single column on mobile */
.nllm-footer__columns {
    grid-template-columns: 1fr;
    padding-inline: var(--nllm-space-md);
    gap: var(--nllm-space-xl);
}

.nllm-footer__bar {
    padding-inline: var(--nllm-space-md);
}

/* Testimonials: single column on mobile */
.nllm-testimonials-grid {
    grid-template-columns: 1fr;
    padding-inline: var(--nllm-space-md);
}

/* Comparison table: horizontal scroll on mobile */
.nllm-compare-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--nllm-space-md) * -1);
    padding-inline: var(--nllm-space-md);
}

/* Section padding: tighter on mobile */
.nllm-section {
    padding-block: var(--nllm-space-xl);
}

.nllm-section--xl {
    padding-block: var(--nllm-space-2xl);
}

/* Content center: full width on mobile */
.nllm-content-center {
    text-align: left;
}

/* Display heading: mobile max */
.nllm-display {
    font-size: clamp(1.75rem, 8vw, 3rem);
}

/* Back-to-top: smaller on mobile */
.nllm-back-top {
    bottom: var(--nllm-space-lg);
    right: var(--nllm-space-lg);
    width: 36px;
    height: 36px;
}

/* Wrapper edge gutter. The below-desktop override that follows collapses the
   content to a single full-width column; this base rule governs desktop padding. */
.wrapper-static .container-component,
.wrapper-static .site-grid {
    padding-inline: var(--nllm-space-md);
}

/* [claude:opus-4.8-1m][client:2.1.168][hurc:v0.10.1] Marketing content must fill the phone / tablet viewport.
   Cassiopeia's `.site-grid` (template.min.css) keeps its `minmax(0,1fr)` side
   gutter columns at every width and places `.container-component` in the inner
   `main-start → main-end` columns, so below the desktop grid breakpoint every
   <main> section was squeezed to ~70% of the viewport — the comparison table's
   value columns clipped at 320px. Span the content container across the full
   grid and drop the now-redundant container/grid padding (each section supplies
   its own gutter via `.pc-section__inner`), recovering the full width with a
   ~16px edge gap. Desktop (>=1024px) keeps the template's centered grid
   placement untouched (this block does not match there). */
@media (max-width: 1023.98px) {
    .wrapper-static .site-grid {
        padding-inline: 0;
    }

    .wrapper-static .container-component {
        grid-column: 1 / -1;
        padding-inline: 0;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   sm: 576px+ (large mobile / landscape phone)
   Two-column grids begin. CTAs go inline.
   ───────────────────────────────────────────────────────────────────────────── */

@media (min-width: 576px) {

    /* Hero CTAs: inline row on sm */
    .nllm-hero__ctas {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .nllm-hero__ctas .nllm-btn {
        width: auto;
    }

    /* Download buttons: inline on sm */
    .nllm-download-group {
        flex-direction: row;
        align-items: center;
    }

    .nllm-download-btn {
        justify-content: flex-start;
    }

    /* Pricing: 2 columns at sm */
    .nllm-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Features: 2 columns at sm */
    .nllm-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer: 2-column on sm */
    .nllm-footer__columns {
        grid-template-columns: 1fr 1fr;
    }

    /* Testimonials: 2 columns at sm */
    .nllm-testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   md: 768px+ (tablet)
   Hero padding increases. 3-column grids. Header stays in hamburger mode —
   the inline nav doesn't fit a tablet viewport, so it switches at lg (1024px).
   ───────────────────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {

    /* Hero: more breathing room at md */
    .nllm-hero {
        padding-block: calc(var(--nllm-space-2xl) * 1.5) var(--nllm-space-2xl);
    }

    .nllm-hero__inner {
        padding-inline: var(--nllm-space-xl);
    }

    /* Pricing: 3 columns at md — featured card scales */
    .nllm-pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        padding-inline: var(--nllm-space-xl);
        align-items: start;
    }

    .nllm-pricing-card--featured {
        transform: scale(1.03);
    }

    .nllm-pricing-card--featured:hover {
        transform: scale(1.03) translateY(-4px);
    }

    /* Features: 3 columns at md */
    .nllm-features-grid {
        grid-template-columns: repeat(3, 1fr);
        padding-inline: var(--nllm-space-xl);
    }

    /* Footer: 3 columns at md */
    .nllm-footer__columns {
        grid-template-columns: 2fr 1fr 1fr;
        padding-inline: var(--nllm-space-xl);
    }

    /* Section padding: full at md */
    .nllm-section {
        padding-block: var(--nllm-space-2xl);
    }

    .nllm-section--xl {
        padding-block: calc(var(--nllm-space-2xl) * 2);
    }

    /* Content center: centered text at md */
    .nllm-content-center {
        text-align: center;
    }

    /* Testimonials: 3 columns at md */
    .nllm-testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
        padding-inline: var(--nllm-space-xl);
    }

    /* Wrapper padding */
    .wrapper-static .container-component,
    .wrapper-static .site-grid {
        padding-inline: var(--nllm-space-lg);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   lg: 1024px+ (desktop)
   Full layout. 4-column feature grids. Header nav switches from the hamburger
   panel to a single-line inline menu — only here is the viewport wide enough.
   ───────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {

    /* [claude:opus-4.7-1m][hurc:v0.7.0] Header keeps `flex-wrap: wrap` at desktop too. The topbar strip
       (`.container-topbar`) is a flex child with `order: -1; width: 100%`, so it
       must be free to occupy its own row above the brand/nav/actions. `nowrap`
       here forced the topbar to share the line and shrink to ~half-width, which
       collapsed the header into a tall stacked block. `wrap` only *permits*
       wrapping — brand + flexing nav + actions still fit inline on row 2. */
    .nllm-header {
        flex-wrap: wrap;
        padding-inline: var(--nllm-space-xl);
        padding-block: var(--nllm-space-md);
        gap: var(--nllm-space-lg);
    }

    /* [claude:opus-4.7-1m][hurc:v0.7.0] Desktop: nav is always visible inline (no toggler). The `.is-open`
       state is a mobile-only concept, so force display:flex regardless of it.
       flex `order` puts the menu (1) before the actions row (2) so the cart
       sits at the far right; brand keeps its default order 0 on the left. */
    .nllm-header__nav,
    .nllm-header__nav.is-open {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: auto;
        flex: 1;
        order: 1;
        overflow-x: visible;
        justify-content: flex-end;
        gap: var(--nllm-space-xs);
    }

    .nllm-header__actions {
        order: 2;
        margin-inline-start: 0;
    }

    /* Hamburger hidden on desktop — inline nav replaces it */
    .nllm-header__toggler {
        display: none;
    }

    /* [claude:opus-4.7-1m][hurc:v0.7.0] Inline menu row. `gap` is the *only* inter-item spacing — the
       Joomla `mod-menu` `<li>` margin is reset at the base layer — so the
       7-item nav measures gap-spacing alone and fits one line at 1024px.
       `flex-wrap: wrap` stays as a graceful fallback for longer menus. */
    .nllm-header__nav .nav,
    .nllm-header__nav ul {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        width: auto;
        gap: var(--nllm-space-md);
    }

    .nllm-header__nav .nav-link,
    .nllm-header__nav a {
        width: auto;
    }

    /* [claude:opus-4.8-1m][client:2.1.158][hurc:v0.10.1] Desktop submenu dropdown. On the inline nav row, a parent item's
       child <ul> becomes an absolute panel that drops below the parent and is
       hidden until the parent is hovered or contains keyboard focus. The parent
       label is a non-link <span>, so :focus-within on the <li> (triggered when a
       child link receives focus, e.g. via Tab) keeps it keyboard-reachable.
       Overrides the base/mobile stacked-list reveal from template.css. */
    .nllm-header__nav .nav-item.parent {
        position: relative;
    }

    .nllm-header__nav .nav-item.parent > ul.mod-menu__sub,
    .nllm-header__nav .nav-item.parent > ul {
        position: absolute;
        top: 100%;
        inset-inline-end: 0;
        z-index: 1100;
        display: none;            /* revealed on hover / focus-within below */
        min-width: 190px;
        flex-direction: column;
        align-items: stretch;
        gap: var(--nllm-space-2xs, 0.25rem);
        margin: 0;
        margin-top: var(--nllm-space-2xs, 0.25rem);
        padding: var(--nllm-space-xs);
        padding-inline-start: var(--nllm-space-xs);   /* drop the mobile child indent */
        background-color: var(--nllm-surface);
        border: 1px solid var(--nllm-surface-soft);
        border-radius: var(--nllm-radius-md);
        box-shadow: var(--nllm-shadow-lg);
    }

    .nllm-header__nav .nav-item.parent:hover > ul.mod-menu__sub,
    .nllm-header__nav .nav-item.parent:focus-within > ul.mod-menu__sub,
    .nllm-header__nav .nav-item.parent:hover > ul,
    .nllm-header__nav .nav-item.parent:focus-within > ul {
        display: flex;
    }

    /* Child links fill the panel width with the standard nav-link hover. */
    .nllm-header__nav .nav-item.parent > ul .nav-link,
    .nllm-header__nav .nav-item.parent > ul a {
        width: 100%;
        white-space: nowrap;
    }

    /* Show tagline at lg */
    .nllm-header__tagline {
        display: block;
    }

    /* Hero: full display heading size */
    .nllm-hero {
        padding-block: calc(var(--nllm-space-2xl) * 2.5) calc(var(--nllm-space-2xl) * 2);
    }

    /* 4-column feature grid at lg */
    .nllm-features-grid--4col {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Display text: full scale at lg */
    .nllm-display {
        font-size: var(--nllm-text-display);   /* 72px */
    }

    /* Back-to-top: full size */
    .nllm-back-top {
        width: 40px;
        height: 40px;
        bottom: var(--nllm-space-xl);
        right: var(--nllm-space-xl);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   xl: 1280px+ (wide desktop)
   Max-width containers fully constrained. Nav gets more spacing.
   ───────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1280px) {

    .nllm-header {
        padding-inline: var(--nllm-space-2xl);
    }

    .nllm-hero__inner {
        padding-inline: var(--nllm-space-2xl);
    }

    .nllm-pricing-grid {
        padding-inline: var(--nllm-space-2xl);
    }

    .nllm-features-grid {
        padding-inline: var(--nllm-space-2xl);
    }

    .nllm-testimonials-grid {
        padding-inline: var(--nllm-space-2xl);
    }

    .nllm-footer__columns {
        padding-inline: var(--nllm-space-2xl);
    }

    .nllm-footer__bar {
        padding-inline: var(--nllm-space-2xl);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   2xl: 1440px+ (ultra-wide)
   Tighten max-width constraints so content doesn't overstretch.
   ───────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1440px) {

    /* Pricing and feature grids: hard-cap width at 1280px max */
    .nllm-pricing-grid,
    .nllm-features-grid,
    .nllm-features-grid--4col,
    .nllm-testimonials-grid {
        max-width: 1280px;
        margin-inline: auto;
    }

    /* Hero: cap line length for readability */
    .nllm-hero__subhead {
        max-width: 700px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   Respect prefers-reduced-motion system preference.
   Disable transforms and transitions without losing layout.
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .nllm-btn:hover,
    .nllm-pricing-card:hover,
    .nllm-feature-tile:hover,
    .nllm-download-btn:hover,
    .nllm-back-top:hover {
        transform: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT
   Minimal print styles: white background, black text, no shadows.
   ───────────────────────────────────────────────────────────────────────────── */

@media print {

    body {
        background-color: #ffffff;
        color: #000000;
    }

    .nllm-header,
    .nllm-footer,
    .nllm-back-top,
    .nllm-skip-link,
    .nllm-banner {
        display: none;
    }

    .nllm-pricing-card,
    .nllm-feature-tile {
        border: 1px solid #cccccc;
        box-shadow: none;
    }

    a {
        color: #000000;
        text-decoration: underline;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #000000;
    }

    p {
        color: #333333;
    }
}