/*
=============================================================
 RIC Homepage 2026 — Stage J.10
 Lower Homepage Finish

 Does NOT style or reposition:
 - Hero
 - Prayer Times
 - Next Salah
 - Live Qur'an
 - Adhan
=============================================================
*/


/* =========================================================
   CONSISTENT LOWER-PAGE WIDTH
========================================================= */

.ric-j10-expansion,
.ric-j-contribute,
.ric-content-grid.ric-j10-content-grid{
  width:min(
    1600px,
    calc(100% - clamp(28px,4vw,72px))
  ) !important;

  margin-left:auto !important;
  margin-right:auto !important;
}


/* =========================================================
   EXPANSION — LIGHT POLISH ONLY
========================================================= */

.ric-j10-expansion{
  position:relative;

  border-radius:18px !important;

  box-shadow:
    0 14px 40px rgba(0,65,48,.08) !important;
}


/* =========================================================
   HOW YOU CAN CONTRIBUTE
========================================================= */

.ric-j-contribute{
  position:relative;

  margin-top:
    clamp(26px,3vw,44px) !important;

  margin-bottom:
    clamp(22px,2.6vw,36px) !important;

  padding:
    clamp(18px,2vw,26px)
    clamp(18px,2.3vw,30px) !important;

  border:
    1px solid rgba(0,91,68,.10);

  border-radius:
    18px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.94),
      rgba(250,248,238,.93)
    );

  box-shadow:
    0 12px 35px rgba(0,71,53,.07);
}


.ric-j-contribute > h2{
  margin:
    0 0 4px !important;

  color:
    #07589c !important;

  font-size:
    clamp(1.65rem,2.35vw,2.5rem) !important;

  line-height:
    1.05 !important;
}


.ric-j-contribute > p{
  max-width:
    900px;

  margin:
    0 0 16px !important;

  color:
    #5d716b !important;

  line-height:
    1.5 !important;
}


.ric-j10-contribute-grid{
  display:grid !important;

  grid-template-columns:
    repeat(6,minmax(0,1fr)) !important;

  gap:
    clamp(8px,1vw,13px) !important;
}


.ric-j-contribute-card{
  position:relative !important;

  min-width:0 !important;
  min-height:108px !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  gap:5px !important;

  padding:
    14px 10px !important;

  text-align:center !important;

  border:
    1px solid rgba(0,87,65,.10) !important;

  border-radius:
    13px !important;

  background:
    rgba(255,255,255,.95) !important;

  box-shadow:
    0 6px 18px rgba(0,65,48,.06) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}


.ric-j-contribute-card:hover{
  transform:
    translateY(-3px) !important;

  border-color:
    rgba(222,165,43,.38) !important;

  box-shadow:
    0 10px 24px rgba(0,65,48,.10) !important;
}


.ric-j-contribute-card strong,
.ric-j-contribute-card b{
  color:
    #0a5c48 !important;

  font-size:
    .98rem !important;
}


.ric-j-contribute-card p,
.ric-j-contribute-card small{
  color:
    #667872 !important;

  line-height:
    1.32 !important;
}


/* =========================================================
   LOWER THREE-CARD CONTENT GRID
========================================================= */

.ric-content-grid.ric-j10-content-grid{
  display:grid !important;

  grid-template-columns:
    minmax(0,1.06fr)
    minmax(0,.9fr)
    minmax(0,.9fr) !important;

  gap:
    clamp(10px,1vw,15px) !important;

  align-items:stretch !important;

  margin-top:
    clamp(18px,2vw,26px) !important;

  margin-bottom:
    clamp(26px,3vw,42px) !important;
}


.ric-content-grid.ric-j10-content-grid
> article{
  position:relative;

  min-width:0 !important;
  height:auto !important;
  min-height:245px !important;

  overflow:hidden;

  border-radius:
    16px !important;

  box-shadow:
    0 10px 30px rgba(0,65,48,.08) !important;
}


/* Upcoming Events */

.ric-j10-events{
  background:
    rgba(255,255,255,.97) !important;

  border:
    1px solid rgba(0,88,66,.11) !important;
}


.ric-j10-events h2,
.ric-j10-events h3{
  color:
    #174f42 !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    clamp(1.25rem,1.6vw,1.65rem) !important;
}


/* Featured learning */

.ric-j10-featured{
  color:#fff !important;

  background:
    radial-gradient(
      circle at 88% 100%,
      rgba(205,157,44,.15),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #00392e,
      #004f3e
    ) !important;

  border:
    1px solid rgba(218,170,48,.22) !important;
}


.ric-j10-featured h2,
.ric-j10-featured h3{
  color:
    #f1c64f !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;
}


.ric-j10-featured p,
.ric-j10-featured small{
  color:
    rgba(255,255,255,.84) !important;
}


