/* ======================================================================
   GSC-TEMPC — OUR MEMORIES / GALLERY (#section-gallery)
   File:   assets/css/gallery_modern.css
   Scope:  every selector starts with #section-gallery; no other section,
           the header, the sidebar or the footer is affected.

   Concept: "gallery wall". The twelve photographs hang on one white mat
   panel set on a pale-green field. The first photograph is the hero
   (2 x 2 cells); the rest are a tightly fitted mosaic with no holes.
   Photographs stay natural rectangles with a small radius: no masks, no
   dark gradients. Captions are museum-style white labels that slide up
   on hover/focus (always visible on touch devices). Gold is used only
   for the title divider, the intro bar, the featured label's edge, the
   footer rule and the CTA outline.

   House style carried over from the approved About Us section:
   green/white fields, Fraunces headings in forest green, the
   gold-to-leaf divider, the 3px gold bar, the pill CTA with a gold
   arrow disc, the botanical corners, and container-query breakpoints
   (the section is a size container, so the ~320px fixed sidebar is
   accounted for automatically).

   Markup, JS hooks (openGallery, #hpGalleryMosaic, #media-data-mosaic)
   and the lightbox are untouched.
   ====================================================================== */

#section-gallery.gsctempc-gallery {
    --gl-brand: #30AA28;
    --gl-leaf: #B9DDB5;
    --gl-leaf-soft: #E5F1E3;
    --gl-sage: #F3F8F2;
    --gl-action: #27883A;
    --gl-action-deep: #1B6A2E;
    --gl-forest: #1F5A2D;
    --gl-ink: #173E29;
    --gl-gold: #D6B56D;
    --gl-gold-light: #F6E3AE;
    --gl-white: #FFFFFF;
    --gl-text: #3E4C42;
    --gl-muted: #53625A;
    --gl-ease: cubic-bezier(.16, 1, .3, 1);
    --gl-serif: var(--hp-display-font, 'Fraunces', Georgia, 'Times New Roman', serif);

    container: gallery / inline-size;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0;
    padding: 72px 14px 80px;
    scroll-margin-top: 80px;
    color: var(--gl-forest);
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F8F2 26%, #EDF5EB 64%, #FFFFFF 100%);
}

#section-gallery *,
#section-gallery *::before,
#section-gallery *::after {
    box-sizing: border-box;
}

/* ----------------------------------------------------------------------
   BACKDROP — soft green light, two corner botanicals (About Us treatment)
   ---------------------------------------------------------------------- */
#section-gallery.gsctempc-gallery::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 38% at 8% 30%, rgba(185, 221, 181, .45), transparent 72%),
        radial-gradient(ellipse 46% 36% at 96% 70%, rgba(185, 221, 181, .32), transparent 72%);
}

#section-gallery.gsctempc-gallery::after {
    content: none;
}

#section-gallery .gsctempc-gallery__botanical {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: clamp(110px, 24vw, 260px);
    width: clamp(110px, 15cqi, 260px);
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: .14;
    filter: grayscale(1) sepia(.55) saturate(3) hue-rotate(85deg) brightness(.7);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 88%);
    mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 88%);
}

#section-gallery .gsctempc-gallery__botanical--left {
    left: 0;
    background-image: url('../images/botanical-corner-right.png');
    background-position: bottom left;
    transform: scaleX(-1);
}

#section-gallery .gsctempc-gallery__botanical--right {
    right: 0;
    background-image: url('../images/botanical-corner-right.png');
    background-position: bottom right;
}

#section-gallery .gsctempc-gallery__inner {
    position: relative;
    z-index: 2;
    width: min(1240px, 100%);
    margin: 0 auto;
}

/* ----------------------------------------------------------------------
   HEADER — title left, intro right; stacked when the section is narrow
   ---------------------------------------------------------------------- */
#section-gallery .gsctempc-gallery__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    align-items: end;
}

#section-gallery .gsctempc-gallery__heading {
    min-width: 0;
}

