/* page-venue-registration.css */
.venue-guide-section {
  background-color: var(--color-primary);
}
.venue-guide-section-title-wrap {
  width: 100%;
}
.venue-guide {
  width: 100%;
  min-height: 593px;
  max-width: 1100px;
  display: flex;
  align-items: stretch;
  gap: 68px;
  margin: 60px auto -67px;
}

/* 左欄固定寬度；右欄彈性 */
.venue-guide > .venue-guide__card--left {
  width: 100%;
  max-width: 500px;
  flex-shrink: 0;
  gap: 93px;
  background-image: url(../../images/venue-guide__card-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
}

.venue-guide__column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* 卡片基底 */
.venue-guide__card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.venue-guide__card--primary { 
  gap: 53px;
  min-height: 234px;
  background-image: url(../../images/venue-guide__card--primary-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
}

.venue-guide__card--light {
  flex: 1;
  background-image: url(../../images/venue-guide__card--light-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
}

.venue-guide__card-title {
  font-weight: 500;
  text-align: center;
  align-content: center;
  color: #fff;
  margin-top: -12px;
}

.venue-guide__right-title {
  position: relative;
  left: -12px;
}

/* 標籤列表（左欄 + 右上） */
.venue-guide__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.venue-guide__tag {
  width: 100%;
  max-width: 272px;
  min-height: 40px;
  background-color: #316eac;
  color: #fff;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  box-sizing: border-box;
  font-size: var(--font-size-xl);
}

.venue-guide__tag--gold {
  background-color: #e2ae3b;
}

/* 右下卡片：描述段落 */
.venue-guide__desc {
  width: 100%;
  max-width: 373px;
  text-align: center;
  margin: 20px auto -10px;
  font-size: var(--font-size-xl);
  line-height: 24px;
}

/* 右下卡片：勾選列表 */
.venue-guide__check-list {
  width: 100%;
  max-width: 428px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 18px 19px;
  list-style: none;
  background-color: #e6f3ff;
}

.venue-guide__check-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.venue-guide__check-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.venue-guide__check-text {
  color: #0b2f53;
  text-align: left;
  font-size: var(--font-size-xl);
  line-height: 24px;
  align-self: center;
}

/* one stop */
.diy-vs-section {
  padding: 150px 0 94px;
}
.diy-vs-agency {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 75px;
  color: #000;
  margin: 48px auto 52px;
}

/* ─────── 左半：對比區 ─────── */

.diy-vs-agency__compare {
  width: 100%;
  max-width: 806px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* 頂部徽章列 */
.diy-vs-agency__badges {
  display: flex;
  align-items: center;
  gap: 12px;
}

.diy-vs-agency__badge-ring {
  width: 103px;
  height: 103px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diy-vs-agency__badge-ring--white {
  background-color: #fff;
  box-shadow: inset -1px -6px 16.4px rgba(0, 0, 0, 0.25);
}

.diy-vs-agency__badge-ring--blue {
  background-color: #53a9ff;
  box-shadow: inset -1px -6px 16.4px #1a5b9d;
}

.diy-vs-agency__badge {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diy-vs-agency__badge--white {
  background-color: #fff;
  box-shadow: inset 4px 4px 19px rgba(0, 0, 0, 0.25);
}

.diy-vs-agency__badge--blue {
  background-color: #53a9ff;
  box-shadow: inset 4px 4px 19px #1a5b9d;
  color: #fff;
}

.diy-vs-agency__badge-text {
  font-weight: 500;
  font-size: var(--font-size-xl);
}

.diy-vs-agency__badge--blue .diy-vs-agency__badge-text {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
}

.diy-vs-agency__vs {
  color: #0b2f53;
  font-family: "Lilita One", sans-serif;
  font-weight: 400;
}

/* 三欄對比表 */
.diy-vs-agency__table {
  width: 100%;
  display: flex;
  align-items: stretch;
}

.diy-vs-agency__column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: stretch;
  justify-content: center;
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diy-vs-agency__pill {
  min-height: 64px;
  border-radius: 60px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  box-sizing: border-box;
  text-align: center;
}

.diy-vs-agency__pill--gray {
  background-color: #808080;
}

.diy-vs-agency__pill--blue {
  background: linear-gradient(0deg, #0b2f53, #1969b9);
}

/* 中欄類別卡 */
.diy-vs-agency__categories {
  width: 100%;
  max-width: 248px;
  background-color: #fff;
  border: 2px solid #0b2f53;
  box-sizing: border-box;
  box-shadow: 4px 4px 20.5px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 24px 28px;
  color: #0b2f53;
  margin: 0 -36px;
  z-index: 1;
}

.diy-vs-agency__category {
  text-align: center;
  font-weight: 400;
}

.diy-vs-agency__divider {
  width: 100%;
  margin: 0;
  border: none;
  border-top: 1px solid #0b2f53;
}

/* ─────── 右半：為什麼找代辦 ─────── */

.diy-vs-agency__info {
  position: relative;
  width: 100%;
  max-width: 460px;
  min-height: 460px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b2f53;
}

.diy-vs-agency__info-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(3.12px 3.12px 17.85px rgba(0, 0, 0, 0.25));
  z-index: 0;
}

.diy-vs-agency__info-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 40px 0;
}

.diy-vs-agency__info-intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.diy-vs-agency__info-title {
  font-weight: 500;
}

.diy-vs-agency__info-desc {
  color: #000;
}

.diy-vs-agency__info-body {
  width: 100%;
  max-width: 227px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.diy-vs-agency__info-label {
  width: 168px;
  min-height: 36px;
  background-color: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  box-sizing: border-box;
}

.diy-vs-agency__info-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diy-vs-agency__info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.diy-vs-agency__info-icon {
  width: 27px;
  height: 27px;
  flex-shrink: 0;
}

.section-intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27px;
  color: #000;
}

.section-intro__text {
  text-align: center;
}

.section-intro__divider {
  width: 100%;
  max-width: 878px;
  min-height: 7px;
  border-top: 3px solid #0b2f53;
  border-bottom: 1px solid #0b2f53;
  box-sizing: content-box;
}

/* ==================== 桌面基礎樣式 ==================== */

/* ==================== 大螢幕 (max-width: 1440px) ==================== */
@media (max-width: 1440px) {
  .venue-guide-section {
    padding: 0 10px 48px;
  }

  .diy-vs-section,
  .section-intro {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ==================== 平板 (max-width: 1024px) ==================== */
@media (max-width: 1024px) {
  .venue-guide {
    flex-direction: column;
    gap: 24px;
  }

  .venue-guide__column {
    width: 100%;
    max-width: 100%;
  }

  .venue-guide__list {
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 12px;
  }

  .diy-vs-agency__compare {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .diy-vs-agency__table {
    grid-template-columns: 1fr;
  }

  .diy-vs-agency__info-body {
    flex-direction: column;
    gap: 16px;
  }
}

/* ==================== 768px 以下 ==================== */
@media (max-width: 768px) {
  .venue-guide-section {
    margin-top: 82px;
  }
  .venue-guide-section .section-container {
    margin-top: -54px;
  }
  .diy-vs-section {
  }

  .venue-guide__card {
  }

  .venue-guide {
    gap: 38px;
  }

  .venue-guide > .venue-guide__card--left {
    gap: 53px;
    background-image: url(../../images/venue-guide__card-bg-mobile.webp);
    background-size: contain;
    background-position: top center;
    min-height: 457px;
    margin: 39px auto 0;
  }

  .venue-guide__right-title {
    left: auto;
  }

  .venue-guide__card--primary,
  .venue-guide__card--light {
    background-image: url(../../images/venue-guide__card--primary-bg-mobile.webp);
    background-size: contain;
    background-position: top center;
    min-height: 231px;
  }

  .venue-guide__card-title {
    font-size: 13px;
  }

  .venue-guide__list {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 32px;
  }

  .venue-guide__tag {
    padding: 12px 16px;
    font-size: 0.9375rem;
  }

  .venue-guide__check-list {
    gap: 10px;
  }

  .venue-guide__check-text {
    font-size: 0.875rem;
  }

  .diy-vs-agency__pill {
    padding: 10px 14px;
    font-size: 0.875rem;
  }

  .diy-vs-agency__category {
    padding: 10px 14px;
    font-size: 0.875rem;
  }

  .diy-vs-agency__info-content {
    padding: 1.5rem;
  }

  .diy-vs-agency__info-title {
    font-size: 1rem;
  }

  .section-intro__text {
    font-size: 0.9375rem;
    line-height: 1.7;
  }
}

/* ==================== 小平板 (max-width: 992px) ==================== */
@media (max-width: 992px) {
}

/* ==================== 手機 (max-width: 480px) ==================== */
@media (max-width: 480px) {
  /* ---------- 會址登記區（深藍背景） ---------- */
  .venue-guide-section {
  }

  /* venue-guide：三張卡片改為直排 */
  .venue-guide {
    flex-direction: column;
    align-items: center;
    gap: 38px;
    min-height: 0;
    margin: 0;
    max-width: 310px;
  }

  .venue-guide__column {
    width: 310px;
    flex: none;
    gap: 38px;
  }

  .venue-guide__tag {
    width: 234px;
    max-width: none;
    height: 40px;
    min-height: 40px;
    background-color: #316eac;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    padding: 0;
  }

  .venue-guide__tag--gold {
    background-color: #e2ae3b;
  }

  /* 第三張卡片（NPO顧問事務所） */
  .venue-guide__card--light {
    padding: 0;
    align-items: center;
    gap: 15px;
  }

  .venue-guide__card--light .venue-guide__card-title {
  }

  .venue-guide__desc {
    width: 228px;
    max-width: none;
    color: #000;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    margin: 13px auto 0;
  }

  .venue-guide__check-list {
    width: 257px;
    max-width: none;
    background-color: #e6f3ff;
    padding: 16px 11px;
    margin: 0;
    gap: 12px;
    box-sizing: border-box;
  }

  .venue-guide__check-item {
    gap: 6px;
  }

  .venue-guide__check-icon {
    width: 12px;
    height: 12px;
  }

  .venue-guide__check-text {
    color: #0b2f53;
    font-size: 12px;
    line-height: 14px;
  }

  /* ---------- 一站式代辦服務區 ---------- */
  .diy-vs-section {
    padding: 48px 0 86px;
  }

  /* 由於這節在 mobile 沒有 section-heading，獨立寫 */
  .diy-vs-agency {
    flex-direction: column;
    align-items: center;
    gap: 38px;
    margin: 32px auto 36px;
  }

  .diy-vs-agency__compare {
    max-width: none;
    width: 100%;
    gap: 16px;
  }

  /* 自辦 / V.S / 代辦 徽章 */
  .diy-vs-agency__badge-ring {
    width: 76px;
    height: 76px;
  }

  .diy-vs-agency__badge {
    width: 67.88px;
    height: 67.88px;
    box-shadow: inset 2.95px 2.95px 14.02px rgba(0, 0, 0, 0.25);
  }

  .diy-vs-agency__badge--blue {
    box-shadow: inset 2.95px 2.95px 14.02px #1a5b9d;
  }

  .diy-vs-agency__badge-ring--white {
    box-shadow: inset -0.74px -4.43px 12.1px rgba(0, 0, 0, 0.25);
  }

  .diy-vs-agency__badge-ring--blue {
    box-shadow: inset -0.74px -4.43px 12.1px #1a5b9d;
  }

  .diy-vs-agency__badge-text {
    font-size: 16px;
    font-weight: 500;
  }

  .diy-vs-agency__vs {
    font-size: 28px;
  }

  /* 三欄對比表：左/右為小膠囊，中間為白色直立卡 */
  .diy-vs-agency__table {
    position: relative;
    width: 100%;
    max-width: 358px;
    margin: 0 auto;
    align-items: stretch;
    gap: 0;
  }

  .diy-vs-agency__column {
    flex: 1;
    min-width: 0;
    max-width: 140px;
    gap: 25px;
    justify-content: flex-start;
    padding-top: 7px;
  }

  .diy-vs-agency__pill {
    width: 100%;
    min-height: 64px;
    height: 64px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: normal;
    box-sizing: border-box;
  }

  .diy-vs-agency__pill--blue {
    border-radius: 0 60px 60px 0;
    padding: 0 19.53px 0 0;
  }

  .diy-vs-agency__pill--gray {
    border-radius: 60px 0 0 60px;
    padding: 0 0 0 26px;
  }

  /* 中欄：白色直立卡（與左右欄重疊置中） */
  .diy-vs-agency__categories {
    position: relative;
    width: 79px;
    max-width: none;
    height: 524px;
    border: 2px solid #0b2f53;
    background-color: #fff;
    box-shadow: 4px 4px 10.25px rgba(0, 0, 0, 0.25);
    padding: 0 5px;
    margin: 0;
    gap: 32px;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .diy-vs-agency__category {
    color: #0b2f53;
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .diy-vs-agency__divider {
    width: 100%;
    border-top: 1px solid #0b2f53;
    margin: 0;
  }

  /* ---------- 為什麼會址登記建議找代辦 ---------- */
  .diy-vs-agency__info {
    width: 305px;
    max-width: none;
    min-height: 301px;
    padding: 39px 0;
    align-items: flex-start;
  }

  .diy-vs-agency__info-bg {
  }

  .diy-vs-agency__info-content {
    width: 100%;
    max-width: none;
    padding: 0;
    gap: 12px;
  }

  .diy-vs-agency__info-intro {
    gap: 10px;
  }

  .diy-vs-agency__info-title {
    color: #0b2f53;
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
  }

  .diy-vs-agency__info-desc {
    width: 223px;
    color: #000;
    font-size: 12px;
    line-height: normal;
    margin: 0;
  }

  .diy-vs-agency__info-body {
    width: 168px;
    max-width: none;
    gap: 8px;
  }

  .diy-vs-agency__info-label {
    width: 111px;
    min-height: 24px;
    height: 24px;
    padding: 5px 7px;
  }

  .diy-vs-agency__info-label span {
    font-size: 12px;
    color: #0b2f53;
  }

  .diy-vs-agency__info-list {
    gap: 9px;
  }

  .diy-vs-agency__info-item {
    gap: 5px;
  }

  .diy-vs-agency__info-icon {
    width: 18px;
    height: 18px;
  }

  .diy-vs-agency__info-item span {
    color: #0b2f53;
    font-size: 12px;
    line-height: normal;
  }

  /* ---------- 底部 section-intro ---------- */
  .section-intro {
    width: stretch;
    margin: 0 auto;
    gap: 27px;
  }

  .section-intro__text {
    width: 298px;
    color: #000;
    font-size: 12px;
    line-height: normal;
    text-align: left;
    margin: 0;
  }

  .section-intro__divider {
    width: 320px;
    max-width: none;
  }
}