/* ================================================================
   ARCHIVE FILTER — mahutid-tooted plugin
   Disain: tume sinine #032e68 + oranž aktsent #e95e23
   ================================================================ */

/* ── Muutujad (sünkroonis tooted.css-ga) ─────────────────────── */
:root {
    --mah-primary:  #032e68;
    --mah-accent:   #e95e23;
    --mah-accent-dk:#c44d18;
    --mah-border:   #e4e9f0;
    --mah-bg:       #f5f7fa;
    --mah-radius:   10px;
    --mah-font-h:   'Montserrat', sans-serif;
    --mah-font-b:   'Open Sans', sans-serif;
    --mah-shadow:   0 2px 16px rgba(3,46,104,.09);
    --mah-filter-w: 264px;
}

/* ── Wrap ─────────────────────────────────────────────────────── */
.mah-arch-wrap {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px 64px;
}

/* ── Päise hero-riba ──────────────────────────────────────────── */
.mah-arch-hero {
    padding: 28px 0 32px;
    border-bottom: 1px solid var(--mah-border);
    margin-bottom: 32px;
}
.mah-arch-hero-inner { margin-top: 16px; }
.mah-arch-title {
    font-family:    var(--mah-font-h);
    font-size:      clamp(26px, 3.5vw, 40px);
    font-weight:    800;
    color:          var(--mah-primary);
    margin:         0 0 8px;
    letter-spacing: .01em;
}
.mah-arch-sub {
    font-size:  15px;
    color:      #667;
    margin:     0;
}
.mah-arch-sub strong {
    color:       var(--mah-primary);
    font-weight: 700;
}

/* ── Layout: küljefilter + sisu ──────────────────────────────── */
.mah-arch-layout {
    display:   grid;
    grid-template-columns: var(--mah-filter-w) 1fr;
    gap:       32px;
    align-items: start;
}

/* ── FILTRIPEEGEL ─────────────────────────────────────────────── */
.mah-filter-panel {
    position:   sticky;
    top:        90px;
    background: #fff;
    border:     1px solid var(--mah-border);
    border-radius: calc(var(--mah-radius) + 2px);
    box-shadow: var(--mah-shadow);
    overflow:   hidden;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mah-border) transparent;
}

.mah-filter-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 18px 14px;
    border-bottom:   1px solid var(--mah-border);
    position:        sticky;
    top:             0;
    background:      #fff;
    z-index:         1;
}
.mah-filter-title {
    font-family:    var(--mah-font-h);
    font-size:      13px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--mah-primary);
}
.mah-filter-reset {
    background:  none;
    border:      none;
    cursor:      pointer;
    font-size:   12px;
    color:       var(--mah-accent);
    font-weight: 600;
    padding:     0;
    transition:  color .15s;
    font-family: var(--mah-font-b);
}
.mah-filter-reset:hover { color: var(--mah-accent-dk); }

/* Otsing */
.mah-filter-block {
    border-bottom: 1px solid var(--mah-border);
    padding: 14px 18px;
}
.mah-filter-block:last-child { border-bottom: none; }

.mah-filter-search-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
    background:  var(--mah-bg);
    border:      1px solid var(--mah-border);
    border-radius: 7px;
    padding:     8px 12px;
    transition:  border-color .15s;
}
.mah-filter-search-wrap:focus-within {
    border-color: var(--mah-primary);
    background: #fff;
}
.mah-filter-search-wrap svg { color: #99a; flex-shrink: 0; }
.mah-filter-search {
    border:      none;
    background:  transparent;
    outline:     none;
    font-size:   13px;
    width:       100%;
    color:       #333;
    font-family: var(--mah-font-b);
}
.mah-filter-search::placeholder { color: #aab; }

/* Block title (accordion) */
.mah-filter-block-title {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         0 0 10px;
    font-family:     var(--mah-font-h);
    font-size:       12px;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  .07em;
    color:           var(--mah-primary);
}
.mah-chevron { transition: transform .22s; }

/* Filter list */
.mah-filter-list {
    display:        none;
    flex-direction: column;
    gap:            2px;
}
.mah-filter-list.open { display: flex; }

.mah-filter-label {
    display:     flex;
    align-items: center;
    gap:         9px;
    cursor:      pointer;
    padding:     6px 4px;
    border-radius: 6px;
    transition:  background .12s;
    user-select: none;
}
.mah-filter-label:hover { background: var(--mah-bg); }

/* Custom checkbox */
.mah-filter-label input.mah-cb { display: none; }
.mah-cb-box {
    width:        16px;
    height:       16px;
    border:       2px solid #c8d0de;
    border-radius: 4px;
    flex-shrink:  0;
    transition:   border-color .15s, background .15s;
    position:     relative;
}
.mah-filter-label input.mah-cb:checked + .mah-cb-box {
    background:    var(--mah-accent);
    border-color:  var(--mah-accent);
}
.mah-filter-label input.mah-cb:checked + .mah-cb-box::after {
    content:    '';
    position:   absolute;
    left:       3px; top: 1px;
    width:      6px; height: 9px;
    border:     2px solid #fff;
    border-top: none;
    border-left: none;
    transform:  rotate(40deg);
}
.mah-cb-text {
    flex:      1;
    font-size: 13.5px;
    color:     #334;
    line-height: 1.3;
}
.mah-filter-label input.mah-cb:checked ~ .mah-cb-text { color: var(--mah-primary); font-weight: 600; }
.mah-cb-count {
    font-size:   11px;
    color:       #99a;
    background:  var(--mah-bg);
    padding:     1px 6px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Alamkategooriad */
.mah-filter-children {
    margin-left: 22px;
    padding-left: 10px;
    border-left: 2px solid var(--mah-border);
}
.mah-filter-child .mah-cb-text { font-size: 13px; color: #556; }

/* ── TOOLBAR ──────────────────────────────────────────────────── */
.mah-arch-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             10px;
    margin-bottom:   20px;
    min-height:      38px;
}
.mah-toolbar-right {
    display:     flex;
    align-items: center;
    gap:         12px;
}
.mah-result-info {
    font-size:   13px;
    color:       #889;
    font-family: var(--mah-font-b);
}

/* Sort */
.mah-sort-select {
    appearance:  none;
    background:  #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    border:      1px solid var(--mah-border);
    border-radius: 7px;
    padding:     7px 30px 7px 12px;
    font-size:   13px;
    color:       #334;
    cursor:      pointer;
    outline:     none;
    font-family: var(--mah-font-b);
    transition:  border-color .15s;
}
.mah-sort-select:focus { border-color: var(--mah-primary); }

/* Aktiivsed filtri tagid */
.mah-active-filters {
    display:  flex;
    flex-wrap: wrap;
    gap:      6px;
}
.mah-active-tag {
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    background:   rgba(3,46,104,.08);
    color:        var(--mah-primary);
    border:       1px solid rgba(3,46,104,.18);
    border-radius: 20px;
    padding:      4px 10px 4px 12px;
    font-size:    12px;
    font-weight:  600;
    cursor:       pointer;
    transition:   background .15s, border-color .15s;
    font-family:  var(--mah-font-b);
}
.mah-active-tag:hover { background: rgba(233,94,35,.1); border-color: var(--mah-accent); color: var(--mah-accent-dk); }
.mah-active-tag svg { opacity: .7; }

/* Mobiili nupp */
.mah-mobile-filter-btn {
    display:      none;
    align-items:  center;
    gap:          6px;
    background:   var(--mah-primary);
    color:        #fff;
    border:       none;
    border-radius: 7px;
    padding:      8px 14px;
    font-size:    13px;
    font-weight:  600;
    cursor:       pointer;
    font-family:  var(--mah-font-b);
    transition:   background .15s;
}
.mah-mobile-filter-btn:hover { background: #042c5e; }

/* ── TOODETE GRIID ────────────────────────────────────────────── */
.mah-arch-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   22px;
}

/* ── TOOTEKAART ───────────────────────────────────────────────── */
.mah-arch-kaart {
    background:    #fff;
    border:        1px solid var(--mah-border);
    border-radius: var(--mah-radius);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    box-shadow .22s, transform .22s, border-color .22s;
}
.mah-arch-kaart:hover {
    box-shadow:    0 8px 32px rgba(3,46,104,.13);
    transform:     translateY(-3px);
    border-color:  rgba(3,46,104,.18);
}

.mah-arch-kaart-pilt-link {
    display:     block;
    overflow:    hidden;
    background:  var(--mah-bg);
    aspect-ratio: 4/3;
}
.mah-arch-kaart-pilt {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .35s;
}
.mah-arch-kaart:hover .mah-arch-kaart-pilt { transform: scale(1.04); }

.mah-arch-kaart-pilt-ph {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(135deg, var(--mah-primary) 0%, #0a4a9e 100%);
}
.mah-arch-kaart-pilt-ph span {
    font-size:   52px;
    font-weight: 800;
    color:       rgba(255,255,255,.18);
    font-family: var(--mah-font-h);
}

.mah-arch-kaart-sisu {
    padding:        16px 18px 18px;
    display:        flex;
    flex-direction: column;
    gap:            6px;
    flex:           1;
}

.mah-arch-kaart-kat {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--mah-accent);
    font-family:    var(--mah-font-h);
}

.mah-arch-kaart-pealkiri {
    margin:      0;
    font-family: var(--mah-font-h);
    font-size:   15px;
    font-weight: 700;
    line-height: 1.35;
    color:       var(--mah-primary);
}
.mah-arch-kaart-pealkiri a {
    color:           inherit;
    text-decoration: none;
    transition:      color .15s;
}
.mah-arch-kaart-pealkiri a:hover { color: var(--mah-accent); }

.mah-arch-kaart-meta {
    display:  flex;
    flex-wrap: wrap;
    gap:      5px;
    margin-top: 2px;
}
.mah-arch-meta-tag {
    display:      inline-flex;
    align-items:  center;
    gap:          4px;
    font-size:    11px;
    color:        #667;
    background:   var(--mah-bg);
    border:       1px solid var(--mah-border);
    border-radius: 5px;
    padding:      3px 8px;
}

.mah-arch-kaart-nupp {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    color:           var(--mah-primary);
    text-decoration: none;
    font-size:       13px;
    font-weight:     700;
    font-family:     var(--mah-font-h);
    margin-top:      auto;
    padding-top:     8px;
    transition:      color .15s, gap .18s;
}
.mah-arch-kaart-nupp:hover { color: var(--mah-accent); gap: 8px; }

/* ── TÜHI OLEK ────────────────────────────────────────────────── */
.mah-arch-tyhi {
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            12px;
    padding:        64px 24px;
    text-align:     center;
    color:          #889;
}
.mah-arch-tyhi svg { color: var(--mah-border); }
.mah-arch-tyhi h3 {
    font-family:    var(--mah-font-h);
    font-size:      18px;
    font-weight:    700;
    color:          var(--mah-primary);
    margin:         0;
}
.mah-arch-tyhi p { margin: 0; font-size: 14px; }
.mah-tyhi-reset {
    background:      none;
    border:          none;
    color:           var(--mah-accent);
    font-weight:     700;
    cursor:          pointer;
    font-size:       inherit;
    text-decoration: underline;
    padding:         0;
}

/* ── MOBIILI OVERLAY ──────────────────────────────────────────── */
.mah-filter-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.45);
    z-index:    998;
}
.mah-filter-overlay.open { display: block; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .mah-arch-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .mah-arch-layout { grid-template-columns: 1fr; }

    .mah-filter-panel {
        position:   fixed;
        top:        0; left: 0;
        height:     100%;
        width:      min(var(--mah-filter-w), 88vw);
        max-height: 100%;
        border-radius: 0;
        z-index:    999;
        transform:  translateX(-110%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        box-shadow: 4px 0 32px rgba(0,0,0,.18);
    }
    .mah-filter-panel.open { transform: translateX(0); }

    .mah-mobile-filter-btn { display: inline-flex; }
    .mah-arch-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .mah-arch-wrap  { padding: 0 12px 40px; }
    .mah-arch-grid  { grid-template-columns: 1fr; }
}