/* ================================================================
   TrueKatana — Gallery (UGC Showcase)
   Design System: --one-* tokens (from layout.css :root)
   ================================================================ */


/* ── Page ── */
.one-gallery-body { background-color: var(--one-bg-primary) !important; }


/* ── Header (self-contained, no reviews.css dependency) ── */
.one-gallery-body .page-reviews-header { background-color: var(--one-bg-hero) !important; padding-top: 30px !important; padding-bottom: 60px !important; margin-bottom: 40px}
.one-gallery-body .page-reviews-title { font-family: var(--one-font-body); font-size: 3em; color: var(--one-text-primary); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 5px !important; }
.one-gallery-body .page-reviews-subtitle { color: var(--one-text-primary); max-width: 800px; font-size: 1.15em; }
.one-gallery-body .page-reviews-breadcrumb ol a { color: var(--one-text-secondary); font-size: 0.85em; }
.one-gallery-body .page-reviews-breadcrumb ol { justify-content: center; margin-bottom: 5px; background-color: transparent !important; padding: 8px 0 !important; }
.one-gallery-body .page-reviews-tab-container { margin-top: 30px; }
.one-gallery-body .page-reviews-tab { background: var(--one-bg-void) !important; color: var(--one-text-primary); padding: 12px 40px; border: 1px solid var(--one-border); }
.one-gallery-body .page-reviews-tab:hover { color: var(--one-text-primary); }
.one-gallery-body .page-reviews-tab-active { background: var(--one-red) !important; color: var(--one-text-inverse); padding: 12px 40px; font-weight: bold; }
.one-gallery-body .page-reviews-tab-active:hover { color: var(--one-text-inverse); }


