/* Sober AF -- Galleries: saf_gallery single-template chrome (S-09).
 *
 * The Tier-D hybrid front end does NOT enqueue the dormant `sober-af`
 * theme's components.css / lightbox.css, so the markup emitted by
 * sober-af-galleries/includes/class-saf-galleries-single.php renders
 * unstyled unless this plugin ships the CSS. Enqueued on
 * is_singular('saf_gallery'). Tokens resolve from tokens.css (enqueued
 * globally by the child theme); raw fallbacks are supplied so the page
 * degrades gracefully if a token is ever missing. See memory:
 * tier-d-old-theme-css-not-enqueued.
 *
 * SPECIFICITY NOTE -- the Elementor Kit ships global rules
 *   `.elementor-kit-4213 button { background:#be2727; padding:... }`   (0,2,0)
 *   `.elementor-kit-4213 button:focus|:hover { background:#7b181a }`    (0,2,1)
 * OLD single-saf_gallery.php used a bare `.saf-photo-grid__tile`
 * (0,1,0) which the Kit silently overrode here (brick-red tiles,
 * 8/16px padding, burgundy on focus). Every interactive element below
 * (the <button> tiles, the <button> lightbox controls, the <a> gate
 * buttons) is therefore scoped under its container AND element-
 * qualified -> (0,2,1) base, and its interaction-state rule enumerates
 * :hover/:focus/:focus-visible -> (0,3,1). Both beat the Kit cleanly
 * with NO !important.
 *
 * No bare `.saf-btn` here ON PURPOSE -- the gated-panel buttons use the
 * self-named `.saf-gallery-gated__btn*` classes so they can never leak
 * onto the global JTC footer "Say hi" <button> (also class="saf-btn").
 * See memory: per-cpt-css-saf-btn-footer-leak.
 */

/* ------------------------------------------------------------------ *
 * GAP 1 -- the attachment photo grid (body-left column). Equal 1/1
 * tiles, cover-cropped thumbs. Each tile is a <button> wired to the
 * lightbox. Ported from OLD single-saf_gallery.php inline CSS.
 * ------------------------------------------------------------------ */

.saf-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--saf-gap-3, 12px);
}

/* element-qualified + container-scoped -> beats `.elementor-kit-4213
 * button` (0,2,0). Resets the Kit button chrome explicitly. */
.saf-photo-grid button.saf-photo-grid__tile {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  border-radius: var(--saf-radius, 8px);
  background: rgba(28, 23, 16, 0.06);
  transition:
    transform var(--saf-transition, 180ms ease),
    box-shadow var(--saf-transition, 180ms ease);
}

/* Lift on hover + any focus/active. :focus + :active are enumerated
 * here (not only :focus-visible) deliberately -- they out-specify the
 * Kit's `button:focus`/`:hover` burgundy (0,2,1), which would
 * otherwise paint a mouse-focused or focus-returned tile. The keyboard
 * focus RING is split to the :focus-visible-only rule below. */
.saf-photo-grid button.saf-photo-grid__tile:hover,
.saf-photo-grid button.saf-photo-grid__tile:focus,
.saf-photo-grid button.saf-photo-grid__tile:focus-visible,
.saf-photo-grid button.saf-photo-grid__tile:active {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  background: rgba(28, 23, 16, 0.06);
}

