/* ============================================================
   TGC Gallery – Public Frontend  v1.0.0
   Fixed repeating 4-row grid pattern — pure CSS, zero JS
   Row 1: 3 equal columns
   Row 2: 2/3 + 1/3
   Row 3: 3 equal columns
   Row 4: 1/3 + 2/3
   By Bixily · https://bixily.com
   ============================================================ */

:root {
  --tgc-gap:   20px;
  --tgc-font:  inherit, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tgc-ease:  0.28s cubic-bezier(.4,0,.2,1);
}

/* ── Wrappers ────────────────────────────────────────────── */
.tgc-gallery-wrapper,
.tgc-tabs-wrapper {
  width: 100%;
  margin: 0 0 32px;
  font-family: var(--tgc-font);
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.tgc-breadcrumbs {
  font-size: 12px;
  color: #888;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tgc-breadcrumbs a       { color: #555; text-decoration: none; }
.tgc-breadcrumbs a:hover { text-decoration: underline; }
.tgc-breadcrumb-sep      { color: #ccc; }

/* ── Tab Header ──────────────────────────────────────────── */
.tgc-tabs-header {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
	justify-content:space-between
}
.tgc-tabs-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #666;
  margin-right: 18px;
  white-space: nowrap;
}
.tgc-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* ── Tab Pills ───────────────────────────────────────────── */
#bixily .tgc-tab-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  border: 2px solid #333;
  background: #fff;
  color: #333;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--tgc-ease);
  line-height: 1.4;
  white-space: nowrap;
  font-family: var(--tgc-font);
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
	text-transform:capitalize
}
#bixily .tgc-tab-btn:hover  { border-color: #333; background: #333; color: #fff; }
#bixily .tgc-tab-btn.active { background: #333; border-color: #333; color: #fff; font-weight: }

.tgc-tab-pane { width: 100%; }

/* ============================================================
   GRID  —  12-column base, repeating 4-row pattern
   Uses nth-child to place every item automatically
   ============================================================ */
.tgc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--tgc-gap);
  width: 100%;
}

/* ── Default (single gallery shortcode) still works ─────── */
/* Override column classes — everything uses the 12-col grid */
.tgc-cols-1,
.tgc-cols-2,
.tgc-cols-3,
.tgc-cols-4,
.tgc-cols-5,
.tgc-cols-6 {
  grid-template-columns: repeat(12, 1fr);
}

/* ============================================================
   REPEATING 4-ROW PATTERN
   12 images = 1 full cycle:
     Items  1–3  → Row 1: 3 equal  (4 cols each)
     Items  4–5  → Row 2: 2/3 + 1/3 (8 cols + 4 cols)
     Items  6–8  → Row 3: 3 equal  (4 cols each)
     Items  9–10 → Row 4: 1/3 + 2/3 (4 cols + 8 cols)
     Items 11–12 → Row 5 starts next cycle (Row 1 pattern again = 4+4+4 split across items 11,12,13)
   So the cycle repeats every 10 items.
   ============================================================ */

/* Every item defaults to no explicit placement */
.tgc-gallery-item {
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
  cursor: pointer;
  /* Height via aspect-ratio on the image */
}

/* ── ROW 1 pattern: items 1,2,3 of each 10-cycle → 4 cols each ── */
/* Position 1 in cycle */
.tgc-gallery-item:nth-child(10n+1)  { grid-column: span 4; }
/* Position 2 in cycle */
.tgc-gallery-item:nth-child(10n+2)  { grid-column: span 4; }
/* Position 3 in cycle */
.tgc-gallery-item:nth-child(10n+3)  { grid-column: span 4; }

/* ── ROW 2 pattern: items 4,5 → 8+4 ── */
.tgc-gallery-item:nth-child(10n+4)  { grid-column: span 8; }
.tgc-gallery-item:nth-child(10n+5)  { grid-column: span 4; }

/* ── ROW 3 pattern: items 6,7,8 → 4+4+4 ── */
.tgc-gallery-item:nth-child(10n+6)  { grid-column: span 4; }
.tgc-gallery-item:nth-child(10n+7)  { grid-column: span 4; }
.tgc-gallery-item:nth-child(10n+8)  { grid-column: span 4; }