/* ── Promo Card (inside masonry) ── */
.one-gallery-promo { break-inside: avoid; margin-bottom: 10px; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, var(--one-bg-card) 0%, var(--one-bg-void) 100%); border: 1px solid var(--one-border); }
.one-gallery-promo-inner { padding: 40px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 480px; gap: 6px; }
.one-gallery-promo-stats { color: var(--one-text-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.one-gallery-promo-title { color: var(--one-text-primary); font-family: var(--one-font-body); font-weight: 800; font-size: 36px; line-height: 1.2; letter-spacing: -0.02em; margin: 8px 0; }
.one-gallery-promo-desc { color: var(--one-text-secondary); font-size: 13px; line-height: 1.5; max-width: 200px; margin-bottom: 16px; }
.one-gallery-promo-links { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.one-gallery-promo-link { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; transition: all 0.2s; text-decoration: none; border: none; }
.one-gallery-promo-link:hover { transform: translateY(-3px); filter: brightness(1.15); color: #fff; }
.one-gallery-promo-link[title="Instagram"] { background: linear-gradient(135deg, #833AB4, #E1306C, #F77737); }
.one-gallery-promo-link[title="TikTok"] { background: #000; color: #69C9D0; border: 2px solid #69C9D0; }
.one-gallery-promo-link[title="YouTube"] { background: #FF0000; }
.one-gallery-promo-link[title="Facebook"] { background: #1877F2; }


/* ── Masonry Grid (CSS columns) ── */
.one-gallery-container { max-width: 1860px; margin: 0 auto; padding: 0 10px 60px; margin-top: 0; }
.one-gallery-masonry { columns: 5; column-gap: 10px; }
.one-gallery-item { break-inside: avoid; margin-bottom: 10px; position: relative; border-radius: 6px; overflow: hidden; cursor: pointer; opacity: 0; transform: translateY(30px); transition: opacity 0.5s ease, transform 0.5s ease; }
.one-gallery-item.is-visible { opacity: 1; transform: translateY(0); }
.one-gallery-item img { width: 100%; display: block; transition: transform 0.4s ease, filter 0.4s ease; }
.one-gallery-item:hover img { transform: scale(1.03); filter: brightness(0.7); }

/* Hover overlay */
.one-gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 14px; background: linear-gradient(transparent, rgba(0,0,0,0.75)); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; justify-content: space-between; }
.one-gallery-item:hover .one-gallery-overlay { opacity: 1; }
.one-gallery-overlay-user { color: #fff; font-size: 13px; font-weight: 700; }
.one-gallery-overlay-user svg { vertical-align: -2px; margin-right: 3px; }
.one-gallery-overlay-like { color: #fff; font-size: 13px; display: flex; align-items: center; gap: 4px; }
.one-gallery-overlay-like svg { opacity: 0.8; }


/* ── Video Play Button Overlay ── */
.one-gallery-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; background: rgba(0,0,0,0.55); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; pointer-events: none; transition: transform 0.3s, background 0.3s; z-index: 2; }
.one-gallery-item:hover .one-gallery-play { transform: translate(-50%, -50%) scale(1.15); background: rgba(220,38,38,0.85); }


/* ── Lightbox (Alpine.js) ── */
.one-gallery-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; }
.one-gallery-lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; display: flex; gap: 0; }
.one-gallery-lightbox-img { max-width: 70vw; max-height: 85vh; object-fit: contain; border-radius: 4px; }
.one-gallery-lightbox-video { max-width: 70vw; max-height: 85vh; border-radius: 4px; outline: none; background: #000; }
.one-gallery-lightbox-sidebar { width: 280px; background: var(--one-bg-card); border-radius: 0 4px 4px 0; padding: 24px 20px; display: flex; flex-direction: column; justify-content: space-between; }
.one-gallery-lightbox-user { font-size: 15px; font-weight: 800; color: var(--one-text-primary); margin-bottom: 4px; }
.one-gallery-lightbox-user a { color: var(--one-text-primary); }
.one-gallery-lightbox-user a:hover { color: var(--one-link); }
.one-gallery-lightbox-source { margin-top: 8px; }
.one-gallery-lightbox-source a { display: inline-flex; align-items: center; gap: 6px; color: var(--one-link); font-size: 13px; font-weight: 600; }
.one-gallery-lightbox-source a:hover { color: var(--one-link-hover); text-decoration: underline; }
/* Lightbox actions (like button) */
.one-gallery-lightbox-actions { border-top: 1px solid var(--one-border); padding-top: 16px; margin-top: 16px; }
.one-gallery-like-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--one-border); border-radius: var(--one-radius-sm); padding: 8px 16px; color: var(--one-text-secondary); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.one-gallery-like-btn:hover { border-color: var(--one-red); color: var(--one-red); }
.one-gallery-like-btn.is-liked { color: var(--one-red); border-color: var(--one-red); }
.one-gallery-like-btn.is-liked svg { filter: drop-shadow(0 0 4px rgba(220,38,38,0.4)); }
.one-gallery-like-btn:disabled { opacity: 0.6; cursor: default; }

/* Mobile floating bar (hidden on desktop where sidebar is visible) */
.one-gallery-lightbox-mobile-bar { display: none; }

.one-gallery-lightbox-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; padding: 4px 8px; opacity: 0.7; transition: opacity 0.2s; z-index: 10; }
.one-gallery-lightbox-close:hover { opacity: 1; }
.one-gallery-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 24px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 20; }
.one-gallery-lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.one-gallery-lightbox-prev { left: 20px; }
.one-gallery-lightbox-next { right: 20px; }


/* ── CTA Banner ── */
.one-gallery-cta { background: var(--one-bg-card) !important; padding: 60px 15px; text-align: center; }
.one-gallery-cta-title { font-family: var(--one-font-body); font-weight: 800; letter-spacing: -0.01em; color: var(--one-text-primary); font-size: 3.5em; margin-bottom: 12px; }
.one-gallery-cta-subtitle { color: var(--one-text-secondary); font-size: 14px; max-width: 600px; margin: 0 auto 24px; line-height: 1.5; }
.one-gallery-cta-steps { display: flex; justify-content: center; gap: 50px; margin-bottom: 28px; }
.one-gallery-cta-step { text-align: center; max-width: 160px; }
.one-gallery-cta-step-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--one-bg-void); border: 1px solid var(--one-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: #fff; font-size: 20px; }
.one-gallery-cta-step-label { color: var(--one-text-primary); font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.one-gallery-cta-step-desc { color: var(--one-text-muted); font-size: 11px; line-height: 1.4; }
.one-gallery-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 36px; background: var(--one-red); color: #fff; font-family: var(--one-font-body); font-size: 15px; font-weight: 700; border: none; border-radius: var(--one-radius-sm); cursor: pointer; transition: all 0.2s; letter-spacing: 0.3px; text-decoration: none; }
.one-gallery-cta-btn:hover { color: #fff; background: var(--one-red-hover); transform: translateY(-1px); }


/* ── Featured Creators ── */
.one-gallery-creators { background: var(--one-bg-void) !important; padding: 50px 15px; text-align: center; }
.one-gallery-creators-title { font-family: var(--one-font-body); font-weight: 800; letter-spacing: -0.01em; color: var(--one-text-primary); font-size: 1.75em; margin-bottom: 8px; }
.one-gallery-creators-subtitle { color: var(--one-text-secondary); font-size: 14px; margin-bottom: 28px; }
.one-gallery-creators-list { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.one-gallery-creator { text-align: center; transition: transform 0.2s; display: flex; flex-direction: column; align-items: center; }
.one-gallery-creator:hover { transform: translateY(-3px); }
.one-gallery-creator-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: none; margin-bottom: 6px; }
.one-gallery-creator-name { font-size: 12px; color: var(--one-text-secondary); font-weight: 600; }
.one-gallery-creator-name a { color: var(--one-text-secondary); }
.one-gallery-creator-name a:hover { color: var(--one-link); }
.one-gallery-creator-count { font-size: 10px; color: var(--one-text-muted); }


/* ── Load More (HTMX) ── */
.one-gallery-loadmore { text-align: center; padding: 30px 0 60px; }
.one-gallery-loadmore-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 36px; background: var(--one-bg-card); color: var(--one-text-primary); font-family: var(--one-font-body); font-size: 14px; font-weight: 600; border: 1px solid var(--one-border-hover); border-radius: var(--one-radius-sm); cursor: pointer; transition: all 0.2s; }
.one-gallery-loadmore-btn:hover { border-color: var(--one-link); color: var(--one-link); }
.one-gallery-loadmore-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--one-border); border-top-color: var(--one-red); border-radius: 50%; animation: one-gallery-spin 0.6s linear infinite; }
@keyframes one-gallery-spin { to { transform: rotate(360deg); } }


/* ── Responsive ── */
@media (max-width: 1199.98px) {
  .one-gallery-masonry { columns: 4; }
}

@media (max-width: 991.98px) {
  .one-gallery-body .page-reviews-tab { padding: 9px 30px; }
  .one-gallery-body .page-reviews-tab-active { padding: 8px 30px; }
  .one-gallery-masonry { columns: 3; }
  .one-gallery-lightbox-sidebar { display: none; }
  .one-gallery-lightbox-img { max-width: 90vw; max-height: 80vh; }
  .one-gallery-lightbox-video { max-width: 90vw; max-height: 80vh; }
  .one-gallery-lightbox-prev { left: 5px; }
  .one-gallery-lightbox-next { right: 5px; }
  .one-gallery-lightbox-mobile-bar { display: flex; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); align-items: center; gap: 12px; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 24px; padding: 8px 16px; z-index: 10; }
  .one-gallery-lightbox-mobile-user { color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
  .one-gallery-lightbox-mobile-bar .one-gallery-like-btn { border: none; padding: 4px 8px; font-size: 13px; color: #fff; }
  .one-gallery-lightbox-mobile-bar .one-gallery-like-btn.is-liked { color: var(--one-red); }
  .one-gallery-cta-steps { gap: 25px; }
  .one-gallery-creators-list { gap: 18px; }
  .one-gallery-creator-avatar { width: 52px; height: 52px; }
}

@media (max-width: 767.98px) {
  .one-gallery-body .page-reviews-title { font-size: 2.6em; }
  .one-gallery-body .page-reviews-subtitle { font-size: 1em; }
  .one-gallery-body .page-reviews-header { padding-top: 20px !important; padding-bottom: 40px !important; }
  .one-gallery-body .page-reviews-tab-container { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap:24px; }
  .one-gallery-body .page-reviews-tab-container .tabs-nav-item { margin: 0 !important; padding: 0 !important; }
  .one-gallery-body .page-reviews-tab { padding: 10px 24px; font-size: 15px; white-space: nowrap; }
  .one-gallery-body .page-reviews-tab-active { padding: 10px 24px; font-size: 15px; white-space: nowrap; }
  .one-gallery-masonry { columns: 2; column-gap: 6px; }
  .one-gallery-item { margin-bottom: 6px; border-radius: 4px; }
  .one-gallery-promo { column-span: all; margin-bottom: 6px; border-radius: 4px; }
  .one-gallery-promo-inner { padding: 28px 14px; min-height: auto; gap: 4px; }
  .one-gallery-promo-title { font-size: 30px; }
  .one-gallery-promo-stats { font-size: 10px; }
  .one-gallery-promo-desc { font-size: 12px; max-width: 280px; }
  .one-gallery-promo-link { width: 38px; height: 38px; }
  .one-gallery-promo-link svg { width: 17px; height: 17px; }
  .one-gallery-cta { padding: 40px 15px; }
  .one-gallery-cta-title { font-size: 1.5em; }
  .one-gallery-cta-steps { flex-direction: column; align-items: center; gap: 20px; }
  .one-gallery-creators { padding: 35px 15px; }
  .one-gallery-creators-title { font-size: 1.4em; }
  .one-gallery-overlay { opacity: 1; padding: 8px 10px; }
  .one-gallery-overlay-user { font-size: 11px; }
}