﻿/* =========================
   PATRON FESTIVALS PAGE
========================= */
.patron-page {
    background: radial-gradient(circle at top left, rgba(242, 201, 76, .18), transparent 34rem), linear-gradient(180deg, #fff 0%, var(--color-bg) 100%);
    overflow: hidden;
}

.patron-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: end;
    padding: clamp(6.5rem, 5rem + 3vw, 9rem) 0 clamp(3rem, 2rem + 2vw, 5rem);
    color: #fff;
    background: linear-gradient(135deg, rgba(0, 27, 66, .96), rgba(0, 59, 142, .88)), url('/Content/img/culture/patron-festivals-hero.jpg') center / cover no-repeat;
    isolation: isolate;
}

    .patron-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .36) 100%), radial-gradient(circle at 82% 18%, rgba(242, 201, 76, .24), transparent 18rem);
    }

.patron-hero__decor {
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    pointer-events: none;
}

.patron-hero__decor--one {
    right: -90px;
    top: 110px;
}

.patron-hero__decor--two {
    left: -120px;
    bottom: -110px;
    width: 340px;
    height: 340px;
}

.patron-hero__container {
    position: relative;
    z-index: 2;
}

.patron-breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.4rem;
    padding: .55rem .85rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
    backdrop-filter: blur(10px);
}

    .patron-breadcrumb a {
        color: #fff;
        font-weight: 700;
    }

        .patron-breadcrumb a:hover {
            color: var(--color-accent);
        }

.patron-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .9rem;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-accent);
}

    .patron-kicker::before {
        content: "";
        width: 32px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
    }

.patron-hero__title {
    max-width: 12.5ch;
    margin: 0 0 1rem;
    font-size: clamp(2.45rem, 6vw, 5.4rem);
    font-weight: 900;
    line-height: .96;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.patron-hero__lead {
    max-width: 64ch;
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1rem, .95rem + .35vw, 1.25rem);
    line-height: 1.58;
}

.patron-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

.patron-action {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding-inline: 1.15rem;
    font-weight: 800;
}

.patron-action--secondary {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

    .patron-action--secondary:hover,
    .patron-action--secondary:focus {
        color: var(--color-primary-700);
        background: #fff;
        border-color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
    }

    .patron-action--secondary i {
        color: currentColor;
    }

.patron-hero-card {
    padding: 1.35rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    color: var(--color-text);
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(14px);
}

.patron-hero-card__label {
    display: block;
    margin-bottom: .35rem;
    color: var(--color-danger);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.patron-hero-card strong {
    display: block;
    margin-bottom: .25rem;
    color: var(--color-primary-700);
    font-size: 1.45rem;
    line-height: 1.15;
}

.patron-hero-card span:last-child {
    color: var(--color-text-soft);
    font-weight: 700;
}

.patron-summary {
    position: relative;
    margin-top: -2rem;
    z-index: 5;
}

.patron-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.patron-stat {
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .92);
    box-shadow: var(--shadow-sm);
}

    .patron-stat span {
        display: block;
        margin-bottom: .25rem;
        color: var(--color-primary-700);
        font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
        line-height: 1;
        font-weight: 900;
        letter-spacing: -.04em;
    }

    .patron-stat strong {
        color: var(--color-text-soft);
        font-size: .95rem;
        font-weight: 800;
    }

.patron-stat--active span {
    color: var(--color-success);
}

.patron-content {
    position: relative;
    padding-bottom: clamp(4rem, 2.8rem + 3vw, 6.5rem);
}

.patron-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.4rem;
}

    .patron-section-head h2 {
        margin: 0;
        color: var(--color-primary-700);
        font-size: var(--text-2xl);
        line-height: 1.08;
        font-weight: 900;
        letter-spacing: -.025em;
    }

    .patron-section-head p {
        max-width: 72ch;
        margin: .55rem 0 0;
        color: var(--color-text-soft);
    }

.patron-map-link {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-radius: var(--radius-pill);
    color: var(--color-primary-700);
    background: rgba(0, 59, 142, .06);
    border: 1px solid rgba(0, 59, 142, .1);
    font-weight: 800;
    white-space: nowrap;
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

    .patron-map-link:hover {
        transform: translateY(-1px);
        color: var(--color-primary);
        background: rgba(0, 59, 142, .1);
    }

.patron-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 22px;
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.patron-search-field {
    position: relative;
}

    .patron-search-field i {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text-soft);
    }

    .patron-search-field input {
        width: 100%;
        min-height: 54px;
        padding: .8rem 1rem .8rem 2.8rem;
        border: 1px solid var(--color-border);
        border-radius: 18px;
        background: #fff;
        color: var(--color-text);
        box-shadow: none;
    }

        .patron-search-field input:focus {
            outline: none;
            border-color: rgba(0, 59, 142, .28);
            box-shadow: 0 0 0 .22rem rgba(0, 59, 142, .08);
        }

.patron-filter-status {
    padding: .55rem .85rem;
    border-radius: var(--radius-pill);
    color: var(--color-primary-700);
    background: rgba(0, 59, 142, .06);
    font-size: .92rem;
    font-weight: 800;
    white-space: nowrap;
}

.patron-list {
    display: grid;
    gap: 1rem;
}

.patron-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 1.1rem;
    padding: 1rem;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: var(--shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

    .patron-card:hover {
        transform: translateY(-3px);
        border-color: rgba(0, 59, 142, .16);
        box-shadow: var(--shadow-md);
    }

    .patron-card.is-hidden {
        display: none;
    }

.patron-card__date {
    min-height: 150px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .1rem;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(180deg, rgba(198, 40, 57, .96), rgba(166, 31, 45, .96)), radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .18), transparent 5rem);
    box-shadow: 0 14px 30px rgba(198, 40, 57, .18);
}

    .patron-card__date span {
        font-size: .82rem;
        font-weight: 900;
        letter-spacing: .08em;
    }

    .patron-card__date strong {
        font-size: 3rem;
        line-height: .95;
        font-weight: 900;
        letter-spacing: -.06em;
    }

    .patron-card__date small {
        color: rgba(255, 255, 255, .82);
        font-size: .78rem;
        font-weight: 800;
    }

