@import url('/css/gemini-constellation.css');
@import url('/css/gemini-star-spotlight.css');
@import url('/css/visible-planets-guide.css');

/*
 * Mobile containment layer for all interactive zodiac-constellation pages.
 * The star table intentionally remains horizontally scrollable, but it must
 * never contribute its 650px min-content width to the page/grid viewport.
 */
.constellation-page,
.constellation-page *,
.constellation-page *::before,
.constellation-page *::after {
    box-sizing: border-box;
}

.constellation-page {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.constellation-container,
.constellation-hero-grid,
.constellation-hero-copy,
.constellation-map-card,
.constellation-main,
.constellation-observer,
.constellation-section,
.constellation-faq,
.constellation-section-heading,
.constellation-location-picker,
.constellation-picker-row,
.constellation-city-control,
.constellation-sky-result,
.constellation-result-top,
.constellation-result-metrics,
.constellation-star-table-wrap,
.constellation-explain-grid,
.constellation-links,
.constellation-nasa-grid,
.constellation-star-spotlight,
.constellation-star-spotlight-copy {
    min-width: 0;
    max-width: 100%;
}

.constellation-map {
    max-width: 100%;
    height: auto;
}

.constellation-city-control input,
.constellation-location-button,
.constellation-city-option {
    box-sizing: border-box;
    max-width: 100%;
}

.constellation-star-table-wrap {
    display: block;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.constellation-star-table {
    max-width: none;
}

.constellation-section-heading h2,
.constellation-nasa h2,
.constellation-result-top h3,
.constellation-star-spotlight-copy h3,
.constellation-lead,
.constellation-privacy,
.constellation-source-note {
    overflow-wrap: break-word;
    word-break: normal;
}

@media (max-width: 720px) {
    .constellation-container {
        width: calc(100% - 22px);
        max-width: calc(100% - 22px);
    }

    .constellation-hero-grid,
    .constellation-main,
    .constellation-observer,
    .constellation-section,
    .constellation-faq {
        width: 100%;
    }

    .constellation-section-heading h2,
    .constellation-nasa h2 {
        font-size: clamp(1.65rem, 8.1vw, 2.25rem);
        line-height: 1.12;
    }

    .constellation-location-picker {
        width: 100%;
        padding: 18px 14px;
    }

    .constellation-picker-row {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .constellation-picker-row > *,
    .constellation-city-control,
    .constellation-city-control input,
    .constellation-location-button {
        width: 100%;
        min-width: 0;
    }

    .constellation-city-control input {
        display: block;
        padding-inline: 14px;
    }

    .constellation-location-button {
        min-height: 54px;
        height: auto;
        padding: 12px 16px;
        white-space: normal;
        line-height: 1.35;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .constellation-or {
        width: 100%;
        text-align: center;
    }

    .constellation-suggestions {
        max-width: 100%;
    }

    .constellation-city-option strong,
    .constellation-city-option small {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .constellation-sky-result {
        width: 100%;
        padding: 19px 14px;
    }

    .constellation-result-top,
    .constellation-result-metrics {
        min-width: 0;
        width: 100%;
    }

    .constellation-result-metrics > div {
        min-width: 0;
    }

    .constellation-map-head {
        flex-wrap: wrap;
    }

    .constellation-map-head > div {
        min-width: 0;
        flex: 1 1 220px;
    }

    .constellation-map-badge {
        flex: 0 0 auto;
    }

    .constellation-star-table-wrap {
        margin-inline: 0;
        padding-bottom: 4px;
    }

    .constellation-star-table {
        width: 560px;
        min-width: 560px;
    }

    .constellation-star-table th,
    .constellation-star-table td {
        white-space: nowrap;
    }

    .constellation-explain-grid,
    .constellation-links,
    .constellation-nasa-grid {
        width: 100%;
        min-width: 0;
    }

    .constellation-links a {
        min-width: 0;
        width: 100%;
        overflow-wrap: anywhere;
    }

    .constellation-star-spotlight {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .constellation-star-spotlight-media,
    .constellation-star-spotlight-media img {
        width: 100%;
        max-width: 100%;
    }

    .constellation-star-spotlight-copy dl div {
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .constellation-container {
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
    }

    .constellation-observer,
    .constellation-section,
    .constellation-faq {
        padding-inline: 15px;
    }

    .constellation-location-picker,
    .constellation-sky-result {
        padding-inline: 12px;
    }

    .constellation-hero h1 {
        font-size: clamp(2rem, 11vw, 3rem);
        overflow-wrap: anywhere;
    }

    .constellation-section-heading h2,
    .constellation-nasa h2 {
        font-size: clamp(1.55rem, 7.8vw, 2rem);
    }
}