/*
 RIC Homepage 2026 — Stage E
 Live Qur'an ↔ Existing RIC Adhan bridge.
*/

.ric-e-quran{
  width:100%;
  margin:0 0 clamp(12px,1.5vw,20px);
  padding:clamp(15px,2vw,22px);

  display:grid;
  grid-template-columns:minmax(210px,.85fr) minmax(300px,1.3fr);
  align-items:center;
  gap:clamp(14px,2vw,26px);

  border-radius:20px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      rgba(5,88,65,.98),
      rgba(2,53,44,.98)
    );

  border:1px solid rgba(96,225,168,.28);

  box-shadow:
    0 12px 30px rgba(0,50,40,.14),
    inset 0 1px rgba(255,255,255,.08);
}

.ric-e-kicker{
  display:flex;
  align-items:center;
  gap:7px;

  margin-bottom:6px;

  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;

  color:#71e3b1;
}

.ric-e-kicker::before{
  content:"";
  width:8px;
  height:8px;

  border-radius:50%;

  background:#58dfa5;

  box-shadow:
    0 0 0 4px rgba(88,223,165,.12);
}

.ric-e-title{
  margin:0;

  color:#fff;

  font-size:clamp(1.45rem,2.7vw,2.5rem);
  line-height:1.05;
}

.ric-e-copy{
  margin:8px 0 0;

  color:#d9efe7;

  font-size:12px;
  line-height:1.45;
}

.ric-e-main{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.ric-e-play{
  appearance:none;

  min-height:46px;

  padding:10px 18px;

  border:0;
  border-radius:999px;

  background:#19a86e;
  color:#fff;

  font:inherit;
  font-weight:850;

  cursor:pointer;
}

.ric-e-play:hover,
.ric-e-play:focus-visible{
  background:#22b87b;
}

.ric-e-link{
  color:#e5f8f0;

  font-size:12px;
  font-weight:750;
}

.ric-e-wave{
  flex:1 1 100px;

  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;

  opacity:.4;
}

.ric-e-wave span{
  width:3px;
  height:30%;

  border-radius:999px;

  background:#6ce6b0;
}

.ric-e-quran.is-playing
.ric-e-wave{
  opacity:1;
}

.ric-e-quran.is-playing
.ric-e-wave span{
  animation:ricEWave .75s ease-in-out infinite alternate;
}

.ric-e-quran.is-playing
.ric-e-wave span:nth-child(2n){
  animation-delay:.17s;
}

.ric-e-quran.is-playing
.ric-e-wave span:nth-child(3n){
  animation-delay:.31s;
}

@keyframes ricEWave{
  from{height:25%}
  to{height:95%}
}

.ric-e-volume{
  display:flex;
  align-items:center;
  gap:9px;

  margin-top:12px;
}

.ric-e-volume label{
  font-size:11px;
  font-weight:750;

  color:#d9efe7;
}

.ric-e-volume input{
  width:min(250px,100%);

  accent-color:#63dfaa;
}

.ric-e-status{
  min-height:20px;

  margin-top:11px;

  color:#edf8f4;

  font-size:12px;
  font-weight:700;
}

.ric-e-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;

  margin-top:9px;
}

.ric-e-chip{
  padding:5px 9px;

  border-radius:999px;

  background:rgba(255,255,255,.07);

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

  color:#def4eb;

  font-size:10px;
  font-weight:750;
}

.ric-e-chip::before{
  content:"✓ ";
  color:#6ce3ad;
}

.ric-e-quran.is-hold{
  border-color:rgba(239,189,79,.58);
}

.ric-e-quran.is-hold
.ric-e-kicker{
  color:#f0c65b;
}

.ric-e-quran.is-adhan{
  border-color:#ffd66d;

  box-shadow:
    0 0 0 4px rgba(255,214,109,.08),
    0 12px 30px rgba(0,50,40,.14);
}

.ric-e-quran.is-post{
  border-color:rgba(255,255,255,.30);
}

.ric-e-quran.needs-tap
.ric-e-play{
  background:#be8a29;
}

@media (max-width:760px){

  .ric-e-quran{
    grid-template-columns:1fr;
  }

}

@media (max-width:450px){

  .ric-e-play{
    width:100%;
  }

  .ric-e-wave{
    width:100%;
    flex-basis:100%;
  }

}

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

  .ric-e-quran.is-playing
  .ric-e-wave span{
    animation:none;
    height:55%;
  }

}