/* ============================================================
   S.T Contracts Ltd - Gallery Page
   Consistent with site tokens. JS hooks preserved:
   .st-gallery-item / -page-btn(.active) / -lightbox / -close
   ============================================================ */

:root {
    --st-orange:#F28823; --st-orange-hover:#d8731a; --st-orange-deep:#c4640f;
    --st-charcoal:#23282d; --st-ink:#23282d; --st-body:#4a5159; --st-muted:#828a93; --st-line:#e7e9ec;
    --st-surface:#ffffff; --st-surface-alt:#f5f6f8;
    --st-container:1200px; --st-pad:clamp(1.1rem,4vw,2.5rem); --st-section-y:clamp(3.25rem,5vw,5rem);
    --st-radius:14px; --st-radius-lg:20px; --st-pill:999px;
    --st-shadow-sm:0 2px 12px rgba(20,26,32,.06); --st-shadow:0 14px 40px rgba(20,26,32,.10); --st-shadow-lg:0 24px 60px rgba(20,26,32,.16);
    --st-fast:.2s ease; --st-ease:.35s cubic-bezier(.2,.7,.3,1);
    --st-fs-h1:clamp(1.7rem,1.2rem + 1.9vw,2.4rem); --st-fs-h2:clamp(1.8rem,1.3rem + 2vw,2.6rem); --st-fs-lead:clamp(1.02rem,.96rem + .35vw,1.18rem);
}
* { box-sizing: border-box; }

/* HERO - thin charcoal strip */
.st-gallery-hero {
    position: relative; background: var(--st-charcoal); border-top: 3px solid var(--st-orange);
    padding: clamp(2.25rem,4vw,3rem) var(--st-pad); font-family:'Mulish',sans-serif; overflow: hidden;
}
.st-gallery-hero::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(ellipse at 100% 0%, rgba(242,136,35,.16) 0%, transparent 55%);
}
.st-gallery-hero-inner { max-width: var(--st-container); margin:0 auto; position:relative; z-index:1; text-align:left; }
.st-gallery-hero-badge {
    display:inline-flex; align-items:center; gap:.6rem;
    font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
    color:#fcc78a; background:none; padding:0; margin:0 0 .6rem;
}
.st-gallery-hero-badge i { color: var(--st-orange); }
.st-gallery-hero h1 { font-size: var(--st-fs-h1); font-weight:800; color:#fff; margin:0; letter-spacing:-.02em; line-height:1.1; }
.st-gallery-hero p { font-size: var(--st-fs-lead); line-height:1.6; color: rgba(255,255,255,.74); margin:.65rem 0 0; max-width:60ch; }

/* GALLERY SECTION */
.st-gallery-section { background: var(--st-surface); padding: var(--st-section-y) var(--st-pad); font-family:'Mulish',sans-serif; }
.st-gallery-section .container { max-width: var(--st-container); margin:0 auto; }

/* GRID */
.st-gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:3rem; }
.st-gallery-item {
    position:relative; overflow:hidden; border-radius: var(--st-radius); cursor:pointer;
    aspect-ratio:4/3; background:#f0f1f3; box-shadow: var(--st-shadow-sm);
    transition: transform var(--st-ease), box-shadow var(--st-ease);
}
.st-gallery-item::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(to top, rgba(20,23,27,.45) 0%, transparent 50%);
    opacity:0; transition: opacity var(--st-ease); pointer-events:none;
}
.st-gallery-item:hover { box-shadow: var(--st-shadow); transform: translateY(-4px); }
.st-gallery-item:hover::after { opacity:1; }
.st-gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .45s var(--st-ease); }
.st-gallery-item:hover img { transform: scale(1.08); }
.st-gallery-item::before {
    content:'\f00e'; font-family:'Font Awesome 6 Free'; font-weight:900;
    position:absolute; bottom:16px; right:16px; width:40px; height:40px;
    background: var(--st-orange); color:#fff; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:14px; z-index:2;
    opacity:0; transform: translateY(10px); transition: opacity var(--st-ease), transform var(--st-ease);
}
.st-gallery-item:hover::before { opacity:1; transform: translateY(0); }

