/* =========================================================================
   TIQI — About Us / Retail Setup / Picture Gallery page templates.
   Loaded only on these three templates (see functions.php enqueue).
   ========================================================================= */

/* ---------------------------------------------------------------------
   Picture Gallery — true masonry via CSS columns. Each image keeps its
   own natural aspect ratio (width:100%, height:auto — no crop, no forced
   square) and simply flows into the shortest available column, which is
   what gives the masonry effect. Shows the current cached random
   selection from the rotation pool (inc/gallery-rotation.php).
   --------------------------------------------------------------------- */
.tiqi-gallery-masonry {
  column-count: 2;
  column-gap: 1rem;
}
@media (min-width: 768px) {
  .tiqi-gallery-masonry {
    column-count: 3;
  }
}
@media (min-width: 1200px) {
  .tiqi-gallery-masonry {
    column-count: 4;
  }
}

.tiqi-gallery-item {
  break-inside: avoid; /* stops a single image being split across two columns */
  margin-bottom: 1rem;
}

.tiqi-gallery-img {
  display: block;
  width: 100%;
  height: auto; /* natural aspect ratio preserved — this is the whole trick */
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tiqi-gallery-img:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

#tiqiGalleryModalImage {
  max-height: 80vh;
  object-fit: contain;
}

/* ---------------------------------------------------------------------
   About Us / Retail Setup — shared section styling
   --------------------------------------------------------------------- */
.tiqi-hero img {
  display: block;
}

/* Department cards on Retail Setup reuse .tiqi-card, just tightened up
   for a text-only (no image) card variant here */
.tiqi-card.p-3.text-center {
  border-color: #eee;
}