/*
 * ALINA CHOPRA — THE PORTRAIT ATELIER
 * Editorial gallery redesign.
 * Preserves existing Blade structure and filtering functionality.
 */

.ang-section {
    --atelier-gold: #e6bd83;
    --atelier-cream: #fff4e7;
    --atelier-muted: #bcb0c6;
    --atelier-line: rgba(230,189,131,.24);
    padding: 105px clamp(22px,5vw,85px) 125px;
    background:
        radial-gradient(ellipse 52% 42% at 0% 6%,rgba(99,37,116,.32),transparent 90%),
        radial-gradient(ellipse 40% 50% at 100% 90%,rgba(91,37,86,.2),transparent 90%),
        linear-gradient(145deg,#110b1c 0%,#0c0914 52%,#170c1b 100%);
    background-size: auto;
    animation: none;
}

.ang-section::before {
    opacity: .2;
    animation: none;
    transform: none;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent calc(25% - 1px),
            rgba(230,189,131,.08) 25%
        );
    mask-image: linear-gradient(to bottom,#000,transparent 80%);
}

.ang-section::after {
    content: "THE ATELIER";
    position: absolute;
    top: 28px;
    right: -18px;
    left: auto;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    filter: none;
    transform: none;
    animation: none;
    color: rgba(230,189,131,.045);
    font: 400 clamp(90px,15vw,240px)/1 Georgia,serif;
    letter-spacing: -.075em;
    white-space: nowrap;
    pointer-events: none;
}

.ang-shell {
    max-width: 1480px;
    position: relative;
    z-index: 1;
}

.ang-intro {
    position: relative;
    max-width: 100%;
    margin: 0 0 42px;
    padding: 0 0 37px;
    text-align: left;
    border-bottom: 1px solid var(--atelier-line);
}

.ang-intro::before {
    content: "ALINA CHOPRA  /  THE PRIVATE COLLECTION";
    display: block;
    margin-bottom: 24px;
    color: var(--atelier-gold);
    font: 600 10px/1.5 Arial,sans-serif;
    letter-spacing: .28em;
}

.ang-intro h2 {
    max-width: 1050px;
    margin: 0 0 22px;
    font: 400 clamp(52px,7.6vw,125px)/.99 Georgia,serif;
    letter-spacing: -.07em;
    text-wrap: balance;
}

.ang-intro h2 em {
    display: inline;
    background: none;
    color: var(--atelier-gold);
    -webkit-text-fill-color: var(--atelier-gold);
    text-shadow: none;
    font-weight: 400;
}

.ang-intro p {
    max-width: 560px;
    margin: 0;
    color: var(--atelier-muted);
    font: 400 15px/1.85 Arial,sans-serif;
}

.ang-filter-panel {
    padding: 0;
    margin: 0 0 37px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.ang-filter-heading {
    margin: 0 0 18px;
    color: #c3a9ba;
    font-size: 10px;
    letter-spacing: .2em;
}

.ang-count {
    color: var(--atelier-gold);
    font-size: 12px;
    letter-spacing: .08em;
}

.ang-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ang-chip {
    position: relative;
    padding: 13px 20px;
    border: 1px solid rgba(230,189,131,.16);
    border-radius: 4px;
    background: rgba(255,255,255,.025);
    color: #d6c7d3;
    font: 500 12px Arial,sans-serif;
    letter-spacing: .025em;
    box-shadow: none;
}

.ang-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(230,189,131,.55);
    background: rgba(230,189,131,.08);
    color: #fff;
}

.ang-chip.is-active {
    border-color: var(--atelier-gold);
    background: var(--atelier-gold);
    color: #1d1020;
    box-shadow: 0 8px 30px rgba(230,189,131,.12);
}

.ang-filter-bottom {
    margin-top: 19px;
    padding-top: 19px;
    border-top: 1px solid rgba(230,189,131,.12);
}

.ang-filter-bottom label {
    color: var(--atelier-gold);
    font-size: 10px;
    letter-spacing: .2em;
}

.ang-filter-bottom select {
    min-width: 210px;
    padding: 13px 40px 13px 16px;
    border: 1px solid rgba(230,189,131,.3);
    border-radius: 4px;
    background: #1d1426;
    color: var(--atelier-cream);
}

.ang-reset {
    color: var(--atelier-gold);
    letter-spacing: .035em;
}

.ang-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 24px;
}

.ang-card {
    border: 1px solid rgba(230,189,131,.16);
    border-radius: 3px;
    background: #1a1121;
    box-shadow: 0 20px 50px rgba(0,0,0,.22);
    transform: none;
}

