/*
=============================================================
 RIC Homepage 2026 — J.14.1

 HARD MOBILE/TABLET HERO

 Desktop >1180:
   Original production hero remains visible.

 Tablet / iPad / iPhone <=1180:
   Legacy content is hidden.
   New clean responsive content layer is displayed.

 We keep the EXISTING hero/background/atmosphere.
=============================================================
*/


/* =========================================================
   DEFAULT — DESKTOP
========================================================= */

.ric-j14-mobile-stage{
  display:none;
}


/* =========================================================
   IPAD / TABLET / PHONE
========================================================= */

@media (max-width:1180px){

  /*
   Hide only legacy content identified by J.14.1.
   Desktop is unaffected because this rule is breakpoint-only.
  */

  .ric-j14-original-hide{
    display:none !important;
  }


  /*
   Hero becomes content-height instead of fixed desktop height.
  */

  .ric-j14-hero{
    box-sizing:border-box !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    overflow:hidden !important;

    position:relative !important;
  }


  /*
   Clean mobile/tablet presentation.
  */

  .ric-j14-mobile-stage{
    box-sizing:border-box !important;

    position:relative !important;
    z-index:80 !important;

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

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

    height:auto !important;

    margin:0 !important;

    padding:
      clamp(44px,6vw,76px)
      clamp(26px,6vw,68px)
      clamp(40px,5vw,64px) !important;

    color:#fff;

    background:
      linear-gradient(
        90deg,
        rgba(0,55,43,.86) 0%,
        rgba(0,55,43,.64) 52%,
        rgba(0,34,29,.30) 100%
      );
  }


  .ric-j14-mobile-badge{
    align-self:flex-start;

    display:inline-flex;
    align-items:center;

    gap:8px;

    margin:0 0 18px;

    padding:8px 14px;

    border:
      1px solid rgba(238,190,69,.70);

    border-radius:999px;

    background:
      rgba(0,77,59,.72);

    color:#fff;

    font-size:
      clamp(.82rem,1.7vw,1rem);

    font-weight:800;

    line-height:1.2;
  }


  .ric-j14-mobile-badge::before{
    content:"";

    width:9px;
    height:9px;

    border-radius:50%;

    background:#f3bd42;

    flex:0 0 auto;
  }


  .ric-j14-mobile-title{
    margin:0 !important;

    max-width:13ch;

    color:#fff !important;

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

    font-size:
      clamp(3.1rem,6.6vw,5.7rem) !important;

    font-weight:800;

    letter-spacing:
      -.045em;

    line-height:.92 !important;

    text-wrap:balance;
  }


  .ric-j14-mobile-tagline{
    max-width:760px;

    margin:
      18px 0 0;

    color:#f5c247;

    font-size:
      clamp(1.08rem,2vw,1.4rem);

    font-weight:900;

    line-height:1.25;
  }


  .ric-j14-mobile-description{
    max-width:760px;

    margin:
      14px 0 0;

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

    font-size:
      clamp(.95rem,1.5vw,1.12rem);

    line-height:1.55;
  }


  /* =======================================================
     VERSE GETS ITS OWN ROW
  ======================================================= */

  .ric-j14-mobile-verse{
    box-sizing:border-box;

    width:
      min(100%,860px);

    margin:
      clamp(22px,3vw,34px)
      0 0;

    padding:
      clamp(22px,3vw,34px);

    border:
      1px solid rgba(225,181,62,.68);

    border-radius:
      clamp(18px,2vw,26px);

    background:
      linear-gradient(
        135deg,
        rgba(0,73,56,.96),
        rgba(0,54,43,.94)
      );

    box-shadow:
      0 16px 36px
      rgba(0,0,0,.18);
  }


  .ric-j14-mobile-arabic{
    margin:0;

    color:#f5c247;

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

    font-size:
      clamp(1.85rem,3.7vw,3rem);

    line-height:1.75;

    text-align:right;

    direction:rtl;
  }


  .ric-j14-mobile-translation{
    margin:
      12px 0 0;

    color:#fff;

    font-size:
      clamp(.95rem,1.6vw,1.15rem);

    font-weight:600;

    line-height:1.5;
  }


  .ric-j14-mobile-reference{
    display:block;

    margin-top:10px;

    color:#f5c247;

    font-size:
      clamp(.78rem,1.35vw,.95rem);

    font-weight:900;
  }


  /* =======================================================
     ACTIONS
  ======================================================= */

  .ric-j14-mobile-actions{
    width:
      min(100%,860px);

    display:grid;

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

    gap:
      clamp(10px,1.5vw,16px);

    margin:
      clamp(22px,3vw,32px)
      0 0;
  }


  .ric-j14-mobile-actions a{
    box-sizing:border-box;

    min-width:0;
    min-height:54px;

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

    padding:
      13px 18px;

    border-radius:10px;

    text-decoration:none;

    text-align:center;

    font-size:
      clamp(.92rem,1.4vw,1.08rem);

    font-weight:900;

    line-height:1.2;
  }


  .ric-j14-mobile-actions
  .is-prayer{
    border:
      1px solid rgba(255,255,255,.75);

    background:#08795e;

    color:#fff;
  }


  .ric-j14-mobile-actions
  .is-quran{
    border:
      1px solid rgba(255,255,255,.85);

    background:#fff;

    color:#075c49;
  }


  .ric-j14-mobile-actions
  .is-support{
    border:
      1px solid #efb934;

    background:#f3bd42;

    color:#174737;
  }


  /*
   Old carousel arrows disappear on touch layouts.
   Background rotation can continue automatically.
  */

  .ric-j14-legacy-arrow{
    display:none !important;
  }

}


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

