/*
 * ==========================================================
 * RIC HOMEPAGE F.2
 * LIVING ISLAMIC COSMOS
 * ==========================================================
 *
 * Earth / North America / Sun / Moon visualization.
 *
 * The canvas is visual only:
 * pointer-events:none ensures the existing 12-month
 * explorer remains fully clickable.
 */

.ric-f-season {
    position:relative;
}

.ric-f-season .ric-f-inner {
    position:relative;

    isolation:isolate;

    overflow:hidden;

    min-height:
        clamp(
            360px,
            32vw,
            560px
        );
}


/*
 * Live astronomy canvas.
 */
.ric-f-cosmos-canvas {
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    display:block;

    pointer-events:none;

    z-index:0;

    opacity:.78;
}


/*
 * Dark readability veil.
 */
.ric-f-season
.ric-f-inner::after {
    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(1,52,43,.90) 0%,
            rgba(2,66,52,.72) 38%,
            rgba(1,45,39,.28) 70%,
            rgba(1,36,32,.48) 100%
        );
}


/*
 * Existing RIC content always remains above the sky.
 */
.ric-f-season
.ric-f-inner
> *:not(.ric-f-cosmos-canvas) {
    position:relative;
    z-index:2;
}


/*
 * Live astronomy information.
 */
.ric-f-cosmos-readout {
    margin-top:13px;

    display:flex;
    flex-wrap:wrap;
    gap:6px;

    max-width:720px;
}

.ric-f-cosmos-chip {
    display:inline-flex;
    align-items:center;
    gap:6px;

    min-height:30px;

    padding:6px 9px;

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

    border-radius:999px;

    background:
        rgba(1,28,24,.28);

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

    font-size:10px;
    font-weight:700;

    backdrop-filter:
        blur(8px);
}

.ric-f-cosmos-chip strong {
    color:#f3ca63;
}

.ric-f-cosmos-chip.is-live::before {
    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

    background:#7ee2b8;

    box-shadow:
        0 0 12px
        rgba(126,226,184,.8);
}


/*
 * Astronomy attribution.
 */
.ric-f-cosmos-source {
    margin-top:7px;

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

    font-size:9px;
}

.ric-f-cosmos-source a {
    color:
        rgba(255,255,255,.68);

    text-decoration:none;
}

.ric-f-cosmos-source a:hover {
    color:#f3ca63;
}


/*
 * Tiny North America indicator.
 */
.ric-f-cosmos-location {
    color:#f3ca63;
    font-weight:850;
}


/*
 * Extra soft celestial glow.
 */
.ric-f-season[data-ric-moon-phase*="waxing"] {
    --ric-cosmos-moon-glow:
        rgba(242,217,160,.22);
}

.ric-f-season[data-ric-moon-phase*="full"] {
    --ric-cosmos-moon-glow:
        rgba(255,245,210,.32);
}

.ric-f-season[data-ric-moon-phase*="waning"] {
    --ric-cosmos-moon-glow:
        rgba(214,225,235,.20);
}


/*
 * Tablet.
 */
@media (max-width:1050px) {

    .ric-f-cosmos-canvas {
        opacity:.65;
    }

}


/*
 * Phone.
 */
@media (max-width:700px) {

    .ric-f-season
    .ric-f-inner {
        min-height:0;
    }

    .ric-f-season
    .ric-f-inner::after {
        background:
            linear-gradient(
                180deg,
                rgba(2,59,47,.90),
                rgba(2,57,46,.75)
            );
    }

    .ric-f-cosmos-canvas {
        opacity:.48;
    }

    .ric-f-cosmos-readout {
        gap:5px;
    }

    .ric-f-cosmos-chip {
        font-size:9px;
    }

}


/*
 * Respect reduced-motion preference.
 */
@media (
    prefers-reduced-motion:
    reduce
) {

    .ric-f-cosmos-canvas {
        opacity:.55;
    }

}

/*
 * ==========================================================
 * RIC F.2.2 — COSMOS VISUAL REFINEMENT
 * ==========================================================
 */

.ric-f-cosmos-canvas {
    opacity:.92;
}


/*
 * Preserve text contrast while allowing the Earth,
 * Moon and Sun to remain visible.
 */
.ric-f-season
.ric-f-inner::after {
    background:
        linear-gradient(
            90deg,
            rgba(1,52,43,.87) 0%,
            rgba(2,65,52,.66) 40%,
            rgba(2,49,43,.18) 69%,
            rgba(1,35,31,.20) 100%
        );
}


/*
 * Astronomy information should be readable at a glance.
 */
.ric-f-cosmos-readout {
    gap:8px;

    margin-top:14px;
}

.ric-f-cosmos-chip {
    min-height:34px;

    padding:7px 11px;

    border-color:
        rgba(255,255,255,.22);

    background:
        rgba(0,32,27,.52);

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

    font-size:11px;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.10);
}

.ric-f-cosmos-chip strong {
    color:#f6ce67;

    font-weight:900;
}

.ric-f-cosmos-source {
    margin-top:8px;

    font-size:10px;

    color:
        rgba(255,255,255,.57);
}


/*
 * Give the seasonal content a little more breathing room
 * without bringing back the large unused green area.
 */
.ric-f-season
.ric-f-inner {
    min-height:
        clamp(
            340px,
            29vw,
            485px
        );
}


/*
 * The current Islamic month must remain visually primary.
 */
.ric-f-title {
    position:relative;

    text-shadow:
        0 2px 18px
        rgba(0,0,0,.18);
}

.ric-f-current-month {
    color:#f4ca62 !important;
}


/*
 * Upcoming sacred month.
 */
.ric-f-coming-month {
    background:
        rgba(0,39,31,.58);

    border-color:
        rgba(244,202,98,.35);
}

.ric-f-coming-label {
    color:#f4ca62;
}


/*
 * Desktop.
 */
@media (min-width:1101px) {

    .ric-f-cosmos-readout {
        max-width:760px;
    }

}


/*
 * Tablet.
 */
@media
    (min-width:701px)
    and
    (max-width:1100px) {

    .ric-f-cosmos-canvas {
        opacity:.82;
    }

}


/*
 * Phones:
 * keep astronomy visible but never overpower content.
 */
@media (max-width:700px) {

    .ric-f-cosmos-canvas {
        opacity:.58;
    }

    .ric-f-season
    .ric-f-inner::after {
        background:
            linear-gradient(
                180deg,
                rgba(2,58,47,.86),
                rgba(2,52,43,.66)
            );
    }

    .ric-f-cosmos-chip {
        min-height:30px;

        font-size:9px;
    }

}