#section-gallery .gsctempc-gallery__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    color: var(--gl-action-deep);
    font-family: inherit;
    font-size: .82rem;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .22em;
}

#section-gallery .gsctempc-gallery__eyebrow-line {
    flex: 0 0 auto;
    width: 52px;
    height: 2px;
    background: linear-gradient(90deg, var(--gl-gold) 0 60%, var(--gl-leaf) 60% 100%);
}

#section-gallery .gsctempc-gallery__eyebrow i {
    flex: 0 0 auto;
    margin-right: -2px;
    color: var(--gl-action);
    font-size: .8rem;
    letter-spacing: 0;
}

#section-gallery .gsctempc-gallery__title {
    margin: 0;
    max-width: 14em;
    color: var(--gl-forest);
    font-family: var(--gl-serif);
    font-size: clamp(2.3rem, 9.5vw, 3.2rem);
    font-size: clamp(2.3rem, 10.5cqi, 3.2rem);
    line-height: 1.04;
    font-weight: 600;
    letter-spacing: -.035em;
    text-wrap: balance;
    overflow-wrap: break-word;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

/* The one gold divider, flush with the title's left edge */
#section-gallery .gsctempc-gallery__title::after {
    content: '';
    display: block;
    width: 72px;
    height: 3px;
    margin-top: 26px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gl-gold) 0 58%, var(--gl-leaf) 58% 100%);
}

#section-gallery .gsctempc-gallery__intro {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    max-width: 440px;
}

/* Bar echoes the divider: gold head, leaf-green body */
#section-gallery .gsctempc-gallery__intro-rule {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--gl-gold) 0 28px, var(--gl-leaf) 28px 100%);
}

#section-gallery .gsctempc-gallery__intro p {
    margin: 0;
    max-width: 34em;
    color: var(--gl-text);
    font-family: inherit;
    font-size: 1.02rem;
    line-height: 1.8;
    font-weight: 400;
}

/* ----------------------------------------------------------------------
   MOSAIC — white mat panel; photographs sit in a dense, hole-free grid
   Default (narrow section): 2 columns, hero spans both.
   ---------------------------------------------------------------------- */
#section-gallery .gsctempc-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 124px;
    grid-auto-rows: clamp(124px, 36cqi, 200px);
    grid-auto-flow: dense;
    gap: 8px;
    margin-top: 36px;
    padding: 8px;
    border: 1px solid rgba(48, 170, 40, .16);
    border-radius: 8px;
    background: var(--gl-white);
    box-shadow:
        0 24px 48px rgba(23, 62, 41, .10),
        0 4px 12px rgba(48, 170, 40, .06);
}

#section-gallery .gsctempc-gallery__item {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 4px;
    background: var(--gl-leaf-soft);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

#section-gallery .gsctempc-gallery__item--featured {
    grid-column: span 2;
    grid-row: span 2;
}

/* A last orphan in a 2-column grid takes the full row */
#section-gallery .gsctempc-gallery__item:last-child:nth-child(even) {
    grid-column: span 2;
}

/* Photograph */
#section-gallery .gsctempc-gallery__media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: var(--gl-leaf-soft);
}

#section-gallery .gsctempc-gallery__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%; /* keeps heads in frame on group photos */
    transition: transform .9s var(--gl-ease), filter .6s ease;
}

/* Quiet tint that deepens a touch on hover; no dark scrim */
#section-gallery .gsctempc-gallery__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(23, 62, 41, 0);
    pointer-events: none;
    transition: background .5s ease;
}

/* Zoom affordance */
#section-gallery .gsctempc-gallery__zoom {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gl-white);
    color: var(--gl-action-deep);
    font-size: .8rem;
    box-shadow: 0 6px 16px rgba(23, 62, 41, .24);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .35s ease, transform .45s var(--gl-ease);
    pointer-events: none;
}

