/**
 * Eva Granit — Blog Archive & Single Post Styles
 *
 * @package eva-granit
 */

/* ─── Blog Archive wrapper ────────────────────────────────────────────────── */
.blog-archive {
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
}

.blog-archive__header {
    margin-bottom: var(--spacing-lg);
}

.blog-archive__title {
    font-size:     var(--font-size-2xl);
    font-family:   var(--font-heading);
    color:         var(--color-primary);
    margin-bottom: 4px;
}

.blog-archive__subtitle {
    color:     var(--color-muted);
    font-size: 1rem;
}

/* ─── 2-column layout: content + sidebar ─────────────────────────────────── */
.blog-layout {
    display:               grid;
    grid-template-columns: 1fr 320px;
    gap:                   var(--spacing-xl);
    align-items:           start;
}

/* ─── Blog Grid (archive) ─────────────────────────────────────────────────── */
.blog-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   var(--spacing-md);
}

/* ─── Blog Card ───────────────────────────────────────────────────────────── */
.blog-card {
    border:         1px solid var(--color-border);
    border-radius:  var(--border-radius, 4px);
    overflow:       hidden;
    background:     #fff;
    display:        flex;
    flex-direction: column;
    transition:     box-shadow 0.2s, transform 0.2s;
}

.blog-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.09);
    transform:  translateY(-2px);
}

.blog-card__image-wrap {
    display:  block;
    overflow: hidden;
    flex-shrink: 0;
}

.blog-card__img {
    width:      100%;
    height:     220px;
    object-fit: cover;
    display:    block;
    transition: transform 0.3s;
}

.blog-card:hover .blog-card__img {
    transform: scale(1.04);
}

.blog-card__no-image {
    width:           100%;
    height:          220px;
    background:      var(--color-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-muted);
}

.blog-card__no-image--sm {
    height: 160px;
}

.blog-card__body {
    padding:        var(--spacing-sm) var(--spacing-md);
    display:        flex;
    flex-direction: column;
    gap:            6px;
    flex:           1;
}

.blog-card__meta {
    font-size: 0.8rem;
    color:     var(--color-muted);
    margin:    0;
}

.blog-card__meta a {
    color:           var(--color-accent);
    text-decoration: none;
}

.blog-card__title {
    font-family:   var(--font-heading);
    font-size:     var(--font-size-lg);
    color:         var(--color-primary);
    margin:        0;
    line-height:   1.3;
}

.blog-card__title a {
    color:           inherit;
    text-decoration: none;
}

.blog-card__title a:hover {
    color: var(--color-accent);
}

.blog-card__excerpt {
    font-size:   0.9rem;
    line-height: 1.6;
    color:       var(--color-text);
    margin:      0;
    flex:        1;
}

.blog-card__link {
    font-size:       0.85rem;
    font-weight:     700;
    color:           var(--color-accent);
    text-decoration: none;
    margin-top:      auto;
    padding-top:     4px;
}

.blog-card__link:hover {
    color:           var(--color-primary);
    text-decoration: underline;
}

/* Mini variant (related posts) */
.blog-card--mini .blog-card__img,
.blog-card--mini .blog-card__no-image {
    height: 160px;
}

.blog-card--mini .blog-card__title {
    font-size: 1rem;
}

/* ─── Pagination ──────────────────────────────────────────────────────────── */
.blog-pagination {
    margin-top:      var(--spacing-xl);
    display:         flex;
    justify-content: center;
    gap:             6px;
    flex-wrap:       wrap;
}

.blog-pagination .page-numbers {
    padding:         0.45rem 0.85rem;
    border:          1px solid var(--color-border);
    border-radius:   var(--border-radius, 4px);
    color:           var(--color-text);
    text-decoration: none;
    font-size:       0.9rem;
    transition:      background 0.2s, color 0.2s, border-color 0.2s;
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
    background:      var(--color-accent);
    color:           #fff;
    border-color:    var(--color-accent);
}

