/* Frontend & Editor Styles for Isarlog-Galerie - Mobile-First Responsive Design */

/* ========================================
   BASE VARIABLES - Mobile First Defaults
   ======================================== */
.wp-block-gallery.isarlog-gallery {
  --isarlog-gap: var(--wp--style--block-gap, 12px);
  --isarlog-columns: 1;
  --isarlog-grid-min: 100%;
  --isarlog-justified-basis: 25%;
  --isarlog-justified-target: 50%;
  --isarlog-max-width: none;
  --isarlog-radius: 0;
  --isarlog-item-bg: transparent;
}

.wp-block-gallery.isarlog-gallery[data-isarlog-max-width] {
  max-width: var(--isarlog-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   GRID LAYOUT - Mobile First Responsive
   ======================================== */
.wp-block-gallery.is-style-isarlog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--isarlog-grid-min), 100%), 1fr));
  gap: var(--isarlog-gap);
}

/* Tablet: 768px+ */
@media (min-width: 768px) {
  .wp-block-gallery.is-style-isarlog-grid {
    --isarlog-grid-min: 200px;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .wp-block-gallery.is-style-isarlog-grid {
    --isarlog-grid-min: 180px;
  }
}

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) {
  .wp-block-gallery.is-style-isarlog-grid {
    --isarlog-grid-min: 160px;
  }
}

/* ========================================
   MASONRY LAYOUT - Mobile First Responsive
   ======================================== */
.wp-block-gallery.is-style-isarlog-masonry {
  column-count: var(--isarlog-columns);
  column-gap: var(--isarlog-gap);
}

.wp-block-gallery.is-style-isarlog-masonry figure {
  break-inside: avoid;
  margin: 0 0 var(--isarlog-gap);
}

/* Mobile: 1 column */
.wp-block-gallery.is-style-isarlog-masonry {
  --isarlog-columns: 1;
}

/* Phablet/Small Tablet: 600px+ */
@media (min-width: 600px) {
  .wp-block-gallery.is-style-isarlog-masonry {
    --isarlog-columns: 2;
  }
}

/* Tablet: 768px+ */
@media (min-width: 768px) {
  .wp-block-gallery.is-style-isarlog-masonry {
    --isarlog-columns: 2;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .wp-block-gallery.is-style-isarlog-masonry {
    --isarlog-columns: 3;
  }
}

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) {
  .wp-block-gallery.is-style-isarlog-masonry {
    --isarlog-columns: 4;
  }
}

/* ========================================
   JUSTIFIED ROWS LAYOUT - Fully Responsive
   Fills rows completely, no gaps, maintains aspect ratios
   Inspired by Flickr/Google Photos with fluid scaling
   ======================================== */
.wp-block-gallery.is-style-isarlog-justified {
  display: flex;
  flex-wrap: wrap;
  gap: var(--isarlog-gap);
  align-items: flex-start;
  --isarlog-row-height: clamp(120px, 15vw, 280px);
}

.wp-block-gallery.is-style-isarlog-justified figure {
  flex-grow: 1;
  flex-shrink: 1;
  margin: 0;
  position: relative;
  height: var(--isarlog-row-height);
  flex-basis: calc(var(--isarlog-row-height) * var(--isarlog-image-aspect, 1.5));
  min-width: 0;
}

.wp-block-gallery.is-style-isarlog-justified figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Prevent single items from stretching too much */
.wp-block-gallery.is-style-isarlog-justified figure:only-child,
.wp-block-gallery.is-style-isarlog-justified figure:last-child:nth-child(n+2) {
  max-width: 50%;
}


/* ========================================
   ITEM CHROME - Base Styles
   ======================================== */
.wp-block-gallery.isarlog-gallery figure {
  border-radius: var(--isarlog-radius, var(--wp--custom--isarlog-radius, 0));
  overflow: hidden;
  background: var(--isarlog-item-bg, transparent);
}

/* ========================================
   IMAGE INTERACTIONS - Mobile First
   ======================================== */
.wp-block-gallery.isarlog-gallery img {
  transition: transform 0.25s ease, filter 0.25s ease;
  will-change: transform;
  display: block;
}

/* Hover state for devices that support hover */
@media (hover: hover) {
  .wp-block-gallery.isarlog-gallery figure:hover img {
    transform: scale(1.015);
  }
}

/* Focus state for keyboard navigation */
.wp-block-gallery.isarlog-gallery figure:focus-within img {
  transform: scale(1.015);
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: -2px;
}

/* Active/tap state for touch devices */
@media (hover: none) {
  .wp-block-gallery.isarlog-gallery figure:active img {
    transform: scale(1.015);
  }
}

/* ========================================
   FIGCAPTIONS - Responsive Typography
   ======================================== */
.wp-block-gallery.isarlog-gallery figcaption {
  font-size: clamp(0.75em, 1.2vw, 0.92em);
  line-height: 1.35;
  padding: clamp(0.4em, 1.5vw, 0.75em);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

/* ========================================
   ACCESSIBILITY - Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .wp-block-gallery.isarlog-gallery * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .wp-block-gallery.isarlog-gallery img {
    will-change: auto;
  }

  .wp-block-gallery.isarlog-gallery figure:hover img,
  .wp-block-gallery.isarlog-gallery figure:focus-within img,
  .wp-block-gallery.isarlog-gallery figure:active img {
    transform: none;
  }
}

/* ========================================
   ACCESSIBILITY - High Contrast
   ======================================== */
@media (prefers-contrast: more) {
  .wp-block-gallery.isarlog-gallery figcaption {
    background: rgba(0, 0, 0, 0.8);
  }

  .wp-block-gallery.isarlog-gallery figure:focus-within img {
    outline: 3px solid #fff;
  }
}

/* ========================================
   ACCESSIBILITY - Dark Color Scheme
   ======================================== */
@media (prefers-color-scheme: dark) {
  .wp-block-gallery.isarlog-gallery figcaption {
    background: rgba(0, 0, 0, 0.7);
  }
}

/* ========================================
   LANDSCAPE ORIENTATION on Mobile
   ======================================== */
@media (orientation: landscape) and (max-height: 500px) {
  .wp-block-gallery.isarlog-gallery figcaption {
    font-size: clamp(0.7em, 1vw, 0.85em);
    padding: clamp(0.3em, 1vw, 0.6em);
  }
}

/* ========================================
   HIGH-DPI DISPLAYS (Retina, 2x+)
   ======================================== */
@media (min-resolution: 192dpi) {
  .wp-block-gallery.isarlog-gallery img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ========================================
   ULTRA-WIDE SCREENS: 2560px+
   ======================================== */
@media (min-width: 2560px) {
  .wp-block-gallery.is-style-isarlog-grid {
    --isarlog-grid-min: 200px;
  }

  .wp-block-gallery.is-style-isarlog-masonry {
    --isarlog-columns: 5;
  }

  .wp-block-gallery.is-style-isarlog-justified {
    --isarlog-justified-target: min(var(--isarlog-justified-basis), 20%);
  }
}