/* =========================================================
   WIDOW SUPPORT & CARE PAGE
   Blessings NGO

   Based directly on Community Development page structure
   Fully scoped to .widow-support-page
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.widow-support-page{

  --widow-navy:#102f45;
  --widow-blue:#1f506c;
  --widow-orange:#d8893b;
  --widow-gold:#e8b76b;
  --widow-cream:#f8f4ed;
  --widow-soft:#f2f6f4;
  --widow-text:#263746;
  --widow-muted:#6d7a83;
  --widow-white:#ffffff;
  --widow-border:rgba(16,47,69,.10);
  --widow-shadow:0 18px 45px rgba(16,47,69,.09);

  margin:0;
  padding:0;

  color:var(--widow-text);
  background:#fff;

  font-family:"DM Sans",sans-serif;

}


/* =========================================================
   PAGE BOX MODEL
   ========================================================= */

.widow-support-page *,
.widow-support-page *::before,
.widow-support-page *::after{

  box-sizing:border-box;

}


/* =========================================================
   CONTAINER
   ========================================================= */

.widow-support-page .widow-container{

  width:min(1180px,calc(100% - 40px));

  margin:0 auto;

}


/* =========================================================
   HERO
   ========================================================= */

.widow-support-page .widow-hero{

  position:relative;

  min-height:620px;

  display:flex;

  align-items:center;

  overflow:hidden;

  margin:0;

  padding:0;

  background:
    linear-gradient(
      90deg,
      rgba(16,47,69,.96) 0%,
      rgba(16,47,69,.84) 48%,
      rgba(16,47,69,.45) 100%
    ),
    url("../images/widow-hero.jpg")
    center center / cover no-repeat;

}


.widow-support-page .widow-hero-inner{

  padding:100px 0;

}


.widow-support-page .widow-hero-content{

  max-width:720px;

}


.widow-support-page .widow-eyebrow{

  display:inline-flex;

  align-items:center;

  gap:9px;

  margin-bottom:22px;

  color:#fff;

  font-size:13px;

  font-weight:700;

  letter-spacing:1.7px;

}


.widow-support-page .widow-eyebrow i{

  color:var(--widow-gold);

}


.widow-support-page .widow-hero h1{

  margin:0 0 25px;

  color:#fff;

  font-family:"Playfair Display",serif;

  font-size:clamp(44px,5.4vw,72px);

  line-height:1.05;

  font-weight:700;

}


.widow-support-page .widow-hero h1 span{

  display:block;

  color:var(--widow-gold);

}


.widow-support-page .widow-hero p{

  max-width:650px;

  margin:0;

  color:rgba(255,255,255,.88);

  font-size:18px;

  line-height:1.8;

}


.widow-support-page .widow-hero-actions{

  display:flex;

  flex-wrap:wrap;

  gap:14px;

  margin-top:34px;

}


/* =========================================================
   BUTTONS
   ========================================================= */

.widow-support-page .widow-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  min-height:50px;

  padding:13px 22px;

  border-radius:7px;

  text-decoration:none;

  font-family:"DM Sans",sans-serif;

  font-size:14px;

  font-weight:700;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;

}


.widow-support-page .widow-btn:hover{

  transform:translateY(-2px);

}


.widow-support-page .widow-btn-primary{

  color:#fff;

  background:var(--widow-orange);

  box-shadow:0 10px 25px rgba(216,137,59,.22);

}


.widow-support-page .widow-btn-primary:hover{

  color:#fff;

  background:#c9782e;

}


.widow-support-page .widow-btn-light{

  color:var(--widow-navy);

  background:#fff;

}


.widow-support-page .widow-btn-light:hover{

  color:var(--widow-navy);

  background:#f5f5f5;

}


.widow-support-page .widow-btn-blue{

  color:#fff;

  background:var(--widow-blue);

}


.widow-support-page .widow-btn-blue:hover{

  color:#fff;

  background:#173f55;

}


.widow-support-page .widow-btn-outline{

  color:var(--widow-navy);

  background:#fff;

  border:1px solid rgba(16,47,69,.18);

}


.widow-support-page .widow-btn-outline:hover{

  color:#fff;

  background:var(--widow-blue);

  border-color:var(--widow-blue);

}


/* =========================================================
   GENERAL SECTION
   ========================================================= */

.widow-support-page .widow-section{

  padding:100px 0;

  margin:0;

}


/* =========================================================
   LABEL
   ========================================================= */

.widow-support-page .widow-label{

  display:inline-block;

  margin-bottom:14px;

  color:var(--widow-orange);

  font-size:12px;

  font-weight:800;

  letter-spacing:1.7px;

}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.widow-support-page .widow-section-heading{

  max-width:720px;

  margin:0 auto 55px;

  text-align:center;

}


