:root{
    --card-bg:#fff;
    --card-radius:14px;
    --muted:#6b7280;
    --shadow:0 6px 20px rgba(0,0,0,.08);
    --shadow-strong:0 12px 28px rgba(0,0,0,.16);
    --backdrop:rgba(0,0,0,.35);

    /* NEW */
    --card-border:#e5e7eb;               /* thin border to separate from bg */
    --card-hover-bg:#4CAF50;             /* body bg on hover */
    --card-hover-title:#ffffff;          /* title color on hover */
    --card-hover-excerpt:#c7f9ee;        /* subtitle color on hover */
}

/* Grid */
.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}
@media (max-width:1024px){ .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .blog-grid{grid-template-columns:1fr} }

/* Card */
.card{
    display:block;
    border:1px solid var(--card-border);   /* NEW: subtle outline */
    padding:0;
    background:var(--card-bg);
    border-radius:var(--card-radius);
    overflow:hidden;
    text-align:left;
    cursor:pointer;
    box-shadow:var(--shadow);
    transition:transform .18s ease, box-shadow .18s ease;
    color:inherit;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-strong)}

/* Full-bleed image with rounded top corners */
.card>img{
    display:block;
    width:100%;
    height:200px;
    object-fit:cover;
    margin:0;
    border-top-left-radius:var(--card-radius);
    border-top-right-radius:var(--card-radius);
}

.card-body{
    padding:14px 16px 18px;
    height:130px;
    border-top:1px solid rgba(0,0,0,.06);             /* NEW: divider under image */
    border-bottom-left-radius:var(--card-radius);      /* keep rounded bottom */
    border-bottom-right-radius:var(--card-radius);
    transition:background-color .18s ease;            /* NEW: smooth hover */
}
.card-title{
    margin:0 0 6px;font-size:18px;line-height:1.3;font-weight:700;
    transition:color .18s ease;                       /* NEW */
}
.card-excerpt{
    margin:0;color:var(--muted);font-size:14px;line-height:1.5;
    transition:color .18s ease;                       /* NEW */
}

/* NEW: hover readability */
.card:hover .card-body{ background:var(--card-hover-bg); }
.card:hover .card-title{ color:var(--card-hover-title); }
.card:hover .card-excerpt{ color:var(--card-hover-excerpt); }

/* Overlay shell */
.overlay{
    position:fixed;inset:0;display:grid;place-items:center;
    opacity:0;pointer-events:none;transition:opacity .18s ease;
    z-index:9999;
}
.overlay.shown{opacity:1;pointer-events:auto}
/* fully hide overlay after fade */
.overlay.hidden{display:none}

.overlay-backdrop{
    position:absolute;inset:0;background:var(--backdrop);backdrop-filter:saturate(110%) blur(2px);
}

/* Overlay content */
.overlay-card{
    position:relative;
    width:min(900px,92vw);
    max-height:90vh;
    background:var(--card-bg);
    border-radius:18px;
    box-shadow:var(--shadow-strong);
    overflow:auto;
    transform:translateY(8px);
    transition:transform .18s ease, opacity .18s ease;
    opacity:0;
}
.overlay.shown .overlay-card{transform:translateY(0);opacity:1}

.overlay-image{width:100%;object-fit:cover;display:block}
.overlay-content{padding:18px 20px 24px}
.overlay-title{margin:0 0 6px;font-size:26px;line-height:1.25}
.overlay-subtitle{margin:0 0 12px;font-size:16px;color:var(--muted)}
.overlay-text{margin:0;font-size:16px;line-height:1.7}

/* Close button */
.overlay-close{
    position:absolute;top:-25px;right:16px;border:none;background:transparent;
    box-shadow:none;font-size:26px;font-weight:bold;line-height:1;color:#333;cursor:pointer;padding:0;
}
.overlay-close:hover{ color:#000; transform:none }

/* Flying clone for FLIP animation */
.fly-clone{
    position:fixed;z-index:10000;border-radius:var(--card-radius);
    overflow:hidden;box-shadow:var(--shadow-strong);
    will-change:transform,width,height,left,top;
    transition:all .28s cubic-bezier(.2,.8,.2,1);
}
.fly-clone img{width:100%;height:100%;object-fit:cover;display:block}

/* Dark-mode tweaks */
.dark .card{ background:#111827; border-color:#1f2937; }
.dark .overlay-card{ background:#111827 }
.dark .overlay-close{ color:#e5e7eb }
.dark .overlay-close:hover{ color:#fff }
.dark .overlay-subtitle{ color:#9ca3af }
.dark .card-body{ border-top-color:rgba(255,255,255,.06) }

/* Dark-mode hover palette override */
.dark{
    --card-hover-bg:#0b4f4a;
    --card-hover-excerpt:#d7fff6;
}

/* Accessibility: prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
    .card, .card-body, .card-title, .card-excerpt, .overlay { transition:none !important; }
}

.page-title-main { color:#2e7d32; }   /* Blog */
.page-title-sep,
.page-title-brand { color:#4CAF50; }  /* | and Berza.Info */

/* Optional: a touch of polish */
.page-title {
    margin:18px 0 14px;
    font-size:2em;
    font-weight:600;
    letter-spacing:.2px;
    line-height:1.2;
}

/* put this in blog.css or main.css */
.hidden { display: none !important; }
.state-note {
    text-align: center;
    color: var(--muted);
    margin: 12px 0 6px;
    font-size: 14px;
}

.pagination {
    margin-top: 50px;
}

/* --- Pretty pager --- */
.pager{
    display:flex; align-items:center; justify-content:center;
    gap:14px; margin:35px 0 8px;
}

.pager-btn{
    width:44px; height:44px;
    display:grid; place-items:center;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.08);
    background:#fff; color:#374151;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: transform .12s ease, box-shadow .12s ease, color .12s ease, background .12s ease, border-color .12s ease;
    cursor:pointer;
    margin:0;
    justify-content: center;
}
.pager-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.pager-btn[disabled], .pager-btn.is-disabled{
    opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; background:#f3f4f6; color:#9ca3af; border-color:rgba(0,0,0,.06);
}

.pager-jump{
    display:flex; align-items:center; gap:10px; font-size:16px; color:#1f2937;
}
.pager-input{
    width:18px; height:18px; text-align:center;
    border-radius:12px; border:1px solid rgba(0,0,0,.1);
    background:#fff; color:#111827;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
    -moz-appearance: textfield;
}
.pager-input:focus{
    border-color:#2e7d32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}
.pager-input::-webkit-outer-spin-button,
.pager-input::-webkit-inner-spin-button{
    -webkit-appearance: none; margin:0;
}
.pager-total{ color:#374151; }

/* Dark mode */
.dark .pager-btn{ background:#0f172a; color:#e5e7eb; border-color:rgba(255,255,255,.08) }
.dark .pager-btn[disabled]{ background:#0b1220; color:#64748b; border-color:rgba(255,255,255,.06) }
.dark .pager-input{ background:#0f172a; color:#e5e7eb; border-color:rgba(255,255,255,.12) }
.dark .pager-input:focus{ box-shadow:0 0 0 3px rgba(76,175,80,.18); border-color:#4CAF50 }
.dark .pager-total{ color:#cbd5e1 }