.ang-card::after {
    border-radius: 3px;
    background: linear-gradient(140deg,rgba(230,189,131,.08),transparent 50%);
}

.ang-card:hover {
    transform: translateY(-7px);
    border-color: rgba(230,189,131,.62);
    box-shadow: 0 28px 65px rgba(0,0,0,.4);
}

.ang-image {
    aspect-ratio: 3/3.85;
    background: #291b31;
}

.ang-image img {
    filter: saturate(.88) contrast(1.045);
    transition: transform .9s cubic-bezier(.2,.8,.2,1),filter .6s;
}

.ang-card:hover .ang-image img {
    transform: scale(1.055);
    filter: saturate(1.05) contrast(1.02);
}

.ang-image-shade {
    background: linear-gradient(
        to bottom,
        rgba(15,8,22,.42),
        transparent 34%,
        rgba(15,8,22,.12) 65%,
        rgba(15,8,22,.88)
    );
}

.ang-badges {
    top: 18px;
    left: 18px;
}

.ang-badge {
    border: 1px solid rgba(230,189,131,.48);
    border-radius: 2px;
    background: rgba(18,11,24,.8);
    color: var(--atelier-gold);
    font-size: 9px;
    letter-spacing: .16em;
}

.ang-badge-featured,
.ang-badge-new {
    color: var(--atelier-gold);
    background: rgba(18,11,24,.8);
}

.ang-image-link {
    bottom: 23px;
    left: 23px;
    right: 23px;
    justify-content: flex-start;
    color: var(--atelier-cream);
    font-size: 10px;
    letter-spacing: .22em;
}

.ang-image-link::after {
    content: "↗";
    margin-left: auto;
    color: var(--atelier-gold);
    font-size: 22px;
    line-height: .7;
}

.ang-card-body {
    padding: 25px 24px 24px;
}

.ang-card-top h3 {
    margin-bottom: 11px;
    color: var(--atelier-cream);
    font: 400 clamp(29px,3vw,41px)/1.06 Georgia,serif;
    letter-spacing: -.045em;
}

.ang-card-top h3 a:hover {
    color: var(--atelier-gold);
}

.ang-card-spark {
    color: var(--atelier-gold);
}

.ang-meta {
    color: #c5a9b8;
    letter-spacing: .12em;
}

.ang-dot {
    color: var(--atelier-gold);
}

.ang-description {
    color: #b9aebd;
    font-size: 13px;
    line-height: 1.8;
}

.ang-tags span {
    border: 1px solid rgba(230,189,131,.2);
    border-radius: 2px;
    color: #d6bdc4;
    background: rgba(230,189,131,.04);
}

.ang-actions {
    border-top: 1px solid rgba(230,189,131,.15);
}

.ang-actions a {
    justify-content: center;
    border-radius: 3px;
    font-size: 11px;
    letter-spacing: .045em;
}

.ang-call {
    border: 1px solid rgba(230,189,131,.5);
    background: transparent;
    color: var(--atelier-gold);
    box-shadow: none;
}

.ang-whatsapp {
    border: 1px solid var(--atelier-gold);
    background: var(--atelier-gold);
    color: #211423;
    box-shadow: none;
}

.ang-no-results {
    border-color: var(--atelier-line);
    border-radius: 3px;
}

.ang-no-results > span {
    color: var(--atelier-gold);
}

@media (max-width:1050px) {
    .ang-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:650px) {
    .ang-section {
        padding: 76px 19px 85px;
    }

    .ang-section::after {
        top: 30px;
        right: -8px;
        font-size: 76px;
    }

    .ang-intro {
        margin-bottom: 30px;
        padding-bottom: 28px;
    }

    .ang-intro::before {
        margin-bottom: 20px;
        font-size: 9px;
        letter-spacing: .18em;
    }

    .ang-intro h2 {
        font-size: clamp(46px,11vw,72px);
    }

    .ang-intro p {
        font-size: 14px;
    }

    .ang-filter-panel {
        margin-bottom: 28px;
    }

    .ang-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: thin;
        scrollbar-color: rgba(230,189,131,.4) transparent;
    }

    .ang-chip {
        flex: 0 0 auto;
        padding: 12px 16px;
        white-space: nowrap;
    }

    .ang-filter-bottom {
        gap: 12px;
    }

    .ang-filter-bottom select {
        flex: 1;
        min-width: 0;
    }

    .ang-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .ang-image {
        aspect-ratio: 3/3.6;
    }

    .ang-card-body {
        padding: 23px 21px;
    }

    .ang-reset {
        margin-left: auto;
    }
}

@media (prefers-reduced-motion:reduce) {
    .ang-section,
    .ang-section::before,
    .ang-section::after {
        animation: none !important;
    }
}