/* Featured label: white chip, gold star */
#section-gallery .gsctempc-gallery__featured-label {
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 8px 14px 8px 12px;
    border-radius: 999px;
    background: var(--gl-white);
    color: var(--gl-action-deep);
    font-family: inherit;
    font-size: .72rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(23, 62, 41, .2);
}

#section-gallery .gsctempc-gallery__featured-label i {
    color: var(--gl-gold);
    font-size: .72rem;
}

/* Caption: museum label. Regular tiles reveal it on hover/focus. */
#section-gallery .gsctempc-gallery__caption {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px 11px;
    background: rgba(255, 255, 255, .97);
    color: var(--gl-forest);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .35s ease, transform .5s var(--gl-ease);
    pointer-events: none;
}

#section-gallery .gsctempc-gallery__caption-meta {
    color: var(--gl-action-deep);
    font-family: inherit;
    font-size: .74rem;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Names are often upload file names: shown on the hero only */
#section-gallery .gsctempc-gallery__caption-name {
    display: none;
    color: var(--gl-forest);
    font-family: var(--gl-serif);
    font-size: 1.08rem;
    line-height: 1.3;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Hero caption: compact inset label, always visible, one gold edge */
#section-gallery .gsctempc-gallery__item--featured .gsctempc-gallery__caption {
    left: 10px;
    right: auto;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 12px 16px 13px;
    border-left: 3px solid var(--gl-gold);
    border-radius: 2px 4px 4px 2px;
    box-shadow: 0 10px 24px rgba(23, 62, 41, .2);
    opacity: 1;
    transform: none;
}

#section-gallery .gsctempc-gallery__item--featured .gsctempc-gallery__caption-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ----------------------------------------------------------------------
   INTERACTION
   ---------------------------------------------------------------------- */
#section-gallery .gsctempc-gallery__item:hover .gsctempc-gallery__media img,
#section-gallery .gsctempc-gallery__item:focus-visible .gsctempc-gallery__media img {
    transform: scale(1.04);
    filter: saturate(1.05);
}

#section-gallery .gsctempc-gallery__item:hover .gsctempc-gallery__overlay,
#section-gallery .gsctempc-gallery__item:focus-visible .gsctempc-gallery__overlay {
    background: rgba(23, 62, 41, .12);
}

#section-gallery .gsctempc-gallery__item:hover .gsctempc-gallery__zoom,
#section-gallery .gsctempc-gallery__item:focus-visible .gsctempc-gallery__zoom {
    opacity: 1;
    transform: scale(1);
}

#section-gallery .gsctempc-gallery__item:hover .gsctempc-gallery__caption,
#section-gallery .gsctempc-gallery__item:focus-visible .gsctempc-gallery__caption {
    opacity: 1;
    transform: translateY(0);
}

#section-gallery .gsctempc-gallery__item:focus-visible {
    z-index: 2;
    outline: 3px solid var(--gl-action-deep);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------
   FOOTER — note aligned to the left edge, CTA to the right edge
   ---------------------------------------------------------------------- */
#section-gallery .gsctempc-gallery__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 30px;
}

#section-gallery .gsctempc-gallery__footer-note {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--gl-muted);
    font-family: inherit;
    font-size: .78rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

#section-gallery .gsctempc-gallery__footer-line {
    flex: 0 0 auto;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--gl-gold) 0 60%, var(--gl-leaf) 60% 100%);
}

#section-gallery .gsctempc-gallery__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 56px;
    padding: 12px 14px 12px 24px;
    overflow: hidden;
    border: 1px solid rgba(214, 181, 109, .75);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gl-action) 0%, var(--gl-action-deep) 100%);
    color: #fff;
    font-family: inherit;
    font-size: .98rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(31, 90, 45, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: transform .4s var(--gl-ease), box-shadow .4s ease, background .3s ease;
}

#section-gallery .gsctempc-gallery__cta > * {
    position: relative;
}

