/* exhibitions_detail.css */

.zs-exhibitions-detail-main {
  background-color: var(--color-bg-soft);
  padding-bottom: 5rem;
}

.zs-exhibitions-detail-banner {
  width: 100%;
  height: 140px !important;
  position: relative;
}

.zs-banner-nav {
  position: absolute;
  right: calc(50% - 450px); /* Align with max-width: 900px container */
  bottom: 0;
  display: flex;
  gap: 0.5rem;
  z-index: 100;
  transform: translateY(50%); /* Overflow half the circle out of banner */
}

.zs-banner-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: var(--color-primary);
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s;
}

.zs-banner-nav-btn:hover {
  background-color: var(--color-primary-hover);
}

.zs-icon-arrow-nav-left,
.zs-icon-arrow-nav-right {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.zs-icon-arrow-nav-left {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>');
}

.zs-icon-arrow-nav-right {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>');
}

.zs-exhibitions-detail-banner .zs-bg-cover {
  width: 100%;
  height: 140px !important;
  min-height: 0 !important;
  overflow: hidden;
}

.zs-exhibitions-detail-banner .zs-bg-cover picture,
.zs-exhibitions-detail-banner .zs-bg-cover img {
  width: 100%;
  height: 140px !important;
  object-fit: cover;
  display: block;
}

.zs-exhibitions-detail-container {
  margin: 0;
  padding: 0;
  background: transparent;
}

.zs-exhibitions-detail-article {
  margin: 0 auto;
  background: #fff;
  padding: 0;
  max-width: 1000px;
}

.zs-article-header {
  padding: 5rem 5% 0;
  margin-bottom: 3rem;
}

.zs-article-header address {
  font-style: normal;
  font-size: 1rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.zs-icon-marker {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="%233F5AB6"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"/></svg>') no-repeat center center;
}

.zs-article-header h1 {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--color-text-strong);
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

.zs-article-header time {
  font-size: 1.2rem;
  font-weight: 700;
  display: block;
}

.zs-article-content {
  padding: 0 5% 4rem;
  font-size: 1.125rem;
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: 0;
}

.zs-article-content p {
  margin: 0 0 1.5rem 0;
}

.zs-article-content strong {
  font-weight: 700;
  color: var(--color-text-strong);
}

.zs-article-content a {
  color: var(--color-primary);
  text-decoration: none;
}

.zs-article-content a:hover {
  text-decoration: underline;
}

.zs-article-contact {
  margin-bottom: 0;
  display: flex;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  background: var(--color-primary);
}

.zs-article-divider {
  display: block;
  height: 1px;
  background: #d9d9d9;
  margin: 2.5rem auto;
}

.zs-contact-left {
  flex: 1 1 0;
}

.zs-contact-right {
  flex: 1 1 0;
  display: flex;
  justify-content: flex-start;
  padding-left: 10%;
}

.zs-btn-calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #fff;
  padding: 2rem 0;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: opacity 0.3s;
}

.zs-btn-calendar:hover {
  opacity: 0.8;
}

.zs-icon-calendar {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%23ffffff"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>') no-repeat center center;
}

.zs-article-browse-grid {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  background-color: #fff;
  padding: 0;
  margin: 0 auto;
}

.zs-btn-browse-card {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 4rem 2rem;
  text-decoration: none;
  color: var(--color-text-strong);
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s;
  min-width: 0;
}

.zs-btn-browse-card span {
  font-size: 1rem;
  font-weight: 500;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zs-btn-browse-card:first-child {
  border-right: 1px solid var(--color-border);
  padding-right: 1rem;
  padding-left: 5%;
}
.zs-btn-browse-card:last-child {
  padding-right: 5%;
  padding-left: 1rem;
}

.zs-btn-browse-card:hover {
  background-color: #fff;
  color: var(--color-primary);
}

.zs-btn-browse-card.zs-btn-prev {
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 5%;
}

.zs-btn-browse-card.zs-btn-next {
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 5%;
  text-align: right;
}

.zs-icon-arrow-left {
  display: inline-block;
  width: 40px;
  height: 12px;
  background-color: currentColor;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16M4 12l6-6M4 12l6 6"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16M4 12l6-6M4 12l6 6"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  flex-shrink: 0;
  visibility: visible;
}

.zs-icon-arrow-right {
  display: inline-block;
  width: 40px;
  height: 12px;
  background-color: currentColor;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12H4M20 12l-6-6M20 12l-6 6"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12H4M20 12l-6-6M20 12l-6 6"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  visibility: visible;
  flex-shrink: 0;
}
@media (max-width: 991px) {
  .zs-banner-nav {
    right: 5%;
  }
  .zs-exhibitions-detail-container {
    padding-top: 0;
  }
  .zs-exhibitions-detail-article {
    padding: 0;
  }
  .zs-article-header {
    padding: 3rem 5% 0;
  }
  .zs-article-content {
    padding: 0 5% 2rem;
  }
  .zs-article-browse-grid {
    padding: 0;
    border-left: none;
    border-right: none;
  }
  .zs-article-contact {
    padding: 0;
  }
  .zs-exhibitions-detail-banner {
    height: 90px !important;
  }
  .zs-exhibitions-detail-banner .zs-bg-cover,
  .zs-exhibitions-detail-banner .zs-bg-cover picture,
  .zs-exhibitions-detail-banner .zs-bg-cover img {
    height: 90px !important;
  }
  .zs-article-header h1 {
    font-size: 2.5rem;
  }
  .zs-article-browse-grid {
    flex-direction: column;
  }
  .zs-btn-browse-card:first-child {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding-right: 1rem;
    padding-left: 5%;
  }
  .zs-btn-browse-card:last-child {
    padding-left: 5%;
    padding-right: 5%;
    justify-content: flex-end;
    text-align: right;
    flex-direction: row;
  }
}