/**
 * Zsengezöld – bloglista stílusok
 *
 * Közös a bloglista (template-blog.php), az archívum (archive.php),
 * a keresés (search.php) és a cikkoldal "Hasonló cikkek" blokkja között.
 */

.zs-blog {
    --gold:      #7A5C33;
    --gold-soft: #B89362;
    --light: #E6DDD1;
    --green:      #556049;
    --green-soft: #78836A;
    --brown: #5A473B;
    --cream: #F9F7F2;
    --placeholder: #BFB2A4;

    background: var(--cream);
}

/* ---------- szekció / konténer ---------- */
.zs-blog .zs-section { padding: 0 90px; }
.zs-blog .zs-container { max-width: 1280px; margin: 0 auto; }

.zs-blog-head { padding-top: 70px !important; }
.zs-blog__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 46px; font-weight: 600; color: var(--green);
    text-align: center; margin: 0 0 16px;
}
.zs-blog__desc {
    font-family: 'Inter', sans-serif;
    font-size: 16px; line-height: 1.7; color: var(--brown);
    text-align: center; max-width: 720px; margin: 0 auto 32px;
}

/* ---------- kereső ---------- */
.zs-blog-search {
    display: flex; align-items: center; gap: 12px;
    background: #fff;
    border: 1px solid rgba(120, 131, 106, .35);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 32px;
}
.zs-blog-search svg { color: var(--green); flex: 0 0 auto; }
.zs-blog-search input {
    flex: 1; min-width: 0;
    border: none; background: none; outline: none;
    font-family: 'Inter', sans-serif; font-size: 15px; color: var(--brown);
}
.zs-blog-search input::placeholder { color: rgba(90, 71, 59, .55); }

/* ---------- kategória chipek ---------- */
.zs-blog-filters {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center; margin-bottom: 48px;
}
.zs-chip {
    display: inline-block; padding: 8px 20px;
    border: 1px solid rgba(120, 131, 106, .4);
    border-radius: 999px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    color: var(--brown); text-decoration: none;
    transition: all .2s ease;
}
.zs-chip:hover { border-color: var(--gold); color: var(--gold); }
.zs-chip.is-active { background: var(--brown); border-color: var(--brown); color: var(--cream); }

/* ---------- rácsok ---------- */
.zs-blog .zs-grid { display: grid; gap: 32px; }
.zs-blog .zs-grid--3 { grid-template-columns: repeat(3, 1fr); }
.zs-blog .zs-grid--4 { grid-template-columns: repeat(4, 1fr); }

.zs-blog-featured { padding-bottom: 60px !important; }
.zs-blog-list { padding-bottom: 90px !important; }

/* ---------- kártya ---------- */
.zs-blog .zs-card,
.zs-post .zs-card { display: flex; flex-direction: column; }

.zs-blog .zs-card__media,
.zs-post .zs-card__media {
    position: relative; display: block; line-height: 0;
    border-radius: 10px; overflow: hidden; margin-bottom: 14px;
}
.zs-blog .zs-card__img,
.zs-post .zs-card__img {
    display: block; width: 100%; height: 100%;
    aspect-ratio: 3 / 2; object-fit: cover;
}
.zs-blog .zs-card__img--empty,
.zs-post .zs-card__img--empty { background: var(--placeholder, #BFB2A4); }

.zs-blog .zs-card__badge {
    position: absolute; top: 14px; right: 14px;
    background: var(--green); color: var(--cream);
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 5px;
}
.zs-blog .zs-card__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.zs-blog .zs-card__cat {
    background: var(--gold); color: var(--cream);
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 4px; text-decoration: none;
}
.zs-blog .zs-card__cat:hover { background: var(--green); }

/* Típuscímke a keresési találatokon (Oldal / Foglalkozás / Blog) */
.zs-blog .zs-card__cat--type {
    background: var(--green);
    color: var(--cream);
    cursor: default;
}

.zs-blog .zs-card__title,
.zs-post .zs-card__title {
    font-family: 'Inter', sans-serif;
    font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0 0 10px;
}
.zs-blog .zs-card__title a,
.zs-post .zs-card__title a { color: var(--brown); text-decoration: none; }
.zs-blog .zs-card__title a:hover,
.zs-post .zs-card__title a:hover { color: var(--gold); }

.zs-blog .zs-card__excerpt,
.zs-post .zs-card__excerpt {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 14px; line-height: 1.6; color: var(--brown);
    margin: 0 0 14px; flex: 1;
}
.zs-blog .zs-card__more,
.zs-post .zs-card__more {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 14px; font-weight: 600; color: var(--gold);
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.zs-blog .zs-card__more:hover,
.zs-post .zs-card__more:hover { color: var(--green); }

/* ---------- lapozás / üres állapot ---------- */
.zs-pagination {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 56px;
}
.zs-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border: 1px solid rgba(120, 131, 106, .4); border-radius: 8px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    color: #5A473B; text-decoration: none;
}
.zs-pagination .page-numbers:hover { border-color: #B89362; color: #B89362; }
.zs-pagination .page-numbers.current { background: #5A473B; border-color: #5A473B; color: #F9F7F2; }

.zs-blog-empty {
    text-align: center; padding: 60px 0;
    font-family: 'Inter', sans-serif; font-size: 16px; color: var(--brown);
}

/* ---------- tablet ---------- */
@media (max-width: 1199px) {
    .zs-blog .zs-section { padding: 0 60px; }
    .zs-blog-head { padding-top: 50px !important; }
    .zs-blog__title { font-size: 36px; }
    .zs-blog .zs-grid--4,
    .zs-blog .zs-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- mobil ---------- */
@media (max-width: 767px) {
    .zs-blog .zs-section { padding: 0 20px; }
    .zs-blog-head { padding-top: 32px !important; }
    .zs-blog__title { font-size: 28px; margin-bottom: 12px; }
    .zs-blog-filters { justify-content: flex-start; margin-bottom: 32px; }
    .zs-blog .zs-grid { gap: 28px; }
    .zs-blog .zs-grid--3,
    .zs-blog .zs-grid--4 { grid-template-columns: 1fr; }
    .zs-blog-featured { padding-bottom: 40px !important; }
    .zs-blog-list { padding-bottom: 48px !important; }
}