/* certificates.css - page-specific styles (shared chrome in site.css) */

    .container { max-width:1180px; margin:0 auto; padding:2.5rem 1.5rem; }

    /* ── 2-column: cert grid (left) • search + categories (right) ── */
    .cert-layout { display:grid; grid-template-columns:1fr 264px; gap:2rem; align-items:start; }
    .cert-side { position:sticky; top:80px; display:flex; flex-direction:column; }
    .cert-side-title { font-size:.92rem; font-weight:700; color:var(--primary); border-left:4px solid var(--accent); padding-left:.6rem; margin:1.2rem 0 .7rem; }
    .cert-count-row { margin-bottom:1rem; min-height:1rem; }
    .result-count { font-size:.82rem; color:#999; }

    .cert-search { position:relative; margin-bottom:.2rem; }
    .cert-search .cs-ic { position:absolute; left:1rem; top:50%; transform:translateY(-50%); font-size:.9rem; opacity:.55; }
    .cert-search input { width:100%; padding:.72rem 1.1rem .72rem 2.45rem; font-family:inherit; font-size:.9rem; border:1.5px solid #e4e4de; border-radius:12px; background:#fff; transition:.18s; }
    .cert-search input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,206,27,.16); }

    /* year / month dropdowns */
    .cert-period { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.3rem; }
    .cert-period select { width:100%; padding:.55rem .8rem; font-family:inherit; font-size:.85rem; font-weight:600; color:#555; border:1.5px solid #e6e6e0; border-radius:10px; background:#fff; cursor:pointer; transition:.15s; }
    .cert-period select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,206,27,.16); }

    /* category chips stacked as a vertical filter list */
    .cert-chips { display:flex; flex-direction:column; gap:.45rem; }
    .cert-chip { display:inline-flex; align-items:center; gap:.4rem; width:100%; text-align:left; border:1.5px solid #e6e6e0; background:#fff; color:#555; font-family:inherit; font-size:.85rem; font-weight:600; border-radius:10px; padding:.5rem .8rem; cursor:pointer; transition:.15s; }
    .cert-chip:hover { border-color:var(--accent); color:#1f1f1f; }
    .cert-chip.active { background:var(--primary); color:var(--accent); border-color:var(--primary); }
    .cert-chip .cc { margin-left:auto; font-size:.75rem; opacity:.6; font-weight:700; }
    .cert-chip.active .cc { opacity:.85; }

    @media(max-width:820px) {
      .cert-layout { grid-template-columns:1fr; }
      .cert-side { order:-1; position:static; }
      .cert-side-title { margin-top:0; }
      .cert-chips { flex-direction:row; flex-wrap:wrap; }
      .cert-chip { width:auto; border-radius:30px; }
      .cert-chip .cc { margin-left:.15rem; }
    }

    /* ── CERT GRID ── */
    .cert-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.4rem; }
    .cert-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.07); border-bottom:3px solid transparent; transition:transform .2s,box-shadow .2s,border-color .2s; cursor:pointer; }
    .cert-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.12); border-bottom-color:var(--accent); }
    .cert-thumb { height:190px; overflow:hidden; background:#f0f0eb; display:flex; align-items:center; justify-content:center; }
    .cert-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
    .cert-card:hover .cert-thumb img { transform:scale(1.04); }
    .cert-body { padding:1rem; }
    .cert-type-tag { display:inline-block; background:var(--accent); color:#111; font-size:.7rem; font-weight:700; padding:.15rem .5rem; border-radius:4px; margin-bottom:.4rem; }
    .cert-recipient { font-size:.95rem; font-weight:700; color:var(--primary); margin-bottom:.25rem; line-height:1.35; }
    .cert-org { font-size:.8rem; color:#666; margin-bottom:.2rem; }
    .cert-note { font-size:.78rem; color:#888; margin-bottom:.3rem; line-height:1.5; }
    .cert-date { font-size:.75rem; color:#aaa; }
    .cert-dl-row { display:flex; justify-content:flex-end; margin-top:.7rem; }

    /* ── LIGHTBOX ── */
    .lightbox { position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:9000; display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; pointer-events:none; transition:opacity .25s; }
    .lightbox.open { opacity:1; pointer-events:auto; }
    .lb-wrap { position:relative; max-width:860px; width:100%; display:flex; flex-direction:column; align-items:center; gap:.8rem; }
    .lb-img { max-height:80vh; max-width:100%; border-radius:10px; box-shadow:0 16px 48px rgba(0,0,0,.6); display:block; }
    .lb-info { color:#fff; text-align:center; }
    .lb-name { font-size:1.05rem; font-weight:700; margin-bottom:.2rem; }
    .lb-sub { font-size:.85rem; color:rgba(255,255,255,.7); }
    .lb-close { position:absolute; top:-2.2rem; right:0; background:none; border:none; color:rgba(255,255,255,.7); font-size:1.6rem; cursor:pointer; line-height:1; }
    .lb-close:hover { color:#fff; }
    .lb-dl { background:var(--accent); color:#111; text-decoration:none; border-radius:20px; padding:.4rem 1.1rem; font-size:.82rem; font-weight:700; transition:.2s; display:inline-flex; align-items:center; gap:.4rem; margin-top:.2rem; }
    .lb-dl:hover { opacity:.88; }

    /* ── EMPTY STATE ── */
    .empty-state { text-align:center; padding:5rem 1rem; color:#bbb; }
    .empty-state .es-icon { font-size:3.5rem; margin-bottom:1rem; }
    .empty-state p { font-size:1rem; color:#888; }

    @media(max-width:640px) {
      .cert-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
      .cert-thumb { height:140px; }
    }