/* ═══════════════════════════════════════════════════════════════
  GPM GALLERY — gstyle.css
═══════════════════════════════════════════════════════════════ */

:root {
  --bg:         #f0f2f5;   /* cool grey-blue canvas          */
  --surface:    #e4e8ee;   /* slightly darker surface        */
  --header-bg:  #1e2530;   /* charcoal blue header           */
  --header-bd:  #2c3545;   /* header border                  */
  --accent:     #60a0d0;   /* sky blue accent                */
  --accent-dim: #4a88b8;   /* darker accent for hover        */
  --chip-bg:    #d8dde4;   /* filter chip background         */
  --chip-bd:    #c0c8d4;   /* filter chip border             */
  --ink:        #1e2530;   /* dark slate text                */
  --ink-mid:    #4a6080;   /* muted text                     */
  --ink-faint:  #8a9ab0;   /* very muted text                */
  --white:      #ffffff;
  --shadow:     rgba(30,37,48,0.14);
  --radius:     6px;
  --header-h:   68px;
  --gap:        3px;

}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family:           'DM Sans', sans-serif;
  font-size:             1rem;
  line-height:           1.65;
  color:                 var(--ink);
  background-color:      var(--cream);
  background-attachment: fixed;
  background-position:   center;
  background-size:       cover;
  background-repeat:     no-repeat;
  overflow-x:            hidden;
}