/* ─── Empty state ─────────────────────────────────────────────────────────── */
.blog-empty {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE POST
   ═══════════════════════════════════════════════════════════════════════════ */
.single-post {
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
}

.single-post__article {
    background:    #fff;
    border:        1px solid var(--color-border);
    border-radius: var(--border-radius, 4px);
    overflow:      hidden;
    margin-bottom: var(--spacing-xl);
}

.single-post__header {
    padding: var(--spacing-md) var(--spacing-lg) 0;
}

.single-post__meta {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
    font-size:   0.82rem;
    color:       var(--color-muted);
    margin-bottom: var(--spacing-xs);
}

.single-post__cat {
    background:      var(--color-accent);
    color:           #fff;
    padding:         2px 10px;
    border-radius:   20px;
    font-size:       0.78rem;
    font-weight:     700;
    text-decoration: none;
    letter-spacing:  .03em;
}

.single-post__title {
    font-size:     clamp(1.5rem, 3vw, 2rem);
    font-family:   var(--font-heading);
    color:         var(--color-primary);
    line-height:   1.25;
    margin-bottom: var(--spacing-sm);
}

.single-post__author {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   0.85rem;
    color:       var(--color-muted);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
}

.single-post__avatar {
    border-radius: 50%;
    width:         32px;
    height:        32px;
}

.single-post__thumbnail {
    overflow: hidden;
}

.single-post__thumb-img {
    width:      100%;
    max-height: 460px;
    object-fit: cover;
    display:    block;
}

/* Entry content */
.entry-content {
    padding:     var(--spacing-md) var(--spacing-lg);
    line-height: 1.8;
    color:       var(--color-text);
    font-size:   1.02rem;
}

.entry-content p          { margin-bottom: var(--spacing-sm); }
.entry-content h2         { font-size: 1.4rem; font-family: var(--font-heading); color: var(--color-primary); margin: var(--spacing-md) 0 var(--spacing-xs); }
.entry-content h3         { font-size: 1.15rem; font-family: var(--font-heading); color: var(--color-primary); margin: var(--spacing-sm) 0 4px; }
.entry-content img        { max-width: 100%; border-radius: var(--border-radius, 4px); margin: var(--spacing-sm) 0; display: block; }
.entry-content blockquote { border-left: 3px solid var(--color-accent); padding: var(--spacing-xs) var(--spacing-sm); color: var(--color-muted); font-style: italic; margin: var(--spacing-sm) 0; background: var(--color-bg); border-radius: 0 4px 4px 0; }
.entry-content ul, .entry-content ol { padding-left: 1.4rem; margin-bottom: var(--spacing-sm); }
.entry-content li         { margin-bottom: 4px; }
.entry-content a          { color: var(--color-accent); }
.entry-content a:hover    { color: var(--color-primary); }
.entry-content table      { width: 100%; border-collapse: collapse; margin-bottom: var(--spacing-sm); }
.entry-content th, .entry-content td { padding: .5rem .75rem; border: 1px solid var(--color-border); }
.entry-content th         { background: var(--color-bg); font-weight: 700; }

/* Mid-article CTA banner */
.post-cta-banner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--spacing-sm);
    flex-wrap:       wrap;
    background:      #f4f0eb;
    border:          1px solid var(--color-accent);
    border-radius:   var(--border-radius, 4px);
    padding:         var(--spacing-sm) var(--spacing-lg);
    margin:          0 var(--spacing-lg) var(--spacing-md);
}

