/* ===========================================================
   認證療癒師名錄 + 預約頁
   =========================================================== */

.healer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding: var(--space-6) 0;
}
@media (min-width: 640px) { .healer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .healer-grid { grid-template-columns: repeat(3, 1fr); } }

.healer-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
}
.healer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.healer-card__media {
  aspect-ratio: 1 / 1;
  background: var(--color-bg-secondary);
  position: relative;
}
.healer-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.healer-card__verified {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: 4px var(--space-3);
  background: var(--color-bg-primary);
  color: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}
.healer-card__body {
  padding: var(--space-5);
}
.healer-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}
.healer-card__title {
  font-size: var(--fs-xs);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}
.healer-card__bio {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.healer-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.healer-card__tag {
  padding: 4px var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
.healer-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}
.healer-card__location {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ---------- Booking page ---------- */
.booking-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
}
@media (min-width: 900px) {
  .booking-layout { grid-template-columns: 320px 1fr; align-items: start; }
}

.booking-healer-panel {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: sticky;
  top: 80px;
}
.booking-healer-panel__avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
  background: var(--color-bg-secondary);
}
.booking-healer-panel__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.booking-healer-panel select {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

/* Calendar */
.calendar {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.calendar__month {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.calendar__nav {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.calendar__nav:hover { background: var(--color-accent-bg); color: var(--color-accent-primary); }

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar__day-label {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  padding: var(--space-2);
  font-weight: var(--fw-medium);
}
.calendar__day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}
.calendar__day:hover:not(.is-disabled) {
  background: var(--color-accent-bg);
  color: var(--color-accent-primary);
}
.calendar__day.is-disabled {
  color: var(--color-text-muted);
  opacity: 0.4;
  cursor: not-allowed;
}
.calendar__day.has-slot {
  font-weight: var(--fw-semibold);
}
.calendar__day.has-slot::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-accent-soft);
}
.calendar__day.is-selected {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
}
.calendar__day.is-selected::after {
  background: var(--color-text-inverse);
}

/* Time slots */
.timeslots {
  margin-top: var(--space-6);
}
.timeslots__title {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-4);
}
.timeslots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}
.timeslot {
  padding: var(--space-3);
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--color-bg-primary);
}
.timeslot:hover {
  border-color: var(--color-accent-primary);
  background: var(--color-accent-bg);
  color: var(--color-accent-primary);
}
.timeslot.is-taken {
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  cursor: not-allowed;
  text-decoration: line-through;
}
.timeslot.is-selected {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-primary);
}

.booking-cta {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
  text-align: center;
}

/* ===========================================================
   認證學員名錄（小卡 grid · 純展示）
   =========================================================== */
.healers-section {
  padding: var(--space-8) 0;
}
.healers-section__header {
  text-align: center;
  margin-bottom: var(--space-7);
}
.healers-section__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--color-accent-primary);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.healers-section__title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-3);
}
.healers-section__lead {
  max-width: 640px;
  margin: 0 auto;
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
}

.alumni-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .alumni-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}

.alumni-card {
  text-align: center;
  padding: var(--space-5) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}
.alumni-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
}
.alumni-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--space-4);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-accent-bg);
}
.alumni-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.alumni-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}
.alumni-card__year {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--color-accent-primary);
  background: var(--color-accent-bg);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
  letter-spacing: 0.05em;
}
.alumni-card__skill {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-snug);
}

/* ===========================================================
   特約療癒師（大卡 · 左圖右文字）
   =========================================================== */
.featured-section {
  background: var(--color-bg-secondary);
  padding: var(--space-9) 0;
}

.featured-list {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.featured-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  transition: all var(--transition-base);
}
@media (min-width: 768px) {
  .featured-card { grid-template-columns: 300px 1fr; }
}
.featured-card:hover {
  box-shadow: var(--shadow-lg);
}

.featured-card__media {
  background: var(--color-bg-secondary);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
@media (min-width: 768px) {
  .featured-card__media { aspect-ratio: auto; height: 100%; min-height: 300px; }
}
.featured-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
.featured-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}
.featured-card__title {
  font-size: var(--fs-sm);
  color: var(--color-accent-primary);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}
.featured-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.featured-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--space-3);
  background: var(--color-accent-bg);
  color: var(--color-accent-primary);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.03em;
}
.featured-card__badge svg {
  flex-shrink: 0;
}
.featured-card__bio {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}
.featured-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.featured-card__tag {
  padding: 4px var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
.featured-card__location {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
.featured-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

/* 莫蘭迪綠 outline 按鈕（給 FB / IG 用） */
.btn--soft {
  background: transparent;
  color: var(--color-accent-soft);
  border: 1px solid var(--color-accent-soft);
}
.btn--soft:hover {
  background: var(--color-accent-soft);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-soft);
}