/* ======================== Gallery-Section-Start =========================== */

.home-gallery-section {
    --gal-ivory:    #FFFDF5;
    --gal-paper:    #FAF4E4;
    --gal-paper-2:  #F5EAD0;

    --gal-maroon-900: #2A050B;
    --gal-maroon-800: #3A060D;
    --gal-maroon-700: #4E0912;
    --gal-maroon-600: #6B0F1A;

    --gal-gold-600: #B8860B;
    --gal-gold-500: #D4AF37;
    --gal-gold-400: #E0C158;
    --gal-gold-300: #EBD07A;

    --gal-orange:   #e77913;
    --gal-orange-2: #ff9a3c;

    --gal-ink:    #2A050B;
    --gal-muted:  rgba(42, 5, 11, .60);
    --gal-faint:  rgba(42, 5, 11, .34);
    --gal-line:   rgba(78, 9, 18, .12);

    --gal-ease: cubic-bezier(.22, 1, .36, 1);
    --gal-ease-press: cubic-bezier(.4, 0, .2, 1);

    position: relative;
    overflow: hidden;
    padding: 100px 0 80px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(212, 175, 55, .10), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(78, 9, 18, .08), transparent 55%),
        var(--gal-paper);
}

/* Warm maroon dot grid */
.home-gallery-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(78, 9, 18, .06) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center top, #000 0%, transparent 75%);
            mask-image: radial-gradient(ellipse at center top, #000 0%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.home-gallery-section .container {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4.5vw, 64px);
}

/* ---------- Header ---------- */
.home-gallery-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 60px;
}

.home-gallery-title {
    color: var(--gal-maroon-800);
    font-weight: 800;
    font-size: clamp(28px, 4.4vw, 46px);
    margin: 0 0 18px;
    line-height: 1.12;
    letter-spacing: -.8px;
    position: relative;
    display: inline-block;
    padding-bottom: 18px;
}

.home-gallery-title::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 3px;
    width: 70px;
    background: linear-gradient(90deg, var(--gal-orange), var(--gal-gold-500));
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(212, 175, 55, .5);
    transition: width .5s cubic-bezier(.34, 1.56, .64, 1);
}
.home-gallery-header:hover .home-gallery-title::before { width: 120px; }

.home-gallery-desc {
    font-size: 15.5px;
    color: var(--gal-muted);
    line-height: 1.7;
    margin: 0;
}

/* ============================================================
   STAGE
   ============================================================ */
.home-gallery-stage { position: relative; }

/* ============================================================
   TRACK — swipe slider on ALL viewports
   ============================================================ */
.home-gallery-track {
    list-style: none;
    margin: 0;
    padding: 8px 0 22px;
    display: flex;
    flex-wrap: nowrap;
    gap: 22px;
    align-items: stretch;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.home-gallery-track::-webkit-scrollbar { display: none; }

.home-gallery-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}
.home-gallery-track.is-dragging .home-gallery-card { pointer-events: none; }

/* ---------- ITEM — 4 in view (desktop) ---------- */
.home-gallery-item {
    min-width: 0;
    flex: 0 0 calc((100% - 3 * 22px) / 4);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;

    opacity: 0;
    transform: translateY(24px);
}
@media (prefers-reduced-motion: no-preference) {
    .home-gallery-item {
        animation: galRise .8s var(--gal-ease) forwards;
    }
    .home-gallery-item:nth-child(1) { animation-delay: .04s; }
    .home-gallery-item:nth-child(2) { animation-delay: .10s; }
    .home-gallery-item:nth-child(3) { animation-delay: .16s; }
    .home-gallery-item:nth-child(4) { animation-delay: .22s; }
    .home-gallery-item:nth-child(5) { animation-delay: .28s; }
    .home-gallery-item:nth-child(6) { animation-delay: .34s; }
    .home-gallery-item:nth-child(7) { animation-delay: .40s; }
    .home-gallery-item:nth-child(8) { animation-delay: .46s; }
}
@keyframes galRise {
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- ITEM — 3 in view (tablet) ---------- */
@media (max-width: 1199px) {
    .home-gallery-item { flex: 0 0 calc((100% - 2 * 22px) / 3); }
}

/* ---------- ITEM — 2 in view (small tablet) ---------- */
@media (max-width: 860px) and (min-width: 721px) {
    .home-gallery-item { flex: 0 0 calc((100% - 1 * 22px) / 2); }
}

/* ============================================================
   TILE — the magazine-style card
   ============================================================ */
.home-gallery-card {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 320px;
    background: var(--gal-maroon-800);
    border-radius: 18px;
    border: 1px solid rgba(212, 175, 55, .28);
    text-decoration: none;
    color: inherit;
    isolation: isolate;

    box-shadow:
        0 1px 2px rgba(42, 5, 11, .1),
        0 10px 28px rgba(42, 5, 11, .22),
        0 0 0 1px rgba(212, 175, 55, .08);

    transition:
        transform .55s var(--gal-ease),
        box-shadow .55s ease,
        border-color .4s ease;
}

.home-gallery-card:hover,
.home-gallery-card:focus-visible {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, .85);
    box-shadow:
        0 2px 4px rgba(42, 5, 11, .12),
        0 26px 55px rgba(42, 5, 11, .35),
        0 0 34px rgba(212, 175, 55, .28);
    outline: none;
}

