/**
 * Shared photo-toolbar styling for place archive templates.
 *
 * The toolbar markup lived only in place-city.php, so its styling lived only
 * in place-city.css and state/sublocation archives rendered no toolbar at all
 * (place-state.php already enqueued the toolbar JS and defined the gallery id
 * -- only the markup was missing). Extracted here for the same reason
 * place-photo-map.css was: one copy, every template.
 *
 * The base rules below are a verbatim copy of place-city.css lines 750-943 so
 * city pages render byte-identically; that copy in place-city.css is now
 * redundant and can be deleted in a separate, reviewable pass.
 */

.pa-toolbar.psg-toolbar.place-photo-toolbar {
  width: 100%;
  margin: 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-search {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1 1 180px;
  min-width: 0;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-search-input {
  flex: 1;
  height: 38px;
  padding: 0 38px 0 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.88rem;
  font-family:
    "Source Sans 3",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  transition:
    border-color 0.14s ease,
    background 0.14s ease;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-search-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-search-input:focus {
  border-color: var(--place-accent);
  background: rgba(255, 255, 255, 0.1);
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-search-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 38px;
  height: 38px;
  background: var(--place-accent);
  border: 0;
  border-radius: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-search-btn:hover {
  filter: brightness(1.08);
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-sort {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
  flex-shrink: 0;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-sort-btn {
  height: 38px;
  min-width: 118px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  line-height: 1;
  transition:
    background 0.13s ease,
    color 0.13s ease,
    box-shadow 0.13s ease,
    border-color 0.13s ease;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-sort-btn:last-child {
  border-right: 0;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-sort-btn:hover {
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.88);
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-sort-btn.is-active {
  background: linear-gradient(
    180deg,
    rgba(229, 66, 159, 0.22) 0%,
    rgba(229, 66, 159, 0.12) 100%
  );
  box-shadow: inset 0 0 0 2px rgba(229, 66, 159, 0.88);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-sort-btn.is-active::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff66b8;
  box-shadow: 0 0 0 3px rgba(229, 66, 159, 0.22);
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-slideshow-btn {
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(
    180deg,
    rgba(229, 66, 159, 0.22) 0%,
    rgba(229, 66, 159, 0.12) 100%
  );
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.13s ease,
    filter 0.13s ease,
    opacity 0.13s ease;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-slideshow-btn:hover,
.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-slideshow-btn:focus {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-slideshow-btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.place-photo-toolbar .psg-count {
  margin-left: auto;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

.place-photo-toolbar .psg-filter-status {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 12px;
}

.place-photo-toolbar .psg-filter-status strong {
  color: #fff;
}

/* Thumbnail density toggle. The buttons drive pa-density-toggle.js, which is
   shared with photo sets, the photo archive, tag archives and search -- it
   only sets body[data-pa-density] and persists the choice in localStorage, so
   place archives are a consumer of the existing control, not a second copy.

   Styling is a port of the set's copy in photo-set.css: a segmented control
   (shared outer border, per-button dividers, square corners) rather than the
   rounded pill with gaps this file carried before. --place-accent-rgb stands
   in for the set's per-set --photo-set-accent-rgb. */
.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-density-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-density-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  min-width: 38px;
  padding: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  line-height: 1;
  transition: background 0.13s ease, color 0.13s ease;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-density-btn svg {
  display: block;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-density-btn:last-child {
  border-right: 0;
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-density-btn:hover {
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.88);
}

.pa-toolbar.psg-toolbar.place-photo-toolbar .pa-density-btn.is-active {
  background: linear-gradient(
    180deg,
    rgba(var(--place-accent-rgb, 229, 66, 159), 0.22) 0%,
    rgba(var(--place-accent-rgb, 229, 66, 159), 0.12) 100%
  );
  box-shadow: inset 0 0 0 2px rgba(var(--place-accent-rgb, 229, 66, 159), 0.88);
  color: #fff;
}

/* Grid gutter matched to the photo-set gallery. The set's base 1.75rem is
   overridden per breakpoint - notably down to 0.5rem on desktop - so matching
   only the base value left place grids far looser than the set at the width
   most people view them. Declared in the same order photo-set.css uses so the
   cascade resolves identically:
     >= 1025px  0.5rem
     601-1024   1.5rem
     <= 600px   1.25rem
   This file loads after the per-template stylesheet, so these win.

   Column count is matched here for the same reason. The per-template sheets
   disagreed with the set and with each other: place-state.css went to 3
   columns under 980px and 2 under 720px, and place-city.css went to 1 under
   720px, while the set is 2 columns everywhere down to 600px and 1 below it.
   State pages were therefore showing 2 thumbnails per row on a phone where
   the set shows one full-width. Both declarations are plain .place-photo-grid
   (0,1,0), so the body[data-pa-density] rules further down still win. */
.place-photo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
}

@media (min-width: 1025px) {
  .place-photo-grid {
    gap: 0.5rem;
  }
}

@media (max-width: 1024px) {
  .place-photo-grid {
    gap: 1.5rem;
  }
}

@media (max-width: 600px) {
  .place-photo-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  body[data-pa-density="compact"] .place-photo-grid {
    gap: 6px;
  }
}

/* Small side inset so the grid doesn't press against the section border.
   Previously zeroed to match the flush set gallery, but the set gallery has
   no surrounding bordered card — the place section does, so a small gutter
   reads better. Top/bottom stay 0; the toolbar and grid gap provide that spacing. */
#place-photos {
  padding: 0 8px;
}

/* Photo cards matched to the set gallery. The set crops to 3:2
   (.photo-set-card-link) and draws no chrome at all - .photo-set-item is just
   position:relative - while the place templates cropped to 4:3 inside a
   bordered, shadowed card. Declared here rather than edited into each of the
   three per-template stylesheets. */
.place-photo-item {
  border: 0;
  background: none;
  box-shadow: none;
}

.place-photo-item img {
  aspect-ratio: 3 / 2;
}

.place-photo-item__set-name {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 3px 5px 4px;
  overflow: hidden;
  background: rgba(7, 9, 12, .42);
  color: rgba(255, 255, 255, .92);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 768px) {
  .place-photo-item__set-name {
    left: 7px;
    bottom: 7px;
    max-width: calc(100% - 14px);
    padding: 2px 4px 3px;
    font-size: .64rem;
  }
}

/* On-grid caption popup, ported from photo-set.css so hidden captions can be
   read here the same way. Resting style is deliberately quiet - a faint disc,
   louder on hover/focus/open. The lightbox button holds the top-right corner,
   so this sits bottom-right. */
.place-photo-item__caption-info-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 14, 20, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.place-photo-item__caption-info-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Lights up on hovering the whole card, not just the button itself -- the
   button is small and quiet at rest, so the card hover is the real affordance.
   This is what photo-set.css does. */
.place-photo-item:hover .place-photo-item__caption-info-btn,
.place-photo-item:focus-within .place-photo-item__caption-info-btn,
.place-photo-item__caption-info-btn:hover,
.place-photo-item__caption-info-btn:focus,
.place-photo-item__caption-info-btn[aria-expanded="true"] {
  background: rgba(var(--place-accent-rgb, 229, 66, 159), 0.88);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

@media (hover: none) {
  /* No pointer to hover with, so the quiet resting style is what touch
     visitors see until they tap it - slightly larger than the desktop resting
     size since there's no hover state to also serve as a size cue. */
  .place-photo-item__caption-info-btn {
    width: 26px;
    height: 26px;
  }

  .place-photo-item__caption-info-btn svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 720px) {
  .place-photo-item__caption-info-btn {
    width: 18px;
    height: 18px;
    right: 4px;
    bottom: 4px;
  }

  .place-photo-item__caption-info-btn svg {
    width: 11px;
    height: 11px;
  }

  /* Keep the small visible circle easy to tap. */
  .place-photo-item__caption-info-btn::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
  }
}

/* The popup is the same clipped figcaption, un-clipped and repositioned while
   JS toggles .is-open. Full text, no "More" step - opening it was already a
   deliberate click. */
.place-photo-item__caption--popup.is-open {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 48px;
  top: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.6rem 0.7rem;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  z-index: 4;
  background: rgba(10, 14, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Un-clamp inside the popup. .place-photo-item__caption-body carries a
   2-line -webkit-line-clamp for the in-grid caption, and the only existing
   escape was .is-expanded, which the "More" button sets -- the popup sets
   .is-open instead, so without this the popup opened to a 2-line excerpt
   with no way to read the rest. photo-set.css has the same rule. */
.place-photo-item__caption--popup.is-open .place-photo-item__caption-body {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Density breakpoints copied from photo-set.css so a given setting produces
   the same column count on both surfaces. */
body[data-pa-density="compact"] .place-photo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 601px) {
  body[data-pa-density="compact"] .place-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-pa-density="large"] .place-photo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  body[data-pa-density="compact"] .place-photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Narrow-screen layout, ported from photo-set.css. Switching the row to a
   grid keeps the search field and the density control on one line instead of
   letting flex-wrap drop the density buttons onto a line of their own. The
   set's grid reserves a middle column for its sort control; this toolbar has
   none, so search spans columns 1-2 and density stays in column 3. */
@media (max-width: 860px) {
  .pa-toolbar.psg-toolbar.place-photo-toolbar .pa-toolbar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem;
  }

  .pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-search {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-search-input {
    width: 100%;
    min-width: 0;
    padding-left: 8px;
    padding-right: 30px;
    height: 44px;
  }

  .pa-toolbar.psg-toolbar.place-photo-toolbar .pa-tb-search-btn {
    width: 28px;
    height: 44px;
  }

  .pa-toolbar.psg-toolbar.place-photo-toolbar .pa-density-toggle {
    grid-column: 2;
    grid-row: 1;
  }

  .pa-toolbar.psg-toolbar.place-photo-toolbar .pa-density-btn {
    height: 42px;
    width: 32px;
    min-width: 32px;
  }

  .place-photo-toolbar .psg-count {
    grid-column: 1 / 3;
    grid-row: 2;
    margin-left: 0;
  }
}

/* Phones: the single-column "large" density is meaningless when the grid is
   already near one column, and dropping it buys width for the other two. */
@media (max-width: 600px) {
  .pa-toolbar.psg-toolbar.place-photo-toolbar .pa-density-btn--large {
    display: none;
  }
}

/* Touch widths: drop the top-right expand icon when the owner set is in
   "Open lightbox + View full post" mode. In that mode tapping the photo
   already opens the lightbox (see the .place-photo-item__post-link handler in
   place-archive.php), so the icon is a redundant overlay on a small thumbnail.
   Scoped to that mode on purpose -- in the other modes tapping the photo
   navigates to the post, and this icon is the only way into the lightbox.

   place-city.css pins the icon to opacity:1 under 720px, so this uses the
   same breakpoint. Hiding it is display:none rather than opacity so it
   cannot be tapped; PhotoSwipe still reads the anchors via querySelectorAll
   for its slide list, which CSS does not affect. */
@media (max-width: 720px) {
  .place-photo-item[data-place-open-lightbox="1"] .place-photo-item__lightbox {
    display: none;
  }
}