/* hc_gallery.css — Gallery page + lightbox + pins.
   Standalone page styles; loaded only on route homecenter/gallery via document->addStyle. */

/* ============================================================
   Page layout
   ============================================================ */
.hc-gallery-page { padding-block: var(--cc-space-6) var(--cc-space-10); background: var(--cc-surface-page); }
.hc-gallery-breadcrumbs { margin-bottom: var(--cc-space-4); font-size: var(--cc-text-xs); color: var(--cc-text-secondary); }
.hc-gallery-breadcrumbs__item { color: var(--cc-text-secondary); text-decoration: none; }
.hc-gallery-breadcrumbs__item:last-child { color: var(--cc-text-primary); font-weight: var(--cc-font-bold); }
.hc-gallery-breadcrumbs__sep { margin: 0 6px; color: var(--cc-border-default); }

.hc-gallery-hero { text-align: center; margin-bottom: var(--cc-space-6); }
.hc-gallery-hero__title {
  font-size: var(--cc-text-4xl);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-tight);
  margin: 0 0 var(--cc-space-2);
}
.hc-gallery-hero__subtitle {
  max-width: 640px;
  margin: 0 auto;
  color: var(--cc-text-secondary);
  font-size: var(--cc-text-md);
  line-height: 1.5;
}

/* ============================================================
   Tabs — estilo pills inspirado no flooranddecor
   ============================================================ */
.hc-gallery-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
  margin-block: var(--cc-space-6) var(--cc-space-5);
  padding-bottom: var(--cc-space-5);
  border-bottom: 1px solid var(--cc-border-subtle);
}
.hc-gallery-tab {
  padding: 10px 22px;
  background: var(--cc-surface-raised);
  color: var(--cc-text-primary);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  border: 1px solid var(--cc-border-default);
  border-radius: 999px;
  text-decoration: none;
  transition: var(--cc-t-hover);
}
.hc-gallery-tab:hover { border-color: var(--cc-color-gray-1000); }
.hc-gallery-tab--active {
  background: var(--cc-color-gray-1000);
  color: #fff;
  border-color: var(--cc-color-gray-1000);
}
.hc-gallery-description { text-align: center; color: var(--cc-text-secondary); max-width: 720px; margin: 0 auto var(--cc-space-5); }

/* ============================================================
   Thumbnail grid — 4x4 no desktop
   ============================================================ */
.hc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cc-space-3);
}
@media (max-width: 991px) { .hc-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .hc-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

.hc-gallery-cell {
  position: relative;
  aspect-ratio: 1/1;
  padding: 0;
  border: 1px solid var(--cc-border-subtle);
  background: var(--cc-surface-sunken);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--cc-duration-base) var(--cc-ease-out), box-shadow var(--cc-duration-base) var(--cc-ease-out);
}
.hc-gallery-cell:hover { transform: translateY(-3px); box-shadow: var(--cc-shadow-md); }
.hc-gallery-cell__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--cc-duration-slow) var(--cc-ease-out); }
.hc-gallery-cell:hover .hc-gallery-cell__img { transform: scale(1.05); }

/* Tag icon button (bottom-right) — toggla overlay de pins inline no thumb */
.hc-gallery-cell__tag-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--cc-color-gray-1000);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 150ms var(--cc-ease-out), background 150ms var(--cc-ease-out), color 150ms var(--cc-ease-out);
}
.hc-gallery-cell__tag-btn:hover { transform: scale(1.08); }
.hc-gallery-cell--pins-visible .hc-gallery-cell__tag-btn {
  background: var(--cc-color-red-500);
  color: #fff;
  transform: scale(1.08);
}

/* Pins overlay sobre o thumb — oculto por default, visível quando tag toggler ativa */
.hc-gallery-cell__pins-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms var(--cc-ease-out);
  z-index: 2;
}
.hc-gallery-cell--pins-visible .hc-gallery-cell__pins-overlay {
  opacity: 1;
  pointer-events: auto;
}
/* Darken thumb quando pins visíveis (chama atenção aos pins) */
.hc-gallery-cell--pins-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 1;
  transition: opacity 220ms;
}

/* Project meta badge — bottom-left, escuro translúcido */
.hc-gallery-cell__meta {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px 7px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  border-radius: 3px;
  max-width: calc(100% - 60px);  /* deixa espaço pro tag button */
  z-index: 3;
  line-height: 1.15;
}
.hc-gallery-cell__meta-prof {
  font-size: 11px;
  font-weight: var(--cc-font-bold);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-gallery-cell__meta-loc {
  font-size: 10px;
  opacity: 0.85;
  font-weight: var(--cc-font-regular);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
}

.hc-gallery-empty { text-align: center; padding: var(--cc-space-10); color: var(--cc-text-secondary); }

/* ============================================================
   Lightbox — imagem grande + pins interativos
   ============================================================ */
.hc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 80px;
  opacity: 0;
  transition: opacity 200ms var(--cc-ease-out);
}
.hc-lightbox[hidden] { display: none; }
.hc-lightbox.is-open { opacity: 1; }

.hc-lightbox__close,
.hc-lightbox__prev,
.hc-lightbox__next {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms var(--cc-ease-out), transform 200ms var(--cc-ease-out);
  z-index: 10;
}
.hc-lightbox__close:hover,
.hc-lightbox__prev:hover,
.hc-lightbox__next:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.05); }

