/*
=============================================================
 RIC Homepage 2026 — J.13
 Exact production selectors supplied by RIC.

 Large desktop/laptop:
  1% left | 98% usable content | 1% right

 Tablet/mobile automatically reorganize.
=============================================================
*/


/* =========================================================
   1. VALUES
========================================================= */

section[aria-label="Rockaway Islamic Center values"]{
  box-sizing:border-box !important;

  width:98vw !important;
  max-width:98vw !important;

  position:relative !important;
  left:50% !important;
  transform:translateX(-50%) !important;

  margin:
    0 0
    clamp(18px,1.5vw,28px) !important;

  padding:
    clamp(22px,1.6vw,38px)
    clamp(20px,1.5vw,40px) !important;

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

  gap:
    clamp(16px,1.4vw,38px) !important;

  align-items:stretch !important;
}


section[aria-label="Rockaway Islamic Center values"]
.ric-j-value{
  min-width:0 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;

  text-align:center !important;

  padding:
    clamp(12px,1vw,20px) !important;
}


section[aria-label="Rockaway Islamic Center values"]
.ric-j-value-icon{
  width:
    clamp(54px,3.7vw,82px) !important;

  height:
    clamp(54px,3.7vw,82px) !important;

  flex:0 0 auto;
}


section[aria-label="Rockaway Islamic Center values"]
.ric-j-value h3{
  margin:
    10px 0 6px !important;

  font-size:
    clamp(1rem,1vw,1.35rem) !important;
}


section[aria-label="Rockaway Islamic Center values"]
.ric-j-value p{
  margin:0 !important;

  max-width:
    28ch !important;

  font-size:
    clamp(.78rem,.72vw,1rem) !important;

  line-height:1.45 !important;
}


/* =========================================================
   2. KNOWLEDGE + GENERATION ROW
========================================================= */

#ric-j12-canvas
.ric-j13-knowledge-generation{
  width:100% !important;
  max-width:none !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(0,.85fr) !important;

  gap:
    clamp(16px,1.2vw,28px) !important;

  align-items:stretch !important;
}


/* ---------------------------------------------------------
   Knowledge
--------------------------------------------------------- */

#ric-j12-canvas
.ric-j-knowledge-panel{
  box-sizing:border-box !important;

  width:100% !important;
  max-width:none !important;

  min-width:0 !important;

  padding:
    clamp(22px,1.6vw,36px) !important;

  border-radius:
    clamp(16px,1vw,22px) !important;

  display:flex !important;
  flex-direction:column !important;
}


.ric-j13-knowledge-intro{
  margin:
    4px 0
    clamp(16px,1.2vw,24px);

  max-width:78ch;

  color:#546a63;

  font-size:
    clamp(.88rem,.82vw,1.08rem);

  line-height:1.55;
}


.ric-j13-knowledge-cards{
  width:100% !important;

  display:grid !important;

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

  gap:
    clamp(12px,1vw,20px) !important;
}


.ric-j13-knowledge-cards > *{
  width:100% !important;
  max-width:none !important;

  min-width:0 !important;
}


.ric-j13-knowledge-focus{
  margin-top:
    clamp(14px,1.1vw,22px);

  display:grid;

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

  gap:8px;
}


.ric-j13-knowledge-focus span{
  min-width:0;

  padding:
    9px 8px;

  border:
    1px solid rgba(4,92,70,.14);

  border-radius:999px;

  background:
    rgba(4,92,70,.055);

  color:#075c49;

  text-align:center;

  font-size:
    clamp(.68rem,.65vw,.82rem);

  font-weight:800;
}


/* ---------------------------------------------------------
   Generation — right side
--------------------------------------------------------- */

#ric-j12-canvas
.ric-j-generation{
  box-sizing:border-box !important;

  width:100% !important;
  max-width:none !important;

  min-width:0 !important;

  height:100% !important;

  padding:
    clamp(22px,1.7vw,38px) !important;

  display:flex !important;
  flex-direction:column !important;

  justify-content:center !important;

  border-radius:
    clamp(16px,1vw,22px) !important;
}


