/**
 * Doctors sections (layout doctor.section): a grid or a horizontal scroll row, chosen separately for desktop
 * (from 700px) and mobile by the modifiers --desktop-{grid|scroll} and --mobile-{grid|scroll}; --cols-N sets the
 * cards per row (grid) or visible at once (scroll row). Cards past "Show first" are [hidden] until "Show more".
 * @package    com_doctors
 * @since      2.0.0
 */

.doctors-section {
    --doctors-gap: 24px;
    margin-block: var(--md-spacing-4);
}

/* ==========================================================================
   Head: title with counter, view-all link, arrows
   ========================================================================== */

.doctors-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--md-spacing-1) var(--md-spacing-2);
    margin-bottom: var(--md-spacing-2);
}

.doctors-section__title {
    margin: 0;
}

.doctors-section__count {
    color: var(--md-text-secondary);
    font-weight: 400;
}

.doctors-section__actions {
    display: flex;
    align-items: center;
    gap: var(--md-spacing-1);
}

.doctors-section__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--md-border-color);
    border-radius: 50%;
    background: var(--md-surface);
    color: var(--md-text-primary);
    cursor: pointer;
    transition: background var(--md-transition-duration-short) var(--md-transition-easing-standard);
}

.doctors-section__nav:hover {
    background: var(--md-chip-bg);
}

.doctors-section__nav:disabled {
    opacity: 0.4;
    cursor: default;
}

/* "Show more" (the items' last cell): a pill under a grid; in a scroll row, the row's next card (below) */
.doctors-section__more-cell {
    display: grid;
    justify-items: center;
    min-width: 0;
}

.doctors-section__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--md-spacing-2);
    padding: 8px 16px 8px 24px;
    border: 1px solid var(--md-primary);
    border-radius: 24px;
    background: var(--md-surface);
    color: var(--md-primary);
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--md-transition-duration-short) var(--md-transition-easing-standard),
                color var(--md-transition-duration-short) var(--md-transition-easing-standard),
                transform var(--md-transition-duration-standard) var(--md-transition-easing-standard),
                box-shadow var(--md-transition-duration-standard) var(--md-transition-easing-standard);
}

.doctors-section__more:hover {
    background: var(--md-primary);
    color: var(--md-surface);
}

.doctors-section__more-icon {
    display: none;
}

.doctors-section__more-arrow {
    font-size: 1.4em;
    transition: transform var(--md-transition-duration-standard) var(--md-transition-easing-standard);
}

.doctors-section__more:hover .doctors-section__more-arrow {
    transform: translateX(3px);
}

/* The card look, used by both scroll rows (desktop and mobile rules below). Sites set --doctors-more-bg/-fg. */
.doctors-section {
    --doctors-more-bg: linear-gradient(120deg, var(--md-primary-dark) 0%, var(--md-primary) 100%);
    --doctors-more-fg: #fff;
}

/* ==========================================================================
   Items
   ========================================================================== */

.doctors-section__items {
    position: relative; /* doctors-section.js scrolls to an item's offsetLeft */
    display: grid;
    gap: var(--doctors-gap);
}

/* A grid cell, so the card stretches to the row's height; min-width 0 keeps long content inside the cell */
.doctors-section__item {
    display: grid;
    min-width: 0;
}

/* Cells can be narrower than a full name: let it wrap instead of overflowing the card */
.doctors-section .doc-name {
    white-space: normal;
}

.doctors-section__item[hidden],
.doctors-section__item.is-city-hidden {
    display: none;
}

/* Beats the per-view display of the cell below */
.doctors-section .doctors-section__more-cell[hidden] {
    display: none;
}

.doctors-section__city-empty {
    padding: var(--md-spacing-2) 0;
    color: var(--md-text-secondary);
}

