/* ========================================================= */
/* LumoLynx Sky Events Station                                */
/* sky-events.css                                             */
/* STATIC — no Station-level collapse/expand shell.            */
/* Migrated from WhichPhase homepage Sky Events component.     */
/* ========================================================= */
/*                                                             */
/* Token mapping applied during migration (donor → Lumo):      */
/*   --glass-primary  -> --glass                               */
/*   --border-primary -> --glass-border-strong                 */
/*   --border-soft    -> --glass-border                        */
/*   --r-lg           -> --radius-large                        */
/*   --r-md           -> --radius-medium                       */
/*   --soft           -> --soft-text                           */
/*   --text, --gold, --glass-hover map directly (same names)   */
/*   --blur-sm        -> literal blur(8px), matching Lumo's    */
/*                       existing convention (e.g. .theme-button) */
/*                                                             */
/* Ultra-mode: the donor's separate body.ultra-mode .sky-badge-* */
/* override block was NOT migrated. Lumo's ultra-mode already   */
/* re-themes --text/--gold/--glass-border/--soft-text globally  */
/* under body.ultra-mode (see styles.css :root), so every rule  */
/* below that already uses those tokens re-themes automatically. */
/* Flagged consequence: the donor's ultra-mode-only image filter */
/* (--ultra-asset) and its "disable premium glow" override are   */
/* not reproduced here, since Lumo has no equivalent token/       */
/* convention for either. Revisit if ultra-mode parity on these   */
/* two specific effects turns out to matter.                      */
/*                                                             */
/* Hardcoded gold literals (badgeGlow, .premium border, the    */
/* moon-badge radial gradient) are left as literals, unchanged, */
/* to preserve exact current appearance rather than shift       */
/* toward Lumo's slightly different --gold hex.                 */
/* ========================================================= */

.wp-sky-events{
    width:100%;
    max-width:580px;
    margin:0 auto 8px;
    padding:0 clamp(10px,3vw,18px);
    box-sizing:border-box;
}

.sky-events-panel{
    background:var(--glass);
    border:1px solid var(--glass-border-strong);
    border-radius:var(--radius-large);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    padding:8px;
}

.sky-events-badges{
    display:flex;
    gap:8px;
    padding-top:0;
}

.sky-badge{
    flex:1;
    background:var(--glass);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-medium);
    overflow:hidden;
    cursor:pointer;
    transition:border-color 0.2s;
    -webkit-tap-highlight-color:transparent;
}

.sky-badge:hover{
    border-color:var(--glass-border-strong);
}

.sky-badge.notable{
    border-color:rgba(212,175,55,0.35);
}

.sky-badge.premium{
    border-color:rgba(212,175,55,0.55);
    animation:badgeGlow 3s ease-in-out infinite;
}

@keyframes badgeGlow{
    0%,100%{
        box-shadow:0 0 0 rgba(212,175,55,0);
    }
    50%{
        box-shadow:0 0 12px rgba(212,175,55,0.25);
    }
}

.sky-badge-img-wrap{
    position:relative;
    width:100%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000;
}

body.light-mode .sky-badge-moon .sky-badge-img-wrap{
    background:transparent;
}

.sky-badge-moon::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle at center,rgba(212,175,55,0.12) 0%,rgba(124,92,255,0.08) 50%,transparent 75%);
}

.sky-badge-scene{
    height:140px;
}

.sky-badge-scene .sky-badge-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.sky-badge-moon{
    height:140px;
    background:transparent;
}

.sky-badge-moon .sky-badge-img{
    width:75%;
    height:75%;
    object-fit:contain;
    display:block;
}

.sky-badge[data-size="small"] .sky-badge-moon .sky-badge-img{
    width:58%;
    height:58%;
}

.sky-badge[data-size="large"] .sky-badge-moon .sky-badge-img{
    width:88%;
    height:88%;
}

#badge-strawberry-moon .sky-badge-moon .sky-badge-img{
    width:115%;
    height:115%;
}

.sky-badge-body{
    padding:6px 6px 4px;
    text-align:center;
}

.sky-badge-type{
    font-size:7px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:2px;
}

.sky-badge-type.type-moon{
    color:var(--soft-text);
}

.sky-badge-type.type-meteor{
    color:#7090c0;
}

.sky-badge-type.type-eclipse{
    color:#c060a0;
}

.sky-badge-type.type-planet{
    color:#60a0c0;
}

.sky-badge-name{
    font-size:10px;
    font-weight:700;
    color:var(--text);
    line-height:1.2;
    margin-bottom:2px;
}

.sky-badge-date{
    font-size:13px;
    color:var(--text);
    font-weight:700;
}

.sky-badge-sub{
    font-size:9px;
    font-weight:600;
    letter-spacing:0.3px;
    color:var(--soft-text);
    margin-top:2px;
    line-height:1.3;
}

.sky-badge-caret{
    font-size:16px;
    color:var(--soft-text);
    display:block;
    text-align:center;
    padding:2px 0 5px;
    transition:transform 0.2s;
    line-height:1;
}

.sky-badge.open .sky-badge-caret{
    transform:rotate(180deg);
}

