/**
 * Programs Page Styles
 *
 * Styles for the All Programs template including:
 * - Page Intro section
 * - Filter buttons and dropdown
 * - Programs grid
 * - Program cards
 */

/* ==========================================================================
   Programs Intro Section
   Uses standard ccs-page-intro block classes for the grid layout.
   Only section-level spacing is defined here.
   ========================================================================== */

.programs-intro {
    margin-top: var(--wp--preset--spacing--sm);
    margin-bottom: var(--wp--preset--spacing--lg);
}

.programs-intro .ccs-header {
    width: 93%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

/* Interests Dropdown */
.programs-filter__interests-select {
    min-width: 200px;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: var(--ccs-radius-pill);
    font-family: var(--ccs-font-body, 'interstate', sans-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.programs-filter__interests-select:hover {
    background-color: #e8e8e8;
    border-color: #ccc;
}

.programs-filter__interests-select:focus {
    outline: none;
    border-color: #000;
}

/* ==========================================================================
   Programs Browse Section (Finding Your Path)
   ========================================================================== */

.programs-browse {
    padding: 2rem 0;
    background: #fff;
}

.programs-browse__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    width: 93%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.programs-browse__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.programs-browse__eyebrow {
    font-family: var(--ccs-font-body, 'interstate', sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    color: #666;
    text-transform: capitalize;
}

.programs-browse__heading {
    margin: 0;
    font-family: var(--ccs-font-heading, 'aktiv-grotesk', sans-serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.2;
}

.programs-browse__description {
    margin: 0;
    font-family: var(--ccs-font-body, 'interstate', sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
}


/* ==========================================================================
   Shadow Divider
   ========================================================================== */

.programs-divider {
    height: 2rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}

/* ==========================================================================
   Programs Filter Section
   ========================================================================== */

.programs-filter {
    padding: clamp(2rem, 10vw, 5rem) 0;
}

/* Grid matches .programs-grid__container (3 cols, 2rem gutter) so the
   dropdown lines up with the third program column. Label gets its own row. */
.programs-filter__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 1rem 2rem;
    width: 93%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.programs-filter__label {
    grid-column: 1 / -1;
    font-family: var(--ccs-font-body, 'interstate', sans-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}

.programs-filter__buttons {
    grid-column: 1 / 3;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.programs-filter__dropdown {
    grid-column: 3;
    justify-self: end;
}

.programs-filter__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: var(--ccs-radius-md);
    font-family: var(--ccs-font-body, 'interstate', sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.programs-filter__btn:hover {
    background: #e8e8e8;
    border-color: #ccc;
}

.programs-filter__btn--active {
    background: var(--ccs-color-primary);
    border-color: var(--ccs-color-primary);
    color: #000;
}

.programs-filter__btn--active:hover {
    background: var(--ccs-color-primary);
    border-color: var(--ccs-color-primary);
}

/* ==========================================================================
   Programs Grid Section
   ========================================================================== */

.programs-grid {
    margin-bottom: var(--wp--preset--spacing--lg);
}

.programs-grid__wrapper {
    width: 93%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.programs-grid__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7rem 2rem;
}

.programs-grid__no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
}

.programs-grid__no-results p {
    font-family: var(--ccs-font-body, 'interstate', sans-serif);
    font-size: 1.125rem;
    color: #666;
    margin-bottom: 1.5rem;
}

/* No results section (outside container) */
#no-results {
    text-align: center;
    padding: 3rem 1rem;
}

#no-results p {
    font-family: var(--ccs-font-body, 'interstate', sans-serif);
    font-size: 1.125rem;
    color: #666;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Program Card Component
   ========================================================================== */

.program-card {
    display: flex;
    flex-direction: column;
}

/* Card Image */
.program-card__image-link {
    display: block;
    text-decoration: none;
}

/* Card image: shared .ccs-media + .ccs-media--4-3 + .ccs-hover-zoom classes
   (block-base.css) supply the wrapper box, ratio, cover, and hover zoom —
   they also opt the image into the scroll clip-wipe reveal. */

/* Card Content */
.program-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1.25rem;
}

/* Chips (Degrees) */
.program-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Card Title */
.program-card__title {
    margin: 0;
    font-family: var(--ccs-font-heading, 'aktiv-grotesk', sans-serif);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
}

.program-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.program-card__title a:hover {
    color: #666;
}

/* Card Emphases */
.program-card__emphases {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.program-card__emphases-label {
    font-family: var(--ccs-font-body, 'interstate', sans-serif);
    font-size: 0.875rem;
    font-weight: normal;
    color: #333;
}

.program-card__emphases-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Card Description */
.program-card__description {
    font-family: var(--ccs-font-body, 'interstate', sans-serif);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #333;
}

/* Card Interests (Studies Include) */
.program-card__interests {
    font-family: var(--ccs-font-body, 'interstate', sans-serif);
    font-size: 0.875rem;
    line-height: 1.6;
    color: #666;
}

.program-card__interests-label {
    font-weight: normal;
    color: #333;
    margin-right: 0.25rem;
}

.program-card__interest-link {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity 0.2s ease;
}

.program-card__interest-link:hover {
    opacity: 0.6;
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */

@media (max-width: 900px) {
    .programs-browse__wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .programs-browse__heading {
        font-size: 1.5rem;
    }

    .programs-filter__wrapper {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .programs-filter__buttons,
    .programs-filter__dropdown {
        grid-column: 1;
        justify-self: start;
    }

    .programs-grid__container {
        grid-template-columns: repeat(2, 1fr);
    }

    /* .program-card__title keeps its base 1.5rem at every width */
}

/* The apply-footer section-card overlaps the grid from below. The shared
   clearance rule in block-base.css only matches .ccs-block siblings, so the
   grid clears it via its --lg bottom margin — but that token drops from 6rem
   to 3rem at 768px, so make up the difference here. */
@media (max-width: 768px) {
    .programs-grid {
        padding-bottom: 3rem;
    }
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .programs-intro .ccs-header {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .programs-browse__wrapper {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .programs-browse__heading {
        font-size: 1.25rem;
    }

    .programs-browse__description {
        font-size: 0.9375rem;
    }

    .programs-filter__dropdown {
        width: 100%;
    }

    .programs-filter__wrapper {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Filter pills become a horizontal scroller instead of wrapping.
       min-width: 0 + stretch are load-bearing: as a grid item the row
       defaults to min-width: auto (and justify-self: start above), so the
       nowrap pills would inflate the 1fr track past the viewport and the
       PAGE would scroll instead of the row. */
    .programs-filter__buttons {
        min-width: 0;
        justify-self: stretch;
        gap: 0.375rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* bleed the scroll area to the screen edge so pills scroll under
           it; the matching padding keeps the first pill aligned with the
           wrapper's 16px gutter */
        margin-inline: -16px;
        padding-inline: 16px;
    }

    .programs-filter__buttons::-webkit-scrollbar {
        display: none;
    }

    .programs-filter__btn {
        font-size: 0.8125rem;
        padding: 0.5rem 1rem;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .programs-filter__interests-select {
        width: 100%;
        font-size: 0.875rem;
    }

    .programs-grid__wrapper {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .programs-grid__container {
        grid-template-columns: 1fr;
        /* Standardized stacked-card rhythm (token lives in the plugin's
           block-base.css, loaded on every page). */
        gap: var(--ccs-grid-gap-mobile, 2.5rem);
    }

    .program-card__content {
        gap: 0.625rem;
        padding-top: 1rem;
    }

    .program-card__description {
        font-size: 0.875rem;
    }
}