/* =============================================
   GALLERY.CSS
   Floating gallery button + lightbox modal.
   Used on: case-study, audit, blog pages.
   ============================================= */


/* ── FLOATING TRIGGER BUTTON ──────────────── */

.gallery-fab {
  position:       fixed;
  bottom:         28px;
  right:          24px;
  z-index:        800;

  display:        flex;
  align-items:    center;
  gap:            10px;

  padding:        12px 18px 12px 14px;
  background:     rgba(15,15,15,0.92);
  color:          #ffffff;
  border:         1px solid rgba(255,255,255,0.12);
  border-radius:  var(--radius-pill);

  font-family:    var(--font-primary);
  font-size:      13px;
  font-weight:    500;
  letter-spacing: 0.01em;
  white-space:    nowrap;
  cursor:         pointer;
  user-select:    none;

  backdrop-filter:         blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Hidden initially — JS reveals after delay */
  opacity:   0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;

  transition:
    opacity   0.5s var(--ease-out),
    transform 0.5s var(--ease-out),
    background 0.2s ease,
    border-color 0.2s ease;
}

.gallery-fab.is-visible {
  opacity:        1;
  transform:      translateY(0) scale(1);
  pointer-events: auto;
}

.gallery-fab.is-hidden {
  opacity:   0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
}

.gallery-fab:hover {
  background:   rgba(26,70,201,0.95);
  border-color: rgba(26,70,201,0.6);
}

.gallery-fab__carousel {
  position:      relative;
  width:         36px;
  height:        36px;
  border-radius: 50%;
  overflow:      visible; /* allow progress ring to sit outside */
  flex-shrink:   0;
  background:    rgba(255,255,255,0.08);
  display:       block;
}

/* Progress ring SVG — sits on top of the circle */
.gallery-fab__progress {
  position:    absolute;
  inset:       -3px;           /* slightly outside the image circle */
  width:       calc(100% + 6px);
  height:      calc(100% + 6px);
  pointer-events: none;
  z-index:     2;
  overflow:    visible;
}

.gallery-fab__progress-track {
  fill:         none;
  stroke:       rgba(255,255,255,0.12);
  stroke-width: 2;
}

.gallery-fab__progress-bar {
  fill:             none;
  stroke:           #ffffff;
  stroke-width:     2;
  stroke-linecap:   round;
  /* Will be set inline by JS: stroke-dasharray + animation */
  transform-origin: center;
  transform:        rotate(-90deg);
}

/* Clip the image inside the circle */
.gallery-fab__carousel-clip {
  position:      absolute;
  inset:         0;
  border-radius: 50%;
  overflow:      hidden;
  z-index:       1;
}

/* Two stacked images — sequential fade: out first, then in */
.gallery-fab__carousel-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0;
  transition: opacity 0.5s ease;
}

.gallery-fab__carousel-img.is-front {
  opacity: 1;
}

.gallery-fab__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      rgba(255,255,255,0.10);
  border:          1.5px solid rgba(255,255,255,0.18);
  flex-shrink:     0;
  font-size:       16px;
  line-height:     1;
}

.gallery-fab__text {
  line-height: 1;
}

.gallery-fab__count {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  min-width:      18px;
  height:         18px;
  padding:        0 5px;
  background:     rgba(255,255,255,0.15);
  border-radius:  var(--radius-pill);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.04em;
}


/* ── LIGHTBOX OVERLAY ─────────────────────── */

.gallery-overlay {
  position:   fixed;
  inset:      0;
  z-index:    1200;
  background: rgba(8,8,8,0.96);

  opacity:          0;
  pointer-events:   none;
  transition:       opacity 0.35s ease;
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);

  display:          flex;
  flex-direction:   column;
  overflow:         hidden;
}

.gallery-overlay.is-open {
  opacity:        1;
  pointer-events: auto;
}


/* ── LIGHTBOX HEADER ──────────────────────── */

.gallery-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 28px;
  border-bottom:   1px solid rgba(255,255,255,0.07);
  flex-shrink:     0;
}