.widow-support-page .widow-section-heading h2{

  margin:0 0 18px;

  color:var(--widow-navy);

  font-family:"Playfair Display",serif;

  font-size:clamp(34px,4vw,52px);

  line-height:1.12;

}


.widow-support-page .widow-section-heading h2 span{

  color:var(--widow-orange);

}


.widow-support-page .widow-section-heading p{

  margin:0;

  color:var(--widow-muted);

  font-size:16px;

  line-height:1.8;

}


/* =========================================================
   INTRO
   ========================================================= */

.widow-support-page .widow-intro{

  background:#fff;

}


.widow-support-page .widow-intro-grid{

  display:grid;

  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);

  gap:70px;

  align-items:center;

}


.widow-support-page .widow-intro-content h2{

  margin:0 0 22px;

  color:var(--widow-navy);

  font-family:"Playfair Display",serif;

  font-size:clamp(34px,4vw,50px);

  line-height:1.12;

}


.widow-support-page .widow-intro-content h2 span{

  color:var(--widow-orange);

}


.widow-support-page .widow-intro-content p{

  margin:0 0 17px;

  color:var(--widow-muted);

  font-size:16px;

  line-height:1.85;

}


.widow-support-page .widow-intro-highlight{

  padding:40px 34px;

  background:var(--widow-cream);

  border:1px solid var(--widow-border);

  border-radius:16px;

  box-shadow:var(--widow-shadow);

}


.widow-support-page .widow-highlight-icon{

  width:62px;

  height:62px;

  display:flex;

  align-items:center;

  justify-content:center;

  margin-bottom:24px;

  color:#fff;

  background:var(--widow-orange);

  border-radius:14px;

  font-size:25px;

}


.widow-support-page .widow-intro-highlight h3{

  margin:0 0 15px;

  color:var(--widow-navy);

  font-family:"Playfair Display",serif;

  font-size:27px;

  line-height:1.25;

}


.widow-support-page .widow-intro-highlight p{

  margin:0;

  color:var(--widow-muted);

  line-height:1.75;

}


/* =========================================================
   SUPPORT AREAS
   ========================================================= */

.widow-support-page .widow-support-areas{

  background:var(--widow-soft);

}


.widow-support-page .widow-support-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:22px;

}