#ric-j12-canvas
.ric-j-generation h2,
#ric-j12-canvas
.ric-j-generation h3{
  font-size:
    clamp(1.55rem,1.65vw,2.35rem) !important;

  line-height:1.08 !important;

  margin-bottom:10px !important;
}


#ric-j12-canvas
.ric-j-generation p{
  max-width:66ch !important;

  font-size:
    clamp(.88rem,.82vw,1.08rem) !important;

  line-height:1.55 !important;
}


.ric-j13-generation-focus{
  margin-top:
    clamp(16px,1.2vw,24px);

  display:grid;

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

  gap:9px;
}


.ric-j13-generation-focus span{
  padding:
    clamp(10px,.75vw,14px);

  border-radius:12px;

  border:
    1px solid rgba(12,83,153,.12);

  background:
    #f5f8fc;

  color:#0d5399;

  text-align:center;

  font-size:
    clamp(.72rem,.66vw,.86rem);

  font-weight:800;
}


/* =========================================================
   3. ISLAMIC SEASONAL FOCUS
========================================================= */

#ric-j12-canvas
section[aria-label="Islamic seasonal focus"]{
  box-sizing:border-box !important;

  width:100% !important;
  max-width:none !important;

  margin:0 !important;

  border-radius:
    clamp(15px,1vw,22px) !important;

  overflow:hidden;
}


#ric-j12-canvas
section[aria-label="Islamic seasonal focus"]
.ric-f-inner{
  width:100% !important;
  max-width:none !important;

  min-height:
    clamp(160px,10vw,230px) !important;

  padding:
    clamp(22px,1.6vw,38px)
    clamp(24px,2vw,48px) !important;

  display:grid !important;

  grid-template-columns:
    minmax(260px,.85fr)
    minmax(0,1.7fr)
    minmax(230px,.65fr) !important;

  gap:
    clamp(20px,2vw,48px) !important;

  align-items:center !important;
}


#ric-j12-canvas
.ric-f-title{
  font-size:
    clamp(2rem,2.2vw,3.15rem) !important;
}


#ric-j12-canvas
.ric-f-message{
  max-width:78ch !important;

  font-size:
    clamp(.9rem,.84vw,1.1rem) !important;

  line-height:1.55 !important;
}


#ric-j12-canvas
.ric-j-season-tools{
  margin-top:
    clamp(14px,1vw,20px) !important;

  display:grid !important;

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

  gap:8px !important;
}


#ric-j12-canvas
.ric-j-season-tool{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;

  min-width:0;

  padding:
    9px 8px !important;

  text-align:center !important;
}


#ric-j12-canvas
.ric-f-actions{
  display:grid !important;

  grid-template-columns:1fr !important;

  gap:10px !important;
}


#ric-j12-canvas
.ric-f-actions a{
  width:100% !important;

  justify-content:center !important;

  text-align:center !important;

  padding:
    12px 16px !important;
}


/* =========================================================
   4. EXPANSION
========================================================= */

#ric-j12-canvas
section[aria-label="Rockaway Islamic Center expansion"]{
  box-sizing:border-box !important;

  width:100% !important;
  max-width:none !important;

  margin:0 !important;

  padding:
    clamp(24px,2vw,48px) !important;

  border-radius:
    clamp(16px,1vw,24px) !important;
}


#ric-j12-canvas
.ric-g-head{
  width:100% !important;

  display:grid !important;

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

  gap:
    clamp(18px,2vw,40px) !important;

  align-items:end !important;
}


#ric-j12-canvas
.ric-g-title{
  font-size:
    clamp(2rem,2.25vw,3.3rem) !important;

  line-height:1.04 !important;
}


#ric-j12-canvas
.ric-g-intro{
  max-width:78ch !important;

  font-size:
    clamp(.9rem,.85vw,1.12rem) !important;

  line-height:1.55 !important;
}


.ric-j13-expansion-purpose{
  margin-top:
    clamp(15px,1.2vw,24px);

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:
    clamp(8px,.8vw,14px);
}