/* PAGINATION */
.st-gallery-pagination { display:flex; justify-content:center; align-items:center; gap:.6rem; flex-wrap:wrap; font-family:'Mulish',sans-serif; }
.st-gallery-page-btn {
    background:#fff; border:1px solid var(--st-line); color: var(--st-body);
    padding:11px 17px; border-radius:10px; cursor:pointer; font-size:.95rem; font-weight:800;
    min-width:46px; font-family:'Mulish',sans-serif; box-shadow: var(--st-shadow-sm);
    transition: background var(--st-fast), color var(--st-fast), border-color var(--st-fast), box-shadow var(--st-fast), transform var(--st-fast);
}
.st-gallery-page-btn:hover { color: var(--st-orange); border-color: var(--st-orange); box-shadow: var(--st-shadow); transform: translateY(-2px); }
.st-gallery-page-btn.active { background: var(--st-orange); border-color: var(--st-orange); color:#fff; box-shadow: 0 6px 18px rgba(242,136,35,.32); }
.st-gallery-page-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow: var(--st-shadow-sm); }
.st-gallery-page-btn:disabled:hover { color: var(--st-body); border-color: var(--st-line); transform:none; box-shadow: var(--st-shadow-sm); }

/* LIGHTBOX */
.st-gallery-lightbox {
    display:none; position:fixed; z-index:9999; inset:0; width:100%; height:100%;
    background: rgba(20,23,27,.95); cursor:pointer; opacity:0; transition: opacity .3s ease; backdrop-filter: blur(8px);
}
.st-gallery-lightbox-image {
    position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
    max-width:90%; max-height:85%; border-radius: var(--st-radius); box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.st-gallery-close { position:absolute; top:24px; right:32px; cursor:pointer; font-size:40px; color:var(--st-orange); line-height:1; transition: transform var(--st-fast); }
.st-gallery-close:hover { transform: scale(1.1); }

/* CTA - dark band */
.st-gallery-cta { background: var(--st-charcoal); padding: clamp(3.5rem,5vw,5rem) var(--st-pad); font-family:'Mulish',sans-serif; position:relative; overflow:hidden; }
.st-gallery-cta::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(ellipse at 20% 80%, rgba(242,136,35,.16) 0%, transparent 52%), radial-gradient(ellipse at 80% 20%, rgba(242,136,35,.12) 0%, transparent 52%);
}
.st-gallery-cta-inner { max-width:640px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.st-gallery-cta h2 { font-size: var(--st-fs-h2); font-weight:800; color:#fff; margin:0 0 1rem; letter-spacing:-.02em; }
.st-gallery-cta p { font-size: var(--st-fs-lead); line-height:1.6; color: rgba(255,255,255,.78); margin:0 0 2rem; }
.st-gallery-cta-btn {
    display:inline-flex; align-items:center; justify-content:center;
    background: var(--st-orange); color:#fff; text-decoration:none;
    padding:15px 36px; border-radius: var(--st-pill); font-weight:800; font-size:1rem;
    border:2px solid var(--st-orange); box-shadow:0 8px 22px rgba(242,136,35,.32);
    transition: background var(--st-fast), border-color var(--st-fast), transform var(--st-fast), box-shadow var(--st-fast);
}
.st-gallery-cta-btn:hover { background: var(--st-orange-hover); border-color: var(--st-orange-hover); transform: translateY(-2px); box-shadow:0 12px 28px rgba(242,136,35,.42); }

/* RESPONSIVE */
@media (max-width:1024px){ .st-gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:767px){
    .st-gallery-grid{ grid-template-columns:repeat(2,1fr); gap:.75rem; margin-bottom:2.25rem; }
    .st-gallery-item::before{ width:32px; height:32px; font-size:12px; bottom:10px; right:10px; }
    .st-gallery-close{ top:16px; right:16px; font-size:32px; }
}
@media (max-width:480px){
    .st-gallery-grid{ grid-template-columns:1fr; }
    .st-gallery-item{ aspect-ratio:16/10; }
}