/*
 * Ora Paint Gallery — gallery.css v4.3.0
 *
 * Layout: aspect-ratio on tiles — no fixed pixel row heights.
 * Images: object-fit:cover, no transform on static state, no will-change.
 * Typography: CSS vars set as defaults; JS overrides via inline styles.
 * !important: only on structural reset rules, never on typography.
 */

/* ── Root tokens ─────────────────────────────────────────────────── */
.opg-wrap {
  --og-gap:       9px;
  --og-radius:    6px;
  --og-ease:      cubic-bezier(.4,0,.2,1);
  --og-dark:      #111111;
  --og-white:     #ffffff;
  --og-more-bg:   #1a1a1a;
  --og-font-body: inherit;
  --og-font-num:  'Barlow Condensed', 'Arial Narrow', sans-serif;

  /* Tile aspect ratios */
  --og-hero-ratio:  9/6;
  --og-thumb-ratio: 4/3;

  display:    block !important;
  width:      100% !important;
  max-width:  100% !important;
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

.opg-wrap *,
.opg-wrap *::before,
.opg-wrap *::after {
  box-sizing: border-box !important;
}

/* ── Category section ────────────────────────────────────────────── */
.opg-wrap .og-cat-section {
  display:       block !important;
  margin-bottom: 56px !important;
}

/* Category heading — structural resets with !important.
   Typography (font-family, size, weight, color, transform, align)
   is applied by gallery.js as inline styles — no !important needed. */
.opg-wrap .og-cat-title {
  display:        block !important;
  margin:         0 0 18px 0 !important;
  padding:        0 !important;
  border:         none !important;
  border-bottom:  none !important;
  background:     none !important;
  box-shadow:     none !important;
  text-shadow:    none !important;
  letter-spacing: .04em !important;
  line-height:    1.15 !important;
}

/* ── Browse button ───────────────────────────────────────────────── */
.opg-wrap .og-browse-row {
  display:         flex !important;
  justify-content: center !important;
  margin-top:      18px !important;
}

.opg-wrap .og-browse-btn {
  display:            inline-block !important;
  font-size:          11px !important;
  font-weight:        700 !important;
  letter-spacing:     2px !important;
  text-transform:     uppercase !important;
  color:              var(--og-dark) !important;
  background:         transparent !important;
  border:             1.5px solid var(--og-dark) !important;
  border-radius:      2px !important;
  padding:            11px 36px !important;
  cursor:             pointer !important;
  text-decoration:    none !important;
  line-height:        1.4 !important;
  box-shadow:         none !important;
  outline:            none !important;
  -webkit-appearance: none !important;
  transition:         background .22s var(--og-ease), color .22s var(--og-ease) !important;
}
.opg-wrap .og-browse-btn:hover,
.opg-wrap .og-browse-btn:focus-visible {
  background: var(--og-dark) !important;
  color:      var(--og-white) !important;
}

/* ══════════════════════════════════════════════════════════════════
   GRIDS
   Column counts define the layout.
   Row heights come from aspect-ratio on each tile — never from
   grid-template-rows. This ensures +MORE tiles always size correctly.
══════════════════════════════════════════════════════════════════ */

/* Exterior: large hero left + 2×2 grid right */
.opg-wrap .og-grid-exterior {
  display:               grid !important;
  grid-template-columns: 1.72fr 1fr !important;
  gap:                   var(--og-gap) !important;
  width:                 100% !important;
  align-items:           start !important;
}
.opg-wrap .og-col-hero  { display: block !important; width: 100% !important; }
.opg-wrap .og-col-right {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   var(--og-gap) !important;
}

/* Hero tile is taller than thumbnails */
.opg-wrap .og-col-hero .og-tile {
  aspect-ratio: var(--og-hero-ratio) !important;
  height:       auto !important;
}

/* Right-side 2×2 thumbnails */
.opg-wrap .og-col-right .og-tile {
  aspect-ratio: var(--og-thumb-ratio) !important;
  height:       auto !important;
}

/* 4-column */
.opg-wrap .og-grid-4col {
  display:               grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap:                   var(--og-gap) !important;
  width:                 100% !important;
}
.opg-wrap .og-grid-4col .og-tile {
  aspect-ratio: var(--og-thumb-ratio) !important;
  height:       auto !important;
}

/* 3-column */
.opg-wrap .og-grid-3col {
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   var(--og-gap) !important;
  width:                 100% !important;
}
.opg-wrap .og-grid-3col .og-tile {
  aspect-ratio: var(--og-thumb-ratio) !important;
  height:       auto !important;
}

/* ══════════════════════════════════════════════════════════════════
   PHOTO TILE
══════════════════════════════════════════════════════════════════ */
.opg-wrap .og-tile {
  position:        relative !important;
  display:         block !important;
  width:           100% !important;
  overflow:        hidden !important;
  border-radius:   var(--og-radius) !important;
  background:      #c8c4c0 !important;
  cursor:          pointer !important;
  text-decoration: none !important;
  color:           inherit !important;
  border:          none !important;
  box-shadow:      none !important;
  outline-offset:  3px !important;
}

/* ── Image inside tile ───────────────────────────────────────────────
   Critical: no transform on static state — transform causes GPU
   layer promotion which introduces subpixel blur on some browsers.
   Only the :hover state gets a transform.
   No will-change on static state for the same reason.
   object-fit:cover fills the tile without distortion.
   max-width/max-height:none prevents theme stylesheets from shrinking images.
 ─────────────────────────────────────────────────────────────────── */
.opg-wrap .og-tile > img {
  position:   absolute !important;
  inset:      0 !important;
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display:    block !important;
  /* No transform here — prevents GPU blur on static state */
  transition: transform .5s var(--og-ease) !important;
  margin:     0 !important;
  padding:    0 !important;
  border:     none !important;
  border-radius: 0 !important;
  max-width:  none !important;
  max-height: none !important;
  box-shadow: none !important;
}

/* Zoom on hover only — transform only applied on interaction */
.opg-wrap .og-tile:hover > img,
.opg-wrap .og-tile:focus-visible > img {
  transform: scale(1.04) !important;
}

/* ── Zoom icon ───────────────────────────────────────────────────── */
.opg-wrap .og-zoom {
  position:        absolute !important;
  top:             50% !important;
  left:            50% !important;
  transform:       translate(-50%, -50%) scale(.75) !important;
  opacity:         0 !important;
  z-index:         3 !important;
  pointer-events:  none !important;
  width:           42px !important;
  height:          42px !important;
  border:          1.5px solid rgba(255,255,255,.85) !important;
  border-radius:   50% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  background:      rgba(0,0,0,.15) !important;
  transition:      opacity .22s var(--og-ease), transform .22s var(--og-ease) !important;
}
.opg-wrap .og-tile:hover .og-zoom,
.opg-wrap .og-tile:focus-visible .og-zoom {
  opacity:   1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* ── Hover caption ───────────────────────────────────────────────── */
.opg-wrap .og-caption {
  position:        absolute !important;
  inset:           0 !important;
  z-index:         2 !important;
  pointer-events:  none !important;
  display:         flex !important;
  align-items:     flex-end !important;
  justify-content: center !important;
  padding:         14px 12px !important;
  background:      rgba(0,0,0,0) !important;
  transition:      background .22s var(--og-ease) !important;
}
.opg-wrap .og-tile:hover .og-caption,
.opg-wrap .og-tile:focus-visible .og-caption {
  background: rgba(0,0,0,.54) !important;
}

.opg-wrap .og-caption-inner {
  text-align: center !important;
  transform:  translateY(5px) !important;
  opacity:    0 !important;
  transition: opacity .22s var(--og-ease), transform .22s var(--og-ease) !important;
}
.opg-wrap .og-tile:hover .og-caption-inner,
.opg-wrap .og-tile:focus-visible .og-caption-inner {
  opacity:   1 !important;
  transform: translateY(0) !important;
}

.opg-wrap .og-caption-title {
  display:     block !important;
  font-size:   13px !important;
  font-weight: 600 !important;
  color:       #fff !important;
  line-height: 1.3 !important;
  margin:      0 !important;
  padding:     0 !important;
}
.opg-wrap .og-caption-sub {
  display:        block !important;
  font-size:      11px !important;
  color:          rgba(255,255,255,.72) !important;
  margin:         3px 0 0 !important;
  letter-spacing: .3px !important;
}

.opg-wrap.og-no-caption .og-caption { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   +MORE TILE
══════════════════════════════════════════════════════════════════ */
.opg-wrap .og-tile.og-more {
  background:  var(--og-more-bg) !important;
  cursor:      pointer !important;
}
/* The background image in +MORE is intentionally blurred — design choice */
.opg-wrap .og-tile.og-more > img {
  opacity:    .3 !important;
  filter:     blur(4px) !important;
  transform:  scale(1.08) !important;
  transition: opacity .3s, transform .3s !important;
}
.opg-wrap .og-tile.og-more:hover > img {
  opacity:   .18 !important;
  transform: scale(1.12) !important;
}
.opg-wrap .og-tile.og-more .og-caption,
.opg-wrap .og-tile.og-more .og-zoom { display: none !important; }

.opg-wrap .og-more-body {
  position:        absolute !important;
  inset:           0 !important;
  z-index:         4 !important;
  pointer-events:  none !important;
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             4px !important;
}
.opg-wrap .og-more-num {
  font-family:    var(--og-font-num) !important;
  font-size:      clamp(32px, 4vw, 52px) !important;
  font-weight:    900 !important;
  color:          #fff !important;
  line-height:    1 !important;
  letter-spacing: -1px !important;
  margin:         0 !important;
  transition:     text-shadow .25s !important;
}
.opg-wrap .og-tile.og-more:hover .og-more-num {
  text-shadow: 0 0 28px rgba(255,255,255,.3) !important;
}
.opg-wrap .og-more-lbl {
  font-size:      10px !important;
  font-weight:    700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color:          rgba(255,255,255,.55) !important;
  margin:         0 !important;
}
.opg-wrap .og-more-lines {
  display:        flex !important;
  flex-direction: column !important;
  align-items:    center !important;
  gap:            5px !important;
  margin-top:     8px !important;
}
.opg-wrap .og-more-lines span {
  display:       block !important;
  width:         22px !important;
  height:        1.5px !important;
  background:    rgba(255,255,255,.3) !important;
  border-radius: 1px !important;
}
.opg-wrap .og-more-plus {
  position:       absolute !important;
  bottom:         12px !important;
  right:          14px !important;
  font-size:      20px !important;
  font-weight:    200 !important;
  color:          rgba(255,255,255,.4) !important;
  line-height:    1 !important;
  pointer-events: none !important;
  transition:     color .22s !important;
}
.opg-wrap .og-tile.og-more:hover .og-more-plus {
  color: rgba(255,255,255,.9) !important;
}

/* ══════════════════════════════════════════════════════════════════
   GLIGHTBOX OVERRIDES
══════════════════════════════════════════════════════════════════ */
.glightbox-container { z-index: 1000000 !important; }

.glightbox-clean .gslide-description {
  background:      rgba(8,8,8,.86) !important;
  backdrop-filter: blur(12px) !important;
}
.glightbox-clean .gdesc-inner { padding: 12px 22px !important; }
.glightbox-clean .gslide-title {
  font-size:   14px !important;
  font-weight: 600 !important;
  color:       #fff !important;
  margin:      0 !important;
}
.glightbox-clean .gslide-desc {
  font-size: 12px !important;
  color:     rgba(255,255,255,.65) !important;
  margin:    4px 0 0 !important;
}
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background:    rgba(255,255,255,.1) !important;
  border:        1px solid rgba(255,255,255,.22) !important;
  border-radius: 50% !important;
  width:         52px !important;
  height:        52px !important;
}
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover { background: rgba(255,255,255,.22) !important; }
.glightbox-clean .gclose { background: rgba(255,255,255,.08) !important; border-radius: 50% !important; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .opg-wrap .og-grid-exterior {
    grid-template-columns: 1fr !important;
  }
  .opg-wrap .og-col-right {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .opg-wrap .og-col-hero .og-tile,
  .opg-wrap .og-col-right .og-tile {
    aspect-ratio: var(--og-thumb-ratio) !important;
  }
}

@media (max-width: 768px) {
  .opg-wrap .og-grid-4col { grid-template-columns: repeat(2, 1fr) !important; }
  .opg-wrap .og-grid-3col { grid-template-columns: repeat(2, 1fr) !important; }
  .opg-wrap .og-col-right { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  .opg-wrap { --og-gap: 5px; }
  .opg-wrap .og-grid-4col { grid-template-columns: repeat(2, 1fr) !important; }
  .opg-wrap .og-grid-3col { grid-template-columns: 1fr !important; }
}