.hc-lightbox__close { top: 20px; right: 20px; }
.hc-lightbox__prev  { left: 20px; top: 50%; transform: translateY(-50%); }
.hc-lightbox__next  { right: 20px; top: 50%; transform: translateY(-50%); }
.hc-lightbox__prev:hover { transform: translateY(-50%) scale(1.05); }
.hc-lightbox__next:hover { transform: translateY(-50%) scale(1.05); }

.hc-lightbox__counter {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-medium);
  letter-spacing: var(--cc-tracking-wide);
  opacity: 0.85;
}

.hc-lightbox__stage { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; }
.hc-lightbox__frame {
  position: relative;
  max-width: min(95vw, 1400px);
  max-height: calc(100vh - 120px);
  line-height: 0;
}
.hc-lightbox__img { max-width: 100%; max-height: calc(100vh - 120px); display: block; }
.hc-lightbox__pins { position: absolute; inset: 0; pointer-events: none; }

/* ============================================================
   Pin marker — dotzinho: círculo branco 14px com ponto vermelho 6px dentro.
   Anel pulsante ao redor para chamar atenção sem ser invasivo.
   ============================================================ */
.hc-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px; /* centraliza no ponto x,y */
  border-radius: 50%;
  background: #fff;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  border: 0;
  color: transparent;       /* esconde qualquer text content (ex: "+" legacy) */
  font-size: 0;
  line-height: 0;
  animation: hc-pin-pulse 2s ease-in-out infinite;
  transition: transform 200ms var(--cc-ease-out);
}
.hc-pin::before {
  /* Ponto vermelho central */
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  margin: 4px auto;
  border-radius: 50%;
  background: var(--cc-color-red-500);
}
.hc-pin:hover { transform: scale(1.35); animation: none; }
@keyframes hc-pin-pulse {
  0%, 100% { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(230, 57, 70, 0.5); }
  50%      { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(230, 57, 70, 0); }
}

/* ============================================================
   Pin tooltip — preview do produto ao lado do pin
   ============================================================ */
.hc-pin-tooltip {
  position: absolute;
  width: 260px;
  background: #fff;
  color: var(--cc-text-primary);
  border-radius: 2px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  padding: 0;
  z-index: 10010; /* acima do lightbox (10000) — tooltip é appended ao body, compete direto */
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms var(--cc-ease-out), transform 180ms var(--cc-ease-out);
  overflow: hidden;
}
.hc-pin-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.hc-pin-tooltip__inner { display: flex; gap: var(--cc-space-3); padding: var(--cc-space-3); }
.hc-pin-tooltip__thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--cc-surface-sunken);
}
.hc-pin-tooltip__body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hc-pin-tooltip__brand { font-size: 9px; color: var(--cc-text-tertiary); text-transform: uppercase; letter-spacing: var(--cc-tracking-wide); font-weight: var(--cc-font-bold); }
.hc-pin-tooltip__name  { font-size: var(--cc-text-sm); font-weight: var(--cc-font-bold); line-height: 1.25; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-pin-tooltip__price { font-size: var(--cc-text-md); font-weight: var(--cc-font-bold); color: var(--cc-text-primary); margin-top: auto; }
.hc-pin-tooltip__price--sale { color: var(--cc-color-red-500); }
.hc-pin-tooltip__price-was { font-size: var(--cc-text-xs); color: var(--cc-text-secondary); text-decoration: line-through; margin-left: 4px; }
/* PPU inline no tooltip — redimensiona o badge pra caber no card 180px do body */
.hc-pin-tooltip__ppu { margin-top: auto; }
.hc-pin-tooltip__ppu .hc-ppu-badge {
  position: static;           /* override absolute do badge (no tooltip, fica inline) */
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;        /* todos os cantos arredondados nesse contexto */
  min-width: 0;
  box-shadow: none;
}
.hc-pin-tooltip__ppu .hc-ppu-badge__price { font-size: var(--cc-text-sm); }
.hc-pin-tooltip__ppu .hc-ppu-badge__unit { font-size: 9px; }
.hc-pin-tooltip__ppu .hc-ppu-badge__pct { font-size: 9px; padding: 1px 4px; margin-top: 2px; }
.hc-pin-tooltip__price-note { font-size: 10px; color: var(--cc-text-tertiary); display: block; margin-top: 3px; }
.hc-pin-tooltip__link {
  display: block;
  padding: 10px var(--cc-space-3);
  background: var(--cc-color-gray-1000);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  transition: background 200ms var(--cc-ease-out);
}
.hc-pin-tooltip__link:hover { background: var(--cc-color-red-500); color: #fff; }
.hc-pin-tooltip__loading { padding: var(--cc-space-4); text-align: center; color: var(--cc-text-secondary); font-size: var(--cc-text-sm); }

/* Mobile — lightbox padding menor, tooltip maior relativo */
@media (max-width: 767px) {
  .hc-lightbox { padding: 40px 10px; }
  .hc-lightbox__prev, .hc-lightbox__next { width: 40px; height: 40px; }
  .hc-pin-tooltip { width: 220px; }
}