/* Giani's responsive style, full-width alignment */
:root{
  --gianis-red:#e31e24;
  --gianis-green:#0fa64a;
  --ink:#0b2646;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card:#ffffff;
  --bg:#f7f8fa;
  --radius:18px;
}

.hd-sl{max-width:1200px;margin:24px auto;padding:clamp(12px,2vw,24px);background:var(--bg);border-radius:var(--radius)}
.hd-sl-controls{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:16px}
@media(min-width:900px){.hd-sl-controls{grid-template-columns:1fr 1fr} .hd-sl-actions-row{grid-column:1/-1}}

.hd-sl-field label{display:block;margin:4px 0 8px;color:var(--ink);font-weight:700;font-size:15px}
.hd-sl-field select{width:100%;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:#fff;font-size:16px;appearance:none;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.hd-sl-field select:focus{outline:2px solid rgba(17,165,74,.20);outline-offset:2px}

.hd-sl-actions-row{display:flex;align-items:center;gap:10px}
.hd-sl-search{width:100%;background:var(--gianis-green);color:#fff;border:none;border-radius:16px;padding:16px 18px;font-size:17px;letter-spacing:.08em;font-weight:900;cursor:pointer;box-shadow:0 8px 0 rgba(0,0,0,.08)}

/* Grid uses full container width with 1/2/3 columns */
.hd-sl-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:768px){.hd-sl-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1200px){.hd-sl-grid{grid-template-columns:1fr 1fr 1fr}}

.hd-sl-card{width:100%;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 10px 18px rgba(0,0,0,.06)}
.hd-sl-title{margin:0 0 8px 0;color:var(--gianis-red);font-size:20px}
.hd-sl-meta{font-size:15px;color:#182033;line-height:1.6}
.hd-sl-link{color:var(--gianis-red);text-decoration:none}
.hd-sl-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.hd-sl-btn{display:inline-block;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:800}
.hd-sl-btn-outline{border:2px solid var(--gianis-red);color:var(--gianis-red)}

/* Pagination */
.hd-sl-pagination{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.hd-sl-page{padding:10px 14px;border:1px solid var(--border);border-radius:12px;cursor:pointer;background:#fff}
.hd-sl-page.active{background:var(--gianis-red);color:#fff;border-color:var(--gianis-red)}