/*
 * NaviGAYs Public Submissions — Responsive layout
 */

@media (max-width: 1100px) {
    .ngps-shell .ngps-type-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ngps-shell
    .ngps-type-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1000px) {
    .ngps-progress {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .ngps-grid--4,
    .ngps-grid--3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ngps-shell .ngps-step-one-card {
        padding: 20px;
    }
}

@media (max-width: 720px) {
    .ngps-shell {
        width:
                min(
                        calc(100% - 16px),
                        1180px
                );
        margin: 16px auto;
    }

    .ngps-hero {
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
        border-radius: 22px;
    }

    .ngps-hero__icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 14px;
    }

    .ngps-hero h1 {
        font-size:
                clamp(
                        24px,
                        7vw,
                        31px
                );
    }

    .ngps-hero p:last-child {
        font-size: 12.5px;
    }

    .ngps-progress {
        display: grid;
        grid-auto-columns:
                minmax(
                        155px,
                        72vw
                );
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .ngps-progress__item {
        scroll-snap-align: start;
    }

    .ngps-progress__item strong {
        white-space: normal;
    }

    .ngps-form {
        border-radius: 20px;
    }

    .ngps-step {
        padding: 22px 16px;
    }

    .ngps-section-heading {
        gap: 11px;
        margin-bottom: 22px;
    }

    .ngps-section-heading > span {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .ngps-grid--2,
    .ngps-grid--3,
    .ngps-grid--4,
    .ngps-upload-grid,
    .ngps-check-grid {
        grid-template-columns: 1fr;
    }

    .ngps-field--wide {
        grid-column: auto;
    }

    .ngps-additional-categories,
    .ngps-conditional-card,
    .ngps-subsection,
    .ngps-legal-card,
    .ngps-signature-card,
    .ngps-review-note {
        padding: 16px;
        border-radius: 16px;
    }

    .ngps-shell .ngps-step-one-card {
        margin-top: 15px;
        padding: 17px;
        border-radius: 18px;
    }

    .ngps-shell
    .ngps-step-one-card__heading {
        gap: 10px;
    }

    .ngps-shell
    .ngps-step-one-card__number {
        width: 32px;
        height: 32px;
        border-radius: 11px;
    }

    .ngps-shell
    .ngps-step-one-card__heading h3 {
        font-size: 15px;
    }

    .ngps-shell
    .ngps-step-one-card__heading p {
        font-size: 12px;
    }

    .ngps-shell .ngps-type-grid {
        grid-template-columns: 1fr;
        gap: 11px;
        margin-top: 16px;
    }

    .ngps-shell .ngps-type-card,
    .ngps-shell
    .ngps-type-card:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .ngps-shell .ngps-type-card {
        min-height: 0;
        padding: 17px;
        border-radius: 17px;
    }

    .ngps-shell
    .ngps-type-card__copy {
        padding-right: 25px;
    }

    .ngps-shell
    .ngps-type-card__icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .ngps-shell
    .ngps-type-card__icon svg {
        width: 24px;
        height: 24px;
    }

    .ngps-shell
    .ngps-type-card__copy small {
        margin-top: 6px;
    }

    .ngps-shell
    .ngps-additional-categories
    .ngps-inline-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .ngps-shell
    .ngps-additional-categories
    .ngps-inline-heading
    .ngps-button {
        width: 100%;
    }

    .ngps-additional-row,
    .ngps-shell .ngps-additional-row {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            42px;
    }

    .ngps-icon-button,
    .ngps-shell .ngps-icon-button {
        width: 42px;
    }

    .ngps-map {
        height: 330px;
    }

    .ngps-map-card__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .ngps-inline-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .ngps-inline-heading
    .ngps-button {
        width: 100%;
    }

    .ngps-signature-card canvas {
        height: 170px;
    }

    .ngps-form-footer {
        align-items: stretch;
        flex-direction: column;
        padding: 14px 16px;
    }

    .ngps-form-footer__spacer {
        display: none;
    }

    .ngps-form-footer
    .ngps-button {
        width: 100%;
    }

    .ngps-popup {
        align-items: end;
        padding: 14px;
    }

    .ngps-popup__dialog {
        width: 100%;
        border-radius: 22px;
    }

    .ngps-popup__content {
        padding: 25px 21px 19px;
    }

    .ngps-popup__actions {
        flex-direction: column-reverse;
        padding: 0 21px 21px;
    }

    .ngps-popup__button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .ngps-shell {
        width: calc(100% - 12px);
        margin: 10px auto;
    }

    .ngps-hero {
        gap: 11px;
        padding: 17px 15px;
    }

    .ngps-hero__icon {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
    }

    .ngps-hero h1 {
        font-size: 23px;
    }

    .ngps-eyebrow {
        font-size: 10px;
    }

    .ngps-progress {
        grid-auto-columns:
                minmax(
                        145px,
                        82vw
                );
        padding: 8px;
    }

    .ngps-step {
        padding: 20px 13px;
    }

    .ngps-section-heading h2 {
        font-size: 21px;
    }

    .ngps-shell
    .ngps-step-one-card {
        padding: 15px;
    }

    .ngps-shell
    .ngps-type-card {
        gap: 11px;
        padding: 15px;
    }

    .ngps-shell
    .ngps-type-card__check {
        top: 12px;
        right: 12px;
        width: 23px;
        height: 23px;
    }

    .ngps-shell
    .ngps-type-card__icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .ngps-shell
    .ngps-type-card__copy strong {
        font-size: 14px;
    }

    .ngps-shell
    .ngps-type-card__copy small {
        font-size: 11.7px;
    }

    .ngps-shell
    .ngps-step-one-status {
        padding:
                12px
                12px
                12px
                39px;
    }

    .ngps-additional-row,
    .ngps-input-action,
    .ngps-shell
    .ngps-additional-row {
        grid-template-columns: 1fr;
    }

    .ngps-icon-button,
    .ngps-shell
    .ngps-icon-button {
        width: 100%;
        height: 42px;
    }

    .ngps-upload-card {
        min-height: 220px;
        padding: 18px;
    }

    .ngps-map {
        height: 290px;
    }

    .ngps-preview-item {
        width: 96px;
    }

    .ngps-popup {
        padding: 8px;
    }

    .ngps-popup__dialog {
        border-radius: 19px;
    }

    .ngps-popup__content {
        padding: 23px 17px 17px;
    }

    .ngps-popup__icon {
        width: 52px;
        height: 52px;
        margin-bottom: 14px;
        border-radius: 17px;
    }

    .ngps-popup__title {
        font-size: 19px;
    }

    .ngps-popup__message {
        font-size: 13px;
    }

    .ngps-popup__actions {
        padding: 0 17px 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ngps-shell *,
    .ngps-shell *::before,
    .ngps-shell *::after,
    .ngps-popup,
    .ngps-popup *,
    .ngps-popup *::before,
    .ngps-popup *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    .ngps-shell {
        --ngps-line: #77737a;
        --ngps-input-line: #77737a;
    }

    .ngps-field input,
    .ngps-field select,
    .ngps-field textarea,
    .ngps-button,
    .ngps-progress__item,
    .ngps-shell .ngps-type-card,
    .ngps-shell .ngps-step-one-card {
        border-width: 2px;
    }
}

@media print {
    .ngps-progress,
    .ngps-form-footer,
    .ngps-map-search,
    .ngps-geocode-results,
    .ngps-popup {
        display: none !important;
    }

    .ngps-shell {
        width: 100%;
        margin: 0;
    }

    .ngps-hero,
    .ngps-form,
    .ngps-shell .ngps-step-one-card,
    .ngps-shell .ngps-type-card {
        box-shadow: none;
    }
}