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

 TRUE FLUID PAGE SYSTEM

 Desktop:
   1% gutter
   98% usable section
   1% gutter

 The important distinction:

 OLD:
   viewport
      -> narrow legacy wrapper
          -> attempted wide child

 NEW:
   viewport
      -> released wrapper
          -> 98% section
              -> 100% internal grids

 Hero / final CTA / footer remain full bleed.
=============================================================
*/


:root{
  --ric-fluid-desktop-gutter:1%;
  --ric-fluid-section-width:98%;
  --ric-fluid-gap:clamp(12px,1vw,20px);
}


html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}


/* =========================================================
   RELEASE LEGACY ANCESTOR BOTTLENECKS
========================================================= */

main.ric-j11-uncap,
.ric-j11-uncap{
  width:100% !important;
  max-width:none !important;

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

  padding-left:0;
  padding-right:0;

  box-sizing:border-box !important;
}


/* =========================================================
   THE REAL 98% SECTION
========================================================= */

.ric-j11-fluid-root{
  display:block;

  box-sizing:border-box !important;

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

  margin-left:1% !important;
  margin-right:1% !important;
}


/*
 The original component living inside the promoted
 section must also be allowed to use all available width.
*/

.ric-j11-fluid-inner{
  width:100% !important;
  max-width:none !important;

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

  box-sizing:border-box !important;
}


/* Remove previous J.11 viewport-breakout behavior. */

.ric-j11-wide{
  width:100% !important;
  max-width:none !important;

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


/* =========================================================
   VALUES
========================================================= */

.ric-j11-values.ric-j11-fluid-inner,
.ric-j11-values-grid{
  width:100% !important;
  max-width:none !important;
}


.ric-j11-values-grid{
  display:grid !important;

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

  gap:
    clamp(14px,1.5vw,34px) !important;

  align-items:start !important;
}


.ric-j11-values-grid > *{
  min-width:0 !important;
}


/* =========================================================
   PRAYER
========================================================= */

.ric-j11-prayer{
  width:100% !important;
  max-width:none !important;
}


/*
 Keep J.9 responsible for internal Prayer layout.
 J.11.1 only gives it the correct available width.
*/

.ric-j11-prayer
.ric-prayer-grid{
  width:100% !important;
  max-width:none !important;
}


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

.ric-j11-knowledge-layout{
  width:100% !important;
  max-width:none !important;

  display:grid !important;

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

  gap:
    var(--ric-fluid-gap) !important;

  align-items:stretch !important;
}


.ric-j11-knowledge-layout > *{
  min-width:0 !important;
  max-width:none !important;
}


/* Knowledge cards */

.ric-j11-knowledge-layout
:is(
  article,
  section,
  [class*="card"]
){
  box-sizing:border-box;
}


/* =========================================================
   SEASONAL / HIJRI
========================================================= */

.ric-j11-seasonal{
  width:100% !important;
  max-width:none !important;
}


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

.ric-j11-expansion,
.ric-j10-expansion{
  width:100% !important;
  max-width:none !important;
}


.ric-j11-expansion
:is(
  section,
  article,
  [class*="grid"],
  [class*="comparison"]
){
  max-width:none !important;
}


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

.ric-j11-contribute,
.ric-j-contribute{
  width:100% !important;
  max-width:none !important;
}


.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(10px,1vw,18px) !important;
}


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

  min-width:0 !important;
}


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

.ric-j11-lower-grid,
.ric-content-grid.ric-j10-content-grid{
  width:100% !important;
  max-width:none !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(0,.96fr)
    minmax(0,.96fr) !important;

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

  align-items:stretch !important;
}


.ric-content-grid.ric-j10-content-grid
> *{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}


/* =========================================================
   QUICK ACCESS
========================================================= */

.ric-j11-quick-access{
  width:100% !important;
  max-width:none !important;
}


/* =========================================================
   INTERNAL READABILITY
   Wide SECTION — readable TEXT.
========================================================= */

.ric-j11-fluid-root
:is(
  p,
  .ric-description,
  .ric-copy
){
  /*
   Do not globally stretch paragraphs into
   300-character lines on 4K displays.
  */

  text-wrap:pretty;
}