.widow-support-page .widow-card{

  position:relative;

  padding:32px 28px;

  background:#fff;

  border:1px solid var(--widow-border);

  border-radius:14px;

  box-shadow:0 12px 35px rgba(16,47,69,.055);

  overflow:hidden;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.widow-support-page .widow-card:hover{

  transform:translateY(-5px);

  box-shadow:var(--widow-shadow);

}


.widow-support-page .widow-card-icon{

  width:54px;

  height:54px;

  display:flex;

  align-items:center;

  justify-content:center;

  margin-bottom:20px;

  color:var(--widow-orange);

  background:rgba(216,137,59,.10);

  border-radius:12px;

  font-size:21px;

}


.widow-support-page .widow-card-number{

  position:absolute;

  top:25px;

  right:25px;

  color:rgba(16,47,69,.12);

  font-size:12px;

  font-weight:800;

  letter-spacing:1px;

}


.widow-support-page .widow-card h3{

  margin:0 0 12px;

  color:var(--widow-navy);

  font-family:"Playfair Display",serif;

  font-size:23px;

  line-height:1.25;

}


.widow-support-page .widow-card p{

  margin:0;

  color:var(--widow-muted);

  font-size:14px;

  line-height:1.75;

}


/* =========================================================
   FEATURE
   ========================================================= */

.widow-support-page .widow-feature{

  background:#fff;

}


.widow-support-page .widow-feature-box{

  display:grid;

  grid-template-columns:1fr 1fr;

  min-height:470px;

  overflow:hidden;

  background:var(--widow-navy);

  border-radius:18px;

}


.widow-support-page .widow-feature-image{

  min-height:470px;

}


.widow-support-page .widow-feature-image img{

  width:100%;

  height:100%;

  display:block;

  object-fit:cover;

}


.widow-support-page .widow-feature-content{

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:65px;

}


.widow-support-page .widow-feature-content .widow-label{

  color:var(--widow-gold);

}


.widow-support-page .widow-feature-content h2{

  margin:0 0 20px;

  color:#fff;

  font-family:"Playfair Display",serif;

  font-size:clamp(34px,4vw,48px);

  line-height:1.15;

}


.widow-support-page .widow-feature-content h2 span{

  color:var(--widow-gold);

}


.widow-support-page .widow-feature-content p{

  margin:0 0 28px;

  color:rgba(255,255,255,.78);

  line-height:1.8;

}


.widow-support-page .widow-points{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:14px;

  margin:0 0 30px;

}


.widow-support-page .widow-points div{

  display:flex;

  align-items:center;

  gap:10px;

  color:rgba(255,255,255,.88);

  font-size:14px;

  font-weight:600;

}


.widow-support-page .widow-points i{

  color:var(--widow-gold);

}


/* =========================================================
   WHY / DIGNITY
   ========================================================= */

.widow-support-page .widow-why{

  background:var(--widow-soft);

}


.widow-support-page .widow-why-grid{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:18px;

}


.widow-support-page .widow-why-card{

  display:flex;

  align-items:flex-start;

  gap:18px;

  padding:26px;

  background:#fff;

  border:1px solid var(--widow-border);

  border-radius:13px;

}


.widow-support-page .widow-why-card > i{

  flex:0 0 48px;

  width:48px;

  height:48px;

  display:flex;

  align-items:center;

  justify-content:center;

  color:var(--widow-orange);

  background:rgba(216,137,59,.10);

  border-radius:10px;

}


.widow-support-page .widow-why-card h3{

  margin:0 0 7px;

  color:var(--widow-navy);

  font-size:17px;

}


.widow-support-page .widow-why-card p{

  margin:0;

  color:var(--widow-muted);

  font-size:13px;

  line-height:1.65;

}


/* =========================================================
   SUPPORT CTA
   ========================================================= */

.widow-support-page .widow-support{

  padding:80px 0;

  background:#fff;

}


.widow-support-page .widow-support-box{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:35px;

  padding:45px 50px;

  background:var(--widow-cream);

  border:1px solid var(--widow-border);

  border-radius:18px;

}


.widow-support-page .widow-support-box h2{

  margin:0 0 10px;

  color:var(--widow-navy);

  font-family:"Playfair Display",serif;

  font-size:34px;

  line-height:1.2;

}


.widow-support-page .widow-support-box h2 span{

  color:var(--widow-orange);

}


.widow-support-page .widow-support-box p{

  margin:0;

  color:var(--widow-muted);

  line-height:1.7;

}


.widow-support-page .widow-support-actions{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  flex-shrink:0;

}


/* =========================================================
   RESPONSIVE — 1000px
   ========================================================= */

@media(max-width:1000px){

  .widow-support-page .widow-support-grid{

    grid-template-columns:repeat(2,1fr);

  }

  .widow-support-page .widow-why-grid{

    grid-template-columns:repeat(2,1fr);

  }

  .widow-support-page .widow-intro-grid{

    gap:40px;

  }

}


/* =========================================================
   RESPONSIVE — 760px
   ========================================================= */

@media(max-width:760px){

  .widow-support-page .widow-container{

    width:min(100% - 30px,1180px);

  }

  .widow-support-page .widow-section{

    padding:70px 0;

  }

  .widow-support-page .widow-hero{

    min-height:560px;

  }

  .widow-support-page .widow-hero-inner{

    padding:80px 0;

  }

  .widow-support-page .widow-hero h1{

    font-size:44px;

  }

  .widow-support-page .widow-hero p{

    font-size:16px;

  }

  .widow-support-page .widow-intro-grid{

    grid-template-columns:1fr;

    gap:35px;

  }

  .widow-support-page .widow-support-grid{

    grid-template-columns:1fr;

  }

  .widow-support-page .widow-feature-box{

    grid-template-columns:1fr;

  }

  .widow-support-page .widow-feature-image{

    min-height:330px;

  }

  .widow-support-page .widow-feature-content{

    padding:42px 30px;

  }

  .widow-support-page .widow-points{

    grid-template-columns:1fr;

  }

  .widow-support-page .widow-why-grid{

    grid-template-columns:1fr;

  }

  .widow-support-page .widow-support-box{

    flex-direction:column;

    align-items:flex-start;

    padding:35px 28px;

  }

}


/* =========================================================
   RESPONSIVE — 480px
   ========================================================= */

@media(max-width:480px){

  .widow-support-page .widow-hero h1{

    font-size:38px;

  }

  .widow-support-page .widow-hero-actions{

    flex-direction:column;

  }

  .widow-support-page .widow-btn{

    width:100%;

  }

  .widow-support-page .widow-intro-highlight{

    padding:30px 25px;

  }

  .widow-support-page .widow-section-heading{

    margin-bottom:38px;

  }

  .widow-support-page .widow-feature-content{

    padding:35px 24px;

  }

  .widow-support-page .widow-support-actions{

    width:100%;

    flex-direction:column;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .widow-support-page *{

    scroll-behavior:auto !important;

    transition:none !important;

  }

}