/* Providers finder — extends locations.css for the directory grid. */

.opa-providers-page {
    --opa-loc-card-bg: #fff;
    --opa-loc-card-border: #e2e6ea;
    --opa-loc-card-radius: 6px;
    --opa-loc-shadow: 0 1px 2px rgba(0, 0, 0, .04);

    /* WCAG 2.4.7: visible focus ring on every interactive control. */
    & :is(a, button, input, select):focus-visible {
        outline: 2px solid var(--moss);
        outline-offset: 2px;
    }
}

/* Heading reset for the card name (now an <h3>) so the overlay style
   from locations.css still wins. */
h3.opa-provider-card__name {
    margin: 0;
    font-size: .85rem;
    font-weight: 600;
}

.opa-provider-card__job-title {
    text-align: center;
    margin-bottom: 0;
}

/* Filter bar */

.opa-providers-filters {
    /* Desktop: dropdowns row 1, search + submit row 2. */
    @media (min-width: 901px) {
        & .opa-loc-filters__row {
            grid-template-columns: 1fr 1fr 1fr;
        }
        & .opa-loc-filters__field--name {
            grid-column: 1 / span 2;
        }
        & .opa-providers-filters__submit {
            grid-column: 3;
        }
    }
}

.opa-loc-filters__field--name {
    position: relative;
}

.opa-loc-filters__field input.opa-loc-filters__name-input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    border: 1px solid var(--opa-loc-card-border);
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>") no-repeat .75rem center / 1rem 1rem;
    border-radius: 4px;
    padding: .6rem 2.5rem .6rem 2.4rem;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--charcoal);
    font-family: inherit;

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

    &:focus {
        outline: 2px solid var(--moss);
        outline-offset: -1px;
    }

    &:not(:placeholder-shown) ~ .opa-loc-filters__name-clear {
        display: flex;
    }
}

.opa-loc-filters__name-clear {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: transparent;
    color: var(--charcoal);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;

    &:is(:hover, :focus-visible) {
        background-color: rgba(0, 0, 0, .08);
        outline: none;
    }
}

/* Grid */

.opa-providers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin: 0 0 1.5rem;

    & > .opa-provider-card {
        gap: .75rem;
    }

    & .opa-provider-card__specialties {
        margin-bottom: 0;
    }

    & .opa-provider-card__btn {
        margin-top: auto;
        margin-bottom: 1rem;
    }
}

.opa-providers-grid__empty {
    grid-column: 1 / -1;
    margin: 0;
}


@media (max-width: 768px) {
    .opa-providers-grid .opa-provider-card__media {
        aspect-ratio: auto;
        height: auto;
        overflow: hidden;
    }

    .opa-providers-grid .opa-provider-card__media img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
    }
}


/* Specialty badges (single-location card extension). */

.opa-provider-card__specialties {
    list-style: none;
    padding: 0 .5rem;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.opa-provider-card__specialty {
    display: inline-block;
    /* steel-ocean-blue gives 7.4:1 vs white (AA passes); dusty-blue was 4.32:1. */
    background: var(--steel-ocean-blue);
    color: var(--white);
    border-radius: 5px;
    padding: .25rem .65rem;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.3;
}

/* Load More — full-width grid child so it spans every column. */

.opa-providers-more {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin: .75rem 0 .5rem;
}

.opa-providers-more__btn {
    display: inline-block;
    color: var(--charcoal);
    background: transparent;
    text-decoration: none;
    border: 2px solid var(--moss);
    border-radius: 99px;
    padding: .55rem 2.25rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;

    &:is(:hover, :focus) {
        background: var(--moss);
        color: var(--white);
        text-decoration: none;
    }

    &[aria-busy="true"] {
        opacity: .6;
        pointer-events: none;
    }
}

/* Fade-in: initial load staggers via nth-child; Load More via inline delay set by JS. */

@keyframes opa-card-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.opa-providers-grid > .opa-provider-card {
    animation: opa-card-enter .35s ease both;

    &:nth-child(1)  { animation-delay:   0ms; }
    &:nth-child(2)  { animation-delay:  30ms; }
    &:nth-child(3)  { animation-delay:  60ms; }
    &:nth-child(4)  { animation-delay:  90ms; }
    &:nth-child(5)  { animation-delay: 120ms; }
    &:nth-child(6)  { animation-delay: 150ms; }
    &:nth-child(7)  { animation-delay: 180ms; }
    &:nth-child(8)  { animation-delay: 210ms; }
    &:nth-child(9)  { animation-delay: 240ms; }
    &:nth-child(10) { animation-delay: 270ms; }
    &:nth-child(11) { animation-delay: 300ms; }
    &:nth-child(12) { animation-delay: 330ms; }
    &:nth-child(13) { animation-delay: 360ms; }
    &:nth-child(14) { animation-delay: 390ms; }
    &:nth-child(15) { animation-delay: 420ms; }

    @media (prefers-reduced-motion: reduce) {
        animation: none;
    }
}

/* Loading state. */

body.opa-loc-loading {
    & .opa-providers-grid,
    & .opa-providers-grid__empty {
        opacity: .5;
        pointer-events: none;
        transition: opacity .15s ease;
    }
}