/* =====================================================
   SERVICE UPDATES PAGE
===================================================== */

/* ── Hero ── */
.su-hero{position:relative;min-height:480px;display:flex;align-items:center;margin-top:72px;overflow:hidden}
.su-hero-bg{position:absolute;inset:0;background-size:cover;background-position:50% 40%}
.su-hero-overlay{position:absolute;inset:0;background:rgba(25,25,26,.85);mix-blend-mode:multiply}
.su-hero-body{position:relative;z-index:2;padding:100px 0;text-align:center;max-width:1240px;margin:0 auto}
.su-hero-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:'Figtree',sans-serif;font-size:16px;font-weight:500;line-height:1;letter-spacing:-0.03em;margin-bottom:16px}
.su-hero-body h1{font-family:'Nexa Demo',sans-serif;font-size:clamp(2.8rem,7vw,5.5rem);font-weight:700;color:#fff;line-height:1.1;letter-spacing:-0.02em;text-transform:capitalize;margin-bottom:18px;text-shadow:0 4px 20px rgba(0,0,0,.3)}
.su-hero-sub{font-family:'Figtree',sans-serif;color:rgba(255,255,255,.85);font-size:17px;font-weight:500;line-height:1.7;letter-spacing:-0.01em;max-width:620px;margin:0 auto;text-shadow:0 2px 8px rgba(0,0,0,.2)}

/* ── Content ── */
.su-content{padding:80px 0;background:#f5f6fa}
.su-content .nav-container{max-width:1100px}

/* ── Filters ── */
.su-filters{display:flex;gap:12px;margin-bottom:40px;flex-wrap:wrap;justify-content:center}
.su-filter{font-family:'Figtree',sans-serif;font-size:14px;font-weight:600;color:#6b7280;background:#fff;border:2px solid #e8eaf0;border-radius:8px;padding:10px 20px;cursor:pointer;transition:all .3s;white-space:nowrap}
.su-filter:hover{border-color:#0D0E48;color:#0D0E48;transform:translateY(-2px)}
.su-filter.active{background:#0D0E48;color:#fff;border-color:#0D0E48;box-shadow:0 4px 12px rgba(13,14,72,.2)}

/* ── Grid ── */
.su-grid{display:grid;gap:20px}

/* ── Update Item ── */
.su-item{background:#fff;border-radius:14px;padding:28px 32px;border:1px solid #e8eaf0;box-shadow:0 2px 12px rgba(0,0,0,.04);transition:all .3s;position:relative;overflow:hidden}
.su-item::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:#CD202C;opacity:0;transition:opacity .3s}
.su-item:hover{box-shadow:0 8px 32px rgba(0,0,0,.1);transform:translateY(-4px);border-color:#d1d5db}
.su-item:hover::before{opacity:1}

/* Badge */
.su-badge{display:inline-flex;align-items:center;gap:6px;font-family:'Figtree',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:6px 12px;border-radius:6px;margin-bottom:16px}
.su-badge-warning{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.su-badge-danger{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.su-badge-info{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd}
.su-badge-primary{background:#e0e7ff;color:#3730a3;border:1px solid #c7d2fe}

/* Header */
.su-item-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.su-item h3{font-family:'Nexa Demo',sans-serif;font-size:20px;font-weight:700;color:#0D0E48;line-height:1.3;flex:1;letter-spacing:-0.01em}
.su-date{font-family:'Figtree',sans-serif;font-size:13px;color:#6b7280;white-space:nowrap;display:flex;align-items:center;gap:6px;font-weight:500}
.su-date i{color:#9ca3af;font-size:12px}

/* Content */
.su-item>p{font-family:'Figtree',sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:-0.03em;color:#0D0E48;margin:0 0 16px 0}

/* Route Tags */
.su-routes{display:flex;gap:8px;flex-wrap:wrap}
.su-route-tag{font-family:'Figtree',sans-serif;font-size:12px;font-weight:600;color:#CD202C;background:rgba(205,32,44,.08);border:1px solid rgba(205,32,44,.2);padding:4px 12px;border-radius:6px;white-space:nowrap}

/* Hidden state for filtering */
.su-item.hidden{display:none}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:768px){
  .su-hero{min-height:400px}
  .su-hero-body{padding:80px 0}
  .su-content{padding:60px 0}
  .su-filters{gap:8px}
  .su-filter{font-size:13px;padding:8px 16px}
  .su-item{padding:20px 24px}
  .su-item-header{flex-direction:column;gap:8px}
  .su-item h3{font-size:18px}
  .su-date{font-size:12px}
}

@media(max-width:520px){
  .su-hero-body h1{font-size:2.4rem}
  .su-item h3{font-size:16px}
  .su-item>p{font-size:14px}
}