/* Community support */

.ric-j10-support{
  color:#fff !important;

  background:
    linear-gradient(
      145deg,
      #075f48,
      #00503d
    ) !important;

  border:
    1px solid rgba(255,255,255,.10) !important;
}


.ric-j10-support h2,
.ric-j10-support h3{
  color:
    #f2c94c !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;
}


.ric-j10-support p,
.ric-j10-support small{
  color:
    rgba(255,255,255,.86) !important;
}


/* Lower-page action buttons */

.ric-j10-featured a,
.ric-j10-support a{
  border-radius:
    999px !important;

  font-weight:
    800 !important;
}


/* =========================================================
   FINAL CTA
========================================================= */

.ric-j10-final-cta{
  position:relative;

  isolation:isolate;

  width:100%;

  overflow:hidden;

  margin:
    clamp(18px,2vw,28px)
    0
    0;

  padding:
    clamp(26px,3vw,42px)
    clamp(20px,4vw,70px);

  color:#fff;

  text-align:center;

  background:
    radial-gradient(
      circle at 14% 30%,
      rgba(38,152,110,.32),
      transparent 30%
    ),
    radial-gradient(
      circle at 86% 20%,
      rgba(226,172,50,.14),
      transparent 26%
    ),
    linear-gradient(
      120deg,
      #00392d 0%,
      #00513d 50%,
      #00372c 100%
    );

  border-top:
    1px solid rgba(225,174,48,.34);

  border-bottom:
    1px solid rgba(255,255,255,.08);
}


.ric-j10-final-cta::before,
.ric-j10-final-cta::after{
  content:"";

  position:absolute;

  width:280px;
  height:280px;

  border:
    1px solid rgba(231,183,62,.13);

  border-radius:
    50%;

  pointer-events:none;
}


.ric-j10-final-cta::before{
  left:-120px;
  bottom:-190px;
}


.ric-j10-final-cta::after{
  right:-120px;
  top:-190px;
}


.ric-j10-final-inner{
  position:relative;

  z-index:1;

  width:min(
    1250px,
    100%
  );

  margin:
    0 auto;
}


.ric-j10-final-eyebrow{
  display:inline-flex;

  margin-bottom:
    6px;

  color:
    #f1c64f;

  font-size:
    .76rem;

  font-weight:
    900;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}


.ric-j10-final-cta h2{
  margin:
    0;

  color:#fff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.75rem,2.8vw,3rem);

  line-height:
    1.05;
}


.ric-j10-final-cta p{
  max-width:
    760px;

  margin:
    9px auto 18px;

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

  font-size:
    clamp(.95rem,1.2vw,1.08rem);

  line-height:
    1.5;
}


.ric-j10-final-actions{
  display:flex;

  align-items:center;
  justify-content:center;

  flex-wrap:wrap;

  gap:10px;
}


.ric-j10-final-actions a{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-height:42px;

  padding:
    10px 18px;

  border-radius:
    999px;

  text-decoration:none;

  font-weight:
    850;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.ric-j10-final-actions a:hover{
  transform:
    translateY(-2px);
}


.ric-j10-support-btn{
  color:
    #173b31 !important;

  background:
    #f2c650 !important;

  box-shadow:
    0 7px 20px rgba(0,0,0,.15);
}


.ric-j10-community-btn{
  color:#fff !important;

  background:
    rgba(255,255,255,.08) !important;

  border:
    1px solid rgba(255,255,255,.62) !important;
}


/* =========================================================
   FOOTER TRANSITION
========================================================= */

.ric-j10-final-cta + footer,
footer.ric-j10-footer{
  margin-top:0 !important;

  border-top:
    0 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

  .ric-j10-contribute-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }


  .ric-content-grid.ric-j10-content-grid{
    grid-template-columns:
      1fr 1fr !important;
  }


  .ric-j10-events{
    grid-column:
      1 / -1;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:680px){

  .ric-j10-expansion,
  .ric-j-contribute,
  .ric-content-grid.ric-j10-content-grid{
    width:
      calc(100% - 22px) !important;
  }


  .ric-j-contribute{
    padding:
      16px 12px !important;
  }


  .ric-j10-contribute-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  .ric-j-contribute-card{
    min-height:
      100px !important;
  }


  .ric-content-grid.ric-j10-content-grid{
    grid-template-columns:
      1fr !important;
  }


  .ric-j10-events{
    grid-column:
      auto;
  }


  .ric-content-grid.ric-j10-content-grid
  > article{
    min-height:
      0 !important;
  }


  .ric-j10-final-cta{
    padding:
      28px 16px;
  }

}


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

  .ric-j-contribute-card,
  .ric-j10-final-actions a{
    transition:none !important;
  }

}