.gallery-page { background: #f8f5ed; }
.gallery-page .nav-links a.active { color: var(--primary); }
.gallery-page .nav-links a.active::after { width: 100%; }

.gallery-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(78px, 9vw, 132px) 0 clamp(70px, 8vw, 112px);
    background:
        linear-gradient(115deg, rgba(244,237,220,.96), rgba(255,255,255,.92)),
        url("../images/about/delhipremiumharidwar.webp") center/cover;
}
.gallery-hero::after {
    position: absolute;
    top: 50%;
    right: -11%;
    width: min(47vw, 680px);
    height: min(47vw, 680px);
    border: 1px solid rgba(30,123,60,.16);
    border-radius: 50%;
    content: "";
    transform: translateY(-45%);
}
.gallery-heading { position: relative; z-index: 3; }
.gallery-breadcrumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; color: #577063; font-size: .82rem; font-weight: 600; }
.gallery-breadcrumbs svg { width: 14px; }
.gallery-kicker { display: inline-flex; align-items: center; gap: 10px; color: #b38508; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.gallery-kicker::before { width: 34px; height: 2px; background: #e3b426; content: ""; }
.gallery-heading h1 { max-width: 820px; margin: 14px 0 24px; color: #123a26; font-size: clamp(4rem, 8.5vw, 8rem); line-height: .82; letter-spacing: -.075em; }
.gallery-heading h1 em { color: var(--primary); font-weight: 500; }
.gallery-heading > p { max-width: 610px; color: #607067; font-size: 1.05rem; line-height: 1.8; }
.gallery-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.gallery-orb-one { top: 22%; right: 10%; width: 110px; height: 110px; background: rgba(247,202,62,.22); }
.gallery-orb-two { right: 27%; bottom: 8%; width: 32px; height: 32px; background: rgba(30,123,60,.3); }
.gallery-hero-portrait {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -11%;
    overflow: hidden;
    width: min(47vw, 680px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translateY(-45%);
}
.gallery-hero-portrait img {
    position: absolute;
    z-index: 2;
    right: 22%;
    bottom: -4%;
    width: 54%;
    height: 91%;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 20px 22px rgba(0,0,0,.2));
}

.gallery-showcase { padding: clamp(68px, 8vw, 118px) 0 130px; }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 34px; }
.gallery-filters { display: flex; gap: 10px; }
.gallery-filter { padding: 12px 22px; border: 1px solid rgba(18,58,38,.16); border-radius: 999px; color: #173d2a; background: #fff; font: 600 .9rem var(--font-heading); cursor: pointer; transition: .3s ease; }
.gallery-filter:hover, .gallery-filter.is-active { color: #fff; background: #123a26; border-color: #123a26; transform: translateY(-2px); }
.gallery-toolbar > p { color: #728077; font-size: .9rem; }
.gallery-toolbar > p span { color: #173d2a; font-weight: 700; }

.gallery-grid { columns: 4 250px; column-gap: 20px; }
.gallery-card { position: relative; overflow: hidden; height: 370px; margin: 0 0 20px; break-inside: avoid; border-radius: 24px; background: #d9dfd9; box-shadow: 0 13px 35px rgba(19,55,36,.12); isolation: isolate; }
.gallery-card.gallery-short { height: 270px; }
.gallery-card.gallery-medium { height: 360px; }
.gallery-card.gallery-tall { height: 500px; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.gallery-card.crop-left img { object-position: 20% center; }
.gallery-card.crop-right img { object-position: 72% center; }
.gallery-card.crop-far-right img { object-position: 88% center; }
.gallery-card.crop-center img { object-position: center; }
.gallery-card-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,38,21,.06) 35%, rgba(5,31,17,.78)); transition: opacity .4s ease; }
.gallery-tag { position: absolute; z-index: 2; top: 18px; left: 18px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; background: rgba(5,40,22,.58); backdrop-filter: blur(8px); font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gallery-expand, .gallery-like, .lightbox-close, .lightbox-nav { display: grid; place-items: center; border: 0; cursor: pointer; }
.gallery-expand { position: absolute; z-index: 3; top: 15px; right: 15px; width: 42px; height: 42px; border-radius: 50%; color: #123a26; background: rgba(255,255,255,.94); transition: transform .3s ease, background .3s ease; }
.gallery-expand svg { width: 19px; }
.gallery-card-bottom { position: absolute; z-index: 2; right: 17px; bottom: 17px; left: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; }
.gallery-card-bottom strong { font: 600 1.03rem var(--font-heading); transform: translateY(5px); transition: transform .4s ease; }
.gallery-like { flex: 0 0 auto; display: flex; width: auto; height: 40px; gap: 6px; padding: 0 11px; border-radius: 999px; color: #143a27; background: rgba(255,255,255,.94); font: 700 .72rem var(--font-body); transition: transform .25s ease, color .25s ease; }
.gallery-like svg { width: 17px; }
.gallery-like.is-liked { color: #d72f4b; }
.gallery-like.is-liked svg { fill: currentColor; }
.gallery-card:hover img { transform: scale(1.075); filter: saturate(1.08); }
.gallery-card:hover .gallery-expand { transform: rotate(90deg); background: #f7ca3e; }
.gallery-card:hover .gallery-card-bottom strong { transform: translateY(0); }

.gallery-lightbox { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; padding: 55px 90px; visibility: hidden; opacity: 0; background: rgba(3,22,12,.94); backdrop-filter: blur(14px); transition: opacity .35s ease, visibility .35s ease; }
.gallery-lightbox.is-open { visibility: visible; opacity: 1; }
.gallery-lightbox figure { display: flex; max-width: min(1050px, 82vw); max-height: 86vh; align-items: center; flex-direction: column; gap: 15px; }
.gallery-lightbox figure img { display: block; max-width: 100%; max-height: 77vh; border-radius: 20px; object-fit: contain; box-shadow: 0 28px 80px rgba(0,0,0,.5); }
.gallery-lightbox figcaption { color: #fff; font: 500 1.05rem var(--font-heading); }
.lightbox-close { position: absolute; top: 24px; right: 26px; width: 48px; height: 48px; border-radius: 50%; color: #173d2a; background: #fff; }
.lightbox-nav { position: absolute; top: 50%; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); transform: translateY(-50%); }
.lightbox-nav:hover { color: #173d2a; background: #f7ca3e; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

@media (max-width: 900px) {
    .gallery-grid { columns: 2 280px; }
    .gallery-heading h1 { font-size: clamp(4rem, 13vw, 7rem); }
    .gallery-heading h1, .gallery-heading > p { max-width: 66%; }
    .gallery-hero::after, .gallery-hero-portrait { right: -24%; width: clamp(390px, 58vw, 510px); height: auto; aspect-ratio: 1; }
}
@media (max-width: 776px) {
    .gallery-hero { padding-block: 58px 360px; }
    .gallery-heading h1 { max-width: 100%; font-size: clamp(3.7rem, 14vw, 6rem); }
    .gallery-heading > p { max-width: 100%; }
    .gallery-hero::after,
    .gallery-hero-portrait {
        top: auto;
        right: -55px;
        bottom: -35px;
        width: 410px;
        transform: none;
    }
    .gallery-hero-portrait img { right: 19%; bottom: 1%; width: 62%; height: 92%; }
}
@media (max-width: 640px) {
    .gallery-hero { padding: 52px 0 340px; }
    .gallery-heading h1 { font-size: clamp(3.5rem, 18vw, 5.5rem); }
    .gallery-heading h1, .gallery-heading > p { max-width: 100%; }
    .gallery-hero-portrait {
        position: absolute;
        top: auto;
        right: -42px;
        bottom: -24px;
        width: 350px;
        margin: 0;
        transform: none;
    }
    .gallery-hero::after { display: block; top: auto; right: -42px; bottom: -24px; width: 350px; height: auto; aspect-ratio: 1; transform: none; }
    .gallery-hero-portrait img { right: 18%; bottom: 1%; width: 64%; height: 93%; }
    .gallery-toolbar { align-items: flex-start; flex-direction: column; }
    .gallery-grid { columns: 1; }
    .gallery-card, .gallery-card.gallery-short, .gallery-card.gallery-medium, .gallery-card.gallery-tall { height: clamp(330px, 112vw, 480px); }
    .gallery-lightbox { padding: 70px 16px; }
    .gallery-lightbox figure { max-width: 100%; }
    .lightbox-nav { top: auto; bottom: 14px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gallery-card img, .gallery-expand, .gallery-card-bottom strong { transition: none; }
}