.sky-badge-expand{
    display:none;
    border-top:1px solid var(--glass-border);
    padding:8px 8px 10px;
}

.sky-badge.open .sky-badge-expand{
    display:block;
}

.sky-badge-blurb{
    font-size:10px;
    color:var(--soft-text);
    line-height:1.5;
    margin-bottom:8px;
}

.sky-badge-reveal{
    display:inline-block;
    font-size:10px;
    font-weight:700;
    color:var(--gold);
    text-decoration:none;
    letter-spacing:0.3px;
}

.sky-badge-reveal:hover{
    opacity:0.8;
}

/* ========================================================= */
/* Badge typography — desktop                                 */
/* ========================================================= */

@media (min-width:600px){

    .sky-badge-type{
        font-size:9px;
    }

    .sky-badge-name{
        font-size:13px;
    }

    .sky-badge-date{
        font-size:13px;
    }

}

/* ========================================================= */
/* Light mode                                                  */
/* ========================================================= */

body.light-mode .sky-events-panel{
    background:rgba(205,223,221,0.86);
    border-color:#AFC5E8;
}

body.light-mode .sky-badge{
    background:rgba(205,223,221,0.86);
    border:1px solid rgba(212,175,55,0.35);
}

body.light-mode .sky-badge.notable{
    border-color:rgba(196,140,27,0.30);
}

body.light-mode .sky-badge.premium{
    border-color:rgba(196,140,27,0.50);
}

/* ========================================================= */
/* Discover Card                                               */
/* Promotional feature card, artwork as full-bleed hero.       */
/* Reuses the same outer .sky-badge chrome (background/border/ */
/* radius/hover) — only the closed face's internal composition */
/* changes: no icon/body split, image fills the whole face     */
/* with the title overlaid on a bottom scrim. No caret/expand  */
/* — the whole card is a native <a>, not a toggleBadge() target.*/
/* ========================================================= */

.sky-badge-discover{
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color:inherit;
}

.sky-badge-discover-hero{
    position:relative;
    flex:1;
    min-height:140px;
    overflow:hidden;
}

.sky-badge-discover-hero .sky-badge-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.sky-badge-discover-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:10px 8px 8px;
    text-align:center;
    background:linear-gradient(to top, rgba(5,7,10,0.88) 0%, rgba(5,7,10,0.55) 60%, transparent 100%);
}

.sky-badge-discover-caption .sky-badge-name{
    color:#F5EDE3;
    margin-bottom:0;
    font-size:11px;
}

body.light-mode .sky-badge-discover-caption{
    background:linear-gradient(to top, rgba(20,20,20,0.80) 0%, rgba(20,20,20,0.45) 60%, transparent 100%);
}

body.light-mode .sky-badge-discover-caption .sky-badge-name{
    color:#F5EDE3;
}

/* ========================================================= */
/* Overflow badge — "Don't Miss These"                          */
/* Replaces the right slot when the astronomical pool exceeds   */
/* the two side slots. An editorial list card, not a badge:     */
/* no artwork, just event names + dates, linking to Calendar.   */
/* ========================================================= */

.sky-badge-overflow{
    display:flex;
    flex-direction:column;
    justify-content:center;
    cursor:pointer;
}

.sky-overflow-body{
    padding:12px 12px 10px;
    text-align:left;
}

.sky-overflow-title{
    font-size:12px;
    font-weight:800;
    letter-spacing:0.4px;
    color:var(--gold);
    text-align:center;
    margin-bottom:10px;
}

.sky-overflow-list{
    list-style:none;
    margin:0 0 10px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:9px;
}

.sky-overflow-item{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding-bottom:10px;
    border-bottom:1px solid var(--glass-border);
}

.sky-overflow-item:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.sky-overflow-item-name{
    font-size:16px;
    font-weight:800;
    color:var(--text);
    line-height:1.25;
}

.sky-overflow-item-date{
    font-size:11px;
    font-weight:600;
    color:var(--soft-text);
    opacity:0.85;
}

.sky-overflow-more{
    font-size:11px;
    font-weight:700;
    color:var(--soft-text);
    opacity:0.85;
}

.sky-overflow-link{
    font-size:11px;
    font-weight:700;
    color:var(--gold);
    text-align:center;
    letter-spacing:0.3px;
    border-top:1px solid var(--glass-border);
    padding-top:8px;
    margin-top:2px;
}

.sky-badge-overflow:hover .sky-overflow-link{
    opacity:0.8;
}

body.light-mode .sky-overflow-item-date{
    color:#7A848F;
}

/* ========================================================= */
/* Empty state                                                  */
/* Shown when the Selection Engine returns zero items.          */
/* ========================================================= */

.sky-events-empty{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:22px 12px;
    text-align:center;
    background:var(--glass);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-medium);
}

.sky-events-empty-text{
    font-size:12px;
    font-weight:600;
    color:var(--soft-text);
    line-height:1.5;
}

.sky-events-empty-link{
    font-size:11px;
    font-weight:700;
    color:var(--gold);
    text-decoration:none;
    letter-spacing:0.3px;
}

.sky-events-empty-link:hover{
    opacity:0.8;
}