/* =========================================================
  Venue Page (template-venue.php)
  - main.css 기반 + 최소 추가
  - HERO: full-bleed banner + title/buttons overlay
  - Fix: image gap / desktop oversized hero
========================================================= */

/* =========================================================
  기본: 템플릿 페이지 여백/패딩 방어
========================================================= */
.venue-page,
.venue-page #primary,
.venue-page .site-main {
  margin: 0;
}

.venue-page .section {
  margin: 0;
}

/* GeneratePress 쪽 컨테이너/사이드바 조합에서 생기는 미세 여백 방어 */
.venue-page .site-main {
  padding: 0;
}

/* =========================================================
  Breadcrumb (옵션)
========================================================= */
.venue-breadcrumb {
  margin-bottom: 12px;
}
.venue-breadcrumb a {
  text-decoration: none;
  opacity: .9;
}

/* =========================================================
  HERO (핵심)
  - 가로폭 full-bleed
  - 이미지가 배너 높이 100%를 꽉 채우도록 absolute cover
  - 데스크탑에서는 화면 절반 정도로 제한
========================================================= */
.venue-hero {
  padding: 0;
  margin: 0;
}

/* wrap이 있어도 배너는 100vw로 풀폭 */
.venue-hero__banner {
  position: relative;
  overflow: hidden;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* 모바일 기본: 충분히 크게 */
  height: clamp(320px, 56vw, 560px);

  background: rgba(0,0,0,.06);

  /* 일부 환경에서 1px 라인/유격 방어 */
  transform: translateZ(0);
}

/* 데스크탑: 화면 다 먹지 않게 (상하 크롭 OK) */
@media (min-width: 1024px) {
  .venue-hero__banner {
    height: min(50vh, 560px);
    min-height: 420px;
  }
}

/* 이미지가 배너를 100% 꽉 채움 (유격 해결 핵심) */
.venue-hero__img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;

  display: block;

  /* 정말 미세하게 라인이 남는 환경에서만 도움 */
  transform: scale(1.01);
}

/* 오버레이 */
.venue-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.70));
}

/* 텍스트/버튼 컨테이너 */
.venue-hero__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: clamp(18px, 2.4vw, 34px);
}

.venue-hero__meta {
  padding: 22px 18px;
  max-width: 980px;
  padding: clamp(14px, 1.8vw, 22px);
  margin-bottom: clamp(10px, 1.4vw, 18px);
}

.venue-hero__meta .section-title,
.venue-hero__meta .section-desc {
  color: #fff;
   margin: 0 0 10px;
}

.venue-hero__meta .section-title {
  margin-bottom: 10px;
}

/* 버튼 영역 */
.venue-hero__actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.venue-hero__actions .btn {
  text-decoration: none;
}

/* =========================================================
  CONTENT
========================================================= */
.venue-content .wrap.readable {
  padding-top: 18px;
  padding-bottom: 18px;
}

.venue-content .card {
  border-radius: var(--radius, 18px);
}

/* =========================================================
  광고 문의 배너 (옵션)
========================================================= */
.venue-ad__banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

@media (max-width: 720px) {
  .venue-ad__banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
  관련 업체 그리드 (옵션)
========================================================= */
.venue-related__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
  .venue-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .venue-related__grid { grid-template-columns: 1fr; }
}

/* =========================================================
  region-card 컴포넌트(venue에서 재사용)
========================================================= */
.region-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius, 18px);
  text-decoration: none;
  color: inherit;
  min-height: 180px;
  background: rgba(0,0,0,.06);
}

.region-card__media {
  position: absolute;
  inset: 0;
}

.region-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.region-card__body {
  position: absolute;
  inset: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.72));
}

.region-card__title {
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: #fff;
}

.region-card__desc {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  opacity: .9;
  color: #fff;
}