#section-gallery .gsctempc-gallery__cta::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -70%;
    width: 46%;
    height: 180%;
    transform: skewX(-18deg);
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
    transition: left .7s var(--gl-ease);
    pointer-events: none;
}

#section-gallery .gsctempc-gallery__cta i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gl-gold-light);
    color: var(--gl-ink);
    font-size: .8rem;
    transition: transform .4s var(--gl-ease);
}

#section-gallery .gsctempc-gallery__cta:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, var(--gl-action-deep) 0%, var(--gl-ink) 100%);
    box-shadow: 0 18px 32px rgba(31, 90, 45, .36), inset 0 1px 0 rgba(255, 255, 255, .16);
}

#section-gallery .gsctempc-gallery__cta:hover::before { left: 130%; }
#section-gallery .gsctempc-gallery__cta:hover i { transform: translateX(3px); }

#section-gallery .gsctempc-gallery__cta:focus-visible {
    outline: 3px solid var(--gl-forest);
    outline-offset: 3px;
}

#section-gallery .gsctempc-gallery__cta:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(31, 90, 45, .26);
}

/* ----------------------------------------------------------------------
   RESPONSIVE — driven by the section's own width (container queries)
   ---------------------------------------------------------------------- */
@media (min-width: 600px) {
    #section-gallery.gsctempc-gallery { padding: 88px 24px 96px; }
}

@media (min-width: 1100px) {
    #section-gallery.gsctempc-gallery { padding: 104px 32px 112px; }
}

/* Section 480px+: label sizes ease up */
@container gallery (min-width: 480px) {
    #section-gallery .gsctempc-gallery__grid { gap: 10px; padding: 10px; }
    #section-gallery .gsctempc-gallery__zoom { top: 12px; right: 12px; width: 40px; height: 40px; }
    #section-gallery .gsctempc-gallery__featured-label { top: 12px; left: 12px; }
    #section-gallery .gsctempc-gallery__caption { padding: 11px 16px 12px; }
    #section-gallery .gsctempc-gallery__item--featured .gsctempc-gallery__caption { left: 14px; bottom: 14px; max-width: min(420px, calc(100% - 28px)); }
    #section-gallery .gsctempc-gallery__item--featured .gsctempc-gallery__caption-name { font-size: 1.2rem; }
}

/* Tablet-width section: 3 columns, hero 2 x 2, nine tiles fill 3 rows */
@container gallery (min-width: 600px) {
    #section-gallery .gsctempc-gallery__title { font-size: clamp(2.8rem, 7vw, 3.8rem); font-size: clamp(2.8rem, 7.2cqi, 3.8rem); }
    #section-gallery .gsctempc-gallery__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 150px;
        grid-auto-rows: clamp(150px, 21cqi, 230px);
        gap: 12px;
        padding: 12px;
        margin-top: 44px;
    }
    #section-gallery .gsctempc-gallery__item:last-child:nth-child(even) { grid-column: auto; }
    #section-gallery .gsctempc-gallery__item--featured { grid-column: span 2; }
    #section-gallery .gsctempc-gallery__footer { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; margin-top: 36px; }
}

/* Desktop-width section: header in two columns, 4-column mosaic.
   Hero 2x2 + eleven tiles, with tile 6 doubled = exactly 4 rows. */
@container gallery (min-width: 860px) {
    #section-gallery .gsctempc-gallery__header {
        grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
        gap: clamp(48px, 7cqi, 100px);
    }
    #section-gallery .gsctempc-gallery__intro { justify-self: end; }
    #section-gallery .gsctempc-gallery__title { font-size: clamp(2.8rem, 5vw, 4.2rem); font-size: clamp(2.8rem, 4.6cqi, 4.2rem); }
    #section-gallery .gsctempc-gallery__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 160px;
        grid-auto-rows: clamp(160px, 15cqi, 240px);
        margin-top: 52px;
    }
    #section-gallery .gsctempc-gallery__item:nth-child(6) { grid-column: span 2; }
    #section-gallery .gsctempc-gallery__item--featured .gsctempc-gallery__caption-name { font-size: 1.3rem; }
}

