/* ============================================================
   Arc & Oak Millwork — Project Gallery
   Featured image + sliding thumbnail carousel (one row, always).
   Tiles per view: desktop 5, tablet (<=992) 4, mobile (<=768) 3.
   All styles scoped under .aog-gallery.
   ============================================================ */

/* ---------- root / theme tokens ---------- */
.aog-gallery {
    /* surfaces */
    --paper: #f6f2ea;
    --paper-2: #efe9dd;
    --card: #ffffff;

    /* text */
    --espresso: #2a241d;
    --espresso-soft: #5b5145;
    --muted: #8a7f6f;

    /* hairlines */
    --line: #e0d7c7;
    --line-2: #d3c8b4;

    /* bronze / gold accents */
    --gold-1: #b48c57;
    --gold-2: #9c6f44;
    --gold-3: #8a5f38;
    --gold-deep: #6f4a2b;
    --grad-gold: linear-gradient(180deg, #c2a06d 0%, #9c6f44 55%, #7c5532 100%);

    /* beige accent for the active thumbnail on mobile */
    --beige: #d8c9ac;

    /* type */
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Jost", "Helvetica Neue", sans-serif;

    /* motion + depth */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --shadow-md: 0 26px 60px -28px rgba(42, 36, 29, .5);
    --shadow-lg: 0 40px 90px -40px rgba(42, 36, 29, .55);

    /* carousel controls (overridden per breakpoint) */
    --per-view: 5;        /* tiles visible at once */
    --thumb-gap: 14px;    /* gap between tiles */

    
    color: var(--espresso);
    font-family: var(--sans);
    font-weight: 300;

}

.aog-gallery * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.aog-gallery img {
    max-width: 100%;
    display: block;
}

.aog-wrap {
    
    margin: 0 auto;
  
}

/* ---------- featured image ---------- */
.aog-feature {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    cursor: pointer;
    background: var(--paper-2);
    box-shadow: var(--shadow-lg);
}

.aog-feature,
.aog-feature:hover,
.aog-feature:focus {
    text-decoration: none;
    color: inherit;
}

.aog-feature-img {
    position: absolute;
    inset: 0;
}

.aog-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: opacity .5s var(--ease), transform 8s var(--ease);
}

.aog-feature.swapping .aog-feature-img img {
    opacity: 0;
}

.aog-feature-img img.settled {
    transform: scale(1);
}

/* warm bottom gradient so the caption stays legible */
.aog-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(20, 17, 13, 0) 38%,
        rgba(20, 17, 13, .16) 60%,
        rgba(20, 17, 13, .74) 100%);
}

/* gold corner brackets */
.aog-corner {
    position: absolute;
    width: 46px;
    height: 46px;
    z-index: 3;
    border: 1px solid var(--gold-1);
    opacity: .85;
    pointer-events: none;
}

.aog-corner.tl {
    top: 20px;
    left: 20px;
    border-right: 0;
    border-bottom: 0;
}

.aog-corner.br {
    bottom: 20px;
    right: 20px;
    border-left: 0;
    border-top: 0;
}

/* caption block */
.aog-feature-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.aog-feature-no {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-1);
}

.aog-feature-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 48px;
    line-height: 1.02;
    letter-spacing: .5px;
    color: #f6f2ea;
}

.aog-feature-loc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-weight: 300;
    font-size: 15px;
    letter-spacing: .5px;
    color: #e3d8c4;
}

.aog-feature-loc svg {
    width: 16px;
    height: 16px;
    color: var(--gold-1);
}

/* ---------- sliding thumbnail carousel ---------- */
.aog-carousel {
    position: relative;
    margin-top: 18px;
    display: flex;
    align-items: stretch;
    gap: 12px;
}

/* viewport clips a single row; the track slides inside it */
.aog-thumbs-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.aog-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--thumb-gap);
    transition: transform .5s var(--ease);
    will-change: transform;
}

/* tile width = (viewport - gaps between visible tiles) / tiles-per-view */
.aog-thumb {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--thumb-gap)) / var(--per-view));
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: pointer;
    background: var(--paper-2);
    border-radius: 2px;
    outline: 1px solid var(--line);
    outline-offset: 0;
    transition: outline-color .35s var(--ease),
                transform .35s var(--ease),
                box-shadow .35s var(--ease);
}

