/*
 * assets/css/editor-blocks.css
 * Loaded in both the Gutenberg editor AND the frontend (via wp_enqueue).
 * Overrides WordPress Gallery block to match our design system.
 *
 * Design goals:
 * — Gallery grid uses same 1px gap + var(--dimb) separator as .port-grid
 * — Images use aspect-ratio:1, object-fit:cover — consistent with our cards
 * — Hover: scale(1.06) + overlay with caption — same as .port-item
 * — Captions: Bebas Neue / DM Sans, same token sizing
 * — No rounded corners, no box shadows, no WordPress blue
 * — Lightbox: uses our #lb overlay (JS handles it)
 */

/* ─────────────────────────────────────────────────────
   RESET WordPress block defaults we don't want
───────────────────────────────────────────────────── */
.wp-block-gallery,
.wp-block-gallery *,
.blocks-gallery-grid,
.blocks-gallery-grid * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Remove WP's figure margin injected via inline style */
.wp-block-gallery figure,
.blocks-gallery-grid figure,
.wp-block-gallery .blocks-gallery-item {
  margin: 0 !important;
  padding: 0 !important;
}

/* ─────────────────────────────────────────────────────
   GALLERY GRID
   Matches .port-grid exactly:
   — 3 columns default, 1px separator via background trick
   — aspect-ratio: 1
───────────────────────────────────────────────────── */
.wp-block-gallery,
.blocks-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background: var(--dimb, rgba(240,240,235,.1)) !important;
  /* Remove WP default flex layout override */
  flex-wrap: unset !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2-col class WP adds for 2-image galleries */
.wp-block-gallery.columns-2,
.blocks-gallery-grid.columns-2 { grid-template-columns: repeat(2, 1fr) !important; }
.wp-block-gallery.columns-3,
.blocks-gallery-grid.columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
.wp-block-gallery.columns-4,
.blocks-gallery-grid.columns-4 { grid-template-columns: repeat(4, 1fr) !important; }

@media(max-width: 900px) {
  .wp-block-gallery.columns-4,
  .blocks-gallery-grid.columns-4 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media(max-width: 768px) {
  .wp-block-gallery,
  .blocks-gallery-grid,
  .wp-block-gallery.columns-3,
  .wp-block-gallery.columns-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media(max-width: 480px) {
  .wp-block-gallery,
  .blocks-gallery-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────
   GALLERY ITEM
   Each <li> or <figure> — position:relative for hover
───────────────────────────────────────────────────── */
.wp-block-gallery .blocks-gallery-item,
.wp-block-gallery li,
.blocks-gallery-grid .blocks-gallery-item,
.blocks-gallery-grid li {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 1 !important;
  background: var(--bg, #080F0F) !important;
  list-style: none !important;
  /* Remove WP flex sizing */
  width: auto !important;
  flex: unset !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The <figure> inside each item */
.wp-block-gallery .blocks-gallery-item figure,
.wp-block-gallery li figure,
.blocks-gallery-grid .blocks-gallery-item figure {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* ─────────────────────────────────────────────────────
   IMAGE
───────────────────────────────────────────────────── */
.wp-block-gallery img,
.blocks-gallery-grid img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform .6s cubic-bezier(.16,1,.3,1) !important;
}

/* Hover scale — same as .port-item:hover img */
.wp-block-gallery .blocks-gallery-item:hover img,
.wp-block-gallery li:hover img,
.blocks-gallery-grid .blocks-gallery-item:hover img {
  transform: scale(1.06) !important;
}

/* ─────────────────────────────────────────────────────
   OVERLAY on hover
───────────────────────────────────────────────────── */
.wp-block-gallery .blocks-gallery-item::after,
.wp-block-gallery li::after,
.blocks-gallery-grid .blocks-gallery-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(8,15,15,.85) 0%, transparent 55%) !important;
  opacity: 0 !important;
  transition: opacity .4s !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.wp-block-gallery .blocks-gallery-item:hover::after,
.wp-block-gallery li:hover::after,
.blocks-gallery-grid .blocks-gallery-item:hover::after {
  opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────
   CAPTION — styled as port-item__info
───────────────────────────────────────────────────── */
.wp-block-gallery figcaption,
.wp-block-gallery .blocks-gallery-item__caption,
.blocks-gallery-grid figcaption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 1.2rem 1.5rem !important;
  z-index: 2 !important;
  background: transparent !important;
  /* Start hidden, reveal on hover */
  transform: translateY(8px) !important;
  opacity: 0 !important;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .4s !important;
  font-family: 'Bebas Neue', Impact, sans-serif !important;
  font-size: clamp(1.3rem, 2.5vw, 3rem) !important;
  letter-spacing: .03em !important;
  color: var(--fg, #F0F0EB) !important;
  text-shadow: none !important;
  text-align: left !important;
}
.wp-block-gallery .blocks-gallery-item:hover figcaption,
.wp-block-gallery li:hover figcaption,
.wp-block-gallery .blocks-gallery-item:hover .blocks-gallery-item__caption,
.blocks-gallery-grid .blocks-gallery-item:hover figcaption {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────
   REMOVE WP crop button + selected state in editor
───────────────────────────────────────────────────── */
.block-editor .wp-block-gallery .blocks-gallery-item__move-menu,
.block-editor .wp-block-gallery .block-list-appender {
  display: none;
}

/* ─────────────────────────────────────────────────────
   SECTION WRAPPER (when gallery is inside our .sec)
───────────────────────────────────────────────────── */
.kd-gallery-wrap {
  position: relative;
  overflow: hidden;
}
.kd-gallery-wrap .wp-block-gallery {
  width: 100%;
}

/* ─────────────────────────────────────────────────────
   LIGHTBOX TRIGGER CURSOR
   WP wraps images in <a> when crop is disabled.
   Match our crosshair cursor.
───────────────────────────────────────────────────── */
.wp-block-gallery a,
.wp-block-gallery .blocks-gallery-item a {
  cursor: none !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}