/* ==========================================================================
   Changan Elements – Grid Gallery
   ========================================================================== */

.changan-grid-gallery {
  --cgg-columns: 4;
  --cgg-gap-col: 24px;
  --cgg-gap-row: 24px;
  --cgg-small-h: 200px;
  --cgg-big-h: 350px;

  display: flex;
  flex-wrap: wrap;
  column-gap: var(--cgg-gap-col);
  row-gap: var(--cgg-gap-row);
}

/* One column = one vertical pair (one short tile, one tall tile).
   Wraps to a new row automatically once --cgg-columns worth of
   columns have filled the current line — this is what makes the
   Columns setting work correctly on mobile (e.g. 2 columns). */
.changan-grid-gallery__column {
  display: flex;
  flex-direction: column;
  gap: var(--cgg-gap-row);
  min-width: 0;
  flex: 0 0 calc((100% - (var(--cgg-columns) - 1) * var(--cgg-gap-col)) / var(--cgg-columns));
}

/* Phase A: short tile on top, tall tile on bottom */
.changan-grid-gallery__column--phase-a .changan-grid-gallery__tile:nth-child(1) {
  height: var(--cgg-small-h);
}
.changan-grid-gallery__column--phase-a .changan-grid-gallery__tile:nth-child(2) {
  height: var(--cgg-big-h);
}

/* Phase B (mirrored): tall tile on top, short tile on bottom */
.changan-grid-gallery__column--phase-b .changan-grid-gallery__tile:nth-child(1) {
  height: var(--cgg-big-h);
}
.changan-grid-gallery__column--phase-b .changan-grid-gallery__tile:nth-child(2) {
  height: var(--cgg-small-h);
}

.changan-grid-gallery__tile {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;

  /* Neutral placeholder while the background image lazy-loads */
  background-color: #e5e5e5;

  /* Background image fills the tile completely at any height — no
     gaps or letterboxing — and stays centered. */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: background-size 0.5s ease;
}

/* Hints the browser to optimize for the upcoming animation, then stops
   hinting once played — avoids holding a GPU layer open indefinitely. */
.changan-grid-gallery-fade-yes .changan-grid-gallery__tile:not(.is-scroll-active) {
  will-change: opacity, transform;
}

.changan-grid-gallery__tile:focus-visible {
  outline: 2px solid #0B457F;
  outline-offset: 2px;
}

.changan-grid-gallery__overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.changan-grid-gallery__tile:hover .changan-grid-gallery__overlay {
  opacity: 1;
}

.changan-grid-gallery-zoom-yes .changan-grid-gallery__tile:hover {
  background-size: 112%;
}

/* Caption always sits above the background image */
.changan-grid-gallery__caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  z-index: 1;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  pointer-events: none;
}

/* ── Scroll fade-in (only active when enabled in Layout settings) ───────── */
.changan-grid-gallery-fade-yes .changan-grid-gallery__tile {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.changan-grid-gallery-fade-yes .changan-grid-gallery__tile.is-scroll-active {
  opacity: 1;
  transform: translateY(0);
}

.changan-grid-gallery__column:nth-child(4n+1) .changan-grid-gallery__tile { transition-delay: 0s; }
.changan-grid-gallery__column:nth-child(4n+2) .changan-grid-gallery__tile { transition-delay: 0.13s; }
.changan-grid-gallery__column:nth-child(4n+3) .changan-grid-gallery__tile { transition-delay: 0.26s; }
.changan-grid-gallery__column:nth-child(4n+4) .changan-grid-gallery__tile { transition-delay: 0.39s; }

@media (prefers-reduced-motion: reduce) {
  .changan-grid-gallery__tile,
  .changan-grid-gallery__overlay,
  .changan-grid-gallery-fade-yes .changan-grid-gallery__tile {
    transition: none !important;
  }
}