.post-cta-banner__text {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.post-cta-banner__text strong {
    font-size:   0.95rem;
    color:       var(--color-primary);
    font-family: var(--font-heading);
}

.post-cta-banner__text span {
    font-size: 0.85rem;
    color:     var(--color-muted);
}

.post-cta-banner__actions {
    display:     flex;
    align-items: center;
    gap:         var(--spacing-sm);
    flex-shrink: 0;
}

.post-cta-banner__phone {
    font-size:       1.1rem;
    font-weight:     700;
    color:           var(--color-primary);
    text-decoration: none;
    white-space:     nowrap;
}

.post-cta-banner__phone:hover {
    color: var(--color-accent);
}

.btn--sm {
    padding:   8px 16px;
    font-size: 0.85rem;
}

/* Tags */
.single-post__tags {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    padding:       var(--spacing-sm) var(--spacing-lg) var(--spacing-md);
    border-top:    1px solid var(--color-border);
}

.post-tag {
    background:      var(--color-bg);
    border:          1px solid var(--color-border);
    border-radius:   20px;
    padding:         3px 12px;
    font-size:       0.78rem;
    color:           var(--color-muted);
    text-decoration: none;
    transition:      background 0.2s, color 0.2s;
}

.post-tag:hover {
    background: var(--color-accent);
    color:      #fff;
    border-color: var(--color-accent);
}

/* ─── Related posts ───────────────────────────────────────────────────────── */
.related-posts {
    padding-top: var(--spacing-md);
}

.related-posts__title {
    font-size:     var(--font-size-xl);
    font-family:   var(--font-heading);
    color:         var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.related-posts__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   var(--spacing-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */
.blog-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-md);
    position:       sticky;
    top:            90px;
}

.sidebar-widget {
    background:    #fff;
    border:        1px solid var(--color-border);
    border-radius: var(--border-radius, 4px);
    overflow:      hidden;
}

.sidebar-widget__title {
    font-size:     1rem;
    font-family:   var(--font-heading);
    color:         var(--color-primary);
    font-weight:   700;
    padding:       var(--spacing-sm) var(--spacing-md) 0;
    margin-bottom: var(--spacing-xs);
}

/* Call CTA widget */
.sidebar-cta {
    background:    var(--color-primary);
    color:         #fff;
    padding:       var(--spacing-md);
    border:        none;
    text-align:    center;
}

.sidebar-cta__headline {
    font-size:     1.05rem;
    font-family:   var(--font-heading);
    font-weight:   700;
    color:         #fff;
    margin-bottom: 4px;
}

.sidebar-cta__sub {
    font-size:     0.85rem;
    color:         rgba(255,255,255,.75);
    margin-bottom: var(--spacing-sm);
    line-height:   1.5;
}

.sidebar-cta__phone {
    display:         block;
    font-size:       1.4rem;
    font-weight:     700;
    color:           #fff;
    text-decoration: none;
    letter-spacing:  .02em;
    margin-bottom:   4px;
}

.sidebar-cta__phone:hover {
    color: var(--color-accent);
}

.sidebar-cta__hours {
    font-size: 0.78rem;
    color:     rgba(255,255,255,.55);
    margin:    0;
}

/* Contact form */
.sidebar-form {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

.sidebar-form__form {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.sidebar-form__label {
    font-size:   0.8rem;
    font-weight: 700;
    color:       var(--color-muted);
}

.sidebar-form__input {
    width:         100%;
    padding:       9px 12px;
    border:        1px solid var(--color-border);
    border-radius: var(--border-radius, 4px);
    font-size:     0.9rem;
    font-family:   var(--font-body);
    color:         var(--color-text);
    background:    var(--color-bg);
    transition:    border-color 0.2s;
    box-sizing:    border-box;
}

.sidebar-form__input:focus {
    outline:      none;
    border-color: var(--color-accent);
}

.sidebar-form__textarea {
    resize:     vertical;
    min-height: 80px;
}

.sidebar-form__submit {
    padding:         11px;
    background:      var(--color-accent);
    color:           #fff;
    border:          none;
    border-radius:   var(--border-radius, 4px);
    font-size:       0.95rem;
    font-weight:     700;
    font-family:     var(--font-body);
    cursor:          pointer;
    transition:      background 0.2s;
    width:           100%;
}

.sidebar-form__submit:hover {
    background: var(--color-primary);
}

.sidebar-form__note {
    font-size:   0.72rem;
    color:       var(--color-muted);
    margin:      4px 0 0;
    text-align:  center;
    line-height: 1.4;
}

.sidebar-form__note a {
    color:           var(--color-accent);
    text-decoration: none;
}

/* Catalog CTA */
.sidebar-catalog {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

.sidebar-catalog p {
    font-size:     0.88rem;
    color:         var(--color-muted);
    margin-bottom: var(--spacing-xs);
    padding:       0 var(--spacing-md);
    padding-left:  0;
}

.sidebar-catalog__link {
    display:         inline-block;
    font-weight:     700;
    font-size:       0.9rem;
    color:           var(--color-accent);
    text-decoration: none;
    padding:         0 var(--spacing-md);
    padding-left:    0;
}

.sidebar-catalog__link:hover {
    color:           var(--color-primary);
    text-decoration: underline;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        position: static;
    }

    .blog-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 560px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .related-posts__grid {
        grid-template-columns: 1fr;
    }

    .post-cta-banner {
        flex-direction: column;
        align-items:    flex-start;
    }
}

/* ─── Blog archive bottom CTA ─────────────────────────────────────────────── */
.blog-cta-banner {
    margin-top: var(--spacing-xl);
    background: var(--color-primary);
    border-radius: var(--border-radius, 4px);
    padding: var(--spacing-lg) var(--spacing-md);
}

.blog-cta-banner__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--spacing-md);
    flex-wrap:       wrap;
}

.blog-cta-banner__title {
    font-family: var(--font-heading);
    font-size:   1.3rem;
    color:       #fff;
    margin:      0 0 6px;
}

.blog-cta-banner__text {
    color:     rgba(255,255,255,.8);
    font-size: .95rem;
    margin:    0;
}

.blog-cta-banner__btn {
    display:       inline-block;
    padding:       .75rem 1.75rem;
    background:    var(--color-accent, #8B7355);
    color:         #fff;
    border-radius: var(--border-radius, 4px);
    font-weight:   600;
    text-decoration: none;
    white-space:   nowrap;
    transition:    background .2s;
}

.blog-cta-banner__btn:hover {
    background: #6e5a42;
}