.patron-card__content {
    min-width: 0;
    padding: .25rem .2rem;
}

.patron-card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .45rem;
}

.patron-card__province {
    color: var(--color-danger);
    font-size: .8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.patron-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .35rem .7rem;
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}

    .patron-status.is-active {
        color: #166534;
        background: rgba(22, 163, 74, .12);
    }

    .patron-status.is-upcoming {
        color: var(--color-primary-700);
        background: rgba(0, 59, 142, .09);
    }

    .patron-status.is-past {
        color: #854D0E;
        background: rgba(245, 158, 11, .14);
    }

.patron-card h3 {
    margin: 0;
    color: var(--color-primary-700);
    font-size: clamp(1.35rem, 1.12rem + .7vw, 2rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -.02em;
}

.patron-card__celebration {
    margin: .35rem 0 .85rem;
    color: var(--color-text);
    font-weight: 800;
}

.patron-card__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0 0 1rem;
}

    .patron-card__meta div {
        padding: .75rem;
        border-radius: 16px;
        background: var(--color-surface-soft);
        border: 1px solid rgba(226, 232, 240, .7);
    }

    .patron-card__meta dt {
        margin-bottom: .15rem;
        color: var(--color-text-soft);
        font-size: .78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .patron-card__meta dd {
        margin: 0;
        color: var(--color-text);
        font-weight: 800;
        line-height: 1.35;
    }

.patron-card__details {
    padding-top: .85rem;
    border-top: 1px solid rgba(226, 232, 240, .8);
}

    .patron-card__details strong {
        display: block;
        margin-bottom: .25rem;
        color: var(--color-primary-700);
        font-size: .95rem;
        font-weight: 900;
    }

    .patron-card__details p {
        margin: 0;
        color: var(--color-text-soft);
        line-height: 1.65;
    }

.patron-empty {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: .6rem;
    padding: clamp(2rem, 1.5rem + 2vw, 4rem);
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: var(--shadow-sm);
}

.patron-empty--filter {
    margin-top: 1rem;
}

.patron-empty__icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: var(--color-primary);
    background: rgba(0, 59, 142, .08);
    font-size: 2rem;
}

.patron-empty h3 {
    margin: .3rem 0 0;
    color: var(--color-primary-700);
    font-weight: 900;
}

.patron-empty p {
    max-width: 54ch;
    margin: 0;
    color: var(--color-text-soft);
}

.patron-cta-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    margin-top: 1.5rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 4rem);
    padding: clamp(1.3rem, 1rem + 1.5vw, 2.4rem);
    border-radius: 30px;
    color: #fff;
    background: linear-gradient(135deg, rgba(0, 59, 142, .97), rgba(0, 27, 66, .97)), radial-gradient(circle at 100% 0%, rgba(242, 201, 76, .2), transparent 20rem);
    box-shadow: var(--shadow-lg);
}

    .patron-cta-panel .section-kicker {
        color: var(--color-accent);
    }

    .patron-cta-panel h2 {
        margin: 0 0 .55rem;
        font-size: var(--text-xl);
        line-height: 1.12;
        font-weight: 900;
    }

    .patron-cta-panel p {
        max-width: 62ch;
        margin: 0;
        color: rgba(255, 255, 255, .84);
    }

.patron-cta-panel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .8rem;
}

    .patron-cta-panel__actions .btn {
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        font-weight: 800;
        white-space: nowrap;
    }

.patron-cta-panel .btn-outline-primary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .65);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: var(--color-primary-700);
}

.reveal-up {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s ease;
}

    .reveal-up.is-visible,
    body.is-loaded .patron-hero .reveal-up {
        opacity: 1;
        transform: translateY(0);
    }

.delay-1 {
    transition-delay: .08s;
}

.delay-2 {
    transition-delay: .16s;
}

.delay-3 {
    transition-delay: .24s;
}

.delay-4 {
    transition-delay: .32s;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width: 1199.98px) {
    .patron-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .patron-section-head,
    .patron-cta-panel {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .patron-section-head {
        flex-direction: column;
    }

    .patron-cta-panel__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 991.98px) {
    .patron-hero {
        min-height: auto;
        padding-top: 6rem;
    }

    .patron-hero__title {
        max-width: none;
    }

    .patron-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .patron-filter-status {
        justify-self: start;
    }

    .patron-card__meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .patron-hero {
        padding-top: 5rem;
        padding-bottom: 3.5rem;
    }

    .patron-breadcrumb {
        font-size: .82rem;
    }

    .patron-hero__actions,
    .patron-cta-panel__actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

        .patron-hero__actions .btn,
        .patron-cta-panel__actions .btn {
            width: 100%;
        }

    .patron-stats-grid {
        grid-template-columns: 1fr;
    }

    .patron-card {
        grid-template-columns: 1fr;
        padding: .85rem;
    }

    .patron-card__date {
        min-height: 112px;
        grid-template-columns: auto auto auto;
        justify-content: center;
        align-content: center;
        gap: .55rem;
    }

        .patron-card__date strong {
            font-size: 2.5rem;
        }

    .patron-card__topline {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .patron-hero__title {
        font-size: clamp(2.25rem, 12vw, 3.3rem);
    }

    .patron-card h3 {
        font-size: 1.45rem;
    }
}
