/* =========================
   院所資訊頁 CSS（整合版本）
   ========================= */

.rtm-clinic {
  --c-brand: #604C3E;
  /* hover/active */
  --c-light: #AA978A;
  /* 一般 */
  --c-accent: #C49C69;
  /* 電話/地址小字 */
  --c-text: #604C3E;
  /* 主要文字 */
  font-family: "Noto Serif TC", Sans-serif !important;
  color: var(--c-text);
}

/* ------ 第一層 Tabs（大區域） ------ */
.rtm-tabs {
  display: flex;
  gap: .75rem;
  justify-content: center;
  margin: 1rem 0 1rem;
  flex-wrap: wrap;
  position: relative;
  /* 為放置附近院所按鈕定位 */
}

.rtm-tab {
  min-width: 8rem;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  padding: .85rem 3.2rem;
  border-radius: 10px;
  color: #fff;
  background: var(--c-light);
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
  font-size: 18px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06) inset;
}

.rtm-tab:hover,
.rtm-tab:focus {
  background: var(--c-brand);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.rtm-tab.is-active {
  background: var(--c-brand);
  color: #fff;
}

/* ------ 第二層子區（文字樣式，不要底色） ------ */
.rtm-subtabs {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  margin: .35rem 0 1.25rem;
  flex-wrap: wrap;
}

.rtm-subtab {
  position: relative;
  text-decoration: none;
  font-weight: 700;
  color: var(--c-light);
  padding: .2rem 0;
  transition: color .15s ease;
}

.rtm-subtab:hover,
.rtm-subtab:focus {
  color: var(--c-brand);
  outline: none;
}

.rtm-subtab.is-active {
  color: var(--c-brand);
}

.rtm-subtab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  border-radius: 2px;
  background: var(--c-brand);
}

/* ------ Grid ------ */
.rtm-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1120px;
  margin: 0 auto 2rem;
  padding: 0 12px;
}

@media (max-width:1100px) {
  .rtm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media (max-width:860px) {
  .rtm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width:560px) {
  .rtm-grid {
    grid-template-columns: 1fr
  }
}

/* 卡片預設：上層是圖片、下層是白底 */
a.rtm-card {
  position: relative;
  border-radius: 18px;
  padding: 22px 20px 18px;
  min-height: 140px;
  box-shadow: 0 10px 26px rgba(96, 76, 62, .10), 0 1px 2px rgba(0, 0, 0, .04);
  overflow: hidden;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;
  background-image:
    url('/wp-content/uploads/list_bg.png'),
    linear-gradient(0deg, #fff, #fff);
  background-repeat: no-repeat, no-repeat;
  background-position: right 16px center, 0 0;
  background-size: 130px auto, auto;
}

/* hover：只把下層顏色換成品牌色，圖片仍在最上層 */
a.rtm-card:hover {
  background-image:
    url('/wp-content/uploads/list_bg_w.png'),
    linear-gradient(0deg, var(--c-brand), var(--c-brand));
  color: #fff;
  transform: translateY(-1px);
}

.rtm-card:hover .rtm-k,
.rtm-card:hover .rtm-v {
  color: #fff;
}

.rtm-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  color: inherit;
}

/* 電話/地址「各一行」＋ 顏色 */
.rtm-row {
  display: block;
  margin: .45rem 0
}

.rtm-k {
  display: block;
  font-weight: 800;
  line-height: 1.2
}

.rtm-v {
  color: var(--c-accent);
  display: block;
  line-height: 1.35;
  word-break: break-word;
  font-weight: 700;
}

.rtm-empty {
  text-align: center;
  padding: 2rem;
  color: #999
}

a.rtm-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 子區域間距（手機微調） */
@media (max-width:980px) {
  .rtm-subtabs {
    gap: 1.5rem;
    padding-left: 10px;
    padding-bottom: 10px;
  }
}

/* =========================
   附近院所按鈕與手機排版整合
   ========================= */

/* 附近院所按鈕：桌機版右側 */
.rtm-nearby-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #c9486a;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.15s ease;
  z-index: 5;
}

.rtm-nearby-btn:hover {
  background: #b33f5e;
}

.rtm-nearby-btn svg {
  width: 16px;
  height: 16px;
}

/* 手機版：四個 tab 改為 2x2 網格、附近院所按鈕下方置中 */
@media (max-width: 768px) {
  .rtm-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 16px;
    justify-items: stretch;
  }

  .rtm-tab {
    width: 100%;
    padding: .75rem 1rem;
    font-size: 16px;
    box-sizing: border-box;
  }

  .rtm-nearby-btn {
    position: static;
    transform: none;
    margin-top: 10px;
    grid-column: 1 / -1;
    /* 橫跨整排 */
    justify-self: center;
    /* 水平置中 */
  }
}