/* ── ROW 4 pattern: items 9,10 → 4+8 ── */
.tgc-gallery-item:nth-child(10n+9)  { grid-column: span 4; }
.tgc-gallery-item:nth-child(10n+10) { grid-column: span 8; }

/* ── Image Link ──────────────────────────────────────────── */
.tgc-image-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  line-height: 0;
  overflow: hidden;
}

/* ── Images — fixed aspect ratio per column span ────────── */
/* 4-col items (1/3 width) */
.tgc-gallery-item:nth-child(10n+1) .tgc-gallery-image,
.tgc-gallery-item:nth-child(10n+2) .tgc-gallery-image,
.tgc-gallery-item:nth-child(10n+3) .tgc-gallery-image,
.tgc-gallery-item:nth-child(10n+6) .tgc-gallery-image,
.tgc-gallery-item:nth-child(10n+7) .tgc-gallery-image,
.tgc-gallery-item:nth-child(10n+8) .tgc-gallery-image,
.tgc-gallery-item:nth-child(10n+5) .tgc-gallery-image,
.tgc-gallery-item:nth-child(10n+9) .tgc-gallery-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  transition: transform 0.42s var(--tgc-ease), filter 0.28s ease;
}

/* 8-col items (2/3 width) — taller to match visual weight */
.tgc-gallery-item:nth-child(10n+4) .tgc-gallery-image,
.tgc-gallery-item:nth-child(10n+10) .tgc-gallery-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  transition: transform 0.42s var(--tgc-ease), filter 0.28s ease;
}

/* Hover zoom */
.tgc-gallery-item:hover .tgc-gallery-image {
  transform: scale(1.05);
  filter: brightness(0.87);
}

/* ── Lazy Loading ────────────────────────────────────────── */
.tgc-lazy           { opacity: 0; transition: opacity 0.32s ease; }
.tgc-lazy.tgc-loaded { opacity: 1; }

/* ── Caption ─────────────────────────────────────────────── */
.tgc-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 32px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--tgc-ease), transform var(--tgc-ease);
  font-family: var(--tgc-font);
}
.tgc-gallery-item:hover .tgc-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ── Load More ───────────────────────────────────────────── */
.tgc-load-more-wrap {
  text-align: center;
  margin-top: 28px;
}
#bixily .tgc-load-more-btn,
#bixily .tgc-load-more-tabs-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 36px;
  background: var(--orange-color);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--tgc-ease);
  font-family: var(--tgc-font);
  outline: none !important;
}
#bixily .tgc-load-more-btn:hover,
#bixily .tgc-load-more-tabs-btn:hover {
  background: #333;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
#bixily .tgc-load-more-btn:disabled,
#bixily .tgc-load-more-tabs-btn:disabled {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.tgc-lm-count { font-size: 12px; opacity: .6; font-weight: 400; }
#bixily .tgc-load-more-btn.tgc-loading,
#bixily .tgc-load-more-tabs-btn.tgc-loading { pointer-events: none; }
#bixily .tgc-load-more-btn.tgc-loading::after,
#bixily .tgc-load-more-tabs-btn.tgc-loading::after {
  content: '';
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tgcSpin .65s linear infinite;
  display: inline-block;
}
@keyframes tgcSpin { to { transform: rotate(360deg); } }

.tgc-all-loaded {
  display: inline-block;
  padding: 8px 22px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  color: #888;
  font-size: 13px;
}

