/* ===== Housing Support — Redesigned ===== */

/* Hero */
.hs-hero { position: relative; background: linear-gradient(135deg, #0F172A, #345dbd); color: #fff; padding: 5rem 1.5rem 3.2rem; overflow: hidden; }
.hs-hero-inner { max-width: 1100px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.hs-hero-icon { display: inline-block; margin-bottom: .6rem; opacity: .95; }
.hs-hero h1 { margin: 0 0 .35rem; font-size: clamp(2.1rem, 4.6vw, 3rem); font-weight: 900; }
.hs-subtext { margin: 0 auto; color: #e6e9f2; max-width: 760px; }
.hs-hero-bg { position: absolute; inset: 0; pointer-events: none; opacity: .25; background-image:
  radial-gradient(circle at 20% 10%, rgba(255,255,255,.25) 0 2px, transparent 2px),
  radial-gradient(circle at 80% 40%, rgba(255,255,255,.25) 0 2px, transparent 2px),
  radial-gradient(circle at 40% 80%, rgba(255,255,255,.25) 0 2px, transparent 2px);
  background-size: 140px 140px;
}

/* Sections */
.hs-section { padding: 2.4rem 1.5rem; background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 60%); }
.hs-inner { max-width: 1200px; margin: 0 auto; }
.hs-section h2 { text-align: center; margin: 0 0 1.1rem; font-size: clamp(1.7rem, 3.2vw, 2.1rem); font-weight: 900; color: #0F172A; }

/* Rights box */
.hs-rights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; background: #fff; padding: 1rem; border: 1px solid #e6ecfb; border-radius: 14px; box-shadow: 0 6px 18px rgba(10,34,80,.06); }
@media (max-width: 900px){ .hs-rights-grid { grid-template-columns: 1fr; } }
.hs-rights-card { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; padding: .6rem; border-radius: 10px; transition: background .18s ease; }
.hs-rights-card:hover { background: #f7faff; }
.hs-rights-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(100,149,237,.12); display: inline-flex; align-items: center; justify-content: center; }
.hs-rights-card p { margin: 0; color: #334155; }
.hs-rights-card a { color: #2563eb; text-decoration: none; font-weight: 700; }
.hs-rights-card a:hover { text-decoration: underline; }

/* Resource cards */
.hs-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 1100px){ .hs-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .hs-card-grid { grid-template-columns: 1fr; } }
.hs-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6ecfb; border-radius: 16px; padding: 1.2rem; box-shadow: 0 6px 18px rgba(10,34,80,.06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hs-card:hover { transform: translateY(-6px); border-color: rgba(100,149,237,.5); box-shadow: 0 16px 36px rgba(10,34,80,.12); }
.hs-card-icon { margin-bottom: .5rem; width: 48px; height: 48px; border-radius: 12px; background: rgba(100,149,237,.12); display: inline-flex; align-items: center; justify-content: center; }
.hs-card h3 { margin: .1rem 0 .2rem; font-size: 1.18rem; font-weight: 900; color: #0F172A; }
.hs-card p { margin: 0 0 .8rem; color: #334155; }
.hs-actions { margin-top: auto; }
.btn-pill { display: inline-block; padding: .55rem 1rem; background: #6495ED; color: #fff; border-radius: 999px; text-decoration: none; font-weight: 800; box-shadow: 0 8px 22px rgba(100,149,237,.35); }
.btn-pill:hover { background: #5a86d6; }

/* Tips */
.hs-tips { background: #fff; }
.hs-tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
@media (max-width: 900px){ .hs-tips-grid { grid-template-columns: 1fr; } }
.hs-tip { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: start; padding: .8rem 1rem; border: 1px solid #e6ecfb; border-radius: 12px; background: #f7faff; }
.hs-tip-icon { width: 28px; height: 28px; border-radius: 999px; background: rgba(22,163,74,.12); display: inline-flex; align-items: center; justify-content: center; }
.hs-updated { margin-top: 1rem; text-align: center; color: #6b7280; font-size: .9rem; }