/* "Explore Our Town" landmarks slider (township.php) and single-landmark map box (landmark.php). */

.pto-landmarks-slider {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}

/* Auto-scrolling sliders (assets/js/pto-auto-slider.js) animate on their own — a visible
   scrollbar constantly twitching back and forth as the JS drives scrollLeft reads as broken, not
   intentional, so it's hidden here while the element stays natively scrollable (keyboard/touch/
   trackpad still work — this only hides the bar's own visual chrome). */
.pto-autoscroll-slider {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
}
.pto-autoscroll-slider::-webkit-scrollbar {
  display: none; /* Chrome/Safari/new Edge */
}

.pto-landmark-card {
  scroll-snap-align: start;
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bws-surface, #fff);
  border: 1px solid var(--bws-border, #e5e7eb);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pto-landmark-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pto-landmark-card-image {
  display: block;
  width: 100%;
  height: 140px;
  background-size: cover;
  background-position: center;
  background-color: var(--bws-border, #e5e7eb);
}

.pto-landmark-card-noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--bws-text-muted, #9ca3af);
}

.pto-landmark-card-body {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pto-landmark-card-category {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bws-text-muted, #6b7280);
}

.pto-landmark-card-body strong {
  font-size: 0.95rem;
  line-height: 1.3;
}

@media (max-width: 640px) {
  .pto-landmark-card {
    flex-basis: 200px;
  }
}

/* "Schools in Our Township" slider (township.php, Phase 16) — identical shape/behavior to the
   landmarks slider above (same scroll-snap row of cards), just with a school's own logo shown as
   a small badge overlapping its cover photo, since a school (unlike a landmark) has both assets. */
.pto-schools-slider {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}

.pto-school-slide-card-wrap {
  scroll-snap-align: start;
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
}

.pto-school-slide-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bws-surface, #fff);
  border: 1px solid var(--bws-border, #e5e7eb);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* A school that arrived via a linked whole School Network (core/townships.php's
   pto_township_link_district()) gets a small secondary link to that network's own public page,
   right under the card — never nested inside the card's own <a> (invalid HTML). */
.pto-school-slide-card-network-link {
  display: block;
  margin-top: 6px;
  padding: 0 2px;
  font-size: 0.76rem;
  color: var(--bws-text-muted, #6b7280);
  text-decoration: none;
}
.pto-school-slide-card-network-link:hover {
  color: var(--bws-primary, #8a6508);
  text-decoration: underline;
}

.pto-school-slide-card-wrap:hover .pto-school-slide-card {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pto-school-slide-card-image {
  position: relative;
  display: block;
  width: 100%;
  height: 140px;
  background-size: cover;
  background-position: center;
  background-color: var(--bws-border, #e5e7eb);
}

.pto-school-slide-card-noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--bws-text-muted, #9ca3af);
}

.pto-school-slide-card-logo {
  position: absolute;
  left: 10px;
  bottom: -18px;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--bws-surface, #fff);
  background: var(--bws-surface, #fff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.pto-school-slide-card-body {
  padding: 24px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pto-school-slide-card-body strong {
  font-size: 0.95rem;
  line-height: 1.3;
}

.pto-school-slide-card-meta {
  font-size: 0.78rem;
  color: var(--bws-text-muted, #6b7280);
}

@media (max-width: 640px) {
  .pto-school-slide-card-wrap {
    flex-basis: 200px;
  }
}

/* "Upcoming Events" / "What's Happening Around Town" sliders (township.php, organization.php) —
   same slider shape as landmarks/schools above, plus a category badge and a filter-chip row
   (see pto-events-slider-filters below, driven client-side by assets/js/pto-events-filter.js). */
.pto-events-slider {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}

.pto-event-slide-card {
  scroll-snap-align: start;
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bws-surface, #fff);
  border: 1px solid var(--bws-border, #e5e7eb);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pto-event-slide-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pto-event-slide-card-image {
  display: block;
  width: 100%;
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: var(--bws-border, #e5e7eb);
}

.pto-event-slide-card-noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--bws-text-muted, #9ca3af);
}

.pto-event-slide-card-date {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--bws-surface, #fff);
  border-radius: 8px;
  padding: 4px 8px;
  text-align: center;
  line-height: 1.1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.pto-event-slide-card-date strong {
  display: block;
  font-size: 1rem;
}
.pto-event-slide-card-date span {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--bws-text-muted, #6b7280);
}

.pto-event-slide-card-body {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pto-event-slide-card-category {
  align-self: flex-start;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bws-primary-light, #fdf3d9);
  color: var(--bws-primary, #8a6508);
  border-radius: 999px;
  padding: 2px 8px;
}

.pto-event-slide-card-body strong {
  font-size: 0.95rem;
  line-height: 1.3;
}

.pto-event-slide-card-meta {
  font-size: 0.78rem;
  color: var(--bws-text-muted, #6b7280);
}

@media (max-width: 640px) {
  .pto-event-slide-card {
    flex-basis: 200px;
  }
}

/* Category filter chips above an events slider — a plain button row, active state toggled by
   assets/js/pto-events-filter.js (adds/removes .pto-chip-active + hides non-matching cards). */
.pto-events-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pto-events-filter-chip {
  border: 1px solid var(--bws-border, #e5e7eb);
  background: var(--bws-surface, #fff);
  color: var(--bws-text, #111827);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.82rem;
  cursor: pointer;
}
.pto-events-filter-chip.pto-chip-active {
  background: var(--bws-primary, #8a6508);
  border-color: var(--bws-primary, #8a6508);
  color: #fff;
}