/*
=============================================================
 RIC Homepage 2026 — J.14.2
 Universal Device Adaptation

 IMPORTANT:
 Layout is viewport-first, not model-first.

 Auto-detected classes provide safe refinements for:
 - iPhone
 - iPad
 - Samsung Galaxy
 - Samsung tablets
 - Google Pixel
 - Android
=============================================================
*/


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


img,
video,
canvas,
svg{
  max-width:100%;
}


/* =========================================================
   SAFE AREA SUPPORT — iPhone / modern mobile browsers
========================================================= */

@supports (
  padding-left:
    env(safe-area-inset-left)
){

  .ric-view-phone
  .ric-j14-mobile-stage{

    padding-left:
      max(
        18px,
        env(safe-area-inset-left)
      ) !important;

    padding-right:
      max(
        18px,
        env(safe-area-inset-right)
      ) !important;

  }

}


/* =========================================================
   ALL TOUCH DEVICES
========================================================= */

.ric-touch
:is(
  a,
  button,
  input,
  select
){
  touch-action:manipulation;
}


.ric-touch
:is(
  button,
  a
){
  -webkit-tap-highlight-color:
    rgba(0,0,0,.08);
}


/* =========================================================
   PHONE VIEWPORT
   Any manufacturer.
========================================================= */

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

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

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


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

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


.ric-view-phone
.ric-j14-mobile-stage{
  width:100% !important;

  max-width:none !important;
}


/* =========================================================
   TABLET VIEWPORT
   iPad / Samsung Tab / Android tablet.
========================================================= */

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

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

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


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

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


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

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

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


/* =========================================================
   IOS / IPADOS
========================================================= */

.ric-os-ios body,
.ric-os-ipados body{
  -webkit-text-size-adjust:100%;
}


.ric-os-ios
.ric-j14-mobile-title,
.ric-os-ipados
.ric-j14-mobile-title{
  -webkit-font-smoothing:
    antialiased;
}


/* =========================================================
   SAMSUNG INTERNET / GALAXY
========================================================= */

/*
 Samsung Internet's dynamic toolbar can alter viewport height.
 Avoid fixed viewport-height assumptions.
*/

.ric-brand-samsung
.ric-j14-hero,

.ric-brand-samsung
.ric-j14-mobile-stage{
  min-height:0 !important;
  height:auto !important;
}


.ric-brand-samsung.ric-device-tablet
.ric-j14-mobile-stage{
  padding-bottom:
    clamp(30px,4vw,54px) !important;
}


/* =========================================================
   GOOGLE PIXEL
========================================================= */

.ric-brand-google.ric-device-phone
.ric-j14-mobile-stage{
  min-height:0 !important;
}


.ric-brand-google
.ric-j14-mobile-actions a{
  min-height:52px;
}


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

.ric-view-phone.ric-orientation-landscape
.ric-j14-mobile-stage{
  padding-top:
    28px !important;

  padding-bottom:
    28px !important;
}


.ric-view-phone.ric-orientation-landscape
.ric-j14-mobile-title{
  font-size:
    clamp(2.45rem,7vw,3.6rem) !important;

  max-width:13ch !important;
}


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

.ric-view-tablet.ric-orientation-landscape
.ric-j14-mobile-stage{
  padding-left:
    clamp(34px,5vw,72px) !important;

  padding-right:
    clamp(34px,5vw,72px) !important;
}


/* =========================================================
   VALUES — UNIVERSAL DEVICE REFLOW
========================================================= */

.ric-view-tablet
section[aria-label="Rockaway Islamic Center values"]{
  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;
}


.ric-view-phone
section[aria-label="Rockaway Islamic Center values"]{
  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;
}


@media(max-width:390px){

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

}


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

.ric-view-tablet
.ric-j13-knowledge-generation,

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


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

.ric-view-tablet
section[aria-label="Islamic seasonal focus"]
.ric-f-inner,

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


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

.ric-view-phone
section[aria-label="Rockaway Islamic Center expansion"]
.ric-g-compare{
  grid-template-columns:
    1fr !important;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;

    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;
  }

}