.wons-temple-directory {
  --directory-navy: var(--we-color-primary, #4e4035);
  --directory-gold: var(--we-color-accent, #c6a24a);
  --directory-ivory: var(--we-color-background, #f6efe4);
  --directory-bluegray: #d8c7ae;
  --directory-text: var(--we-color-text, #5f564f);
  color: var(--directory-text);
  background: #fff;
}

.wons-temple-directory *,
.wons-temple-directory *::before,
.wons-temple-directory *::after { box-sizing: border-box; }
.wons-temple-directory button,
.wons-temple-directory input { font: inherit; }
.wons-temple-directory button { cursor: pointer; }
.wons-temple-directory [hidden] { display: none !important; }
.wons-temple-directory__shell { width: min(calc(100% - 48px), 1440px); margin-inline: auto; }

.wons-temple-directory__hero {
  background:
    radial-gradient(circle at 82% 28%, rgba(198, 162, 74, .28), transparent 25%),
    linear-gradient(90deg,
      rgba(38, 37, 34, min(1, calc(var(--wons-directory-hero-overlay, .72) + .18))),
      rgba(78, 64, 53, var(--wons-directory-hero-overlay, .72)) 58%,
      rgba(78, 64, 53, max(.16, calc(var(--wons-directory-hero-overlay, .72) - .28)))
    ),
    var(--wons-directory-hero-image, linear-gradient(135deg, #262522 0%, var(--directory-navy) 58%, #4e4035 100%)) var(--wons-directory-hero-position, center center) / cover no-repeat,
    var(--directory-navy);
}
.wons-temple-directory__eyebrow { color: #e4c870; }
.wons-temple-directory__description { color: rgba(255,255,255,.74); }
.wons-temple-directory__body { padding-block: clamp(56px, 7vw, 100px) clamp(100px, 12vw, 170px); }

.wons-temple-directory__controls { display: grid; gap: 24px; }
.wons-temple-directory__districts { display: flex; flex-wrap: wrap; gap: 9px; }
.wons-temple-directory__districts button {
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid rgba(78,64,53,.18);
  border-radius: 999px;
  color: var(--directory-navy);
  background: #fff;
  font-size: 14px;
  font-weight: 750;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.wons-temple-directory__districts button:hover,
.wons-temple-directory__districts button:focus-visible { border-color: var(--directory-gold); transform: translateY(-2px); }
.wons-temple-directory__districts button.is-active { border-color: var(--directory-navy); color: #fff; background: var(--directory-navy); }
.wons-temple-directory__districts button span { margin-left: 5px; color: var(--directory-gold); font-size: 12px; }
.wons-temple-directory__districts button.is-active span { color: #f0d680; }

.wons-temple-directory__search { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; border: 1px solid rgba(78,64,53,.2); background: #fff; }
.wons-temple-directory__search input { min-width: 0; height: 62px; padding: 0 22px; border: 0; outline: 0; color: var(--directory-text); background: transparent; font-size: 16px; }
.wons-temple-directory__search input:focus { box-shadow: inset 0 0 0 2px var(--directory-gold); }
.wons-temple-directory__search button { min-width: 92px; border: 0; color: #fff; background: var(--directory-navy); font-weight: 800; }
.wons-temple-directory__search button.is-clear { color: var(--directory-navy); background: var(--directory-bluegray); }
.wons-temple-directory__summary { display: flex; justify-content: space-between; gap: 24px; margin: 26px 0 20px; color: var(--we-color-muted, #8a7e72); font-size: 14px; }
.wons-temple-directory__summary p { margin: 0; }
.wons-temple-directory__summary strong { color: var(--directory-navy); }

.wons-temple-directory__layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); align-items: start; gap: clamp(24px, 4vw, 54px); }
.wons-temple-directory__map-column { position: sticky; top: 112px; }
.wons-temple-directory__map-stage { min-height: min(720px, calc(100svh - 150px)); border-radius: 4px; overflow: hidden; box-shadow: 0 24px 70px rgba(78,64,53,.15); }
.wons-temple-directory__map-stage .wons-temple-map { min-height: inherit; }

.wons-temple-directory__results { min-width: 0; }
.wons-temple-directory__cards { display: grid; gap: 14px; }
.wons-temple-directory__empty { padding: 72px 24px; border: 1px solid rgba(78,64,53,.15); color: var(--we-color-muted, #8a7e72); background: var(--directory-ivory); text-align: center; }
.wons-temple-directory-card { position: relative; overflow: hidden; border: 1px solid rgba(78,64,53,.14); background: #fff; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.wons-temple-directory-card:hover,
.wons-temple-directory-card.is-active { border-color: rgba(198,162,74,.72); box-shadow: 0 16px 38px rgba(78,64,53,.12); transform: translateY(-2px); }
.wons-temple-directory-card__main { display: grid; width: 100%; min-height: clamp(176px, 19vw, 196px); grid-template-columns: clamp(176px, 38%, 196px) minmax(0, 1fr); align-items: stretch; }
.wons-temple-directory-card__focus { display: grid; width: 100%; min-height: 100%; align-items: start; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.wons-temple-directory-card__visual { display: grid; width: 100%; aspect-ratio: 1 / 1; align-self: start; place-items: center; overflow: hidden; background: linear-gradient(145deg, var(--directory-bluegray), #f2eee2); }
.wons-temple-directory-card__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wons-temple-directory-card__visual:not(.has-image) img { width: 54%; height: auto; object-fit: contain; }
.wons-temple-directory-card__content { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 20px 22px 64px; }
.wons-temple-directory-card__region { margin-bottom: 8px; color: #806515; font-size: 11px; font-weight: 850; letter-spacing: .08em; }
.wons-temple-directory-card__title { margin: 0; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.wons-temple-directory-card__content strong { color: var(--directory-navy); font-size: 23px; line-height: 1.25; letter-spacing: -.035em; }
.wons-temple-directory-card__address { display: -webkit-box; margin-top: 11px; overflow: hidden; color: #5d6876; font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: keep-all; overflow-wrap: anywhere; }
.wons-temple-directory-card__manager { margin-top: 8px; color: #7b838e; font-size: 12px; }
.wons-temple-directory-card__sns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.wons-temple-directory-card__sns a { display: inline-flex; min-height: 27px; align-items: center; padding: 0 9px; border: 1px solid rgba(78,64,53,.16); border-radius: 999px; color: var(--directory-navy); background: #fff; font-size: 10px; font-weight: 800; line-height: 1; text-decoration: none; }
.wons-temple-directory-card__sns a:hover,
.wons-temple-directory-card__sns a:focus-visible { border-color: var(--directory-gold); transform: translateY(-1px); }
.wons-temple-directory-card__sns .is-instagram { color: #a42c77; background: #fff5fb; }
.wons-temple-directory-card__sns .is-youtube { color: #c32727; background: #fff5f5; }
.wons-temple-directory-card__sns .is-band { color: #16894d; background: #f1fbf5; }
.wons-temple-directory-card__actions { position: absolute; z-index: 2; right: 18px; bottom: 16px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: calc(62% - 30px); padding: 0; }
.wons-temple-directory-card__actions button,
.wons-temple-directory-card__actions a { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid rgba(78,64,53,.18); color: var(--directory-navy); background: #fff; font-size: 12px; font-weight: 750; text-decoration: none; }
.wons-temple-directory-card__actions button:hover,
.wons-temple-directory-card__actions button:focus-visible,
.wons-temple-directory-card__actions a:hover,
.wons-temple-directory-card__actions a:focus-visible { border-color: var(--directory-gold); color: #806515; }
.wons-temple-directory-card__actions .is-program { border-color: var(--directory-navy); color: #fff; background: var(--directory-navy); }
.wons-temple-directory-card__actions .is-program:hover,
.wons-temple-directory-card__actions .is-program:focus-visible { border-color: #806515; color: #fff; background: #806515; }
.wons-temple-directory-card__actions .is-call { display: none; }

.wons-temple-directory__pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 28px; }
.wons-temple-directory__pagination button { width: 38px; height: 38px; border: 1px solid rgba(78,64,53,.18); color: var(--directory-navy); background: #fff; font-weight: 750; }
.wons-temple-directory__pagination button:hover,
.wons-temple-directory__pagination button:focus-visible { border-color: var(--directory-gold); }
.wons-temple-directory__pagination button.is-active { border-color: var(--directory-navy); color: #fff; background: var(--directory-navy); }

@media (max-width: 1024px) {
  .wons-temple-directory__layout { grid-template-columns: 1fr; }
  .wons-temple-directory__map-column { position: static; }
  .wons-temple-directory__map-stage { min-height: 560px; }
  .wons-temple-directory__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wons-temple-directory-card__main { min-height: 168px; grid-template-columns: minmax(156px, 36%) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .wons-temple-directory__cards { grid-template-columns: 1fr; }
  .wons-temple-directory-card__main { min-height: 180px; grid-template-columns: 180px minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .wons-temple-directory__shell { width: min(calc(100% - 32px), 1440px); }
  .wons-temple-directory__hero {
    background-image:
      radial-gradient(circle at 82% 28%, rgba(198, 162, 74, .22), transparent 28%),
      linear-gradient(180deg, rgba(38,37,34,.38), rgba(38,37,34,.9)),
      var(--wons-directory-hero-mobile-image, var(--wons-directory-hero-image, linear-gradient(135deg, #262522, var(--directory-navy))));
  }
  .wons-temple-directory__districts { flex-wrap: nowrap; margin-right: -16px; padding-right: 16px; overflow-x: auto; scrollbar-width: none; }
  .wons-temple-directory__districts::-webkit-scrollbar { display: none; }
  .wons-temple-directory__districts button { flex: 0 0 auto; }
  .wons-temple-directory__search { grid-template-columns: minmax(0, 1fr) 68px; }
  .wons-temple-directory__search button { min-width: 68px; }
  .wons-temple-directory__search button.is-clear { grid-column: 1 / -1; min-height: 44px; }
  .wons-temple-directory__summary { align-items: flex-start; flex-direction: column; gap: 7px; }
  .wons-temple-directory__map-stage { min-height: 440px; }
  .wons-temple-directory__cards { grid-template-columns: 1fr; }
  .wons-temple-directory-card__actions .is-call {
    display: inline-flex;
    border-color: #2f6b4f;
    color: #fff;
    background: #2f6b4f;
  }
  .wons-temple-directory-card__actions .is-call:hover,
  .wons-temple-directory-card__actions .is-call:focus-visible { border-color: #24563f; color: #fff; background: #24563f; }
}

@media (max-width: 420px) {
  .wons-temple-directory-card__main { min-height: 148px; grid-template-columns: 148px minmax(0, 1fr); }
  .wons-temple-directory-card__content { padding: 16px 14px 96px; }
  .wons-temple-directory-card__content strong { font-size: 21px; }
  .wons-temple-directory-card__address { -webkit-line-clamp: 1; }
  .wons-temple-directory-card__manager { display: none; }
  .wons-temple-directory-card__actions { right: 12px; bottom: 12px; gap: 5px; max-width: calc(100% - 172px); }
  .wons-temple-directory-card__actions button,
  .wons-temple-directory-card__actions a { min-height: 32px; padding-inline: 9px; font-size: 11px; }
}