@media (max-width:680px){

  .ric-j14-mobile-stage{
    padding:
      48px
      20px
      36px !important;

    background:
      linear-gradient(
        180deg,
        rgba(0,55,43,.68) 0%,
        rgba(0,49,39,.68) 55%,
        rgba(0,33,28,.78) 100%
      );
  }


  .ric-j14-mobile-badge{
    margin-bottom:16px;

    padding:8px 13px;

    font-size:.86rem;
  }


  /*
   Deliberately much smaller than the broken version.
  */

  .ric-j14-mobile-title{
    max-width:10.5ch;

    font-size:
      clamp(2.7rem,11vw,4.05rem) !important;

    line-height:.94 !important;
  }


  .ric-j14-mobile-tagline{
    margin-top:16px;

    font-size:
      clamp(1.05rem,4.8vw,1.3rem);
  }


  .ric-j14-mobile-description{
    margin-top:12px;

    font-size:
      clamp(.92rem,3.9vw,1.05rem);
  }


  /*
   Verse is completely separate from headline.
  */

  .ric-j14-mobile-verse{
    width:100%;

    margin-top:22px;

    padding:
      18px 17px;

    border-radius:17px;
  }


  .ric-j14-mobile-arabic{
    font-size:
      clamp(1.45rem,7vw,2rem);

    line-height:1.7;
  }


  .ric-j14-mobile-translation{
    font-size:
      clamp(.9rem,3.8vw,1rem);
  }


  /*
   iPhone:
   first two side by side,
   Support RIC full row.
  */

  .ric-j14-mobile-actions{
    width:100%;

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

    gap:10px;
  }


  .ric-j14-mobile-actions a{
    min-height:56px;

    padding:
      13px 9px;

    font-size:
      clamp(.88rem,3.8vw,1rem);
  }


  .ric-j14-mobile-actions
  .is-support{
    grid-column:
      1 / -1;
  }

}


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

@media (max-width:390px){

  .ric-j14-mobile-stage{
    padding-left:15px !important;
    padding-right:15px !important;
  }


  .ric-j14-mobile-title{
    font-size:
      clamp(2.4rem,10.5vw,3.3rem) !important;
  }


  .ric-j14-mobile-actions{
    grid-template-columns:1fr;
  }


  .ric-j14-mobile-actions
  .is-support{
    grid-column:auto;
  }

}


/* =========================================================
   IPAD LANDSCAPE
========================================================= */

@media
  (min-width:900px)
  and (max-width:1180px)
  and (orientation:landscape){

  .ric-j14-mobile-stage{
    padding:
      42px
      clamp(40px,5vw,70px)
      44px !important;
  }


  .ric-j14-mobile-title{
    max-width:12ch;

    font-size:
      clamp(3.7rem,5.6vw,5.3rem) !important;
  }


  .ric-j14-mobile-verse{
    max-width:760px;
  }

}