/* ==========================================================================
   Nettix Import — Base Structural Styles
   Layout, spacing, and structure only. Colors and fonts are in themes/.
   Scoped under .nettix-single and .nettix-archive
   ========================================================================== */

/* --- Variable defaults (overridden by theme files) ------------------------ */
.nettix-single,
.nettix-archive {
    --na-accent:        #1a1a2e;
    --na-accent-light:  #16213e;
    --na-highlight:     #e63946;
    --na-text:          #1a1a1a;
    --na-text-muted:    #666666;
    --na-border:        #e0e0e0;
    --na-bg:            #ffffff;
    --na-bg-subtle:     #f7f7f7;
    --na-bg-card:       #ffffff;
    --na-radius:        6px;
    --na-font:          inherit;
    --na-font-heading:  inherit;
    font-family:        var(--na-font);
    color:              var(--na-text);
}

/* --- Icons ----------------------------------------------------------------- */
.na-icon {
    width:          1.1em;
    height:         1.1em;
    display:        inline-block;
    vertical-align: middle;
    fill:           currentColor;
    flex-shrink:    0;
}

.na-key-specs li .na-icon {
    width:   1.25rem;
    height:  1.25rem;
    color:   var(--na-highlight);
    opacity: 1;
}

.na-card-meta li .na-icon {
    width:   1rem;
    height:  1rem;
    color:   var(--na-highlight);
    opacity: 1;
}


/* --- Container ------------------------------------------------------------ */
.na-container {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 1.5rem;
}

/* --- Breadcrumb ----------------------------------------------------------- */
.na-breadcrumb {
    padding:   1.25rem 0;
    font-size: .875rem;
    color:     var(--na-text-muted);
}
.na-breadcrumb a { color: var(--na-text-muted); text-decoration: none; }
.na-breadcrumb a:hover { text-decoration: underline; }
.na-sep { margin: 0 .4rem; }

/* --- Single: main grid ---------------------------------------------------- */
.na-single-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 860px) {
    .na-single-grid { grid-template-columns: 1fr; }
}

/* --- Gallery -------------------------------------------------------------- */
.na-gallery-main {
    background:    var(--na-bg-subtle);
    border-radius: var(--na-radius);
    overflow:      hidden;
    aspect-ratio:  4/3;
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.na-main-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: opacity .2s;
}
.na-no-image {
    color:     var(--na-text-muted);
    font-size: .9rem;
}
.na-gallery-thumbs {
    display:   flex;
    gap:       .5rem;
    flex-wrap: wrap;
    margin-top: .625rem;
}
.na-thumb {
    padding:       0;
    border:        2px solid transparent;
    border-radius: 4px;
    cursor:        pointer;
    overflow:      hidden;
    background:    none;
    width:         70px;
    height:        52px;
    flex-shrink:   0;
    transition:    border-color .15s;
}
.na-thumb img    { width: 100%; height: 100%; object-fit: cover; display: block; }
.na-thumb:hover,
.na-thumb.is-active { border-color: var(--na-highlight); }

/* --- Info panel ----------------------------------------------------------- */
.na-info {
    position:   sticky;
    top:        1.5rem;
}
.na-title {
    font-size:   1.75rem;
    font-weight: 700;
    margin:      0 0 .375rem;
    line-height: 1.2;
}
.na-subtitle {
    color:     var(--na-text-muted);
    font-size: .9rem;
    margin:    0 0 1rem;
}
.na-price {
    font-size:   2rem;
    font-weight: 700;
    color:       var(--na-highlight);
    margin:      .75rem 0 1.25rem;
}

/* Key specs list */
.na-key-specs {
    list-style:    none;
    margin:        0 0 1.5rem;
    padding:       0;
    border-top:    1px solid var(--na-border);
}
.na-key-specs li {
    display:        flex;
    justify-content: space-between;
    padding:        .625rem 0;
    border-bottom:  1px solid var(--na-border);
    font-size:      .9rem;
}
.na-spec-label-group {
    display:     flex;
    align-items: center;
    gap:         .5rem;
}
.na-spec-label { color: var(--na-text-muted); }
.na-spec-value { font-weight: 600; text-align: right; }

