/* orphans page styles. */

.orphan-list-page {
        --orphan-ink: #123c31;
        --orphan-green: #1f5a48;
        --orphan-orange: #ff5f00;
        --orphan-orange-ink: #b84200;
        --orphan-paper: #fff8ec;
        --orphan-soft: #f2eadb;
        color: var(--orphan-ink);
    }

    /* .orphan-list-page .program-collage-hero::after,
    html[dir="rtl"] .orphan-list-page .program-collage-hero::after {
        background: rgba(8, 38, 30, .79) !important;
    } */

    .orphan-list-page .program-collage-hero__content {
        align-content: center;
        padding-block: clamp(5rem, 9vw, 8rem) !important;
    }

    .orphan-list-page .program-collage-hero__copy { max-width: 64rem; }
    .orphan-list-page .program-collage-hero__badge { color: var(--hog-red-soft) !important; }
    .orphan-list-page .program-collage-hero__title {
        max-width: 14ch;
        font-size: clamp(3rem, 7vw, 7rem) !important;
        line-height: .94 !important;
    }

    .orphan-list-page .program-collage-hero__description {
        max-width: 50ch;
        font-size: clamp(1rem, 1.45vw, 1.2rem);
    }

    .orphan-list-page .program-collage-hero__actions a {
        min-height: 3.25rem;
        border-radius: 4px !important;
        box-shadow: none !important;
    }

    .orphan-list-page .priority-cases-section {
        margin-top: clamp(3rem, 7vw, 6rem) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .orphan-list-page .priority-cases-section > div { padding-inline: 0 !important; }
    .orphan-list-page .priority-cases-section h2 {
        max-width: 15ch;
        font-family: Georgia, 'Times New Roman', serif;
        font-weight: 500 !important;
        line-height: .98 !important;
    }

    .orphan-list-page .priority-cases-section > div > div:last-child a {
        border-radius: 4px !important;
        background: var(--orphan-paper) !important;
    }

    .orphan-ledger {
        display: grid;
        grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.78fr);
        margin-top: var(--hog-section-space);
        border: 1px solid var(--orphan-ink);
        border-radius: 6px;
        overflow: hidden;
        background: var(--orphan-paper);
    }

    .orphan-ledger__intro {
        padding: clamp(1.5rem, 3vw, 3rem);
        color: var(--orphan-paper);
        background: var(--orphan-green);
    }

    .orphan-ledger__intro h2 {
        max-width: 11ch;
        margin: 0;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: clamp(2rem, 3.8vw, 4rem);
        font-weight: 500;
        line-height: .98;
        letter-spacing: 0;
    }

    .orphan-ledger__intro p { max-width: 27ch; margin: 1.25rem 0 0; line-height: 1.55; }

    .orphan-ledger__stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1px;
        margin: 0;
        background: var(--orphan-ink);
    }

    .orphan-ledger__stats > * {
        display: flex;
        min-width: 0;
        flex-direction: column-reverse;
        justify-content: space-between;
        padding: clamp(1rem, 2.3vw, 2rem);
        color: var(--orphan-ink);
        background: var(--orphan-paper);
        text-decoration: none;
        transition: color 180ms ease, background-color 180ms ease;
    }

    .orphan-ledger__stats > a:hover,
    .orphan-ledger__stats > a:focus-visible {
        color: var(--orphan-paper);
        background: var(--hog-orange);
        outline: none;
    }

    .orphan-ledger__stats dt {
        font-size: .72rem;
        font-weight: 900;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .orphan-ledger__stats dd {
        margin: 0 0 2.5rem;
        color: var(--hog-orange);
        font-family: Georgia, 'Times New Roman', serif;
        font-size: clamp(2.8rem, 5vw, 5.5rem);
        font-weight: 500;
        line-height: .8;
    }

    .orphan-ledger__stats > a:hover dd,
    .orphan-ledger__stats > a:focus-visible dd { color: var(--orphan-paper); }
    .orphan-ledger__stats dd span { font-size: .42em; vertical-align: top; }

    .orphan-list-page #orphans-list {
        scroll-margin-top: 80px;
        margin-top: var(--hog-section-space) !important;
        overflow: hidden;
        border: 1px solid var(--orphan-ink) !important;
        border-radius: 6px !important;
        background: var(--orphan-paper) !important;
        box-shadow: none !important;
    }

    .orphan-list-page #orphans-list > div:first-child {
        overflow: visible;
        border-bottom: 1px solid var(--orphan-ink) !important;
        background: var(--orphan-soft);
    }

    .orphan-catalog-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .orphan-catalog-heading h2 {
        margin: 0;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: clamp(2.2rem, 4.5vw, 4.8rem);
        font-weight: 500;
        line-height: .95;
        letter-spacing: 0;
    }

    .orphan-catalog-heading p { max-width: 40rem; margin: .9rem 0 0; line-height: 1.55; }
    .orphan-catalog-heading__count { flex: 0 0 auto; text-align: end; }
    .orphan-catalog-heading__count strong {
        display: block;
        color: var(--hog-orange);
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 2.5rem;
        font-weight: 500;
        line-height: 1;
    }
    .orphan-catalog-heading__count span { font-size: .72rem; font-weight: 900; text-transform: uppercase; }

    .orphan-filter-workspace {
        display: grid;
        grid-template-columns: minmax(13rem, .34fr) minmax(0, 1fr);
        overflow: hidden;
        border-radius: 6px;
        background: var(--orphan-paper);
        box-shadow:
            0 0 0 1px rgba(18, 60, 49, .2),
            0 20px 50px rgba(31, 90, 72, .08);
    }

    .orphan-filter-guide {
        position: relative;
        display: flex;
        min-width: 0;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem;
        padding: clamp(1.35rem, 2.5vw, 2rem);
        color: var(--orphan-paper);
        background: var(--orphan-green);
    }

    .orphan-filter-guide::after {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 3.5rem;
        height: 4px;
        background: var(--orphan-orange);
        content: "";
    }

    .orphan-filter-guide__label {
        margin: 0 0 1.1rem;
        color: #ffbf99;
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .03em;
    }

    .orphan-filter-guide h3 {
        max-width: 9ch;
        margin: 0;
        color: var(--orphan-paper);
        font-family: Georgia, 'Times New Roman', serif;
        font-size: clamp(1.8rem, 2.5vw, 2.65rem);
        font-weight: 500;
        line-height: .98;
    }

    .orphan-filter-guide h3 + p {
        max-width: 26ch;
        margin: 1rem 0 0;
        color: rgba(255, 248, 236, .78);
        font-size: .9rem;
        line-height: 1.55;
    }

    .orphan-filter-reset {
        display: inline-flex;
        min-height: 2.75rem;
        align-items: center;
        align-self: flex-start;
        justify-content: center;
        padding: .65rem .9rem;
        border: 1px solid rgba(255, 248, 236, .4);
        border-radius: 4px;
        color: var(--orphan-paper);
        font-size: .82rem;
        font-weight: 800;
        text-decoration: none;
        transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 120ms ease;
    }

    .orphan-filter-reset:hover,
    .orphan-filter-reset:focus-visible {
        border-color: var(--orphan-paper);
        color: var(--orphan-green);
        background: var(--orphan-paper);
        outline: none;
    }

    .orphan-filter-reset:active { transform: scale(.96); }
    .orphan-filter-reset[hidden] { display: none; }

    .orphan-filter-tools { min-width: 0; padding: clamp(1.25rem, 2.5vw, 2rem); }

    .orphan-filter-row {
        display: grid !important;
        grid-template-columns: minmax(12rem, 1.5fr) repeat(3, minmax(8rem, 1fr));
        align-items: end;
        gap: .8rem;
        width: 100%;
    }
    .orphan-filter-search { display: flex; flex-direction: column; min-width: 0; }
    .orphan-filter-search__input { position: relative; display: block; }
    .orphan-filter-search__icon {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        display: flex;
        align-items: center;
        padding-inline-start: 1rem;
        pointer-events: none;
        color: var(--orphan-muted, #56615C);
        transition: color 180ms ease, transform 180ms ease;
    }
    .orphan-filter-search__input:focus-within .orphan-filter-search__icon {
        color: var(--orphan-orange);
        transform: scale(1.08);
    }
    .orphan-filter-search input { padding-inline-start: 2.75rem !important; }

    .filter-select-wrap { display: flex; flex-direction: column; min-width: 0; }

    .orphan-filter-label {
        display: block;
        margin-bottom: .5rem;
        color: var(--orphan-ink);
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .01em;
    }

    .orphan-filter-control {
        width: 100% !important;
        min-height: 3.35rem;
        padding: .8rem .95rem !important;
        color: var(--orphan-ink) !important;
        border: 1px solid rgba(18, 60, 49, .26) !important;
        border-radius: 4px !important;
        background: #fffdf8 !important;
        box-shadow: 0 4px 14px rgba(31, 90, 72, .04) !important;
        backdrop-filter: none !important;
        appearance: auto !important;
        font-size: .92rem;
        font-weight: 600;
        transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
    }
    .orphan-filter-control:focus {
        border-color: var(--orphan-orange) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(255, 95, 0, .18) !important;
    }
    .orphan-filter-control::placeholder { color: #65706c; opacity: 1; }
    .filter-select[data-active="true"] {
        border-color: var(--orphan-orange) !important;
        background: rgba(255, 95, 0, .06) !important;
    }

    .orphan-filter-age {
        margin-top: 1.35rem;
        padding-top: 1.35rem;
        border-top: 1px solid rgba(18, 60, 49, .16);
    }

    .orphan-list-page .age-picker {
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .age-picker__header {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: .9rem;
    }

    .orphan-list-page .age-picker__header h3 {
        margin: 0;
        color: var(--orphan-ink) !important;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: 0 !important;
    }

    .age-picker__header h3 + p {
        margin: .25rem 0 0;
        color: #65706c;
        font-size: .78rem;
    }

    .age-picker__summary {
        flex: 0 0 auto;
        margin: 0;
        color: var(--orphan-orange-ink);
        font-size: .78rem;
        font-weight: 800;
        text-align: end;
    }

    .age-picker__options {
        display: grid !important;
        grid-template-columns: minmax(8rem, 1.1fr) repeat(5, minmax(5.5rem, 1fr));
        gap: .55rem !important;
    }

    .orphan-list-page .age-chip {
        min-width: 0;
        min-height: 3rem;
        border-color: rgba(18, 60, 49, .2) !important;
        border-radius: 4px !important;
        color: var(--orphan-ink) !important;
        background: #fffdf8 !important;
        box-shadow: none !important;
        transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
    }
    .orphan-list-page .age-chip:hover {
        border-color: var(--orphan-orange) !important;
        background: rgba(255, 95, 0, .05) !important;
    }
    .orphan-list-page .age-chip:active { transform: scale(.96); }
    .orphan-list-page .age-chip:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(255, 95, 0, .18) !important;
    }
    .orphan-list-page #age-picker .age-chip[aria-pressed="true"],
    .orphan-list-page #age-picker .age-chip[aria-pressed="true"]:hover,
    .orphan-list-page #age-picker .age-chip[aria-pressed="true"]:focus-visible {
        border-color: var(--orphan-green) !important;
        color: var(--orphan-paper) !important;
        background: var(--orphan-green) !important;
        box-shadow: inset 0 -3px 0 var(--orphan-orange) !important;
    }
    .orphan-list-page #age-picker .age-chip[aria-pressed="true"]:focus-visible {
        box-shadow: inset 0 -3px 0 var(--orphan-orange), 0 0 0 3px rgba(255, 95, 0, .18) !important;
    }
    .orphan-list-page .age-chip[aria-pressed="false"] > span:first-child > span:last-child {
        color: var(--orphan-ink) !important;
    }
    .orphan-list-page .age-chip[aria-pressed="true"] > span:first-child > span:last-child,
    .orphan-list-page .age-chip[aria-pressed="true"] .age-chip-count,
    .orphan-list-page .age-chip[aria-pressed="true"] .age-chip-state {
        color: var(--orphan-paper) !important;
    }
    .orphan-list-page .age-chip-state { border-radius: 3px !important; }

    .orphan-list-page .orphan-art-shell { background: var(--orphan-paper) !important; }
    .orphan-list-page #orphans-grid-container > .orphan-art-shell { padding: clamp(1rem, 2.5vw, 2rem) !important; }
    .orphan-list-page #orphans-grid-container .grid { gap: clamp(.85rem, 1.6vw, 1.25rem) !important; }

    .orphan-list-page .orphan-art-card {
        border: 1px solid rgba(18, 60, 49, .42) !important;
        border-radius: 6px !important;
        background: var(--orphan-paper) !important;
        box-shadow: none !important;
    }

    .orphan-list-page .orphan-art-card::before { display: none; }
    .orphan-list-page .orphan-art-card:hover {
        border-color: var(--orphan-orange) !important;
        box-shadow: none !important;
        transform: translateY(-3px);
    }

    .orphan-list-page .orphan-art-card__link { border-radius: 5px !important; }
    .orphan-list-page .orphan-art-card__media { aspect-ratio: 4 / 4.45; background-color: var(--orphan-green); }
    .orphan-list-page .orphan-art-card__media img { object-position: center 18%; filter: saturate(.82) contrast(1.03); }
    .orphan-list-page .orphan-art-card__body { gap: .9rem; padding: 1.1rem; }
    .orphan-list-page .orphan-art-card__title {
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 1.55rem;
        font-weight: 500;
    }

    .orphan-list-page .orphan-art-status,
    .orphan-list-page .orphan-art-price,
    .orphan-list-page .orphan-art-card__meta span {
        border-radius: 3px !important;
        box-shadow: none !important;
    }

    .orphan-list-page .orphan-art-status { background: var(--orphan-soft); }
    .orphan-list-page .orphan-art-price { background: var(--orphan-green); }
    .orphan-list-page .orphan-art-card__story { min-height: 4.65rem; }
    .orphan-list-page .orphan-art-card__cta {
        min-height: 3rem;
        border-radius: 4px !important;
    }
    .orphan-list-page .orphan-art-card__cta-mark { border-radius: 3px !important; }

    .orphan-list-page #orphans-loading-indicator { background: var(--orphan-paper) !important; }
    .orphan-list-page #orphans-loading-indicator > div > div { border-radius: 6px !important; box-shadow: none !important; }
    .orphan-list-page .htmx-indicator { display: none; opacity: 0; }
    .orphan-list-page .htmx-request .htmx-indicator,
    .orphan-list-page .htmx-request.htmx-indicator { display: flex; opacity: 1; }

    .orphan-list-page #orphans-grid-container nav {
        border: 1px solid rgba(18, 60, 49, .35);
        border-radius: 4px !important;
        box-shadow: none !important;
    }
    .orphan-list-page #orphans-grid-container nav a,
    .orphan-list-page #orphans-grid-container nav span { border-radius: 3px !important; }

    .orphan-list-page__stories { margin-top: clamp(3rem, 8vw, 7rem); }
    .orphan-list-page__stories > section { border-radius: 6px !important; box-shadow: none !important; }

    @media (max-width: 900px) {
        .orphan-ledger { grid-template-columns: 1fr; }
        .orphan-ledger__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .orphan-ledger__stats dd { margin-bottom: 1.5rem; }
        .orphan-filter-workspace { grid-template-columns: 1fr; }
        .orphan-filter-guide {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: end;
            gap: 1.25rem;
        }
        .orphan-filter-guide h3 { max-width: none; }
        .orphan-filter-guide h3 + p { max-width: 52ch; }
        .orphan-filter-reset { align-self: end; }
        .orphan-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .orphan-filter-search { grid-column: 1 / -1; }
        .orphan-filter-row > .filter-select-wrap:last-child { grid-column: 1 / -1; }
        .age-picker__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 640px) {
        .orphan-list-page .program-collage-hero__title {
            max-width: 14ch;
            font-size: clamp(2.7rem, 12vw, 4.8rem) !important;
        }
        .orphan-list-page .priority-cases-section h2 { font-size: 2.5rem !important; }
        .orphan-ledger__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .orphan-ledger__stats > * { min-height: 9rem; }
        .orphan-catalog-heading { align-items: start; flex-direction: column; }
        .orphan-catalog-heading__count {
            display: flex;
            align-items: baseline;
            gap: .65rem;
            text-align: start;
        }
        .orphan-filter-guide { display: block; padding: 1.3rem; }
        .orphan-filter-guide h3 { font-size: 2rem; }
        .orphan-filter-guide h3 + p { font-size: .86rem; }
        .orphan-filter-reset { margin-top: 1.25rem; }
        .orphan-filter-tools { padding: 1rem; }
        .orphan-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .age-picker__header { align-items: start; flex-direction: column; gap: .45rem; }
        .age-picker__summary { text-align: start; }
        .age-picker__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .age-picker__options .age-chip--all { grid-column: 1 / -1; }
        .age-picker__options .age-chip--bucket:last-child { grid-column: 1 / -1; }
        .orphan-list-page .orphan-art-card__story { min-height: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
        .orphan-ledger__stats > *,
        .orphan-list-page .orphan-art-card,
        .orphan-filter-reset,
        .orphan-filter-search__icon,
        .orphan-list-page .age-chip { transition: none !important; }
    }

.orphan-grid-card {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    animation: orphan-grid-appear 0.6s ease-out forwards;
}

@keyframes orphan-grid-appear {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Stagger animation for cards */
.orphan-grid-card:nth-child(1) { animation-delay: 0.1s; }
.orphan-grid-card:nth-child(2) { animation-delay: 0.15s; }
.orphan-grid-card:nth-child(3) { animation-delay: 0.2s; }
.orphan-grid-card:nth-child(4) { animation-delay: 0.25s; }
.orphan-grid-card:nth-child(5) { animation-delay: 0.3s; }
.orphan-grid-card:nth-child(6) { animation-delay: 0.35s; }
.orphan-grid-card:nth-child(7) { animation-delay: 0.4s; }
.orphan-grid-card:nth-child(8) { animation-delay: 0.45s; }
.orphan-grid-card:nth-child(9) { animation-delay: 0.5s; }

/* Card hover effects enhancement */
.orphan-card {
    will-change: transform, box-shadow;
}

@media (prefers-reduced-motion: reduce) {
    .orphan-grid-card {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* HTMX loading indicator */
.htmx-request .orphan-grid-card {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}