/**
 * Component: Clinic Info
 * クリニック基本情報表示コンポーネント
 */

/* Container */
.c-clinic-info {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xl);
}

/* Section */
.c-clinic-info__section {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--base);
}

/* Heading */
.c-clinic-info__heading {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--tertiary-dark);
  margin: 0;
  padding-bottom: var(--wp--preset--spacing--sm);
  border-bottom: var(--wp--custom--border--width--2) solid
    var(--wp--preset--color--tertiary-light);
}

@media (min-width: 768px) {
  .c-clinic-info__heading {
    font-size: var(--wp--preset--font-size--xl);
  }
}

.c-clinic-info__heading .material-symbols-outlined {
  font-size: 2.4rem;
  color: var(--wp--preset--color--tertiary);
}

/* List */
.c-clinic-info__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--base);
  margin: 0;
}

@media (min-width: 768px) {
  .c-clinic-info__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Item */
.c-clinic-info__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--base);
  background: var(--wp--preset--color--gray-lightest);
  border-radius: var(--wp--custom--border--radius--md);
}

@media (min-width: 768px) {
  .c-clinic-info__item {
    grid-template-columns: 12rem 1fr;
    align-items: start;
  }
}

/* Full width item */
.c-clinic-info__item--full {
  grid-column: 1 / -1;
}

/* Label */
.c-clinic-info__label {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--gray-dark);
  margin: 0;
}

/* Value */
.c-clinic-info__value {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--basic-text);
  margin: 0;
}

.c-clinic-info__value--text {
  line-height: var(--wp--custom--line-height--lg);
  white-space: pre-line;
}

.c-clinic-info__value--example {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xs);
}

.c-clinic-info__value--address {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--sm);
}

/* Example Text */
.c-clinic-info__example {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  font-weight: var(--wp--custom--font-weight--normal);
}

/* Address Row */
.c-clinic-info__address-row {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xs);
}

.c-clinic-info__address-value {
  font-weight: var(--wp--custom--font-weight--medium);
}

.c-clinic-info__address-row--access {
  margin-top: var(--wp--preset--spacing--xs);
  line-height: var(--wp--custom--line-height--lg);
}

/* Link */
.c-clinic-info__link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  color: var(--wp--preset--color--tertiary-dark);
  text-decoration: none;
  transition: opacity var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing--ease);
  word-break: break-all;
}

.c-clinic-info__link:hover {
  opacity: 0.8;
}

.c-clinic-info__link .material-symbols-outlined {
  font-size: 1.6rem;
}

/* Separator */
.c-clinic-info__separator {
  color: var(--wp--preset--color--gray);
}

/* Hours Table */
.c-clinic-info__hours-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.c-clinic-info__hours-table th {
  text-align: center;
  padding: var(--wp--preset--spacing--sm);
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--tertiary-dark);
  background: var(--wp--preset--color--tertiary-lightest);
  border-radius: var(--wp--custom--border--radius--sm);
  min-width: 4rem;
  font-size: var(--wp--preset--font-size--base);
  vertical-align: middle;
}

@media (min-width: 768px) {
  .c-clinic-info__hours-table th {
    min-width: 5rem;
    font-size: var(--wp--preset--font-size--lg);
  }
}

.c-clinic-info__hours-table td {
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--base);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--line-height--lg);
  vertical-align: middle;
}

@media (min-width: 768px) {
  .c-clinic-info__hours-table td {
    padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
  }
}

/* 時間範囲の複数行表示（<br>で区切られた行） */
.c-clinic-info__hours-table td {
  white-space: normal;
}

.c-clinic-info__hours-table tr:not(:last-child) th,
.c-clinic-info__hours-table tr:not(:last-child) td {
  border-bottom: var(--wp--custom--border--width--2) solid
    var(--wp--preset--color--gray-lighter);
}

/* Closed Day Indicator */
.c-clinic-info__closed {
  color: var(--wp--preset--color--error);
  font-weight: var(--wp--custom--font-weight--medium);
}

/* Notice Text */
.c-clinic-info__notice {
  margin-top: var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray-dark);
  line-height: var(--wp--custom--line-height--base);
}

/* SNS Grid */
.c-clinic-info__sns-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--base);
}

@media (min-width: 768px) {
  .c-clinic-info__sns-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* SNS Link */
.c-clinic-info__sns-link {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--base);
  background: var(--wp--preset--color--white);
  border: var(--wp--custom--border--width--2) solid
    var(--wp--preset--color--gray-light);
  border-radius: var(--wp--custom--border--radius--md);
  text-decoration: none;
  color: var(--wp--preset--color--basic-text);
  transition: all var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing--ease);
}

.c-clinic-info__sns-link:hover {
  border-color: var(--wp--preset--color--tertiary);
  background: var(--wp--preset--color--tertiary-lightest);
  opacity: 0.9;
}

/* SNS Icon */
.c-clinic-info__sns-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 2rem;
  font-weight: var(--wp--custom--font-weight--bold);
  border-radius: var(--wp--custom--border--radius--circle);
  flex-shrink: 0;
}

/* SNS Name */
.c-clinic-info__sns-name {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--font-weight--medium);
}

@media (min-width: 768px) {
  .c-clinic-info__sns-name {
    font-size: var(--wp--preset--font-size--base);
  }
}

/* SNS Specific Colors */
.c-clinic-info__sns-link--instagram .c-clinic-info__sns-icon {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: var(--wp--preset--color--white);
}

.c-clinic-info__sns-link--facebook .c-clinic-info__sns-icon {
  background: #1877f2;
  color: var(--wp--preset--color--white);
}

.c-clinic-info__sns-link--twitter .c-clinic-info__sns-icon {
  background: #000000;
  color: var(--wp--preset--color--white);
}

.c-clinic-info__sns-link--youtube .c-clinic-info__sns-icon {
  background: #ff0000;
  color: var(--wp--preset--color--white);
}

.c-clinic-info__sns-link--line .c-clinic-info__sns-icon {
  background: #00b900;
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--sm);
}

.c-clinic-info__sns-link--tiktok .c-clinic-info__sns-icon {
  background: #000000;
  color: var(--wp--preset--color--white);
}