/* =========================================================
   IMAGES / MEDIA
========================================================= */

.ric-j11-fluid-root img,
.ric-j11-fluid-root video,
.ric-j11-fluid-root canvas{
  max-width:100%;
}


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

@media(max-width:1100px){

  .ric-j11-fluid-root{
    width:calc(100% - 24px) !important;

    margin-left:12px !important;
    margin-right:12px !important;
  }


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


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


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


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


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

}


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

@media(max-width:680px){

  .ric-j11-fluid-root{
    width:calc(100% - 16px) !important;

    margin-left:8px !important;
    margin-right:8px !important;
  }


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

    gap:
      16px 10px !important;
  }


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


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


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

}


/* =========================================================
   FULL BLEED ITEMS ARE DELIBERATELY NOT TAGGED
========================================================= */

/*
 Hero
 Be Part of What Comes Next
 Main Footer

 remain width:100% using their existing production styles.
*/

/*
=============================================================
 RIC Homepage 2026 — Stage J.11.2
 HARD VIEWPORT RAIL

 Fixes components that remain trapped inside narrow legacy
 centered wrappers on ultrawide monitors.

 Desktop:
   1% left
   98% section
   1% right
=============================================================
*/


/* =========================================================
   COMMON DESKTOP RAIL
========================================================= */

@media (min-width:1101px){

  /*
   These are the real homepage content blocks.

   position:left:50% + translateX(-50%) lets the section
   escape a narrow centered parent without needing to
   restructure production HTML.
  */

  .ric-j11-values,
  .ric-j11-prayer,
  .ric-j11-quick-access,
  .ric-j11-knowledge,
  .ric-j11-knowledge-layout,
  .ric-j11-seasonal,
  .ric-j11-expansion,
  .ric-j10-expansion,
  .ric-j11-contribute,
  .ric-j-contribute,
  .ric-j11-lower-grid,
  .ric-content-grid.ric-j10-content-grid{

    box-sizing:border-box !important;

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

    position:relative !important;

    left:50% !important;

    transform:
      translateX(-50%) !important;

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


  /*
   Anything immediately inside the section should use
   all of the available section width.
  */

  .ric-j11-values > *,
  .ric-j11-prayer > *,
  .ric-j11-quick-access > *,
  .ric-j11-knowledge > *,
  .ric-j11-knowledge-layout > *,
  .ric-j11-seasonal > *,
  .ric-j11-expansion > *,
  .ric-j10-expansion > *,
  .ric-j11-contribute > *,
  .ric-j-contribute > *,
  .ric-j11-lower-grid > *,
  .ric-content-grid.ric-j10-content-grid > *{

    max-width:none !important;

    box-sizing:border-box !important;
  }

}


/* =========================================================
   VALUES
========================================================= */

@media (min-width:1101px){

  .ric-j11-values-grid{
    width:100% !important;
    max-width:none !important;

    display:grid !important;

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

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

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

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


  .ric-j11-values-grid > *{
    width:100% !important;
    min-width:0 !important;
  }

}


/* =========================================================
   PRAYER
========================================================= */

@media (min-width:1101px){

  .ric-j11-prayer{
    width:98vw !important;
    max-width:98vw !important;
  }


  .ric-j11-prayer .ric-prayer-grid{
    width:100% !important;
    max-width:none !important;
  }

}


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

@media (min-width:1101px){

  .ric-j11-knowledge,
  .ric-j11-knowledge-layout{
    width:98vw !important;
    max-width:98vw !important;
  }


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

    grid-template-columns:
      minmax(0,1.18fr)
      minmax(0,.82fr) !important;

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

    align-items:stretch !important;
  }


  .ric-j11-knowledge-layout > *{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }


  /*
   Let the three knowledge cards expand across their column.
  */

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

}


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

@media (min-width:1101px){

  .ric-j11-seasonal{
    width:98vw !important;
    max-width:98vw !important;

    min-height:
      clamp(150px,9vw,210px) !important;
  }

}


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

@media (min-width:1101px){

  .ric-j11-expansion,
  .ric-j10-expansion{
    width:98vw !important;
    max-width:98vw !important;

    padding-left:
      clamp(22px,1.4vw,40px) !important;

    padding-right:
      clamp(22px,1.4vw,40px) !important;
  }


  /*
   Any comparison/grid inside Expansion gets the full rail.
  */

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

}


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

@media (min-width:1101px){

  .ric-j11-contribute,
  .ric-j-contribute{
    width:98vw !important;
    max-width:98vw !important;
  }


  .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,20px) !important;
  }


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

    min-width:0 !important;
  }

}


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