/* ── Pagination ──────────────────────────────────────────── */
.tgc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 28px;
  flex-wrap: wrap;
}
#bixily .tgc-page-btn {
  min-width: 38px; height: 38px;
  padding: 0 10px;
  border: 1.5px solid #e0e0e0;
  background: #fff; color: #333;
  border-radius: 7px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--tgc-font);
  outline: none !important;
}
#bixily .tgc-page-btn:hover    { border-color: #111; color: #111; }
#bixily .tgc-page-btn.active   { background: #111; border-color: #111; color: #fff; }
#bixily .tgc-page-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── New item animation ──────────────────────────────────── */
.tgc-gallery-item.tgc-new-item {
  animation: tgcFadeUp .3s ease forwards;
}
@keyframes tgcFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Lightbox ────────────────────────────────────────────── */
.tgc-lightbox {
  position: fixed; inset: 0;
  z-index: 999999;
  display: flex; align-items: center; justify-content: center;
}
.tgc-lightbox-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.93);
  backdrop-filter: blur(6px);
}
.tgc-lightbox-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  padding: 56px 72px;
  box-sizing: border-box;
}
.tgc-lightbox-content {
  display: flex; flex-direction: column; align-items: center;
  max-width: 90vw; max-height: 88vh;
  animation: tgcLBIn .2s ease;
}
@keyframes tgcLBIn {
  from { opacity:0; transform:scale(.95); }
  to   { opacity:1; transform:scale(1); }
}
#tgc-lightbox-img {
  max-width: 100%; max-height: 82vh;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 28px 80px rgba(0,0,0,.7);
  display: block;
}
.tgc-lightbox-caption {
  color: rgba(255,255,255,.75);
  font-size: 13px; margin-top: 14px;
  text-align: center; max-width: 560px;
  line-height: 1.5; font-family: var(--tgc-font);
}
.tgc-lightbox-counter {
  position: absolute; bottom: 20px;
  left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.4);
  font-size: 12px; font-family: var(--tgc-font);
}
#bixily .tgc-lightbox-close,
#bixily .tgc-lightbox-prev,
#bixily .tgc-lightbox-next {
  position: absolute;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff; border-radius: 50%;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer;
  transition: all .2s; line-height: 1;
  z-index: 2; padding: 0; outline: none !important;
}
#bixily .tgc-lightbox-close:hover,
#bixily .tgc-lightbox-prev:hover,
#bixily .tgc-lightbox-next:hover { background: rgba(255,255,255,.22); }
#bixily .tgc-lightbox-close { top: 20px; right: 20px; }
#bixily .tgc-lightbox-prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
#bixily .tgc-lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }
#bixily .tgc-lightbox-prev:hover { transform: translateY(-50%) scale(1.08); }
#bixily .tgc-lightbox-next:hover { transform: translateY(-50%) scale(1.08); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 2-column on tablet: all items span 6 */
  #bixily .tgc-gallery-item:nth-child(10n+1),
  #bixily .tgc-gallery-item:nth-child(10n+2),
  #bixily .tgc-gallery-item:nth-child(10n+3),
  #bixily .tgc-gallery-item:nth-child(10n+4),
  #bixily .tgc-gallery-item:nth-child(10n+5),
  #bixily .tgc-gallery-item:nth-child(10n+6),
  #bixily .tgc-gallery-item:nth-child(10n+7),
  #bixily .tgc-gallery-item:nth-child(10n+8),
  #bixily .tgc-gallery-item:nth-child(10n+9),
  #bixily .tgc-gallery-item:nth-child(10n+10) { grid-column: span 6; }

  #bixily .tgc-gallery-item .tgc-gallery-image { height: 180px !important; }
  #bixily .tgc-lightbox-inner { padding: 56px 20px; }
  #bixily .tgc-lightbox-prev  { left: 8px; }
  #bixily .tgc-lightbox-next  { right: 8px; }
}

