/* didiandjosh.com — mobile layout (loaded only at max-width: 720px) */
:root {
  --wedding-bar-h: 2.9rem;
}

/* Bar moves to the bottom (portrait and landscape); image area is above it, never under it */
.wedding-slideshow__bar {
  order: 2;
  border-bottom: 0;
  border-top: 1px solid rgba(11, 43, 40, 0.18);
  padding: 0.25rem 0.4rem;
  padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px));
  gap: 0.3rem;
  flex-wrap: nowrap;
}
.wedding-slideshow__figure {
  order: 1;
  padding-top: env(safe-area-inset-top, 0px);
}
.wedding-slideshow__hud {
  top: 0;
}

/* prev left · counter middle · next right · hamburger far right */
.wedding-slideshow__nav--prev { order: 1; }
.wedding-slideshow__counter {
  order: 2;
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.wedding-slideshow__nav--next { order: 3; }
.wedding-slideshow__menu {
  order: 4;
  display: inline-flex;
  font-size: 1.05rem;
  padding: 0.3rem 0.55rem;
}
.wedding-slideshow__btn {
  font-size: 0.74rem;
  padding: 0.38rem 0.5rem;
}
.wedding-slideshow__label-desk { display: none; }
.wedding-slideshow__label-mob { display: inline; }
.wedding-slideshow__icon { font-size: 0.95rem; }
.wedding-slideshow__hit { display: none; }

/* Hamburger menu: actions pop up above the bottom bar */
.wedding-slideshow__actions {
  order: 5;
  display: none;
  position: absolute;
  right: 0.4rem;
  bottom: calc(100% + 0.35rem);
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.45rem;
  background: #a8e6df;
  border: 1px solid rgba(11, 43, 40, 0.25);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  min-width: 17rem;
  z-index: 8;
}
.wedding-slideshow__fitrow { gap: 0.35rem; }
.wedding-slideshow__fitrow .wedding-slideshow__btn { flex: 1 1 50%; }
.wedding-slideshow[data-menu="open"] .wedding-slideshow__actions { display: flex; }
.wedding-slideshow__actions .wedding-slideshow__btn {
  font-size: 0.9rem;
  padding: 0.55rem 0.7rem;
  justify-content: flex-start;
}


.wedding-grid__list {
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
}