/* Contact block */
.na-contact {
    background:    var(--na-bg-subtle);
    border-radius: var(--na-radius);
    padding:       1.25rem;
}
.na-contact-placeholder {
    font-size: .8rem;
    color:     var(--na-text-muted);
    margin:    0;
    font-style: italic;
}
.na-contact-buttons {
    display: flex;
    gap:     .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.na-contact-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           .5rem;
    padding:       .6rem 1.25rem;
    border-radius: 30px;
    font-size:     .9rem;
    font-weight:   600;
    text-decoration: none;
    transition:    opacity .15s;
}
.na-contact-btn:hover { opacity: .85; }
.na-contact-btn .na-icon { width: 1.1em; height: 1.1em; }
.na-contact-call { background: var(--na-accent); color: #fff; }
.na-contact-wa   { background: #25d366;          color: #fff; }

/* --- Tabs ----------------------------------------------------------------- */
.na-tabs-wrap { margin-top: 2.5rem; }

.na-tabs {
    display:       flex;
    gap:           0;
    border-bottom: 2px solid var(--na-border);
    flex-wrap:     wrap;
}
.na-tab {
    background:   none;
    border:       none;
    padding:      .75rem 1.25rem;
    font-size:    .9rem;
    font-weight:  600;
    cursor:       pointer;
    color:        var(--na-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition:   color .15s, border-color .15s;
    position:     relative;
}
.na-tab:hover  { color: var(--na-text); }
.na-tab.is-active { color: var(--na-highlight); border-bottom-color: var(--na-highlight); }
.na-tab-count {
    display:       inline-block;
    background:    var(--na-border);
    border-radius: 20px;
    padding:       1px 7px;
    font-size:     .75rem;
    margin-left:   .35rem;
}

.na-tab-panel { padding: 1.75rem 0; }

/* --- Description ---------------------------------------------------------- */
.na-description {
    line-height: 1.7;
    font-size:   .95rem;
    max-width:   72ch;
}

/* --- Specs grid ----------------------------------------------------------- */
.na-specs-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   1.5rem 2.5rem;
}
.na-spec-group h3 {
    font-size:     .7rem;
    font-weight:   700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--na-text-muted);
    margin:         0 0 .625rem;
    padding-bottom: .375rem;
    border-bottom:  1px solid var(--na-border);
}
.na-spec-row {
    display:       flex;
    justify-content: space-between;
    gap:           1rem;
    padding:       .4rem 0;
    font-size:     .875rem;
    border-bottom: 1px solid var(--na-bg-subtle);
}
.na-spec-row dt { color: var(--na-text-muted); flex-shrink: 0; }
.na-spec-row dt .na-icon { color: var(--na-highlight); width: 1rem; height: 1rem; margin-right: .35rem; vertical-align: middle; position: relative; top: -1px; }
.na-spec-row dd { font-weight: 600; margin: 0; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Accessories ---------------------------------------------------------- */
.na-accessories {
    list-style:            none;
    margin:                0;
    padding:               0;
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   .375rem .75rem;
}
.na-accessories li {
    font-size:  .875rem;
    padding:    .3rem 0 .3rem 1rem;
    position:   relative;
}
.na-accessories li::before {
    content:  '✓';
    position: absolute;
    left:     0;
    color:    var(--na-highlight);
    font-size: .75rem;
}

/* --- Gallery grid (tab) --------------------------------------------------- */
.na-gallery-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap:                   .5rem;
}
.na-gallery-grid-item img {
    width:         100%;
    aspect-ratio:  4/3;
    object-fit:    cover;
    border-radius: 4px;
    display:       block;
    transition:    opacity .2s;
}
.na-gallery-grid-item:hover img { opacity: .85; }

/* ==========================================================================
   ARCHIVE
   ========================================================================== */

.na-archive-header {
    padding: 2rem 0 1.5rem;
}
.na-archive-title {
    font-size:   2rem;
    font-weight: 700;
    margin:      0 0 1.25rem;
}

/* Category filter tabs */
.na-category-tabs {
    display:   flex;
    gap:       .5rem;
    flex-wrap: wrap;
}
.na-cat-tab {
    display:       inline-block;
    padding:       .45rem 1rem;
    border:        2px solid var(--na-border);
    border-radius: 30px;
    font-size:     .875rem;
    font-weight:   600;
    text-decoration: none;
    color:         var(--na-text);
    transition:    border-color .15s, background .15s, color .15s;
}
.na-cat-tab:hover { border-color: var(--na-accent); }
.na-cat-tab.is-active {
    background:   var(--na-accent);
    border-color: var(--na-accent);
    color:        #fff;
}

/* Filter bar */
.na-filter-bar {
    display:     flex;
    align-items: center;
    gap:         1rem;
    padding:     .75rem 0 .5rem;
}
.na-filter-toggle {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    background:    none;
    border:        2px solid var(--na-border);
    border-radius: 30px;
    padding:       .4rem 1rem;
    font-size:     .875rem;
    font-weight:   600;
    cursor:        pointer;
    color:         var(--na-text);
    font-family:   inherit;
    transition:    border-color .15s, background .15s, color .15s;
}
.na-filter-toggle:hover { border-color: var(--na-accent); }
.na-filter-toggle[aria-expanded="true"] {
    border-color: var(--na-accent);
    background:   var(--na-accent);
    color:        #fff;
}
.na-filter-toggle .na-arrow { transition: transform .2s; display: inline-block; }
.na-filter-toggle[aria-expanded="true"] .na-arrow { transform: rotate(180deg); }

.na-filter-count {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      var(--na-highlight);
    color:           #fff;
    border-radius:   50%;
    width:           1.25rem;
    height:          1.25rem;
    font-size:       .7rem;
    font-weight:     700;
}
.na-filter-toggle[aria-expanded="true"] .na-filter-count {
    background: rgba(255,255,255,.25);
}

.na-filter-reset {
    font-size:       .8rem;
    color:           var(--na-text-muted);
    text-decoration: underline;
}
.na-filter-reset:hover { color: var(--na-highlight); }

/* Filter panel */
.na-filter-panel {
    display:       none;
    background:    var(--na-bg-subtle);
    border-radius: var(--na-radius);
    padding:       1.25rem;
    margin-bottom: 1.5rem;
}
.na-filter-panel.is-open { display: block; }

.na-filter-fields {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap:                   1rem;
}
.na-filter-field {
    display:        flex;
    flex-direction: column;
    gap:            .375rem;
}
.na-filter-field label {
    font-size:      .7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--na-text-muted);
}
.na-filter-field select,
.na-filter-field input[type="number"] {
    width:       100%;
    padding:     .5rem .75rem;
    border:      1px solid var(--na-border);
    border-radius: var(--na-radius);
    background:  var(--na-bg);
    color:       var(--na-text);
    font-size:   .875rem;
    font-family: inherit;
    box-sizing:  border-box;
}
.na-filter-field select:focus,
.na-filter-field input[type="number"]:focus {
    outline:      2px solid var(--na-accent);
    outline-offset: -1px;
    border-color: var(--na-accent);
}
.na-filter-input-unit { position: relative; }
.na-filter-input-unit input { padding-right: 2.75rem; }
.na-filter-unit {
    position:       absolute;
    right:          .75rem;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      .8rem;
    color:          var(--na-text-muted);
    pointer-events: none;
}

