/*──────────────────────────────────────────────────────────────
  Obituaries – front‑end  (v1.7)
  Paste over the existing file.
──────────────────────────────────────────────────────────────*/

/* ───────── 1. Card / Slider tiles ───────── */
.obit-slide,
.obit-card{
    border:1px solid #ddd;
    border-radius:6px;
    padding:20px 16px;
    text-align:center;
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.obit-slide img,
.obit-card img{
    width:150px;
    height:150px!important;
    max-height:150px;
    border:1px solid #E9E9E9!important;
    object-fit:cover;
    object-position:top center;
    filter:grayscale(100%);
    transition:filter .4s;
}
.obit-slide:hover img,
.obit-card:hover img{filter:grayscale(0%)}

.obit-card-inner,
.obit-slide{color:inherit;text-decoration:none}
a.obit-card-inner{text-decoration:none!important}

/* ───────── 2. Card typography ───────── */
.obit-name  {font:400 1.375rem/1.3 "inherit";color:#0f2438;margin:6px 0 4px}
.obit-label {font:.75rem/1 "inherit";letter-spacing:.12em;color:#807b79;text-transform:uppercase;margin:0}
.obit-date  {font:.9rem/1.2 "inherit";letter-spacing:.05em;color:#132430}

/* ───────── 3. Filter box ───────── */
details.obit-filters{
    margin:0 0 20px;
    padding:12px;
    border:1px solid #ccc;
    border-radius:6px;
    background:#f9f9f9;
}
details.obit-filters summary{font-weight:600;cursor:pointer}

/* grid wrapper */
.obit-filter{
    display:grid;
    gap:20px;
}

/* column wrapper */
.obit-col{
    display:flex;
    flex-direction:column;
}

/* === desktop ≥800 px =================================================== */
@media (min-width:800px){

    /* four balanced columns */
    .obit-filter{
        grid-template-columns:repeat(4,auto);
        column-gap:24px;
        align-items:end;                 /* labels stay aligned at top,
                                            inputs at same baseline */
    }

    /* wider inputs + smaller font so long option labels fit */
    .obit-col input,
    .obit-col select{
        width:270px;
        font-size:.9rem;
    }
    .obit-col select{padding-right:2.5rem}          /* avoid ▼ overlap */

    /* Apply button: inline, no forced width */
    details.obit-filters .button.button-primary{
        display:inline-block;
        width:auto!important;
        padding:12px 40px;
        font-size:.85rem;
        letter-spacing:.12em;
        margin-left:8px;                             /* tiny offset */
    }
}

.obit-filter{margin-bottom:20px;}
h3.obit-name {margin-bottom:15px;}
.obit-col select{ border-color:var(--e-global-color-d24c053);color:#7A7A7A;}

/* === mobile <800 px ==================================================== */
@media (max-width:799px){

    .obit-filter{grid-template-columns:1fr;}

    .obit-filter input,
    .obit-filter select{width:100%}

    /* full‑width Apply + Reset */
    .obit-filter + .button.button-primary{
        width:100%;
    }
    .obit-filter + .button + a.button{              /* Reset link */
        display:block;
        width:100%;
        margin:8px 0 0;
    }
}

/* ───────── 4. Card grid on archive page ───────── */
.obit-grid{
    display:grid;
    gap:1rem;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}

/* ───────── 5. Pagination ───────── */
.obit-pagination{
    text-align:center;
    margin:1.5rem 0;
}
.obit-pagination a{
    margin:0 4px;
    padding:6px 9px;
    border:1px solid #ccc;
    border-radius:3px;
    text-decoration:none;
}
.obit-pagination a.current{
    background:#333;
    color:#fff;
    border-color:#333;
}