/* ═══════════════════════════════════════════════════════
   ASAS Contracting — Project Portfolio (full project table)
   File: assets/css/project-list.css
   Used in: projects.html (data kept in PROJECTS.md)
═══════════════════════════════════════════════════════ */
.pl-section{padding:90px 0 110px;background:#fff;border-top:1px solid #e8e0d4}
.pl-section .section-title__title{color:#243a76;margin-bottom:12px}
.pl-intro{text-align:center;color:#6b6b6b;font-size:15px;line-height:1.6;margin:0 auto 32px;max-width:620px}

.pl-tools{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px}
.pl-filters{display:flex;flex-wrap:wrap;gap:8px}
.pl-filter{display:inline-flex;align-items:center;line-height:1.2;height:38px;border:1px solid #dcd3c3;background:#fff;color:#243a76;font-size:13px;font-weight:600;letter-spacing:.3px;
  padding:0 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pl-filter span{display:inline-block;margin-left:6px;font-size:11px;line-height:16px;padding:1px 7px;border-radius:999px;background:#f3efe6;color:#96702a}
.pl-filter:hover{border-color:#c8a350}
.pl-filter.is-active{background:#243a76;border-color:#243a76;color:#fff}
.pl-filter.is-active span{background:rgba(255,255,255,.18);color:#fff}
.pl-search{position:relative;flex:0 1 320px;margin:0}
.pl-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#96702a;font-size:13px}
.pl-search input{width:100%;height:40px;border:1px solid #dcd3c3;border-radius:999px;padding:0 16px 0 38px;font-size:14px;color:#1a1612;background:#fff;outline:none}
.pl-search input:focus{border-color:#243a76;box-shadow:0 0 0 3px rgba(36,58,118,.12)}

.pl-table-wrap{border:1px solid #ece6da;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(26,22,18,.06)}
.pl-table{width:100%;border-collapse:collapse;font-size:14px;color:#3a3530}
.pl-table thead th{background:#243a76;color:#fff;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  text-align:left;padding:16px 18px;position:sticky;top:0}
.pl-table td{padding:14px 18px;border-top:1px solid #f0ebe2;vertical-align:middle}
.pl-table tbody tr:nth-child(even){background:#faf8f4}
.pl-table tbody tr:hover{background:#f3efe6}
.pl-name{font-weight:700;color:#1a1612}
.pl-name a{color:#243a76;text-decoration:none;border-bottom:1px solid rgba(200,163,80,.6)}
.pl-name a:hover{color:#96702a}
.pl-scope{display:inline-block;font-size:12.5px;font-weight:600;color:#243a76;background:#eef1f8;padding:4px 10px;border-radius:6px;line-height:1.4}
.pl-st{white-space:nowrap}
.pl-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#2e7d4f}
.pl-status:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pl-status--ongoing{color:#b7791f}
.pl-status--recurring{color:#243a76}
.pl-progress{display:inline-block;vertical-align:middle;width:64px;height:5px;border-radius:5px;background:#efe6d2;margin:0 6px 0 10px;overflow:hidden}
.pl-progress span{display:block;height:100%;background:#c8a350;border-radius:5px}
.pl-pct{font-size:12px;color:#96702a;font-weight:600}
.pl-empty{text-align:center;padding:28px;margin:0;color:#6b6b6b}

/* Phone: each row becomes a card */
@media (max-width:767px){
  .pl-section{padding:60px 0 70px}
  .pl-search{flex:1 1 100%}
  .pl-table-wrap{border:0;border-radius:0;box-shadow:none;overflow:visible}
  .pl-table thead{display:none}
  .pl-table,.pl-table tbody,.pl-table tr,.pl-table td{display:block;width:100%}
  .pl-table tbody tr{background:#fff!important;border:1px solid #ece6da;border-radius:12px;padding:14px 16px;margin-bottom:12px;box-shadow:0 4px 14px rgba(26,22,18,.05)}
  .pl-table tbody tr[hidden]{display:none}
  .pl-table td{border:0;padding:2px 0;display:flex;align-items:center;gap:10px;font-size:13.5px}
  .pl-scope{padding:2px 8px}
  .pl-table td:before{content:attr(data-label);flex:0 0 76px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#96702a;padding-top:2px}
  .pl-table td.pl-name{font-size:16px;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid #f0ebe2}
  .pl-table td.pl-name:before{display:none}
  .pl-st{align-items:center}
}