.na-filter-actions {
    margin-top: 1rem;
    display:    flex;
    justify-content: flex-end;
}
.na-filter-submit {
    padding:     .55rem 1.5rem;
    background:  var(--na-accent);
    color:       #fff;
    border:      none;
    border-radius: var(--na-radius);
    font-size:   .875rem;
    font-weight: 600;
    cursor:      pointer;
    font-family: inherit;
    transition:  background .15s;
}
.na-filter-submit:hover { background: var(--na-accent-light); }

/* Vehicle card grid */
.na-vehicle-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   2rem;
    padding-bottom:        2.5rem;
}

.na-vehicle-card {
    border:        1px solid var(--na-border);
    border-radius: var(--na-radius);
    overflow:      hidden;
    background:    #fff;
    transition:    box-shadow .2s, transform .2s;
    display:       flex;
    flex-direction: column;
}
.na-vehicle-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    transform:  translateY(-2px);
}

.na-card-image {
    aspect-ratio: 4/3;
    overflow:     hidden;
    background:   var(--na-bg-subtle);
    display:      flex;
    align-items:  center;
    justify-content: center;
}
.na-card-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .3s;
}
.na-vehicle-card:hover .na-card-img { transform: scale(1.03); }
.na-card-no-image {
    width:  100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--na-border);
}
.na-card-no-image svg { width: 48px; height: 48px; }