body::before {
  content:          '';
  position:         fixed;
  inset:            0;
  pointer-events:   none;
  z-index:          0;
  opacity:          0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

#page-wrapper { position: relative; z-index: 1; min-height: 100vh; width: 100%; }

/* ═══════ HEADER ═══════ */


/* ═══════ FILTER BAR ═══════ */
.filter-bar {
  position: static;
  top: 140px;  /* sticks below header */
  left: 0;
  width: 100%;
  z-index: 1020;
  background: #2f3b46;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(139, 115, 85, 0.15);
  padding: 0.7rem 0;
}
.filter-inner {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  /* Horizontal scroll on mobile — no wrapping */
  flex-wrap:   nowrap;
  overflow-x:  auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.filter-inner::-webkit-scrollbar { display: none; }

.filter-label {
  font-size:      0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--warm-mid);
  margin-right:   0.3rem;
  white-space:    nowrap;
  flex-shrink:    0;
}

.filter-btn {
  padding:       0.38rem 1rem;
  border:        1px solid rgba(139, 115, 85, 0.38) !important;
  background:    transparent !important;
  border-radius: 100px !important;
  font-family:   'DM Sans', sans-serif;
  font-size:     0.76rem;
  letter-spacing: 0.04em;
  color:         var(--warm-mid) !important;
  cursor:        pointer;
  transition:    all 0.2s ease;
  white-space:   nowrap;
  flex-shrink:   0;
  box-shadow:    none !important;
  min-height:    38px;
  -webkit-tap-highlight-color: transparent;
  touch-action:  manipulation;
}
.filter-btn:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.filter-btn.active { background: var(--bg) !important; border-color: var(--ink) !important; color: var(--cream) !important; }

@media (max-width: 575.98px) {
  .filter-btn   { font-size: 0.72rem; padding: 0.35rem 0.8rem; }
  .filter-label { display: none; }
}

/* ═══════ GALLERY SECTION ═══════ */
.gallery-section {
  padding-top: clamp(1.25rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

/* ── Featured Row ── */
.featured-row { margin-bottom: 1rem; }

.featured-item {
  position:      relative;
  overflow:      hidden;
  border-radius: var(--radius);
  cursor:        pointer;
  opacity:       0;
  transform:     translateY(18px);
  transition:    opacity 0.55s ease, transform 0.55s ease, box-shadow 0.3s ease;
  height:        100%;
  -webkit-tap-highlight-color: transparent;
}
.featured-item.visible { opacity: 1; transform: translateY(0); }
.featured-item:hover   { box-shadow: 0 18px 52px var(--shadow); }

.featured-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.5s ease;
  /* Desktop: tall hero; mobile: compact */
  min-height: clamp(200px, 36vw, 420px);
}
.featured-item:hover img { transform: scale(1.04); }

@media (max-width: 767.98px) {
  .featured-item img { min-height: clamp(180px, 52vw, 300px); }
}

/* ── Masonry Grid ── */
.gallery-grid {
  columns:    3;
  column-gap: 0.875rem;
}
@media (max-width: 991.98px) { .gallery-grid { columns: 2; } }
@media (max-width: 575.98px) {
  .gallery-grid { columns: 2; column-gap: 0.5rem; }
}
@media (max-width: 340px)    { .gallery-grid { columns: 1; } }

.gallery-item {
  break-inside:  avoid;
  margin-bottom: 0.875rem;
  position:      relative;
  overflow:      hidden;
  border-radius: var(--radius);
  cursor:        pointer;
  opacity:       0;
  transform:     translateY(18px);
  transition:    opacity 0.55s ease, transform 0.55s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.gallery-item.visible { opacity: 1; transform: translateY(0); }
.gallery-item:hover   { box-shadow: 0 14px 40px var(--shadow); }

@media (max-width: 575.98px) { .gallery-item { margin-bottom: 0.5rem; } }

.gallery-item img { width: 100%; display: block; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.04); }

/* ── Overlay ──
   Desktop: reveal on hover.
   Touch devices (@media hover:none): always visible. */
.gallery-overlay {
  position:        absolute;
  inset:           0;
  background:      linear-gradient(to top, rgba(26, 21, 16, 0.88) 0%, transparent 60%);
  opacity:         0;
  transition:      opacity 0.3s ease;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  padding:         0.85rem;
}
.gallery-item:hover .gallery-overlay   { opacity: 1; }
.featured-item:hover .gallery-overlay  { opacity: 1; }

/* Always show on touch (phones/tablets don't have hover) */
@media (hover: none) {
  .gallery-item .gallery-overlay,
  .featured-item .gallery-overlay { opacity: 1; }
}

.overlay-tag {
  font-size:      0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  0.2rem;
}
.overlay-title {
  font-family: 'Playfair Display', serif;
  font-size:   clamp(0.78rem, 1.4vw, 1.05rem);
  font-weight: 700;
  color:       #fff;
  line-height: 1.3;
}
.overlay-desc {
  font-size:   0.71rem;
  color:       rgba(255, 255, 255, 0.65);
  margin-top:  0.22rem;
  line-height: 1.45;
}
.overlay-date {
  font-size:  0.65rem;
  color:      rgba(255, 255, 255, 0.48);
  margin-top: 0.18rem;
}

@media (max-width: 575.98px) {
  .overlay-desc  { display: none; }
  .overlay-title { font-size: 0.72rem; }
  .overlay-tag   { font-size: 0.54rem; }
}
@media (max-width: 768px) {
  .filter-bar {
    margin-top: 12px;  /* ADD THIS — pushes it down on mobile */
  }
}
/* ═══════ LIGHTBOX ═══════ */
.lightbox {
  position:        fixed;
  inset:           0;
  z-index:         2000;
  background:      rgba(26, 21, 16, 0.95);
  display:         flex;
  align-items:     center;
  justify-content: center;
  /* Respect iPhone safe areas */
  padding:         max(1.25rem, env(safe-area-inset-top))
                   max(1.25rem, env(safe-area-inset-right))
                   max(1.25rem, env(safe-area-inset-bottom))
                   max(1.25rem, env(safe-area-inset-left));
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.28s ease;
}
.lightbox.open { opacity: 1; pointer-events: all; }

.lightbox-inner { position: relative; width: 100%; max-width: 900px; }

.lightbox-inner img {
  width:         100%;
  display:       block;
  border-radius: var(--radius);
  max-height:    75vh;
  object-fit:    contain;
  transition:    transform 0.15s ease;
}
@media (max-width: 575.98px) {
  .lightbox-inner img { max-height: 62vh; }
}

.lightbox-info  { margin-top: 0.85rem; }
.lightbox-title {
  font-family: 'Playfair Display', serif;
  font-size:   clamp(0.95rem, 2vw, 1.35rem);
  font-weight: 700;
  color:       var(--cream);
}
.lightbox-sub {
  font-size:  0.76rem;
  color:      rgba(245, 240, 232, 0.45);                                                                                                                                                                                
  margin-top: 3px;
}

/* Close button — always inside the image on mobile, outside on desktop */
.lightbox-close {
  position:        absolute;
  top:             0.65rem;
  right:           0.65rem;
  width:           44px;
  height:          44px;
  background:      rgba(245, 240, 232, 0.9);
  border:          none;
  border-radius:   50%;
  cursor:          pointer;
  font-size:       1rem;
  color:           var(--ink);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background 0.2s;
  z-index:         9999;
  -webkit-tap-highlight-color: transparent;
  touch-action:    manipulation;
}
.lightbox-close:hover { background: var(--gold); }

@media (min-width: 576px) {
  .lightbox-close { top: -1rem; right: -1rem; }
}

.zoom-hint {
  position:    absolute;
  bottom:      -2rem;
  left:        50%;
  transform:   translateX(-50%);
  font-size:   0.68rem;
  color:       rgba(245, 240, 232, 0.38);
  white-space: nowrap;
  opacity:     0;
  transition:  opacity 0.4s ease;
  pointer-events: none;
}

/* ═══════ FOOTER ═══════ */
footer {
  background:     var(--ink);
  color:          var(--pale);
  padding-top:    clamp(2rem, 4vw, 3.5rem);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.footer-inner { padding-bottom: 2rem; }

.footer-brand .logo-main { color: var(--cream); font-size: clamp(1.15rem, 2vw, 1.55rem); }
.footer-brand .logo-sub  { color: var(--warm-mid); }
.footer-brand p {
  font-size:   0.84rem;
  line-height: 1.8;
  color:       rgba(245, 240, 232, 0.48);
  margin-top:  0.85rem;
}

.footer-col h4 {
  font-size:      0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  1rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li {
  font-size:     0.84rem;
  color:         rgba(245, 240, 232, 0.48);
  margin-bottom: 0.5rem;
  cursor:        pointer;
  transition:    color 0.2s;
  min-height:    36px;
  display:       flex;
  align-items:   center;
}
.footer-col ul li:hover { color: var(--cream); }

.footer-bottom {
  border-top: 1px solid rgba(245, 240, 232, 0.1);
  padding:    1.1rem 0;
  display:    flex;
  justify-content: space-between;
  flex-wrap:  wrap;
  gap:        0.4rem;
  font-size:  0.73rem;
  color:      rgba(245, 240, 232, 0.28);
}
@media (max-width: 575.98px) {
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
}

/* ═══════ GALLERY HERO ═══════ */
.gallery-hero {
  padding:          clamp(2rem, 4vw, 3.5rem) 0 clamp(1rem, 2vw, 1.75rem);
  text-align:       center;
  border-bottom:    1px solid rgba(139, 115, 85, 0.12);
}
.gallery-hero-title {
  font-family:    'Playfair Display', serif;
  font-size:      clamp(1.65rem, 4vw, 2.6rem);
  font-weight:    900;
  letter-spacing: 0.01em;
  color:          var(--ink);
  margin:         0 0 0.4rem;
}
.gallery-hero-sub {
  font-size:  clamp(0.82rem, 1.4vw, 0.95rem);
  color:      var(--ink-mid, #4a6080);
  max-width:  520px;
  margin:     0 auto;
  line-height: 1.6;
}

/* ═══════ GALLERY COUNT BADGE ═══════ */
.gallery-count {
  margin-left:    auto;         /* push to right end of filter bar */
  flex-shrink:    0;
  font-size:      0.7rem;
  letter-spacing: 0.08em;
  color:          var(--ink-faint, #8a9ab0);
  white-space:    nowrap;
  padding-left:   0.5rem;
}
@media (max-width: 575.98px) { .gallery-count { display: none; } }

/* ═══════ FEATURED ITEMS — size differentiation ═══════ */
.featured-primary img {
  min-height: clamp(220px, 40vw, 480px);
}
.featured-secondary img {
  min-height: clamp(160px, 18vw, 230px);
}
@media (max-width: 767.98px) {
  .featured-primary img   { min-height: clamp(180px, 52vw, 300px); }
  .featured-secondary img { min-height: clamp(140px, 36vw, 200px); }
}

/* ═══════ SECTION DIVIDER ═══════ */
.gallery-section-divider {
  display:        flex;
  align-items:    center;
  gap:            1rem;
  margin:         1.75rem 0 1.25rem;
  color:          var(--ink-faint, #8a9ab0);
  font-size:      0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.gallery-section-divider::before,
.gallery-section-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: rgba(139, 115, 85, 0.18);
}

/* ═══════ EMPTY STATE ═══════ */
.gallery-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            0.6rem;
  padding:        4rem 1rem;
  color:          var(--ink-faint, #8a9ab0);
  text-align:     center;
}
.gallery-empty svg   { opacity: 0.35; }
.gallery-empty p     { font-size: 1rem; font-weight: 500; margin: 0; }
.gallery-empty span  { font-size: 0.82rem; }
.gallery-empty code  { font-size: 0.8rem; background: rgba(139,115,85,0.1); padding: 0.1em 0.35em; border-radius: 3px; }

/* ═══════ ANIMATIONS ═══════ */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════ SCROLL-TO-TOP BUTTON ═══════ */
#myBtn {
  display:         none;           /* shown via JS after 20px scroll */
  position:        fixed;
  bottom:          clamp(1.25rem, 4vw, 2rem);
  right:           clamp(1.25rem, 4vw, 2rem);
  z-index:         1500;
  width:           44px;
  height:          44px;
  background:      var(--ink);
  color:           #fff;
  border:          none;
  border-radius:   50%;
  cursor:          pointer;
  box-shadow:      0 4px 18px rgba(30, 37, 48, 0.28);
  transition:      background 0.2s, transform 0.2s, box-shadow 0.2s;
  animation:       fadeInUp 0.3s ease both;
  /* Centre the arrow icon */
  align-items:     center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action:    manipulation;
}
/* Use flexbox only when visible (display:block overrides flex, so we set flex via JS) */
#myBtn:hover {
  background:  #3a7bbf;           /* accent blue on hover */
  transform:   translateY(-3px);
  box-shadow:  0 8px 24px rgba(30, 37, 48, 0.32);
}
#myBtn:active { transform: translateY(0); }

/* SVG arrow inside the button */
#myBtn svg {
  width:          18px;
  height:         18px;
  display:        block;
  margin:         auto;           /* centres when display:block */
  pointer-events: none;
}

@media (max-width: 575.98px) {
  #myBtn { width: 40px; height: 40px; }
  #myBtn svg { width: 16px; height: 16px; }
}