.ric-j13-expansion-purpose span{
  padding:
    clamp(10px,.8vw,14px);

  border:
    1px solid rgba(3,91,68,.14);

  border-radius:12px;

  background:
    rgba(4,92,70,.055);

  color:#075c49;

  text-align:center;

  font-weight:850;

  font-size:
    clamp(.72rem,.68vw,.9rem);
}


#ric-j12-canvas
.ric-g-compare{
  width:100% !important;

  margin-top:
    clamp(22px,1.6vw,34px) !important;

  display:grid !important;

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

  gap:
    clamp(14px,1.2vw,26px) !important;

  align-items:stretch !important;
}


#ric-j12-canvas
.ric-g-card{
  width:100% !important;
  max-width:none !important;
}


#ric-j12-canvas
.ric-g-media{
  width:100% !important;

  height:
    clamp(320px,24vw,620px) !important;

  min-height:320px !important;
}


#ric-j12-canvas
.ric-g-placeholder{
  width:
    min(72%,700px) !important;

  min-height:120px;

  padding:
    clamp(20px,1.5vw,34px) !important;
}


#ric-j12-canvas
.ric-g-stats{
  width:100% !important;

  display:grid !important;

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

  gap:
    clamp(10px,.9vw,18px) !important;

  margin-top:
    clamp(14px,1vw,20px) !important;
}


#ric-j12-canvas
.ric-g-stat{
  min-width:0 !important;

  padding:
    clamp(14px,1vw,20px) !important;
}


#ric-j12-canvas
.ric-g-stat-value{
  font-size:
    clamp(1.65rem,1.7vw,2.5rem) !important;
}


/* =========================================================
   J.12 CANVAS
========================================================= */

#ric-j12-canvas{
  width:98vw !important;
  max-width:98vw !important;

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

  gap:
    clamp(18px,1.5vw,30px) !important;
}


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

@media(max-width:1180px){

  section[aria-label="Rockaway Islamic Center values"]{
    width:
      calc(100vw - 24px) !important;

    max-width:
      calc(100vw - 24px) !important;

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


  #ric-j12-canvas{
    width:
      calc(100vw - 24px) !important;

    max-width:
      calc(100vw - 24px) !important;
  }


  #ric-j12-canvas
  .ric-j13-knowledge-generation{
    grid-template-columns:
      1fr !important;
  }


  #ric-j12-canvas
  section[aria-label="Islamic seasonal focus"]
  .ric-f-inner{
    grid-template-columns:
      1fr !important;
  }


  #ric-j12-canvas
  .ric-f-actions{
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }

}


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

@media(max-width:680px){

  section[aria-label="Rockaway Islamic Center values"]{
    width:
      calc(100vw - 16px) !important;

    max-width:
      calc(100vw - 16px) !important;

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

    padding:
      16px 10px !important;
  }


  #ric-j12-canvas{
    width:
      calc(100vw - 16px) !important;

    max-width:
      calc(100vw - 16px) !important;
  }


  .ric-j13-knowledge-cards{
    grid-template-columns:
      1fr !important;
  }


  .ric-j13-knowledge-focus{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .ric-j13-generation-focus{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  #ric-j12-canvas
  .ric-j-season-tools{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  #ric-j12-canvas
  .ric-f-actions{
    grid-template-columns:
      1fr !important;
  }


  #ric-j12-canvas
  .ric-g-head{
    grid-template-columns:
      1fr !important;
  }


  .ric-j13-expansion-purpose{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  #ric-j12-canvas
  .ric-g-compare{
    grid-template-columns:
      1fr !important;
  }


  #ric-j12-canvas
  .ric-g-arrow{
    transform:rotate(90deg);
    justify-self:center;
  }


  #ric-j12-canvas
  .ric-g-media{
    height:
      clamp(280px,70vw,440px) !important;
  }


  #ric-j12-canvas
  .ric-g-stats{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:390px){

  section[aria-label="Rockaway Islamic Center values"]{
    grid-template-columns:1fr !important;
  }


  .ric-j13-expansion-purpose,
  #ric-j12-canvas .ric-g-stats{
    grid-template-columns:1fr !important;
  }

}