.na-card-body {
    padding:        1.25rem 1.5rem 1.5rem;
    flex:           1;
    display:        flex;
    flex-direction: column;
}
.na-card-title {
    font-size:   1.1rem;
    font-weight: 700;
    margin:      0 0 .5rem;
    line-height: 1.3;
}
.na-card-title a {
    text-decoration: none;
    color:           var(--na-text);
}
.na-card-title a:hover { color: var(--na-highlight); }

.na-card-excerpt {
    font-size:      .85rem;
    color:          var(--na-text-muted);
    line-height:    1.5;
    margin:         .375rem 0 0;
    display:        -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:       hidden;
}

.na-card-meta {
    list-style:  none;
    margin:      0 0 1rem;
    padding:     .75rem 0;
    display:     flex;
    flex-wrap:   wrap;
    gap:         .375rem .75rem;
    font-size:   .8rem;
    color:       var(--na-text-muted);
    border-bottom: 1px solid var(--na-border);
}

.na-card-price {
    font-size:   1.3rem;
    font-weight: 700;
    color:       var(--na-highlight);
    margin-top:  auto;
    padding-top: 1rem;
}

.na-card-btn {
    display:         inline-block;
    margin-top:      .875rem;
    padding:         .7rem 1.5rem;
    background:      var(--na-accent);
    color:           #fff;
    border-radius:   var(--na-radius);
    text-decoration: none;
    font-size:       .875rem;
    font-weight:     600;
    text-align:      center;
    transition:      background .15s;
}
.na-card-btn:hover { background: var(--na-accent-light); color: #fff; }

/* Pagination */
.na-pagination .nav-links {
    display:   flex;
    gap:       .5rem;
    flex-wrap: wrap;
    padding:   1rem 0 2rem;
}
.na-pagination .page-numbers {
    padding:         .5rem .875rem;
    border:          2px solid var(--na-border);
    border-radius:   var(--na-radius);
    text-decoration: none;
    color:           var(--na-text);
    font-size:       .875rem;
    font-weight:     600;
    transition:      border-color .15s;
}
.na-pagination .page-numbers.current,
.na-pagination .page-numbers:hover {
    border-color: var(--na-accent);
    background:   var(--na-accent);
    color:        #fff;
}

/* --- Misc ----------------------------------------------------------------- */
.na-empty { color: var(--na-text-muted); font-size: .95rem; padding: 2rem 0; }

/* ==========================================================================
   ENERGY LABEL
   ========================================================================== */

.na-energy-wrap {
    margin: 1.5rem 0;
}

.na-energy-toggle {
    background:  none;
    border:      none;
    cursor:      pointer;
    font-size:   .8rem;
    color:       var(--na-text-muted);
    padding:     0;
    margin-top:  .5rem;
    display:     flex;
    align-items: center;
    gap:         .35rem;
}
.na-energy-toggle .na-arrow {
    display:    inline-block;
    transition: transform .25s;
    font-style: normal;
}
.na-energy-wrap.is-expanded .na-arrow { transform: rotate(180deg); }

.na-energy-label { width: 100%; }

.na-energy-bar {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          40px;
    margin-bottom:   6px;
    color:           #fff;
    padding-left:    14px;
    font-size:       .875rem;
    cursor:          default;
    overflow:        visible;
}
.na-energy-bar::after {
    content:       '';
    position:      absolute;
    left:          100%;
    top:           0;
    width:         0;
    height:        0;
    border-top:    20px solid transparent;
    border-bottom: 20px solid transparent;
}
.na-energy-bar .na-bar-range { font-weight: 700; flex: 1; }
.na-energy-bar .na-bar-co2  {
    display:      none;
    font-size:    .75rem;
    font-weight:  400;
    opacity:      .85;
    margin-right: .4rem;
}
.na-energy-bar .na-bar-class { font-weight: 700; padding-right: 6px; white-space: nowrap; }

/* Active bar shows CO₂ */
.na-energy-bar.is-active .na-bar-co2 { display: block; }

/* Collapsed state — hide inactive bars only */
.na-energy-wrap:not(.is-expanded) .na-energy-bar:not(.is-active) {
    display: none;
}

/* Expanded state — active bar: full-width track with coloured portion + arrow + light track */
.na-energy-wrap.is-expanded .na-energy-bar.is-active {
    width: 100%;
    background: linear-gradient(90deg, var(--bar-color) var(--bar-width), var(--na-bg-subtle) var(--bar-width));
}
/* Arrow stays, but repositioned to the gradient stop (end of coloured portion) */
.na-energy-wrap.is-expanded .na-energy-bar.is-active::after {
    left:              var(--bar-width);
    border-left-color: var(--bar-color);
}
/* g/km sits in the light portion — use theme text colour, not white */
.na-energy-wrap.is-expanded .na-energy-bar.is-active .na-bar-co2 {
    color:        var(--na-text);
    margin-right: .75rem;
}

/* Active bar highlight ring (coloured portion only via clip) */
.na-energy-bar.is-active {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.4);
}

