/* ============================================================
   ACSSW Homepage design — matches the approved prototype.
   EVERYTHING here is scoped under ".hp" so it ONLY styles the
   homepage content block. The hero, top navigation, and footer
   are outside ".hp" and are NOT affected by this file.
   ============================================================ */

.hp{
  --coral:#BC4A57; --coral-deep:#A23C48; --brown:#7E685A; --ink:#3D332A; --muted:#5E544A;
  --green:#AFD275; --green-deep:#7FA84A; --gray-blue:#C2CAD0; --taupe:#C2B9B0;
  --light-coral:#FFF5F6; --light-green:#F5FFF5; --cream:#FBF7F2; --cream-2:#F4EDE4;
  --line:#E8DECF; --white:#fff;
  --shadow-sm:0 2px 12px rgba(61,51,42,.08); --shadow-md:0 16px 40px rgba(61,51,42,.12);
  font-size:17px; line-height:1.65; color:var(--ink);
}
.hp *{box-sizing:border-box}
.hp h1,.hp h2,.hp h3,.hp h4{font-family:'Playfair Display',Georgia,serif;color:var(--brown);line-height:1.15;font-weight:700;margin:0}
.hp p{margin:0}
.hp a{color:inherit}
.hp .wrap{max-width:1160px;margin:0 auto;padding:0 28px}

.hp .btn{display:inline-block;padding:14px 30px;border-radius:7px;font-weight:600;font-size:16px;text-decoration:none;transition:all .2s ease;cursor:pointer;border:none}
.hp .btn-primary{background:var(--coral);color:#fff;box-shadow:0 6px 18px rgba(231,113,125,.30)}
.hp .btn-primary:hover{background:var(--coral-deep);transform:translateY(-2px)}
.hp .btn-outline{border:1.6px solid var(--coral);color:var(--coral);background:transparent}
.hp .btn-outline:hover{background:var(--coral);color:#fff}

/* section scaffold */
.hp .section{padding:62px 0}
.hp .section-head{max-width:760px;margin:0 auto 40px;text-align:center}
.hp .section-head h2{font-size:38px;margin-bottom:14px}
.hp .section-head p{color:var(--muted);font-size:18px;line-height:1.6}
.hp .rule{width:60px;height:3px;background:var(--coral);border-radius:2px;margin:0 auto 20px}

/* vision */
.hp .vision{background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);border-top:1px solid var(--line)}
.hp .vision .wrap{max-width:920px;text-align:center}
.hp .vision .mark{font-family:'Playfair Display',serif;font-size:80px;line-height:.5;color:var(--green-deep);height:40px;opacity:.55}
.hp .vision blockquote{font-family:'Playfair Display',serif;font-size:27px;line-height:1.5;color:var(--brown);font-weight:500;font-style:italic;margin:14px 0 6px}
.hp .vision .by{margin-top:20px;font-size:15px;color:var(--coral);font-weight:700}

/* news cards */
.hp .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hp .card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:var(--shadow-sm);transition:all .25s ease}
.hp .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.hp .card .bar{height:4px;border-radius:3px;width:44px;margin-bottom:18px}
.hp .card .date{font-size:14px;font-weight:600;color:var(--coral);margin-bottom:8px}
.hp .card h3{font-size:20px;margin-bottom:11px}
.hp .card p{color:var(--muted);font-size:15.5px;line-height:1.6;margin-bottom:16px}
.hp .card a.more{font-weight:700;font-size:15px;color:var(--coral);text-decoration:none}
.hp .card a.more:hover{text-decoration:underline}

