/* ============================================================
   PORTFOLIO ARCHIVE — portfolio.css

   Owns /portfolio/. Card and grid styles come from
   sections/_portfolio.css, which is enqueued first; this file
   adds the banner, the brand palette and the archive-only bits.
   ============================================================ */

.page-portfolio {
    /* ---- Brand palette -------------------------------------
       base/_variables.css is still the old azure set, and the
       shared portfolio card styles read var(--color-primary)
       and friends, so the brand tokens are declared here.    */
    --color-primary:        #C62052;
    --color-primary-dark:   #A5235A;
    --color-primary-light:  #FDECF2;
    --color-primary-rgb:    198, 32, 82;

    --color-accent:         #9234F7;
    --color-accent-dark:    #7B23DB;
    --color-accent-rgb:     146, 52, 247;

    --gradient-brand: linear-gradient(65deg, #C62052 0%, #280071 100%);

    --pf-dark:    #14002F;
    --pf-dark-2:  #0C0020;
    --pf-ink:     #280071;
    --pf-body:    #4A4363;
    --pf-muted:   #64607A;
    --pf-border:  #EAE3F3;
    --pf-wash:    #F8F5FB;

    background: var(--color-bg-white, #fff);
}

/* -- Banner -------------------------------------------------------- */
.pf-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    place-items: center;
    text-align: center;
    min-height: clamp(260px, 32vw, 360px);
    padding: clamp(5rem, 9vw, 7rem) 0 clamp(3rem, 5vw, 4.5rem);
    background: linear-gradient(135deg, var(--pf-dark-2) 0%, var(--pf-dark) 100%);
    color: #fff;
}
.pf-banner__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pf-banner__orb {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: .30;
}
.pf-banner__orb--1 {
    width: 560px; height: 560px; top: -220px; right: -120px;
    background: var(--color-primary);
}
.pf-banner__orb--2 {
    width: 460px; height: 460px; bottom: -200px; left: -120px;
    background: var(--color-accent);
}
.pf-banner__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 100%);
    mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 100%);
}
.pf-banner__title {
    font-size: clamp(2.1rem, 5.5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}
.pf-banner__sub {
    max-width: 58ch;
    margin: 0 auto;
    font-size: clamp(.95rem, 1.2vw, 1.05rem);
    line-height: 1.7;
    color: rgba(255,255,255,.75);
    text-wrap: pretty;
}

/* -- Archive section ----------------------------------------------- */
.pf-archive {
    padding-block: clamp(3rem, 6vw, 5rem);
    background: var(--color-bg-white, #fff);
}

/* The archive has no section header, so the filter bar leads. */
.pf-archive .portfolio-filter { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }

/* Filter pills, restated for the light band and the brand palette. */
.page-portfolio .portfolio-filter__btn {
    background: #fff;
    border: 1px solid var(--pf-border);
    color: var(--pf-body);
}
.page-portfolio .portfolio-filter__btn:hover {
    border-color: rgba(198,32,82,.42);
    color: var(--color-primary);
}
.page-portfolio .portfolio-filter__btn.is-active {
    background: var(--gradient-brand);
    border-color: transparent;
    color: #fff;
}

/* -- Card additions ------------------------------------------------ */
.page-portfolio .portfolio-card {
    background: #fff;
    border: 1px solid var(--pf-border);
}

/* The shared body is a flex row sized for title + result only. The archive
   card adds an excerpt and a client line, so it stacks instead. */
.page-portfolio .portfolio-card__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}
.page-portfolio .portfolio-card__title {
    color: var(--pf-ink);
    font-size: 1.06rem;
}

.page-portfolio .portfolio-card__cat {
    background: var(--card-color, var(--color-primary));
    color: #fff;
}

.pf-card__excerpt {
    margin: .55rem 0 0;
    font-size: .875rem;
    line-height: 1.65;
    color: var(--pf-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pf-card__meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--pf-border);
}
.pf-card__client {
    font-size: .78rem;
    color: var(--pf-muted);
}

/* Hover overlay, retinted off the old azure pair. */
.page-portfolio .portfolio-card__overlay {
    background: linear-gradient(135deg, rgba(198,32,82,.90), rgba(146,52,247,.85));
}

/* -- Notices ------------------------------------------------------- */
.pf-empty,
.pf-notice {
    margin: 2rem 0 0;
    text-align: center;
    font-size: .9rem;
    color: var(--pf-muted);
}
.pf-notice {
    padding: .9rem 1.1rem;
    border-radius: 12px;
    border: 1px dashed rgba(198,32,82,.32);
    background: var(--pf-wash);
}
.pf-empty[hidden] { display: none; }

/* -- Responsive ---------------------------------------------------- */
@media (max-width: 768px) {
    /* Let the tabs scroll rather than stacking into ragged rows. */
    .pf-archive .portfolio-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(var(--container-pad, 1.5rem) * -1);
        padding-inline: var(--container-pad, 1.5rem);
    }
    .pf-archive .portfolio-filter::-webkit-scrollbar { display: none; }
    .pf-archive .portfolio-filter__btn { flex-shrink: 0; }
}

/* -- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .page-portfolio .portfolio-card,
    .page-portfolio .portfolio-card__img { transition: none; }
    .page-portfolio .portfolio-card:hover { transform: none; }
    .page-portfolio .portfolio-card:hover .portfolio-card__img { transform: none; }
}