/* Very narrow sections (320px phones) */
@container gallery (max-width: 360px) {
    #section-gallery .gsctempc-gallery__eyebrow { letter-spacing: .16em; }
    #section-gallery .gsctempc-gallery__eyebrow-line { width: 36px; }
    #section-gallery .gsctempc-gallery__caption-meta { font-size: .7rem; letter-spacing: .06em; }
    #section-gallery .gsctempc-gallery__featured-label { font-size: .68rem; letter-spacing: .06em; padding-right: 11px; }
    #section-gallery .gsctempc-gallery__cta { width: 100%; }
}

/* Botanicals would crowd a phone-width mosaic */
@container gallery (max-width: 599px) {
    #section-gallery .gsctempc-gallery__botanical { display: none; }
    #section-gallery .gsctempc-gallery__cta { width: 100%; }
}

/* Fallback for browsers without container queries (viewport-based) */
@supports not (container-type: inline-size) {
    @media (min-width: 600px) {
        #section-gallery .gsctempc-gallery__grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-auto-rows: 180px;
            gap: 12px;
            padding: 12px;
        }
        #section-gallery .gsctempc-gallery__item:last-child:nth-child(even) { grid-column: auto; }
        #section-gallery .gsctempc-gallery__footer { flex-direction: row; align-items: center; justify-content: space-between; }
    }
    @media (min-width: 1100px) {
        #section-gallery .gsctempc-gallery__header { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 80px; }
        #section-gallery .gsctempc-gallery__intro { justify-self: end; }
        #section-gallery .gsctempc-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; }
        #section-gallery .gsctempc-gallery__item:nth-child(6) { grid-column: span 2; }
    }
}

/* ----------------------------------------------------------------------
   TOUCH DEVICES — no hover, so labels and zoom hints stay visible
   ---------------------------------------------------------------------- */
@media (hover: none) {
    #section-gallery .gsctempc-gallery__caption { opacity: 1; transform: none; }
    #section-gallery .gsctempc-gallery__zoom { opacity: .95; transform: none; width: 34px; height: 34px; }
    #section-gallery .gsctempc-gallery__item:hover .gsctempc-gallery__media img { transform: none; filter: none; }
    #section-gallery .gsctempc-gallery__item:hover .gsctempc-gallery__overlay { background: rgba(23, 62, 41, 0); }
}

/* ----------------------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #section-gallery .gsctempc-gallery__media img,
    #section-gallery .gsctempc-gallery__overlay,
    #section-gallery .gsctempc-gallery__zoom,
    #section-gallery .gsctempc-gallery__caption,
    #section-gallery .gsctempc-gallery__cta,
    #section-gallery .gsctempc-gallery__cta::before,
    #section-gallery .gsctempc-gallery__cta i {
        transition: none;
    }
    #section-gallery .gsctempc-gallery__item:hover .gsctempc-gallery__media img,
    #section-gallery .gsctempc-gallery__item:focus-visible .gsctempc-gallery__media img,
    #section-gallery .gsctempc-gallery__cta:hover,
    #section-gallery .gsctempc-gallery__cta:hover i {
        transform: none;
    }
}

/* ----------------------------------------------------------------------
   HIGH-CONTRAST / FORCED COLORS
   ---------------------------------------------------------------------- */
@media (forced-colors: active) {
    #section-gallery .gsctempc-gallery__grid,
    #section-gallery .gsctempc-gallery__caption,
    #section-gallery .gsctempc-gallery__featured-label,
    #section-gallery .gsctempc-gallery__zoom {
        border: 1px solid CanvasText;
    }
    #section-gallery .gsctempc-gallery__cta {
        border: 2px solid ButtonText;
    }
}

/* Existing scroll-reveal hook, preserved */
#section-gallery.gsctempc-gallery.reveal.is-active { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }