/*
 * Zigmund redesigned category/tag archive.
 * Desktop layout follows the 1440px Figma frame exactly: 80px side gutters,
 * 1280px useful width, 24px card gaps.
 */

:root {
    --zam-bg: #f7f7f7;
    --zam-card: #fff;
    --zam-text: #242424;
    --zam-muted: #6d6c6a;
    --zam-meta: #9e9e9e;
    --zam-orange: #ff5a11;
}

body.zmg-body { background: var(--zam-bg); }
.zam-page,
.zam-page * { box-sizing: border-box; }
.zam-page {
    width: 100%;
    padding: 40px 0 80px;
    background: var(--zam-bg);
    color: var(--zam-text);
    font-family: "PT Root UI", "Opora PTRootUIWebVF", Arial, sans-serif;
}
.zam-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
}

/* Breadcrumbs: 16px, 8px gaps, Figma chevron. */
.zam-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 18px;
    margin: 0;
    color: var(--zam-muted);
    font-size: 16px;
    font-weight: 400;
    line-height: 17.6px;
    letter-spacing: .16px;
}
.zam-breadcrumbs a {
    color: var(--zam-text);
    text-decoration: none;
}
.zam-breadcrumbs a:hover,
.zam-breadcrumbs a:focus-visible { color: var(--zam-orange); }
.zam-breadcrumbs__arrow {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
.zam-breadcrumbs__arrow::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 7px;
    height: 7px;
    border-top: 1.6px solid #aca89f;
    border-right: 1.6px solid #aca89f;
    transform: rotate(45deg);
}
.zam-breadcrumbs__current { color: var(--zam-muted); }

.zam-archive {
    padding-top: 40px;
}
.zam-archive > h1 {
    width: 628px;
    max-width: 100%;
    margin: 0 0 32px;
    color: var(--zam-text);
    font-size: 40px;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: .4px;
}

/* Six-column system yields 628px large cards and ~410px small cards. */
.zam-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}
.zam-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 24px;
    background: var(--zam-card);
}
.zam-card--large {
    grid-column: span 3;
    height: 450px;
}
.zam-card--small {
    grid-column: span 2;
    height: 208px;
}

/* Large card image: 620 x 238 inside 4px inset. */
.zam-card__image {
    position: relative;
    display: block;
    width: calc(100% - 8px);
    height: 238px;
    flex: 0 0 238px;
    margin: 4px 4px 0;
    overflow: hidden;
    border-radius: 20px;
    background: #e8e8e8;
}
.zam-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .25s ease;
}
.zam-card--large:hover .zam-card__image img { transform: scale(1.015); }

/* Editorial labels. */
.zam-card__badge {
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    max-width: calc(100% - 24px);
    padding: 4px 12px 4px 4px;
    overflow: hidden;
    border: .5px solid rgba(255,255,255,.9);
    border-radius: 18px;
    background: rgba(255,255,255,.70);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: var(--zam-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .14px;
    white-space: nowrap;
}
.zam-card__badge::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: center/contain no-repeat;
}
.zam-card__badge--fire {
    border-color: #1fd683;
    background: rgba(8,181,103,.70);
    color: #fff;
}
.zam-card__badge--fire::before { background-image: url('../../images/zigmund-magazine-new/ui/badge-fire.png'); }
.zam-card__badge--like::before { background-image: url('../../images/zigmund-magazine-new/ui/badge-like.png'); }
.zam-card__badge--up::before { background-image: url('../../images/zigmund-magazine-new/ui/badge-up.png'); }
.zam-card__badge--special {
    background: rgba(217,237,255,.9);
    border-color: #d9edff;
    color: #2486ff;
}
.zam-card__badge--special::before { display: none; }

.zam-card__content {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    flex-direction: column;
}
.zam-card--large .zam-card__content { padding-top: 16px; }
.zam-card--small .zam-card__content { padding: 16px; }
.zam-card__main { min-width: 0; }

/* Every title is exactly two visual lines at most. */
.zam-card__title {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--zam-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 24.2px;
    letter-spacing: .22px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.zam-card__title a { color: inherit; text-decoration: none; }
.zam-card__title a:hover,
.zam-card__title a:focus-visible { color: var(--zam-orange); }

/* Authors: 28px avatar(s), 18px copy. */
.zam-card__author {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 28px;
    margin-top: 12px;
    color: var(--zam-text);
    font-size: 18px;
    font-weight: 500;
    line-height: 19.8px;
    letter-spacing: .18px;
}
.zam-card__avatars {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 12px;
}
.zam-card__avatar,
.zam-card__author-placeholder {
    display: block;
    position: relative;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #ececec;
    object-fit: cover;
}
.zam-card__avatar.is-overlap,
.zam-card__author-placeholder.is-overlap { margin-left: -6px; }
.zam-card__author-placeholder::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 30%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%,-50%);
}
.zam-card__author-placeholder::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 19px;
    height: 12px;
    border-radius: 50% 50% 0 0;
    background: #fff;
    transform: translateX(-50%);
}
.zam-card__author-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zam-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
}
.zam-card__read {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 1 auto;
    color: var(--zam-orange);
    font-size: 18px;
    font-weight: 500;
    line-height: 19.8px;
    letter-spacing: .18px;
    white-space: nowrap;
}
.zam-card__read span {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
}
.zam-card__read span::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 7px;
    height: 7px;
    border-top: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
    transform: rotate(45deg);
}
.zam-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 16px;
    border-radius: 9999px;
    background: linear-gradient(90deg,#f7a934 0%,#f37645 50%,#f57442 100%);
    color: #fff!important;
    font-size: 18px;
    font-weight: 500;
    line-height: 19.8px;
    letter-spacing: .18px;
    white-space: nowrap;
}
.zam-card__cta:hover,
.zam-card__cta:focus-visible { filter: brightness(1.03); }

.zam-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 20px;
    margin-top: 12px;
    color: var(--zam-meta);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .14px;
}
.zam-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.zam-card__meta-item::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: center/contain no-repeat;
}
.zam-card__meta-item--views::before { background-image: url('../../images/zigmund-magazine-new/ui/meta-view.png'); }
.zam-card__meta-item--time::before { background-image: url('../../images/zigmund-magazine-new/ui/meta-time.png'); }
.zam-card__meta-item--date::before { background-image: url('../../images/zigmund-magazine-new/ui/meta-date.png'); }

/* 410 x 208 text-only cards use the same typography and controls. */
.zam-card--small .zam-card__author { margin-top: 12px; }
.zam-card--small .zam-card__actions { padding-top: 10px; }
.zam-card--small .zam-card__meta { margin-top: 10px; }