/* Class colors & widths — stored as CSS custom properties so gradient + arrow share them */
.na-energy-bar[data-class="A"] { --bar-color: #007755; --bar-width: 30%; width: var(--bar-width); background: var(--bar-color); }
.na-energy-bar[data-class="A"]::after { border-left: 40px solid var(--bar-color); }

.na-energy-bar[data-class="B"] { --bar-color: #66aa10; --bar-width: 35%; width: var(--bar-width); background: var(--bar-color); }
.na-energy-bar[data-class="B"]::after { border-left: 40px solid var(--bar-color); }

.na-energy-bar[data-class="C"] { --bar-color: #b4c311; --bar-width: 40%; width: var(--bar-width); background: var(--bar-color); }
.na-energy-bar[data-class="C"]::after { border-left: 40px solid var(--bar-color); }

.na-energy-bar[data-class="D"] { --bar-color: #f1bc0a; --bar-width: 45%; width: var(--bar-width); background: var(--bar-color); }
.na-energy-bar[data-class="D"]::after { border-left: 40px solid var(--bar-color); }

.na-energy-bar[data-class="E"] { --bar-color: #ee9902; --bar-width: 50%; width: var(--bar-width); background: var(--bar-color); }
.na-energy-bar[data-class="E"]::after { border-left: 40px solid var(--bar-color); }

.na-energy-bar[data-class="F"] { --bar-color: #dd6600; --bar-width: 55%; width: var(--bar-width); background: var(--bar-color); }
.na-energy-bar[data-class="F"]::after { border-left: 40px solid var(--bar-color); }

.na-energy-bar[data-class="G"] { --bar-color: #cc3300; --bar-width: 60%; width: var(--bar-width); background: var(--bar-color); }
.na-energy-bar[data-class="G"]::after { border-left: 40px solid var(--bar-color); }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */

#na-lightbox {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         99999;
    align-items:     center;
    justify-content: center;
}
#na-lightbox.is-open { display: flex; }

.na-lb-bg {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,.92);
}
.na-lb-img {
    position:   relative;
    max-width:  90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 3px;
    z-index:    1;
}
.na-lb-close,
.na-lb-prev,
.na-lb-next {
    position:    absolute;
    background:  rgba(255,255,255,.15);
    border:      none;
    color:       #fff;
    cursor:      pointer;
    font-size:   2rem;
    line-height: 1;
    padding:     .4rem .75rem;
    border-radius: 4px;
    z-index:     2;
    transition:  background .15s;
}
.na-lb-close:hover,
.na-lb-prev:hover,
.na-lb-next:hover { background: rgba(255,255,255,.3); }
.na-lb-close { top: 1rem; right: 1rem; font-size: 1.5rem; }
.na-lb-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.na-lb-next  { right: 1rem; top: 50%; transform: translateY(-50%); }