@media (max-width: 480px) {
  /* Mobile layout — 2+2+full+2+2+full repeating 10-item cycle */
  :root { --tgc-gap: 10px; }

  /* Row 1: items 1,2 → side by side */
  #bixily .tgc-gallery-item:nth-child(10n+1),
  #bixily .tgc-gallery-item:nth-child(10n+2) { grid-column: span 6; }

  /* Row 2: items 3,4 → side by side */
  #bixily .tgc-gallery-item:nth-child(10n+3),
  #bixily .tgc-gallery-item:nth-child(10n+4) { grid-column: span 6; }

  /* Row 3: item 5 → full width */
  #bixily .tgc-gallery-item:nth-child(10n+5) { grid-column: span 12; }

  /* Row 4: items 6,7 → side by side */
  #bixily .tgc-gallery-item:nth-child(10n+6),
  #bixily .tgc-gallery-item:nth-child(10n+7) { grid-column: span 6; }

  /* Row 5: items 8,9 → side by side */
  #bixily .tgc-gallery-item:nth-child(10n+8),
  #bixily .tgc-gallery-item:nth-child(10n+9) { grid-column: span 6; }

  /* Row 6: item 10 → full width */
  #bixily .tgc-gallery-item:nth-child(10n+10) { grid-column: span 12; }

  /* Heights — pairs shorter, full-width taller */
  #bixily .tgc-gallery-item:nth-child(10n+1) .tgc-gallery-image,
  #bixily .tgc-gallery-item:nth-child(10n+2) .tgc-gallery-image,
  #bixily .tgc-gallery-item:nth-child(10n+3) .tgc-gallery-image,
  #bixily .tgc-gallery-item:nth-child(10n+4) .tgc-gallery-image,
  #bixily .tgc-gallery-item:nth-child(10n+6) .tgc-gallery-image,
  #bixily .tgc-gallery-item:nth-child(10n+7) .tgc-gallery-image,
  #bixily .tgc-gallery-item:nth-child(10n+8) .tgc-gallery-image,
  #bixily .tgc-gallery-item:nth-child(10n+9) .tgc-gallery-image { height: 130px !important; }

  #bixily .tgc-gallery-item:nth-child(10n+5) .tgc-gallery-image,
  #bixily .tgc-gallery-item:nth-child(10n+10) .tgc-gallery-image { height: 200px !important; }

  #bixily .tgc-tab-btn { font-size: 14px; padding: 8px 13px; }
}
/* ============================================================
   MARQUEE LAYOUT  —  two auto-scrolling rows
   Row 1 scrolls left, Row 2 scrolls right.
   Speed via --tgc-marquee-speed (seconds per loop).
   Visible count controlled via --tgc-marquee-visible.
   By Bixily · https://bixily.com
   ============================================================ */
.tgc-marquee-wrapper {
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
margin-bottom:0; 
}

.tgc-marquee {
  --tgc-marquee-speed: 40s;
  --tgc-marquee-gap: var(--tgc-gap);
  /* Desktop: 3 full + 40% of next = 3.4 items visible */
  --tgc-marquee-visible: 3.4;
  --tgc-marquee-ratio: 1.6; /* item width / height */
  display: flex;
  flex-direction: column;
  gap: var(--tgc-marquee-gap);
  width: 100%;
  overflow: hidden;
}

.tgc-marquee-row {
  display: flex;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.tgc-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--tgc-marquee-gap);
  width: max-content;
  will-change: transform;
}

.tgc-marquee-left  .tgc-marquee-track { animation: tgc-marquee-scroll-left  var(--tgc-marquee-speed) linear infinite; }
.tgc-marquee-right .tgc-marquee-track { animation: tgc-marquee-scroll-right var(--tgc-marquee-speed) linear infinite; }

@keyframes tgc-marquee-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes tgc-marquee-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── Items ───────────────────────────────────────────────── */
.tgc-marquee-item {
  flex: 0 0 auto;
  position: relative;
	  border-radius: 8px;
  overflow: hidden;
  /* Each item is a fraction of the viewport so the visible count is fixed */
  /* Row reference width — defaults to viewport; override --tgc-marquee-roww
     on .tgc-marquee if the gallery sits in a narrower fixed container */
  width: calc((var(--tgc-marquee-roww, 100vw) - (var(--tgc-marquee-visible) - 1) * var(--tgc-marquee-gap)) / var(--tgc-marquee-visible));
}
.tgc-marquee-item .tgc-image-link {
  display: block;
  position: relative;
  width: 100%;
}
.tgc-marquee-item .tgc-gallery-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--tgc-marquee-ratio);
  max-width: none;
  object-fit: cover;

  transition: transform var(--tgc-ease), filter var(--tgc-ease);
}
.tgc-marquee-item:hover .tgc-gallery-image { transform: scale(1.04); }

.tgc-marquee-item .tgc-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 14px 12px;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
  opacity: 0;
  transition: opacity var(--tgc-ease);
}
.tgc-marquee-item:hover .tgc-caption { opacity: 1; }

/* ── Tablet ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .tgc-marquee { --tgc-marquee-visible: 2.4; }
}

/* ── Mobile: 1 full + 30% of 2 sides = 1.6 items visible ── */
@media (max-width: 768px) {
  .tgc-marquee {
    --tgc-marquee-visible: 1.6;
    --tgc-marquee-gap: 12px;
  }
  .tgc-marquee-row {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tgc-marquee-left  .tgc-marquee-track,
  .tgc-marquee-right .tgc-marquee-track { animation: none; }
  .tgc-marquee-row {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}