.temple-detail-hero {
  min-height: 390px;
  background-image:
    linear-gradient(135deg, rgba(26, 22, 16, 0.94) 0%, rgba(45, 36, 24, 0.86) 56%, rgba(26, 22, 16, 0.72) 100%),
    url("https://www.buddhaparisa.org/img/banner.jpg");
  background-position: center 42%;
  background-size: cover;
}

.temple-detail-main {
  display: grid;
  gap: 2.6rem;
}

.temple-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 1.5rem;
  align-items: start;
}

.temple-story {
  min-width: 0;
}

.temple-story p {
  margin: 0 0 1.2rem;
  color: var(--ink-mid);
  font-size: 1.06rem;
  line-height: 2;
}

.temple-portrait-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: start;
  justify-self: center;
  width: min(100%, 420px);
  margin-top: 3.15rem;
  border: 1px solid var(--border);
  background: var(--cream-d);
  padding: 1rem;
}

.temple-portrait-card img {
  display: block;
  width: min(100%, 360px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.temple-portrait-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 0.55rem;
  width: 100%;
  margin-top: 1rem;
}

.temple-portrait-meta span {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(200, 169, 110, 0.56);
  background: rgba(250, 247, 240, 0.78);
  color: var(--ink-mid);
  font-family: "Noto Sans Thai", "Sarabun", sans-serif;
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: center;
}

.temple-portrait-meta strong {
  color: var(--gold-dk);
  font-weight: 500;
}

.temple-map-nearby {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr);
  gap: 1.5rem;
  align-items: start;
}

.temple-map-panel,
.temple-nearby-panel {
  min-width: 0;
}

.temple-map-panel iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 1px solid var(--border);
  background: var(--cream-d);
}

.temple-nearby-list {
  display: grid;
  border: 1px solid var(--border);
  background: var(--cream-d);
}

.temple-nearby-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 48px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink-mid);
  text-decoration: none;
}

.temple-nearby-list a:last-child {
  border-bottom: 0;
}

.temple-nearby-list a:hover {
  background: var(--cream);
  color: var(--ink);
}

.temple-nearby-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temple-nearby-list small {
  color: var(--gold-dk);
  font-size: 0.9rem;
}

.temple-nearby-empty {
  min-height: 48px;
  padding: 0.85rem 1rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.temple-detail-search {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .temple-detail-hero {
    min-height: 340px;
  }

  .temple-detail-grid,
  .temple-map-nearby {
    grid-template-columns: 1fr;
  }

  .temple-detail-grid {
    align-items: start;
  }

  .temple-portrait-card {
    margin-top: 0;
  }

  .temple-map-panel iframe {
    height: 360px;
  }
}

@media (max-width: 600px) {
  .temple-detail-hero {
    min-height: 360px;
  }

  .temple-map-panel iframe {
    height: 320px;
  }

  .temple-nearby-list a {
    min-height: 46px;
    padding: 0 0.85rem;
  }
}