/* Figma load-more bar: 1280 x 50. */
.zam-more {
    width: 100%;
    height: 50px;
    margin-top: 24px;
}
.zam-more a,
.zam-more button {
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    color: var(--zam-orange);
    font-size: 18px;
    font-weight: 500;
    line-height: 19.8px;
    letter-spacing: .18px;
    text-decoration: none;
    transition: background .18s ease;
}
.zam-more a:hover,
.zam-more a:focus-visible,
.zam-more button:hover,
.zam-more button:focus-visible { background: #fff5ef; }
.zam-more a.is-loading,
.zam-more button.is-loading { pointer-events: none; opacity: .65; }
.zam-more button { padding:0; border:0; cursor:pointer; font-family:inherit; appearance:none; -webkit-appearance:none; }

.zam-empty {
    padding: 64px 32px;
    border-radius: 24px;
    background: #fff;
    text-align: center;
}
.zam-empty h2 { margin:0 0 10px; font-size:32px; line-height:35.2px; }
.zam-empty p { margin:0 0 20px; color:var(--zam-muted); font-size:18px; line-height:21.6px; }
.zam-empty a { color:var(--zam-orange); font-size:18px; font-weight:500; }

/* Cards appended by AJAX. */
.zam-card:nth-child(n+15) { animation: zam-card-appear .22s ease both; }
@keyframes zam-card-appear {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Keep intermediate widths usable. Mobile will be tuned from its own Figma in the next pass. */
@media (max-width: 1199px) {
    .zam-container { padding: 0 32px; }
    .zam-card__title { font-size: 20px; line-height: 22px; }
    .zam-card__author,
    .zam-card__read,
    .zam-card__cta { font-size: 16px; line-height: 19.2px; }
    .zam-card__meta { gap: 8px; font-size: 12px; }
}
@media (max-width: 767px) {
    /* Mobile archive follows the 375px Figma frame: 24px gutters / 327px cards. */
    .zam-page {
        padding: 20px 0 40px;
    }
    .zam-container {
        max-width: none;
        padding: 0 24px;
    }

    .zam-breadcrumbs {
        gap: 6px;
        min-height: 16px;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: .12px;
        white-space: nowrap;
        overflow: hidden;
    }
    .zam-breadcrumbs a {
        flex: 0 0 auto;
    }
    .zam-breadcrumbs__arrow {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }
    .zam-breadcrumbs__arrow::before {
        left: 4px;
        top: 4px;
        width: 6px;
        height: 6px;
        border-width: 1.4px;
    }
    .zam-breadcrumbs__current {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .zam-archive {
        padding-top: 20px;
    }
    .zam-archive > h1 {
        width: 100%;
        margin: 0 0 24px;
        font-size: 28px;
        line-height: 30.8px;
        letter-spacing: .28px;
    }

    .zam-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        width: 100%;
    }
    .zam-card--large,
    .zam-card--small {
        grid-column: 1;
        width: 100%;
        min-width: 0;
        border-radius: 20px;
    }
    .zam-card--large {
        height: 394px;
    }
    .zam-card--small {
        height: 194px;
        min-height: 0;
    }

    .zam-card__image {
        width: calc(100% - 8px);
        height: 190px;
        flex: 0 0 190px;
        margin: 4px 4px 0;
        border-radius: 16px;
    }
    .zam-card__image img {
        object-position: center;
    }

    .zam-card__badge {
        top: 10px;
        left: 10px;
        min-height: 24px;
        max-width: calc(100% - 20px);
        padding: 3px 10px 3px 3px;
        border-radius: 16px;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: .12px;
    }
    .zam-card__badge::before {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .zam-card__content,
    .zam-card--large .zam-card__content,
    .zam-card--small .zam-card__content {
        min-height: 0;
        padding: 14px 14px 12px;
    }

    .zam-card__title {
        font-size: 18px;
        line-height: 19.8px;
        letter-spacing: .18px;
        -webkit-line-clamp: 2;
    }

    .zam-card__author,
    .zam-card--small .zam-card__author {
        min-height: 24px;
        margin-top: 10px;
        font-size: 14px;
        line-height: 17px;
        letter-spacing: .14px;
    }
    .zam-card__avatars {
        margin-right: 8px;
    }
    .zam-card__avatar,
    .zam-card__author-placeholder {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }
    .zam-card__avatar.is-overlap,
    .zam-card__author-placeholder.is-overlap {
        margin-left: -5px;
    }

    .zam-card__actions,
    .zam-card--small .zam-card__actions {
        gap: 8px;
        padding-top: 10px;
    }
    .zam-card__read {
        gap: 1px;
        font-size: 14px;
        line-height: 17px;
        letter-spacing: .14px;
    }
    .zam-card__read span {
        width: 14px;
        height: 14px;
    }
    .zam-card__read span::before {
        left: 4px;
        top: 4px;
        width: 6px;
        height: 6px;
        border-width: 1.4px;
    }
    .zam-card__cta {
        min-height: 32px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 17px;
        letter-spacing: .14px;
    }

    .zam-card__meta,
    .zam-card--small .zam-card__meta {
        gap: 8px;
        min-height: 16px;
        margin-top: 10px;
        font-size: 11px;
        line-height: 14px;
        letter-spacing: .11px;
    }
    .zam-card__meta-item {
        gap: 3px;
    }
    .zam-card__meta-item::before {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .zam-more {
        height: 48px;
        margin-top: 16px;
    }
    .zam-more a,
.zam-more button {
        height: 48px;
        border-radius: 12px;
        font-size: 16px;
        line-height: 19.2px;
        letter-spacing: .16px;
    }

    .zam-empty {
        padding: 40px 20px;
        border-radius: 20px;
    }
    .zam-empty h2 {
        font-size: 26px;
        line-height: 29px;
    }
    .zam-empty p,
    .zam-empty a {
        font-size: 16px;
        line-height: 19px;
    }
}

@media (max-width: 359px) {
    .zam-container { padding-right: 16px; padding-left: 16px; }
    .zam-card--large { height: 382px; }
    .zam-card__image { height: 180px; flex-basis: 180px; }
    .zam-card__title { font-size: 17px; line-height: 19px; }
    .zam-card__cta { padding-right: 10px; padding-left: 10px; font-size: 13px; }
    .zam-card__meta { gap: 6px; font-size: 10px; }
}