/* =============================================================
   Calendario Lunare — fase del giorno, luna 3D, rituale e ciclo.
   ============================================================= */

.tool-hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

/* --- Navigazione giorni --- */
.luna-nav {
    display: flex; align-items: center; justify-content: center; gap: 1.2rem;
    margin: .5rem 0 .3rem;
}
.luna-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 999px;
    border: 1px solid var(--indaco-600); color: var(--lavanda);
    font-size: 1.2rem; text-decoration: none; transition: border-color .2s var(--ease), color .2s;
}
.luna-arrow:hover { border-color: var(--oro); color: var(--panna); }
.luna-date {
    font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 1.6rem);
    color: var(--panna); min-width: 12ch; text-align: center;
}
.luna-today-link { text-align: center; margin-bottom: 1rem; }

/* --- Palco luna --- */
.luna-stage {
    display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
    margin: 1.4rem 0 2.2rem;
}
.luna-moon {
    width: clamp(200px, 42vw, 380px); aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    /* Disco di fallback (se three.js non parte): dischetto luminoso soffuso. */
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(242,236,208,.22), transparent 70%);
    filter: drop-shadow(0 0 50px rgba(242,236,208,.18));
}
.luna-moon canvas { display: block; }
.luna-head { text-align: center; --c: #F2ECD0; }
.luna-name {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.2rem, 6vw, 3.6rem); margin: 0; color: var(--panna);
}
.luna-illum {
    font-family: var(--font-num); text-transform: uppercase; letter-spacing: .16em;
    font-size: .78rem; color: var(--c); margin: .3rem 0 .6rem;
}
.luna-energia { color: var(--lavanda); font-size: 1.02rem; margin: 0; letter-spacing: .02em; }

/* --- Blocchi contenuto --- */
.luna-block { padding: 1.5rem 1.7rem; border-radius: var(--radius); margin-bottom: 1.2rem; }
.luna-block .eyebrow { display: block; margin-bottom: .6rem; }
.luna-block p { margin: 0; color: var(--lavanda); font-size: 1.02rem; line-height: 1.6; }
.luna-block h3 { font-size: 1.15rem; margin: 0 0 .5rem; color: var(--panna); }

.luna-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem; }
.luna-cols .luna-block { margin-bottom: 0;
    background: linear-gradient(160deg, var(--indaco-700), var(--indaco-800));
    border: 1px solid rgba(185,175,214,.12);
}
.luna-block.ritual { border-left: 4px solid var(--c); }
.luna-block.ritual h3 { color: var(--oro-soft); }
.luna-block.advice { border-left: 4px solid var(--indaco-500, #6C7A89); }

/* --- Prossime lune --- */
.luna-next { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1.4rem 1.7rem; margin-bottom: 1.6rem; }
.luna-next-item { flex: 1 1 200px; }
.luna-next-item .eyebrow { display: block; margin-bottom: .3rem; }
.luna-next-item strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--panna); font-weight: 400; }

/* --- Ciclo delle 8 fasi --- */
.luna-cycle > .eyebrow { display: block; margin-bottom: 1rem; }
.luna-cycle-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .8rem; }
.luna-cycle-item {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: .8rem .4rem; border-radius: var(--radius-sm);
    border: 1px solid transparent; text-align: center; opacity: .6;
    transition: opacity .2s, border-color .2s, background .2s;
}
.luna-cycle-item.is-current {
    opacity: 1; border-color: var(--c); background: rgba(255,255,255,.03);
}
.luna-cycle-dot {
    width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--c), color-mix(in srgb, var(--c) 30%, #0b0b1a));
    box-shadow: 0 0 12px -2px var(--c);
}
.luna-cycle-name { font-size: .82rem; color: var(--lavanda); line-height: 1.25; }
.luna-cycle-item.is-current .luna-cycle-name { color: var(--panna); }

/* --- Colore per fase (sostituisce lo style inline --c) --- */
.luna-color-nuova              { --c: #3A3A5C; }
.luna-color-crescente          { --c: #5B6BA8; }
.luna-color-primo_quarto       { --c: #7E8FD0; }
.luna-color-gibbosa_crescente  { --c: #A9B4E0; }
.luna-color-piena              { --c: #F2ECD0; }
.luna-color-gibbosa_calante    { --c: #C9B98F; }
.luna-color-ultimo_quarto      { --c: #A88FBF; }
.luna-color-calante            { --c: #6E5E86; }

/* --- Link vista giorno/mese --- */
.luna-view-links { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-bottom: 1rem; }

/* --- Segno zodiacale --- */
.luna-zodiac { text-align: center; }
.luna-zodiac-name { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin: 0; color: var(--panna); }

/* --- Consigli pratici --- */
.luna-practical-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.luna-practical-item h4 { font-size: 1rem; margin: 0 0 .4rem; color: var(--oro-soft); }
.luna-practical-item p { margin: 0; color: var(--lavanda); font-size: .95rem; line-height: 1.55; }

/* --- Lettura del giorno (AI) --- */
.luna-reading h3 { font-size: 1.15rem; margin: 1.2rem 0 .5rem; color: var(--panna); }
.luna-reading h3:first-child { margin-top: 0; }
.luna-reading p { margin: 0 0 .8rem; color: var(--lavanda); font-size: 1.02rem; line-height: 1.6; }
.luna-reading ul { margin: 0 0 .8rem; padding-left: 1.2rem; color: var(--lavanda); }

/* --- CTA tema natale --- */
.luna-natal-teaser { text-align: center; border: 1px dashed rgba(185,175,214,.25); }
.luna-natal-teaser h3 { margin: .3rem 0; color: var(--panna); font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; }
.luna-natal-teaser p { margin: 0; color: var(--lavanda); }

/* --- Griglia calendario mensile --- */
.luna-month-title { display: block; text-align: center; margin: 1.5rem 0 1rem; }
.luna-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem;
    margin: 0 auto 1.6rem;
}
.luna-grid-dow {
    text-align: center; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--lavanda); padding-bottom: .4rem;
}
.luna-grid-cell {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: .6rem .3rem; border-radius: var(--radius-sm);
    border: 1px solid transparent; text-decoration: none;
    transition: border-color .2s, background .2s;
}
.luna-grid-cell:hover { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.03); }
.luna-grid-cell.is-today { border-color: var(--oro); }
.luna-grid-cell.is-empty { visibility: hidden; }
.luna-grid-num { font-size: .85rem; color: var(--panna); }
.luna-grid-dot {
    width: 16px; height: 16px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--c), color-mix(in srgb, var(--c) 30%, #0b0b1a));
    box-shadow: 0 0 8px -2px var(--c);
}

/* --- CTA tema natale (link) --- */
a.luna-natal-teaser {
    display: block; text-decoration: none; cursor: pointer;
    transition: border-color .2s var(--ease), background .2s;
}
a.luna-natal-teaser:hover { border-color: var(--oro); background: rgba(232,182,90,.05); }
.luna-natal-cta {
    display: inline-block; margin-top: .7rem; color: var(--oro-soft);
    font-weight: 600; font-size: .92rem;
}

/* --- Sezione calendario del mese (sulla stessa pagina) --- */
.luna-month {
    margin-top: 2.4rem; padding-top: 2rem;
    border-top: 1px solid rgba(185,175,214,.14);
    scroll-margin-top: 104px; /* compensa la navbar sticky quando si naviga con #calendario-mese */
}
.luna-nav-month { margin-top: 0; }