/*
=============================================================
 RIC Homepage 2026 — Stage J.12

 NEW RESPONSIVE CONTENT CANVAS

 This avoids legacy max-width wrappers entirely.

 Desktop/laptop:
   1% left
   98% canvas
   1% right

 Tablet:
   12px gutters

 Phone:
   8px gutters
=============================================================
*/


#ric-j12-canvas{
  box-sizing:border-box;

  width:98vw;
  max-width:none;

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

  padding:0;

  display:flex;
  flex-direction:column;

  gap:
    clamp(18px,2vw,34px);
}


/*
 Everything moved into the J.12 canvas becomes a true
 full-width section inside the 98% rail.
*/

#ric-j12-canvas
> .ric-j12-section{
  box-sizing:border-box !important;

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

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

  left:auto !important;

  transform:none !important;
}


/*
 Neutralize previous J.11 viewport breakout rules once a
 component is inside the new canvas.
*/

#ric-j12-canvas
.ric-j11-wide,

#ric-j12-canvas
.ric-j11-fluid-root,

#ric-j12-canvas
.ric-j11-fluid-inner,

#ric-j12-canvas
.ric-j11-knowledge,

#ric-j12-canvas
.ric-j11-knowledge-layout,

#ric-j12-canvas
.ric-j11-seasonal,

#ric-j12-canvas
.ric-j11-expansion,

#ric-j12-canvas
.ric-j11-contribute,

#ric-j12-canvas
.ric-j11-lower-grid,

#ric-j12-canvas
.ric-j10-expansion,

#ric-j12-canvas
.ric-j-contribute,

#ric-j12-canvas
.ric-content-grid.ric-j10-content-grid{

  box-sizing:border-box !important;

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

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

  position:relative !important;

  left:auto !important;

  transform:none !important;
}


/* =========================================================
   KNOWLEDGE + EVERY GENERATION
========================================================= */

#ric-j12-canvas
.ric-j11-knowledge-layout{
  display:grid !important;

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

  gap:
    clamp(16px,1.25vw,30px) !important;

  align-items:stretch !important;
}


#ric-j12-canvas
.ric-j11-knowledge-layout
> *{
  width:100% !important;
  max-width:none !important;

  min-width:0 !important;
}


/*
 Make the internal knowledge card row actually use the
 space available on large screens.
*/

#ric-j12-canvas
.ric-j11-knowledge
:is(
  [class*="grid"],
  [class*="cards"]
){
  width:100% !important;
  max-width:none !important;
}


/* =========================================================
   SEASONAL / ISLAMIC CALENDAR
========================================================= */

#ric-j12-canvas
.ric-j11-seasonal{
  width:100% !important;
  max-width:none !important;

  min-height:
    clamp(150px,9vw,220px);
}


/* =========================================================
   EXPANSION
========================================================= */

#ric-j12-canvas
.ric-j10-expansion,

#ric-j12-canvas
.ric-j11-expansion{
  width:100% !important;
  max-width:none !important;

  padding-left:
    clamp(18px,1.5vw,38px) !important;

  padding-right:
    clamp(18px,1.5vw,38px) !important;
}


#ric-j12-canvas
.ric-j10-expansion
:is(
  [class*="grid"],
  [class*="comparison"],
  [class*="cards"]
),

#ric-j12-canvas
.ric-j11-expansion
:is(
  [class*="grid"],
  [class*="comparison"],
  [class*="cards"]
){
  width:100% !important;
  max-width:none !important;
}


/* =========================================================
   CONTRIBUTIONS
========================================================= */

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


#ric-j12-canvas
.ric-j10-contribute-grid{
  width:100% !important;
  max-width:none !important;

  display:grid !important;

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

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


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

  min-width:0 !important;

  min-height:
    clamp(108px,6vw,142px) !important;
}


/* =========================================================
   EVENTS / LEARNING / COMMUNITY SUPPORT
========================================================= */

#ric-j12-canvas
.ric-content-grid.ric-j10-content-grid,

#ric-j12-canvas
.ric-j11-lower-grid{
  display:grid !important;

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

  gap:
    clamp(14px,1vw,24px) !important;

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


#ric-j12-canvas
.ric-content-grid.ric-j10-content-grid
> *,

#ric-j12-canvas
.ric-j11-lower-grid
> *{
  width:100% !important;
  max-width:none !important;

  min-width:0 !important;
}


/* =========================================================
   LARGE / ULTRAWIDE
========================================================= */

@media(min-width:1800px){

  #ric-j12-canvas{
    gap:
      clamp(22px,1.6vw,42px);
  }


  #ric-j12-canvas
  .ric-j11-knowledge-layout{
    gap:
      clamp(22px,1.4vw,38px) !important;
  }


  #ric-j12-canvas
  .ric-j10-contribute-grid{
    gap:
      clamp(16px,1.1vw,28px) !important;
  }


  #ric-j12-canvas
  .ric-content-grid.ric-j10-content-grid{
    gap:
      clamp(18px,1.2vw,30px) !important;
  }

}


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

@media(max-width:1023px){

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

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


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


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


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


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

}


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

@media(max-width:680px){

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

    gap:16px;
  }


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


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


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

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media(max-width:390px){

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

}


/* =========================================================
   VACATED LEGACY WRAPPERS
========================================================= */

.ric-j12-vacated{
  display:none !important;
}