/**
 * MoonPhase module styles.
 *
 * Mobile-first: the base rules target small screens and narrow module
 * positions; media queries enhance spacing and type on larger viewports, and
 * a container query switches to a side-by-side layout only when the module
 * itself is wide enough (so narrow sidebars stay stacked on any screen).
 * Every selector is namespaced with "moonphase"; no global selectors.
 */

/* ---- Base (mobile) ------------------------------------------------------ */

.moonphase {
    --moonphase-moon-size: 200px;
    --moonphase-bg: #f7f6f2;
    --moonphase-fg: #1f2330;
    --moonphase-muted: #5b6070;
    --moonphase-divider: rgba(31, 35, 48, 0.14);
    --moonphase-lit: #f1e6bf;
    --moonphase-dark: #2b3042;
    --moonphase-maria: #8d8466;
    --moonphase-maria-opacity: 0.22;
    --moonphase-rim: rgba(31, 35, 48, 0.25);
    --moonphase-radius: 0.75rem;
    --moonphase-pad: 1rem;

    container-type: inline-size;
    container-name: moonphase;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--moonphase-pad);
    border-radius: var(--moonphase-radius);
    background: var(--moonphase-bg);
    color: var(--moonphase-fg);
    font-size: 1rem;
    line-height: 1.45;
    overflow-wrap: break-word;
}

.moonphase--midnight {
    --moonphase-bg: #11162a;
    --moonphase-fg: #eef0f7;
    --moonphase-muted: #a7adc2;
    --moonphase-divider: rgba(238, 240, 247, 0.16);
    --moonphase-lit: #f4f0dc;
    --moonphase-dark: #252b44;
    --moonphase-maria: #9b9478;
    --moonphase-rim: rgba(238, 240, 247, 0.3);
}

.moonphase--minimal {
    --moonphase-bg: transparent;
    --moonphase-fg: inherit;
    --moonphase-muted: inherit;
    --moonphase-divider: currentColor;
    --moonphase-lit: transparent;
    --moonphase-dark: currentColor;
    --moonphase-maria-opacity: 0;
    --moonphase-rim: currentColor;
    --moonphase-pad: 0;
}

.moonphase__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    justify-items: center;
    text-align: center;
}

.moonphase__moon {
    box-sizing: border-box;
    width: 100%;
    max-width: min(100%, var(--moonphase-moon-size));
    aspect-ratio: 1 / 1;
    margin-inline: auto;
}

.moonphase__svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.moonphase__svg-disc {
    fill: var(--moonphase-lit);
}

.moonphase__svg-shadow {
    fill: var(--moonphase-dark);
}

.moonphase__svg-maria {
    fill: var(--moonphase-maria);
    opacity: var(--moonphase-maria-opacity);
}

.moonphase__svg-rim {
    fill: none;
    stroke: var(--moonphase-rim);
    stroke-width: 0.75;
}

.moonphase__details {
    display: grid;
    gap: 1rem;
    width: 100%;
    min-width: 0;
}

.moonphase__current,
.moonphase__event {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.moonphase__event {
    padding-top: 1rem;
    border-top: 1px solid var(--moonphase-divider);
}

.moonphase__label,
.moonphase__phase,
.moonphase__illumination,
.moonphase__age,
.moonphase__event-name,
.moonphase__event-when,
.moonphase__event-timezone {
    margin: 0;
}

.moonphase__label {
    color: var(--moonphase-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.moonphase__phase {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.moonphase__illumination,
.moonphase__age {
    color: var(--moonphase-muted);
}

.moonphase__event-name {
    font-size: 1.0625rem;
    font-weight: 600;
}

.moonphase__event-when {
    font-variant-numeric: tabular-nums;
}

.moonphase__event-date,
.moonphase__event-time {
    display: block;
}

.moonphase__event-timezone {
    color: var(--moonphase-muted);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.moonphase__calendar-link {
    margin: 0;
    padding-top: 0.25rem;
}

.moonphase__calendar-anchor {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.moonphase__calendar-anchor:hover {
    text-decoration-thickness: 2px;
}

.moonphase__calendar-anchor:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* ---- Larger viewports: spacing and type --------------------------------- */

@media (min-width: 576px) {
    .moonphase {
        --moonphase-pad: 1.25rem;
    }

    .moonphase--minimal {
        --moonphase-pad: 0;
    }

    .moonphase__phase {
        font-size: 1.375rem;
    }
}

@media (min-width: 768px) {
    .moonphase {
        --moonphase-pad: 1.5rem;
    }

    .moonphase--minimal {
        --moonphase-pad: 0;
    }

    .moonphase__phase {
        font-size: 1.5rem;
    }
}

/* ---- Wide module positions: Moon beside the details --------------------- */

@container moonphase (min-width: 30rem) {
    .moonphase__container {
        grid-template-columns: minmax(0, min(var(--moonphase-moon-size), 45%)) minmax(0, 1fr);
        gap: 1.5rem;
        align-items: center;
        justify-items: stretch;
        text-align: start;
    }

    .moonphase__moon {
        max-width: 100%;
    }
}