/* ---------- Image ---------- */
.home-gallery-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1.4s cubic-bezier(.2, .7, .3, 1),
        filter .6s ease;
    filter: contrast(98%) brightness(.94) sepia(.06);
    pointer-events: none; /* keeps drag smooth */
}
.home-gallery-card:hover img,
.home-gallery-card:focus-visible img {
    transform: scale(1.09);
    filter: contrast(106%) saturate(112%) brightness(1) sepia(0);
}

/* ---------- Overlay ---------- */
.home-gallery-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 100%, transparent 30%, rgba(42, 5, 11, .5) 100%),
        linear-gradient(180deg, transparent 40%, rgba(42, 5, 11, .9) 100%);
    opacity: 0;
    transition: opacity .5s ease;
    z-index: 2;
    pointer-events: none;
}
.home-gallery-card:hover .home-gallery-overlay,
.home-gallery-card:focus-visible .home-gallery-overlay { opacity: 1; }

/* ---------- Number badge ---------- */
.home-gallery-number {
    position: absolute;
    top: 16px;
    left: 16px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--gal-gold-300);
    background: rgba(42, 5, 11, .85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, .55);
    z-index: 3;
    transition:
        background .4s ease,
        color .4s ease,
        transform .45s cubic-bezier(.34, 1.56, .64, 1),
        letter-spacing .4s ease,
        border-color .4s ease;
}
.home-gallery-card:hover .home-gallery-number,
.home-gallery-card:focus-visible .home-gallery-number {
    background: linear-gradient(135deg, var(--gal-gold-400), var(--gal-gold-600));
    color: var(--gal-maroon-800);
    border-color: var(--gal-gold-500);
    transform: translateY(-2px);
    letter-spacing: 2px;
    box-shadow: 0 0 20px rgba(212, 175, 55, .65);
}

/* ---------- View icon badge ---------- */
.home-gallery-view {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 253, 245, .94);
    color: var(--gal-maroon-700);
    font-size: 13px;
    z-index: 3;
    border: 1px solid rgba(212, 175, 55, .5);

    opacity: 0;
    transform: scale(.6) rotate(-45deg);
    transition:
        opacity .4s ease,
        transform .5s cubic-bezier(.34, 1.56, .64, 1),
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}
.home-gallery-card:hover .home-gallery-view,
.home-gallery-card:focus-visible .home-gallery-view {
    opacity: 1;
    transform: scale(1) rotate(0);
}
.home-gallery-view:hover {
    background: linear-gradient(135deg, var(--gal-gold-400), var(--gal-gold-600));
    color: var(--gal-maroon-800);
    border-color: var(--gal-gold-500);
}

/* ---------- Caption block ---------- */
.home-gallery-caption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--gal-ivory);

    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity .5s ease .1s,
        transform .55s var(--gal-ease) .1s;
    pointer-events: none;
}
.home-gallery-card:hover .home-gallery-caption,
.home-gallery-card:focus-visible .home-gallery-caption {
    opacity: 1;
    transform: translateY(0);
}

