/* ===== Useful Links – scope .useful ===== */
:root{
    --ul-ink:#2b1e17;
    --ul-muted:#5b4942;
    --ul-paper:#fffaf3;
    --ul-border:#e6d6c8;
    --ul-brand:#6d0f22;
    --ul-brand2:#8b2a3a;
    --ul-shadow:0 10px 26px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.04);
}

.useful{ color:var(--ul-ink); }

/* header */
.ul-hero{ text-align:center; margin: 1rem 0 1.2rem; }
.ul-title{
    font-weight:900; letter-spacing:.2px;
    font-size: clamp(1.5rem, .9rem + 2.2vw, 2.2rem);
    margin: 0 0 .6rem;
}

/* toolbar */
.ul-toolbar{
    display:flex; gap:.75rem; align-items:stretch; justify-content:center;
    flex-wrap:wrap;
}

/* search */
.ul-search{
    position:relative; width:min(620px,100%); flex: 1 1 360px;
}
.ul-search input{
    width:100%; padding:.7rem 2.3rem .7rem .9rem; border-radius:12px;
    border:1px solid var(--ul-border); background:var(--ul-paper);
    box-shadow: var(--ul-shadow);
    font-size:1rem; color:var(--ul-ink);
}
.ul-search svg{
    width:20px; height:20px; position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
    fill: var(--ul-muted);
}

/* filters */
.ul-filters{ display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; }
.ul-filters button{
    padding:.48rem .8rem; border-radius:999px; border:1px solid var(--ul-border);
    background:#fff; color:var(--ul-ink); font-weight:700; font-size:.95rem;
}
.ul-filters button.is-active{
    background: var(--ul-brand); color:#fff; border-color:var(--ul-brand);
    box-shadow:0 8px 18px rgba(109,15,34,.18);
}

/* grid */
.ul-grid{
    display:grid; grid-template-columns: repeat(12,1fr);
    gap: 16px; margin-top: 1rem;
}
.ul-card{
    grid-column: span 6;
    background:var(--ul-paper);
    border:1px solid var(--ul-border);
    border-radius:16px;
    padding:14px 14px 12px;
    box-shadow: var(--ul-shadow);
    display:flex; flex-direction:column; gap:.45rem;
}
@media (max-width: 992px){ .ul-card{ grid-column: span 12; } }

.ul-head{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.ul-h3{ margin:0; font-size:1.05rem; font-weight:800; }
.ul-domain{ color:var(--ul-muted); }

.ul-card p{ margin:.2rem 0 .4rem; color:var(--ul-ink); }

.ul-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }
.ul-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:.48rem .9rem; border-radius:10px; border:2px solid var(--ul-brand);
    color:var(--ul-brand); background:#fff; font-weight:800; text-decoration:none;
    transition: all .15s ease;
}
.ul-btn:hover{ background:var(--ul-brand); color:#fff; box-shadow:0 10px 18px rgba(109,15,34,.18); }

.ul-ghost{
    padding:.48rem .9rem; border-radius:10px; border:1px dashed var(--ul-border);
    background:#fff; color:var(--ul-muted); font-weight:700;
}
.ul-ghost:hover{ border-color:var(--ul-brand); color:var(--ul-brand); }

.ul-empty{ text-align:center; color:var(--ul-muted); margin:1rem 0 2rem; }

/* a11y helper */
.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); border:0;
}