/*
 RIC Homepage 2026 — Stage F
 Automatic Islamic Seasonal Experience

 Compact by design.
 No page hiding.
 No prayer/audio changes.
*/

.ric-f-season{
  --ric-f-accent:#d9ad43;
  --ric-f-accent-soft:rgba(217,173,67,.16);

  position:relative;
  isolation:isolate;
  overflow:hidden;

  width:min(
    calc(100% - clamp(24px,5vw,80px)),
    1600px
  );

  margin:
    clamp(14px,2vw,24px)
    auto;

  border-radius:20px;

  color:#fff;

  background:
    linear-gradient(
      115deg,
      rgba(1,76,58,.98),
      rgba(0,48,40,.98)
    );

  border:
    1px solid rgba(217,173,67,.32);

  box-shadow:
    0 12px 30px rgba(0,50,40,.12);

  transition:
    border-color .35s ease,
    background .35s ease;
}

.ric-f-inner{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:
    minmax(220px,.9fr)
    minmax(300px,1.6fr)
    auto;

  gap:clamp(14px,2vw,28px);

  align-items:center;

  padding:
    clamp(15px,2vw,23px)
    clamp(16px,2.5vw,30px);
}

.ric-f-season.is-normal
.ric-f-inner{
  grid-template-columns:
    minmax(220px,.85fr)
    minmax(300px,1.8fr)
    auto;

  padding-block:
    clamp(12px,1.4vw,16px);
}

/* ------------------------------------------
   Decorative crescent
------------------------------------------ */

.ric-f-season::after{
  content:"☾";

  position:absolute;
  right:clamp(20px,4vw,65px);
  top:50%;

  transform:
    translateY(-50%)
    rotate(-10deg);

  z-index:0;

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

  font-size:clamp(7rem,15vw,14rem);
  line-height:1;

  pointer-events:none;
}

/* ------------------------------------------
   Identity
------------------------------------------ */

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

  margin-bottom:5px;

  color:var(--ric-f-accent);

  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ric-f-kicker::before{
  content:"";

  width:8px;
  height:8px;

  flex:none;

  border-radius:50%;

  background:var(--ric-f-accent);

  box-shadow:
    0 0 0 4px var(--ric-f-accent-soft);
}

.ric-f-title{
  margin:0;

  color:#fff;

  font-size:
    clamp(1.35rem,2.4vw,2.35rem);

  line-height:1.05;
}

.ric-f-hijri{
  display:inline-flex;
  align-items:center;

  margin-top:7px;

  padding:5px 9px;

  border-radius:999px;

  color:#e7f4ef;

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

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

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

/* ------------------------------------------
   Main message
------------------------------------------ */

.ric-f-copy{
  min-width:0;
}

.ric-f-message{
  margin:0;

  color:#edf7f3;

  font-size:
    clamp(.93rem,1.25vw,1.08rem);

  line-height:1.45;
}

.ric-f-countdown{
  margin-top:6px;

  color:var(--ric-f-accent);

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

/* ------------------------------------------
   Actions
------------------------------------------ */

.ric-f-actions{
  display:flex;
  flex-wrap:wrap;

  justify-content:flex-end;

  gap:7px;
}

.ric-f-actions a{
  display:inline-flex;

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

  min-height:40px;

  padding:8px 13px;

  border-radius:999px;

  text-decoration:none;

  color:#fff;

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

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

  font-size:11px;
  font-weight:800;
}

.ric-f-actions a:first-child{
  color:#123f33;

  border-color:var(--ric-f-accent);

  background:var(--ric-f-accent);
}

/* ------------------------------------------
   Muharram / Ashura
------------------------------------------ */

.ric-f-season[data-season="muharram"],
.ric-f-season[data-season="ashura"]{
  --ric-f-accent:#e5bd59;
  --ric-f-accent-soft:rgba(229,189,89,.16);
}

/* ------------------------------------------
   Rajab
------------------------------------------ */

.ric-f-season[data-season="rajab"]{
  --ric-f-accent:#9ad5c2;
  --ric-f-accent-soft:rgba(154,213,194,.16);

  background:
    linear-gradient(
      115deg,
      rgba(8,73,71,.98),
      rgba(7,47,53,.98)
    );
}

/* ------------------------------------------
   Sha'ban
------------------------------------------ */

.ric-f-season[data-season="shaban"]{
  --ric-f-accent:#c9dca7;
  --ric-f-accent-soft:rgba(201,220,167,.16);
}

/* ------------------------------------------
   Ramadan / Last 10
------------------------------------------ */

.ric-f-season[data-season="ramadan"],
.ric-f-season[data-season="last10"]{
  --ric-f-accent:#f0c866;
  --ric-f-accent-soft:rgba(240,200,102,.18);

  background:
    linear-gradient(
      115deg,
      rgba(2,70,55,.99),
      rgba(15,43,48,.99)
    );
}

.ric-f-season[data-season="last10"]{
  box-shadow:
    0 0 0 3px rgba(240,200,102,.05),
    0 14px 35px rgba(0,50,40,.17);
}

/* ------------------------------------------
   Eid al-Fitr
------------------------------------------ */

.ric-f-season[data-season="eid-fitr"]{
  --ric-f-accent:#f4d77f;
  --ric-f-accent-soft:rgba(244,215,127,.18);

  background:
    linear-gradient(
      115deg,
      rgba(2,89,68,.99),
      rgba(20,72,55,.99)
    );
}

/* ------------------------------------------
   Hajj / Dhul-Hijjah / Arafah
------------------------------------------ */

.ric-f-season[data-season="hajj"],
.ric-f-season[data-season="arafah"]{
  --ric-f-accent:#e9cf8f;
  --ric-f-accent-soft:rgba(233,207,143,.17);

  background:
    linear-gradient(
      115deg,
      rgba(51,58,47,.99),
      rgba(11,53,47,.99)
    );
}

/* ------------------------------------------
   Eid al-Adha
------------------------------------------ */

.ric-f-season[data-season="eid-adha"]{
  --ric-f-accent:#f1d478;
  --ric-f-accent-soft:rgba(241,212,120,.18);

  background:
    linear-gradient(
      115deg,
      rgba(3,86,65,.99),
      rgba(44,71,46,.99)
    );
}

/* ------------------------------------------
   Responsive
------------------------------------------ */

@media (max-width:900px){

  .ric-f-inner{
    grid-template-columns:
      minmax(180px,.8fr)
      minmax(260px,1.5fr);
  }

  .ric-f-actions{
    grid-column:1 / -1;

    justify-content:flex-start;
  }

}

@media (max-width:620px){

  .ric-f-inner,
  .ric-f-season.is-normal
  .ric-f-inner{
    grid-template-columns:1fr;
  }

  .ric-f-actions{
    grid-column:auto;
  }

  .ric-f-actions a{
    flex:1 1 130px;
  }

}

/* ------------------------------------------
   Reduced motion
------------------------------------------ */

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

  .ric-f-season{
    transition:none;
  }

}