/* =========================================================================
   MIMPI HEADSPA — customer gallery
   An asymmetric mosaic: one large feature tile anchors each block of six, with
   a wide tile breaking the rhythm so it reads as editorial rather than a plain
   grid. Loaded by inc/gallery.php. Shared with mockup.html.
   ========================================================================= */

.mh-gallery__head{ text-align:center; margin-bottom:30px; }
.mh-gallery__eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--mimpi-muted,#8A8578); display:block; margin-bottom:10px;
}
.mh-gallery__head h2{
  font-family:var(--mimpi-font-head); font-weight:400; font-size:34px; margin:0 0 8px;
}
.mh-gallery__head p{
  font-size:15px; color:var(--mimpi-muted,#8A8578); margin:0 auto; max-width:520px; line-height:1.6;
}

/* ---- Mosaic ------------------------------------------------------------- */
/* 3 columns with a 2x2 feature tile tessellates perfectly in blocks of six:
   rows 1-2 = feature (2 cols) + 2 stacked tiles in col 3; row 3 = 3 tiles.
   A 4-column version leaves two dead cells whenever the count is a multiple
   of six, which is the most common case. */
.mh-gal{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:185px;
  gap:14px;
  grid-auto-flow:dense;
}
.mh-gal__item{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:20px;
  background-color:var(--mimpi-accent-soft,#E7DCC9);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  text-decoration:none;
}
/* Feature tile anchors each block of six. */
.mh-gal__item--feature{ grid-column:span 2; grid-row:span 2; }

/* Placeholder tinting so the mosaic still reads well before real photos are in.
   Any tile with a background-image set will simply cover these. */
.mh-gal__item:nth-child(6n+1){ background-image:var(--mimpi-grad-spa); }
.mh-gal__item:nth-child(6n+2){ background-image:var(--mimpi-grad-prod); }
.mh-gal__item:nth-child(6n+3){ background-image:var(--mimpi-grad-card); }
.mh-gal__item:nth-child(6n+4){ background-image:var(--mimpi-grad-prod); }
.mh-gal__item:nth-child(6n+5){ background-image:var(--mimpi-grad-card); }
.mh-gal__item:nth-child(6n+6){ background-image:var(--mimpi-grad-spa); }

.mh-gal__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s cubic-bezier(.2,.6,.2,1);
}
.mh-gal__item:hover img{ transform:scale(1.06); }

/* Caption rises out of a soft scrim on hover. */
.mh-gal__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 18px;
  color:#f4efe6; font-size:13px; font-weight:600; line-height:1.4;
  background:linear-gradient(transparent, rgba(19,30,24,.78));
  opacity:0; transform:translateY(8px);
  transition:opacity .28s ease, transform .28s ease;
}
.mh-gal__item:hover .mh-gal__cap,
.mh-gal__item:focus-visible .mh-gal__cap{ opacity:1; transform:none; }
.mh-gal__item:focus-visible{ outline:2px solid var(--mimpi-green,#264033); outline-offset:3px; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:1024px){
  .mh-gal{ grid-auto-rows:158px; }
  .mh-gallery__head h2{ font-size:28px; }
}
@media (max-width:768px){
  /* Two even columns on phones, feature reset to a normal tile: a full-width
     feature plus five singles strands the last photo alone in its row. Uniform
     tiles keep any even number of photos tiling perfectly, and the mosaic
     effect doesn't read at this width anyway. */
  .mh-gal{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; gap:10px; }
  .mh-gal__item{ border-radius:16px; }
  .mh-gal__item--feature{ grid-column:span 1; grid-row:span 1; }
  /* No hover on touch — captions stay visible. */
  .mh-gal__cap{ opacity:1; transform:none; padding:12px 14px; font-size:12px; }
  .mh-gallery__head{ margin-bottom:20px; text-align:left; }
  .mh-gallery__head h2{ font-size:26px; }
  .mh-gallery__head p{ font-size:14px; margin:0; }
}