/* events */
.hp .events{background:var(--cream-2)}
.hp .event-card{display:grid;grid-template-columns:160px 1fr auto;align-items:stretch;gap:24px;background:#fff;border-radius:18px;box-shadow:var(--shadow-md);overflow:hidden;max-width:900px;margin:0 auto}
.hp .event-date{background:linear-gradient(150deg,var(--coral) 0%,#F3A0A9 100%);color:#fff;text-align:center;padding:22px 14px;margin:0;border-radius:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.hp .event-date .d{font-family:'Playfair Display',serif;font-size:48px;font-weight:800;line-height:.9}
.hp .event-date .mo{font-size:15px;letter-spacing:2px;text-transform:uppercase;margin-top:6px}
.hp .event-date .yr{font-size:14px;opacity:.9;margin-top:3px}
.hp .event-body{padding:20px 0;display:flex;flex-direction:column;justify-content:center}
.hp .event-body .tag{display:inline-block;background:#F1F8E4;color:var(--green-deep);font-size:13px;font-weight:700;padding:5px 13px;border-radius:20px;margin-bottom:11px}
.hp .event-body h3{font-size:25px;margin-bottom:10px}
.hp .event-body .meta{color:var(--muted);font-size:15.5px;margin-bottom:5px}
.hp .event-body .meta b{color:var(--brown)}
.hp .event-cta{padding:20px 30px 20px 0;display:flex;align-items:center}

/* counseling cards */
.hp .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.hp .svc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:var(--shadow-sm);transition:all .25s ease}
.hp .svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.hp .svc .ic{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.hp .svc .ic svg{width:25px;height:25px}
.hp .svc h3{font-size:19px;margin-bottom:9px}
.hp .svc p{color:var(--muted);font-size:15px;line-height:1.65}

/* sexual wellness — two columns */
.hp .wellness{background:linear-gradient(180deg,var(--cream) 0%,#fff 100%)}
.hp .wellness-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:start}
.hp .wellness-text{text-align:left}
.hp .wellness-text h2{font-size:36px;margin-bottom:18px;text-align:left}
.hp .wellness-text p{color:var(--muted);font-size:17px;line-height:1.85;margin-bottom:16px}
.hp .wellness-text strong{color:var(--brown)}
.hp .encompasses{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 34px;box-shadow:var(--shadow-sm)}
.hp .encompasses h3{font-size:23px;color:var(--coral);margin-bottom:8px;text-align:left}
.hp .encompasses ul{list-style:none;margin:0;padding:0}
.hp .encompasses li{position:relative;padding:15px 0 15px 36px;border-bottom:1px solid #F1E9DD;font-size:16px;color:var(--ink)}
.hp .encompasses li:last-child{border-bottom:none}
.hp .encompasses li::before{content:"\2192";position:absolute;left:2px;top:14px;color:var(--green-deep);font-weight:700;font-size:17px}

/* member benefits */
.hp .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hp .bcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 22px;text-align:center;box-shadow:var(--shadow-sm)}
.hp .bcard .ic{width:54px;height:54px;border-radius:14px;background:#F1F8E4;display:flex;align-items:center;justify-content:center;margin:0 auto 15px}
.hp .bcard .ic svg{width:26px;height:26px}
.hp .bcard h3{font-size:18px;margin-bottom:8px}
.hp .bcard p{color:var(--muted);font-size:14.5px;line-height:1.6}

/* cta */
.hp .cta{background:linear-gradient(135deg,var(--coral) 0%,var(--coral-deep) 100%);color:#fff;text-align:center}
.hp .cta h2{color:#fff;font-size:36px;margin-bottom:14px}
.hp .cta p{color:#f0e8de;font-size:18px;max-width:560px;margin:0 auto 26px}
.hp .cta .btn-primary{background:#fff;color:var(--coral)}
.hp .cta .btn-primary:hover{background:var(--cream)}

/* responsive */
@media(max-width:1024px) and (min-width:861px){
  .hp .grid4{grid-template-columns:repeat(2,1fr)}
  .hp .svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .hp .section{padding:48px 0}
  .hp .grid3,.hp .grid4,.hp .svc-grid{grid-template-columns:1fr}
  .hp .section-head h2{font-size:30px}
}
@media(max-width:820px){
  .hp .event-card{grid-template-columns:1fr}
  .hp .event-cta{padding:0 28px 28px}
  .hp .event-body{padding:22px 28px 0}
  .hp .wellness-grid{grid-template-columns:1fr;gap:28px}
}