@media (min-width:1101px){

  .ric-j11-lower-grid,
  .ric-content-grid.ric-j10-content-grid{
    width:98vw !important;
    max-width:98vw !important;

    display:grid !important;

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

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


  .ric-j11-lower-grid > *,
  .ric-content-grid.ric-j10-content-grid > *{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

}


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

@media (min-width:681px) and (max-width:1100px){

  .ric-j11-values,
  .ric-j11-prayer,
  .ric-j11-quick-access,
  .ric-j11-knowledge,
  .ric-j11-knowledge-layout,
  .ric-j11-seasonal,
  .ric-j11-expansion,
  .ric-j10-expansion,
  .ric-j11-contribute,
  .ric-j-contribute,
  .ric-j11-lower-grid,
  .ric-content-grid.ric-j10-content-grid{

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

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

    position:relative !important;

    left:50% !important;

    transform:
      translateX(-50%) !important;

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

}


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

@media (max-width:680px){

  .ric-j11-values,
  .ric-j11-prayer,
  .ric-j11-quick-access,
  .ric-j11-knowledge,
  .ric-j11-knowledge-layout,
  .ric-j11-seasonal,
  .ric-j11-expansion,
  .ric-j10-expansion,
  .ric-j11-contribute,
  .ric-j-contribute,
  .ric-j11-lower-grid,
  .ric-content-grid.ric-j10-content-grid{

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

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

    position:relative !important;

    left:50% !important;

    transform:
      translateX(-50%) !important;

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


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


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


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

}


/* =========================================================
   DO NOT TOUCH FULL-BLEED COMPONENTS
========================================================= */

/*
 Hero remains 100%.
 Final CTA remains 100%.
 Main footer remains 100%.

 They intentionally do NOT receive the 98vw rail.
*/


/*
=============================================================
 RIC HOMEPAGE — FINAL FLUID WIDTH OVERRIDE

 LARGE MONITOR + LAPTOP:
   1% left
   98% content
   1% right

 TABLET:
   12px safe gutter

 MOBILE:
   8px safe gutter

 Cards/grids grow with available section width.
=============================================================
*/


/* =========================================================
   DESKTOP / LAPTOP / LARGE MONITOR
========================================================= */

@media (min-width:1024px){

  /*
   Main Homepage content sections.
   Use viewport width so legacy centered parents
   cannot make them narrow again.
  */

  .ric-j11-values,
  .ric-j11-prayer,
  .ric-j11-quick-access,
  .ric-j11-knowledge,
  .ric-j11-knowledge-layout,
  .ric-j11-seasonal,
  .ric-j11-expansion,
  .ric-j10-expansion,
  .ric-j11-contribute,
  .ric-j-contribute,
  .ric-j11-lower-grid,
  .ric-content-grid.ric-j10-content-grid{

    box-sizing:border-box !important;

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

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

    position:relative !important;

    left:50% !important;

    transform:
      translateX(-50%) !important;
  }


  /*
   Anything inside a 98% section may use all of it.
  */

  .ric-j11-values > *,
  .ric-j11-prayer > *,
  .ric-j11-quick-access > *,
  .ric-j11-knowledge > *,
  .ric-j11-knowledge-layout > *,
  .ric-j11-seasonal > *,
  .ric-j11-expansion > *,
  .ric-j10-expansion > *,
  .ric-j11-contribute > *,
  .ric-j-contribute > *,
  .ric-j11-lower-grid > *,
  .ric-content-grid.ric-j10-content-grid > *{

    box-sizing:border-box !important;

    max-width:none !important;
    min-width:0 !important;
  }


  /* -------------------------------------------------------
     Values
  ------------------------------------------------------- */

  .ric-j11-values-grid{
    width:100% !important;
    max-width:none !important;

    display:grid !important;

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

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

    padding-inline:
      clamp(20px,1.5vw,42px) !important;
  }


  /* -------------------------------------------------------
     Prayer
  ------------------------------------------------------- */

  .ric-j11-prayer{
    width:98vw !important;
    max-width:98vw !important;
  }


  .ric-j11-prayer .ric-prayer-grid{
    width:100% !important;
    max-width:none !important;
  }


  /* -------------------------------------------------------
     Knowledge + Every Generation
  ------------------------------------------------------- */

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

    grid-template-columns:
      minmax(0,1.2fr)
      minmax(0,.8fr) !important;

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

    align-items:stretch !important;
  }


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


  /*
   Knowledge cards themselves should fill their column.
  */

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


  /* -------------------------------------------------------
     Seasonal / Hijri
  ------------------------------------------------------- */

  .ric-j11-seasonal{
    width:98vw !important;
    max-width:98vw !important;
  }


  /* -------------------------------------------------------
     Expansion
  ------------------------------------------------------- */

  .ric-j11-expansion,
  .ric-j10-expansion{
    width:98vw !important;
    max-width:98vw !important;

    padding-left:
      clamp(20px,1.5vw,42px) !important;

    padding-right:
      clamp(20px,1.5vw,42px) !important;
  }


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


  /* -------------------------------------------------------
     Contributions
  ------------------------------------------------------- */

  .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-j-contribute-card{
    width:100% !important;
    max-width:none !important;

    min-height:
      clamp(110px,7vw,145px) !important;
  }


  /* -------------------------------------------------------
     Events / Learning / Support
  ------------------------------------------------------- */

  .ric-j11-lower-grid,
  .ric-content-grid.ric-j10-content-grid{

    display:grid !important;

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

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


  .ric-j11-lower-grid > *,
  .ric-content-grid.ric-j10-content-grid > *{
    width:100% !important;
    max-width:none !important;
  }

}


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

@media (min-width:1800px){

  /*
   Same 98% page rail.

   Increase internal spacing/font/card comfort slightly,
   rather than leaving giant unused white space.
  */

  .ric-j11-values-grid{
    gap:
      clamp(24px,1.7vw,52px) !important;
  }


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


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


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

}


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

@media (min-width:681px) and (max-width:1023px){

  .ric-j11-values,
  .ric-j11-prayer,
  .ric-j11-quick-access,
  .ric-j11-knowledge,
  .ric-j11-knowledge-layout,
  .ric-j11-seasonal,
  .ric-j11-expansion,
  .ric-j10-expansion,
  .ric-j11-contribute,
  .ric-j-contribute,
  .ric-j11-lower-grid,
  .ric-content-grid.ric-j10-content-grid{

    box-sizing:border-box !important;

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

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

    position:relative !important;

    left:50% !important;

    transform:
      translateX(-50%) !important;

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


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


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


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


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


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

}


/* =========================================================
   PHONE
========================================================= */

@media (max-width:680px){

  .ric-j11-values,
  .ric-j11-prayer,
  .ric-j11-quick-access,
  .ric-j11-knowledge,
  .ric-j11-knowledge-layout,
  .ric-j11-seasonal,
  .ric-j11-expansion,
  .ric-j10-expansion,
  .ric-j11-contribute,
  .ric-j-contribute,
  .ric-j11-lower-grid,
  .ric-content-grid.ric-j10-content-grid{

    box-sizing:border-box !important;

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

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

    position:relative !important;

    left:50% !important;

    transform:
      translateX(-50%) !important;

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


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


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


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


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


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

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width:390px){

  .ric-j11-values-grid,
  .ric-j10-contribute-grid{
    grid-template-columns:
      1fr !important;
  }

}


/* =========================================================
   KEEP THESE FULL BLEED
========================================================= */

/*
 Hero = full screen width
 Final CTA = full screen width
 Footer = full screen width
*/