.gallery-header__title {
  font-size:      13px;
  font-weight:    600;
  color:          rgba(255,255,255,0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gallery-header__count {
  font-size:   12px;
  color:       rgba(255,255,255,0.35);
  margin-left: 10px;
}

.gallery-header__close {
  display:        flex;
  align-items:    center;
  justify-content: center;
  width:          36px;
  height:         36px;
  border-radius:  50%;
  border:         1px solid rgba(255,255,255,0.12);
  background:     rgba(255,255,255,0.06);
  color:          rgba(255,255,255,0.7);
  font-size:      18px;
  cursor:         pointer;
  transition:     background 0.18s ease, color 0.18s ease;
  flex-shrink:    0;
  line-height:    1;
}

.gallery-header__close:hover {
  background: rgba(255,255,255,0.14);
  color:      #ffffff;
}


/* ── GRID VIEW ────────────────────────────── */

.gallery-grid-wrap {
  flex:       1;
  overflow-y: auto;
  padding:    28px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.gallery-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   12px;
}

.gallery-thumb {
  position:      relative;
  border-radius: 10px;
  overflow:      hidden;
  cursor:        pointer;
  aspect-ratio:  16 / 10;
  background:    rgba(255,255,255,0.05);
  border:        1px solid rgba(255,255,255,0.07);

  /* Stagger reveal via JS */
  opacity:   0;
  transform: translateY(16px);
  transition:
    opacity   0.4s ease,
    transform 0.4s ease,
    border-color 0.2s ease;
}

.gallery-thumb.is-loaded {
  opacity:   1;
  transform: translateY(0);
}

.gallery-thumb:hover {
  border-color: rgba(26,70,201,0.5);
}

.gallery-thumb:hover .gallery-thumb__img {
  transform: scale(1.04);
}

.gallery-thumb:hover .gallery-thumb__overlay {
  opacity: 1;
}

.gallery-thumb__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.4s ease;
}

.gallery-thumb__overlay {
  position:        absolute;
  inset:           0;
  background:      rgba(26,70,201,0.6);
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transition:      opacity 0.25s ease;
  font-size:       22px;
  color:           #ffffff;
}

.gallery-thumb__caption {
  position:    absolute;
  bottom:      0;
  left:        0;
  right:       0;
  padding:     10px 12px 8px;
  background:  linear-gradient(transparent, rgba(0,0,0,0.75));
  font-size:   11px;
  font-weight: 500;
  color:       rgba(255,255,255,0.85);
  line-height: 1.35;
  letter-spacing: 0.01em;
  transform:   translateY(4px);
  transition:  transform 0.25s ease;
}

.gallery-thumb:hover .gallery-thumb__caption {
  transform: translateY(0);
}


/* ── SINGLE IMAGE VIEW ────────────────────── */

.gallery-single {
  display:         flex;
  flex-direction:  column;
  flex:            1;
  overflow:        hidden;
  /* Hidden — shown only in single-image mode */
  display:         none;
}

.gallery-single.is-active {
  display: flex;
}

.gallery-single__img-wrap {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px;
  overflow:        hidden;
  position:        relative;
}

.gallery-single__img {
  max-width:  100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow:    0 32px 80px rgba(0,0,0,0.6);
  display:       block;

  opacity:   0;
  transform: scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery-single__img.is-ready {
  opacity:   1;
  transform: scale(1);
}

.gallery-single__footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 28px 20px;
  border-top:      1px solid rgba(255,255,255,0.07);
  flex-shrink:     0;
  gap:             16px;
}

.gallery-single__caption {
  font-size:   13px;
  color:       rgba(255,255,255,0.6);
  line-height: 1.45;
  flex:        1;
  min-width:   0;
}

.gallery-single__nav {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}

.gallery-nav-btn {
  display:        flex;
  align-items:    center;
  justify-content: center;
  width:          36px;
  height:         36px;
  border-radius:  50%;
  border:         1px solid rgba(255,255,255,0.12);
  background:     rgba(255,255,255,0.06);
  color:          rgba(255,255,255,0.7);
  font-size:      16px;
  cursor:         pointer;
  transition:     background 0.18s ease, color 0.18s ease;
  flex-shrink:    0;
  line-height:    1;
  user-select:    none;
}

.gallery-nav-btn:hover {
  background: var(--blue);
  color:      #ffffff;
  border-color: var(--blue);
}

.gallery-nav-btn:disabled {
  opacity: 0.3;
  cursor:  default;
  pointer-events: none;
}

.gallery-single__counter {
  font-size:      12px;
  color:          rgba(255,255,255,0.4);
  min-width:      48px;
  text-align:     center;
  letter-spacing: 0.05em;
}

.gallery-back-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-size:      12px;
  color:          rgba(255,255,255,0.5);
  cursor:         pointer;
  padding:        6px 0;
  transition:     color 0.18s ease;
  border:         none;
  background:     none;
  font-family:    var(--font-primary);
  letter-spacing: 0.04em;
}

.gallery-back-btn:hover { color: #ffffff; }


/* ── RESPONSIVE ───────────────────────────── */

@media (max-width: 768px) {

  /* Circular FAB on mobile — carousel fills it */
  .gallery-fab {
    bottom:          85px;
    right:           18px;
    width:           52px;
    height:          52px;
    padding:         0;
    border-radius:   50%;
    justify-content: center;
    gap:             0;
  }

  /* Hide text and count */
  .gallery-fab__text,
  .gallery-fab__count { display: none; }

  /* Carousel ring fills the whole button */
  .gallery-fab__carousel {
    width:  100%;
    height: 100%;
  }

  .gallery-fab__progress {
    inset:  -4px;
    width:  calc(100% + 8px);
    height: calc(100% + 8px);
  }

  /* Fallback icon fills too */
  .gallery-fab__icon {
    width:         100%;
    height:        100%;
    border-radius: 50%;
    border:        none;
    background:    transparent;
    font-size:     20px;
  }

  .gallery-grid-wrap { padding: 16px; }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .gallery-header { padding: 14px 16px; }

  .gallery-single__img-wrap { padding: 12px; }

  .gallery-single__footer {
    padding:        12px 16px 16px;
    flex-direction: column-reverse;
    align-items:    flex-start;
    gap:            10px;
  }

  .gallery-single__nav { width: 100%; justify-content: space-between; }

}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-fab__carousel-img  { transition: none; }
  .gallery-fab__progress-bar  { animation: none !important; }
}