.doctors-section__city-all {
    min-height: 40px;
    margin-top: var(--md-spacing-1);
    padding: 0 1rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: var(--md-primary, inherit);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Cards fill their cell: lift the card's own max width; a grid link stretches the card to the row's height */
.doctors-section .doctor-card-link {
    --md-card-width: none;
    display: grid;
    width: 100%;
}

/* ==========================================================================
   Desktop (from 700px): --desktop-*. --cols-N = at most N cards per row (grid) or in view (scroll row), never
   narrower than 240px, so a narrow column shows fewer.
   ========================================================================== */

.doctors-section {
    --doctors-min: 240px;     /* narrowest grid cell */
    --doctors-width: 280px;   /* scroll row cell with --cols-auto */
}

.doctors-section--cols-1 { --doctors-width: 100%; }
.doctors-section--cols-2 { --doctors-width: max(var(--doctors-min), (100% - var(--doctors-gap)) / 2); }
.doctors-section--cols-3 { --doctors-width: max(var(--doctors-min), (100% - 2 * var(--doctors-gap)) / 3); }
.doctors-section--cols-4 { --doctors-width: max(var(--doctors-min), (100% - 3 * var(--doctors-gap)) / 4); }

.doctors-section:not(.doctors-section--cols-auto) {
    --doctors-grid-min: var(--doctors-width);
}

@media screen and (min-width: 700px) {
    .doctors-section--desktop-grid .doctors-section__items {
        grid-template-columns: repeat(auto-fill, minmax(var(--doctors-grid-min, min(100%, var(--doctors-min))), 1fr));
    }

    .doctors-section--desktop-grid .doctors-section__nav {
        display: none;
    }

    .doctors-section--desktop-grid .doctors-section__more-cell {
        grid-column: 1 / -1;
    }

    .doctors-section--desktop-scroll .doctors-section__items {
        grid-auto-flow: column;
        grid-auto-columns: var(--doctors-width);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: var(--md-spacing-1);
    }

    .doctors-section--desktop-scroll .doctors-section__item {
        scroll-snap-align: start;
    }
    /* "Show more" is the row's next card: gradient, a ringed icon, the label and an arrow */
    .doctors-section--desktop-scroll .doctors-section__more-cell {
        scroll-snap-align: start;
    }

    .doctors-section--desktop-scroll .doctors-section__more {
        flex-direction: column;
        justify-content: center;
        gap: var(--md-spacing-2);
        width: 100%;
        height: 100%;
        min-height: 240px;
        margin: 0;
        padding: var(--md-spacing-3);
        border: 0;
        border-radius: var(--md-card-border-radius);
        background: var(--doctors-more-bg);
        color: var(--doctors-more-fg);
        box-shadow: var(--md-card-shadow);
        text-align: center;
    }

    .doctors-section--desktop-scroll .doctors-section__more:hover {
        background: var(--doctors-more-bg);
        color: var(--doctors-more-fg);
        box-shadow: var(--md-shadow-lg);
        transform: translateY(-4px);
    }

    .doctors-section--desktop-scroll .doctors-section__more-icon {
        display: grid;
        place-items: center;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgb(255 255 255 / 0.16);
        box-shadow: 0 0 0 12px rgb(255 255 255 / 0.08), 0 0 0 24px rgb(255 255 255 / 0.04);
        font-size: 44px;
        transition: transform var(--md-transition-duration-long) var(--md-transition-easing-standard);
    }

    .doctors-section--desktop-scroll .doctors-section__more:hover .doctors-section__more-icon {
        transform: scale(1.08);
    }

    .doctors-section--desktop-scroll .doctors-section__more-label {
        margin-top: var(--md-spacing-1);
        font-size: 1.1em;
        font-weight: 600;
    }

    .doctors-section--desktop-scroll .doctors-section__more-arrow {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 1px solid rgb(255 255 255 / 0.5);
        border-radius: 50%;
    }
}

/* ==========================================================================
   Mobile (below 700px): --mobile-*; a scroll row shows 80% cards so the next one peeks in
   ========================================================================== */

@media screen and (max-width: 699.98px) {
    .doctors-section {
        --doctors-gap: 16px;
    }

    .doctors-section--mobile-grid .doctors-section__items {
        grid-template-columns: 1fr;
    }

    /* Phones swipe the row: no arrows */
    .doctors-section__nav {
        display: none;
    }

    .doctors-section--mobile-scroll .doctors-section__items {
        grid-auto-flow: column;
        grid-auto-columns: 80%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: var(--md-spacing-1);
    }

    .doctors-section--mobile-scroll .doctors-section__item {
        scroll-snap-align: start;
    }
    /* "Show more" is the row's next card: gradient, a ringed icon, the label and an arrow */
    .doctors-section--mobile-scroll .doctors-section__more-cell {
        scroll-snap-align: start;
    }

    .doctors-section--mobile-scroll .doctors-section__more {
        flex-direction: column;
        justify-content: center;
        gap: var(--md-spacing-2);
        width: 100%;
        height: 100%;
        min-height: 240px;
        margin: 0;
        padding: var(--md-spacing-3);
        border: 0;
        border-radius: var(--md-card-border-radius);
        background: var(--doctors-more-bg);
        color: var(--doctors-more-fg);
        box-shadow: var(--md-card-shadow);
        text-align: center;
    }

    .doctors-section--mobile-scroll .doctors-section__more:hover {
        background: var(--doctors-more-bg);
        color: var(--doctors-more-fg);
        box-shadow: var(--md-shadow-lg);
        transform: translateY(-4px);
    }

    .doctors-section--mobile-scroll .doctors-section__more-icon {
        display: grid;
        place-items: center;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgb(255 255 255 / 0.16);
        box-shadow: 0 0 0 12px rgb(255 255 255 / 0.08), 0 0 0 24px rgb(255 255 255 / 0.04);
        font-size: 44px;
        transition: transform var(--md-transition-duration-long) var(--md-transition-easing-standard);
    }

    .doctors-section--mobile-scroll .doctors-section__more:hover .doctors-section__more-icon {
        transform: scale(1.08);
    }

    .doctors-section--mobile-scroll .doctors-section__more-label {
        margin-top: var(--md-spacing-1);
        font-size: 1.1em;
        font-weight: 600;
    }

    .doctors-section--mobile-scroll .doctors-section__more-arrow {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 1px solid rgb(255 255 255 / 0.5);
        border-radius: 50%;
    }
}