.aog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.aog-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 17, 13, .28);
    opacity: 0;
    transition: opacity .35s var(--ease);
}

.aog-thumb:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.aog-thumb:hover img {
    transform: scale(1.05);
}

.aog-thumb.active {
    outline: 2px solid var(--gold-1);
    outline-offset: 0;
}

.aog-thumb:not(.active)::after {
    opacity: .18;
}

.aog-thumb:hover::after {
    opacity: 0;
}

/* per-thumb title pill */
.aog-thumb-tag {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 7px;
    z-index: 2;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .6px;
    color: #f6f2ea;
    opacity: 0;
    transform: translateY(4px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 6px rgba(20, 17, 13, .6);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.aog-thumb:hover .aog-thumb-tag,
.aog-thumb.active .aog-thumb-tag {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- prev / next arrows ---------- */
/* hover animation matches the site's secondary buttons:
   gold border at rest, gradient fill slides in, shimmer band sweeps.
   Shimmer travels bottom-to-top here since the button is square,
   not wide like the full-width site buttons.
   SVG stays above both pseudo-layers. */
.aog-arrow {
    flex: 0 0 auto;
    align-self: stretch;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 0;
    background: transparent !important;
    color: var(--gold-2);
    border: 1px solid var(--gold-2);
    border-radius: 2px;
    cursor: pointer;
    transition: color .5s var(--ease),
                border-color .5s var(--ease);
}

/* fill — gradient slides up from the bottom */
.aog-arrow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--grad-gold);
    transform: translateY(101%);
    transition: transform .55s var(--ease);
}

/* shimmer band — sweeps bottom-to-top, above the fill, below the icon */
.aog-arrow::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -75%;
    width: 100%;
    height: 50%;
    z-index: 1;
    background: linear-gradient(10deg,
        transparent 0%,
        rgba(255, 253, 224, .45) 50%,
        transparent 100%);
    transform: skewY(-12deg);
    transition: bottom .7s var(--ease);
    pointer-events: none;
}

.aog-arrow svg {
    position: relative;
    z-index: 2;
    width: 20px;
    height: 20px;
}

.aog-arrow:hover {
    color: #fff;
    border-color: transparent;
}

.aog-arrow:hover::after {
    transform: translateY(0);
}

.aog-arrow:hover::before {
    bottom: 130%;
}

.aog-arrow:disabled {
    opacity: .35;
    cursor: default;
}

/* disabled: no fill, no shimmer, stays at rest */
.aog-arrow:disabled:hover {
    color: var(--gold-2);
    border-color: var(--gold-2);
}

.aog-arrow:disabled:hover::after {
    transform: translateY(101%);
}

.aog-arrow:disabled:hover::before {
    bottom: -75%;
}

/* hide arrows entirely when everything fits in one view */
.aog-carousel.is-static .aog-arrow {
    display: none;
}

/* ============================================================
   Breakpoints — only the visible-tile count and a few
   sizes change; the layout mechanics stay the same.
   ============================================================ */

/* tablet: 4 tiles per view */
@media (max-width: 992px) {
    .aog-gallery {
        --per-view: 4;
        
    }

    .aog-feature-title {
        font-size: 40px;
    }
}

/* mobile: 3 tiles per view, no thumbnail titles */
@media (max-width: 768px) {
    .aog-gallery {
        --per-view: 3;
        --thumb-gap: 10px;
        
    }


    .aog-feature {
        aspect-ratio: 4 / 3;
    }

    .aog-feature-cap {
        padding: 24px;
    }

    .aog-feature-title {
        font-size: 30px;
    }

    .aog-corner {
        width: 34px;
        height: 34px;
    }

    .aog-arrow {
        width: 38px;
    }

    .aog-arrow svg {
        width: 18px;
        height: 18px;
    }

    .aog-thumb-tag {
        display: none;
    }

    /* active thumbnail gets a beige border on mobile */
    .aog-thumb.active {
        outline: 2px solid var(--beige);
    }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .aog-gallery * {
        animation: none !important;
        transition-duration: .001s !important;
    }

    .aog-feature-img img {
        transform: none !important;
    }

    .aog-thumbs {
        transition: none !important;
    }
}