.saf-photo-grid button.saf-photo-grid__tile:focus-visible {
  outline: 2px solid var(--saf-denim, #004263);
  outline-offset: 2px;
}

.saf-photo-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------------ *
 * GAP 3 -- empty state. Self-named `.saf-gallery-empty` (NOT OLD's
 * generic `.saf-empty-state`, which risks colliding with theme CSS --
 * memory: css-class-collisions).
 * ------------------------------------------------------------------ */

.saf-gallery-empty {
  background: rgba(28, 23, 16, 0.03);
  border: 1px solid var(--saf-border, #d8d1c0);
  border-radius: var(--saf-radius-lg, 16px);
  padding: 40px 28px;
  text-align: center;
}

.saf-gallery-empty__copy {
  margin: 0;
  color: #5a554e;
  font-family: var(--saf-font-sans);
}

/* ------------------------------------------------------------------ *
 * GAP 2 -- members-only gate panel. The buttons are <a> elements with
 * self-named `.saf-gallery-gated__btn*` classes -- NEVER bare
 * `.saf-btn`. Container-scoped + element-qualified so a Kit global
 * `a` rule cannot recolour them. Primary = filled brick; ghost =
 * charcoal outline that fills on hover (ported from OLD `.saf-btn--ghost`).
 * ------------------------------------------------------------------ */

.saf-gallery-gated {
  background: var(--saf-linen, #f5f1e7);
  border: 1px solid var(--saf-border, #d8d1c0);
  border-radius: var(--saf-radius-lg, 16px);
  padding: 48px 28px;
  text-align: center;
}

.saf-gallery-gated__title {
  margin: 0 0 12px;
  font-family: var(--saf-font-sans);
  color: var(--saf-charcoal, #1c1710);
}

.saf-gallery-gated__copy {
  margin: 0 0 20px;
  color: #5a554e;
  font-family: var(--saf-font-sans);
}

.saf-gallery-gated__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--saf-gap-3, 12px);
  justify-content: center;
}

.saf-gallery-gated a.saf-gallery-gated__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.5.5 touch target -- improvement over OLD's bare `.saf-btn`. */
  min-height: 44px;
  padding: 0.6rem 1.5rem;
  font-family: var(--saf-font-sans);
  font-weight: 700;
  font-size: var(--saf-text-base, 1rem);
  text-decoration: none;
  border-radius: var(--saf-radius-pill, 9999px);
  border: 2px solid var(--saf-brick-red, #be2727);
  background: var(--saf-brick-red, #be2727);
  color: var(--saf-linen, #f5f1e7);
  transition:
    background var(--saf-transition, 180ms ease),
    color var(--saf-transition, 180ms ease),
    transform var(--saf-transition, 180ms ease);
}

.saf-gallery-gated a.saf-gallery-gated__btn:hover,
.saf-gallery-gated a.saf-gallery-gated__btn:focus,
.saf-gallery-gated a.saf-gallery-gated__btn:focus-visible {
  background: var(--saf-burgundy, #7b181a);
  border-color: var(--saf-burgundy, #7b181a);
  color: var(--saf-linen, #f5f1e7);
  transform: translateY(-1px);
}

.saf-gallery-gated a.saf-gallery-gated__btn--ghost {
  background: transparent;
  color: var(--saf-charcoal, #1c1710);
  border-color: var(--saf-charcoal, #1c1710);
}

.saf-gallery-gated a.saf-gallery-gated__btn--ghost:hover,
.saf-gallery-gated a.saf-gallery-gated__btn--ghost:focus,
.saf-gallery-gated a.saf-gallery-gated__btn--ghost:focus-visible {
  background: var(--saf-charcoal, #1c1710);
  color: var(--saf-linen, #f5f1e7);
  border-color: var(--saf-charcoal, #1c1710);
}

/* ------------------------------------------------------------------ *
 * GAP 4 -- sidebar "About this gallery" detail rows. Typography
 * matches the builder's JetEngine "Date:" meta line directly above it
 * (Helvetica-stack, 15px, muted ink) so the panel reads as one block.
 * ------------------------------------------------------------------ */

.saf-gallery-meta {
  margin: 0;
}

.saf-gallery-meta__row {
  margin: 0 0 6px;
  font-family: var(--saf-font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: #5a554e;
}

.saf-gallery-meta__row:last-child {
  margin-bottom: 0;
}

.saf-gallery-meta a.saf-gallery-meta__link {
  color: var(--saf-link, #be2727);
}

.saf-gallery-meta a.saf-gallery-meta__link:hover,
.saf-gallery-meta a.saf-gallery-meta__link:focus,
.saf-gallery-meta a.saf-gallery-meta__link:focus-visible {
  color: var(--saf-link-hover, #7b181a);
}

/* ------------------------------------------------------------------ *
 * Lightbox overlay -- ported from OLD assets/css/lightbox.css. The
 * overlay nodes are built by lightbox.js (safe-DOM) and appended to
 * <body>, so the control <button>s also collide with the Kit global
 * button rule -- same container-scoped + element-qualified fix.
 * ------------------------------------------------------------------ */

body.saf-lightbox-open {
  overflow: hidden;
}

.saf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(13, 17, 29, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
}

.saf-lightbox__stage {
  max-width: min(90vw, 1400px);
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.saf-lightbox__img {
  max-width: 100%;
  max-height: 90vh;
  /* Floor: any source smaller than this stretches up to 240px (e.g. a
   * 1x1 placeholder rendered at natural size would be a 1px dot on the
   * overlay -- effectively invisible). object-fit:contain preserves
   * the source aspect ratio inside the floor. Real photos exceed both
   * dimensions, so max-* dominates and they are unaffected. */
  /* Viewport-relative, NOT percent -- the flex stage sizes to its
   * child content, so `100%` would collapse against a 1x1 image and
   * the floor would never kick in. 90vw/90vh adapt to narrow
   * viewports where 240px would overflow. */
  min-width: min(240px, 90vw);
  min-height: min(240px, 90vh);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  /* A near-invisible tint so a transparent / 1x1 placeholder source
   * still reads as a framed slot on the dark overlay (the counter +
   * close button already signal the lightbox is open). Real photos
   * cover this entirely. */
  background: rgba(255, 255, 255, 0.04);
}

.saf-lightbox button.saf-lightbox__btn {
  margin: 0;
  cursor: pointer;
  position: absolute;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
  transition: background 0.15s ease;
}

/* :focus enumerated alongside :hover/:focus-visible so the Kit's
 * `button:focus` burgundy never lands on a lightbox control -- the
 * Close button is programmatically focused when the overlay opens. */
.saf-lightbox button.saf-lightbox__btn:hover,
.saf-lightbox button.saf-lightbox__btn:focus,
.saf-lightbox button.saf-lightbox__btn:focus-visible {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

.saf-lightbox button.saf-lightbox__btn--close {
  top: 20px;
  right: 20px;
  font-size: 1.25rem;
}

.saf-lightbox button.saf-lightbox__btn--prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.saf-lightbox button.saf-lightbox__btn--next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.saf-lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 14px;
  border-radius: 999px;
}

/* ------------------------------------------------------------------ *
 * Responsive.
 * ------------------------------------------------------------------ */

/* Tablet + mobile: the builder's 60% body column is only ~380px wide
 * at 768, which `auto-fit` collapses to a SINGLE 380px tile -- a very
 * tall stack lopsided against the sidebar. Force two columns through
 * the whole <=1024 band so the grid keeps a balanced height. (OLD only
 * did this at <=480; the 481-1024 tablet band was the gap.) */
@media (max-width: 1024px) {
  .saf-photo-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .saf-lightbox {
    padding: 12px;
  }
  .saf-lightbox button.saf-lightbox__btn--prev,
  .saf-lightbox button.saf-lightbox__btn--next {
    display: none;
  }
}

/* Respect a reduced-motion preference -- kill the tile hover-scale and
 * lightbox-button transition. Improvement over OLD. */
@media (prefers-reduced-motion: reduce) {
  .saf-photo-grid button.saf-photo-grid__tile,
  .saf-gallery-gated a.saf-gallery-gated__btn,
  .saf-lightbox button.saf-lightbox__btn {
    transition: none;
  }
  .saf-photo-grid button.saf-photo-grid__tile:hover,
  .saf-photo-grid button.saf-photo-grid__tile:focus,
  .saf-photo-grid button.saf-photo-grid__tile:focus-visible,
  .saf-photo-grid button.saf-photo-grid__tile:active,
  .saf-gallery-gated a.saf-gallery-gated__btn:hover,
  .saf-gallery-gated a.saf-gallery-gated__btn:focus,
  .saf-gallery-gated a.saf-gallery-gated__btn:focus-visible {
    transform: none;
  }
}