.home-gallery-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gal-gold-300);
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, .65);
    background: rgba(42, 5, 11, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.home-gallery-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.1px;
    color: var(--gal-ivory);
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* ============================================================
   PROGRESS BAR + HINT — visible on every viewport
   ============================================================ */
.home-gallery-progress {
    display: block;
    position: relative;
    height: 3px;
    margin: 6px auto 14px;
    width: 62%;
    max-width: 320px;
    background: rgba(78, 9, 18, .14);
    border-radius: 999px;
    overflow: hidden;
}

.home-gallery-progress-bar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 14%;
    background: linear-gradient(90deg, var(--gal-maroon-700), var(--gal-gold-500));
    border-radius: 999px;
    transition: width .18s linear;
}

.home-gallery-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gal-muted);
    margin-top: 4px;
    transition: opacity .6s ease;
}
.home-gallery-hint svg { animation: galNudge 1.6s ease-in-out infinite; }
.home-gallery-hint.is-hidden { opacity: 0; pointer-events: none; }

@keyframes galNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 720px) {

    .home-gallery-section { padding: 65px 0 50px; }

    .home-gallery-header { margin-bottom: 36px; padding: 0 16px; }
    .home-gallery-title  { font-size: 28px; padding-bottom: 14px; }
    .home-gallery-desc   { font-size: 14px; }

    .home-gallery-stage {
        margin: 0 calc(-1 * clamp(20px, 4.5vw, 64px));
    }

    .home-gallery-track {
        gap: 14px;
        padding: 8px clamp(20px, 4.5vw, 64px) 20px;
    }

    .home-gallery-item {
        flex: 0 0 82%;
        max-width: 340px;
        scroll-snap-align: center;
        opacity: 1;
        transform: none;
        animation: none;
    }

    .home-gallery-card {
        height: 260px;
        border-radius: 14px;
    }
    .home-gallery-number { top: 12px; left: 12px; padding: 5px 10px; font-size: 12px; }
    .home-gallery-view {
        top: 12px; right: 12px;
        width: 34px; height: 34px; font-size: 12px;
    }
    .home-gallery-caption { left: 16px; right: 16px; bottom: 16px; }
    .home-gallery-name    { font-size: 15px; }

    /* Touch devices get the caption always visible */
    .home-gallery-card .home-gallery-overlay { opacity: .82; }
    .home-gallery-card .home-gallery-caption { opacity: 1; transform: translateY(0); }
    .home-gallery-card .home-gallery-view    { opacity: 1; transform: scale(1) rotate(0); }

    .home-gallery-progress { width: 62%; max-width: 260px; }

    .home-gallery-footer::before,
    .home-gallery-footer::after { width: 30px; }
    .home-gallery-footer::before { left: calc(50% - 70px); }
    .home-gallery-footer::after  { right: calc(50% - 70px); }
}

@media (max-width: 420px) {
    .home-gallery-item { flex: 0 0 88%; }
    .home-gallery-card { height: 240px; border-radius: 12px; }
    .home-gallery-title { font-size: 24px; }
}

/* ============================================================
   FOOTER NOTE
   ============================================================ */
.home-gallery-footer {
    text-align: center;
    margin-top: 40px;
    position: relative;
}

.home-gallery-footer::before,
.home-gallery-footer::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gal-gold-500));
}
.home-gallery-footer::before { left: calc(50% - 90px); }
.home-gallery-footer::after {
    right: calc(50% - 90px);
    background: linear-gradient(90deg, var(--gal-gold-500), transparent);
}

.home-gallery-count {
    display: inline-block;
    padding: 0 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gal-faint);
    background: transparent;
    position: relative;
    z-index: 1;
}
.home-gallery-count strong {
    color: var(--gal-orange);
    font-weight: 800;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 14px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .home-gallery-item,
    .home-gallery-card,
    .home-gallery-card img,
    .home-gallery-number,
    .home-gallery-view,
    .home-gallery-caption,
    .home-gallery-hint svg {
        transition-duration: .01ms !important;
        animation: none !important;
    }
    .home-gallery-item { opacity: 1; transform: none; }
    .home-gallery-card:hover { transform: none; }
    .home-gallery-card:hover img { transform: none; }
}

/* ======================== Gallery-Section-End =========================== */