/*
 * Salon Base — theme.json で表現できない部分の補助スタイル。
 * フロント（wp_enqueue_scripts）とエディタ（add_editor_style）の両方で読み込まれる。
 */

/* ============================================================
 * 装飾クラス（パターンから使う）
 * ========================================================== */

/* セクションの英字ラベル（見出しの上に置く小さい文字） */
.sb-label {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.6em;
}

/* 見出しの下に引くゴールドの短い線 */
.sb-heading {
	position: relative;
	padding-bottom: 0.75em;
}
.sb-heading::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 46px;
	height: 1px;
	background: var(--wp--preset--color--primary);
}
.sb-heading.has-text-align-left::after {
	left: 0;
	transform: none;
}

/* 細い縦線のアクセント */
.sb-vline {
	width: 1px;
	height: 56px;
	margin: 0 auto;
	background: linear-gradient(180deg, var(--wp--preset--color--primary), transparent);
}

/* カード（枠線つき） */
.sb-card {
	border: 1px solid var(--wp--preset--color--base-3);
	background: var(--wp--preset--color--base);
	border-radius: 2px;
}

/* 細かい注記 */
.sb-fineprint {
	font-size: 0.75rem;
	line-height: 1.9;
	color: var(--wp--preset--color--contrast-2);
}

/* ============================================================
 * ヘッダー
 * ========================================================== */

.sb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--base-3);
}
.admin-bar .sb-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .sb-header {
		top: 46px;
	}
}

/* ============================================================
 * ヒーロー
 * ========================================================== */

.sb-hero {
	min-height: 78svh;
}
.sb-hero .wp-block-cover__inner-container {
	max-width: 900px;
}
.sb-hero__catch {
	font-family: var(--wp--preset--font-family--serif);
	letter-spacing: 0.18em;
	line-height: 1.9;
}

/* ============================================================
 * 料金表
 * ========================================================== */

.sb-price table {
	border-collapse: collapse;
	width: 100%;
}
.sb-price th,
.sb-price td {
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--base-3);
	padding: 0.95em 0.6em;
	text-align: left;
	vertical-align: middle;
}
.sb-price thead th {
	border-bottom: 1px solid var(--wp--preset--color--primary);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--contrast-2);
	font-weight: 500;
}
.sb-price td:last-child,
.sb-price th:last-child {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.sb-price tbody td:last-child {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.0625rem;
	color: var(--wp--preset--color--primary-dark);
}
.sb-price figcaption {
	margin-top: 0.8em;
}

/* ============================================================
 * セラピスト
 * ========================================================== */

.sb-therapists {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	align-items: start;
	gap: clamp(1rem, 3vw, 1.75rem);
}
.sb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 860px) {
	.sb-cols-3,
	.sb-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.sb-cols-2,
	.sb-cols-3,
	.sb-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sb-therapist {
	text-align: center;
	margin: 0;
}
.sb-therapist a {
	text-decoration: none !important;
	color: inherit;
	display: block;
}
.sb-therapist__photo {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 2px;
	background: var(--wp--preset--color--base-2);
}
.sb-therapist__photo img {
	width: 100%;
	/*
	 * WordPress は img に width/height 属性を出力する。height が効いたままだと
	 * aspect-ratio が無視されて画像が縦に伸びるため、必ず height:auto を当てる。
	 */
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.sb-therapist a:hover .sb-therapist__photo img {
	transform: scale(1.04);
}
.sb-therapist__noimg {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: linear-gradient(135deg, var(--wp--preset--color--base-2), var(--wp--preset--color--base-3));
}
.sb-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	line-height: 1.6;
}
.sb-therapist__name {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.0625rem;
	letter-spacing: 0.1em;
	margin: 0.8em 0 0.15em;
}
.sb-therapist__age {
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--contrast-2);
}
.sb-therapist__meta {
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-2);
	letter-spacing: 0.05em;
	margin: 0;
}
.sb-therapist__today {
	margin: 0.5em 0 0;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--primary-dark);
	font-variant-numeric: tabular-nums;
}
.sb-today__empty {
	text-align: center;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	padding: var(--wp--preset--spacing--30) 0;
}

/* セラピスト詳細ページのプロフィール表 */
.sb-profile {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}
.sb-profile th,
.sb-profile td {
	border-bottom: 1px solid var(--wp--preset--color--base-3);
	padding: 0.85em 0.4em;
	text-align: left;
	vertical-align: top;
}
.sb-profile th {
	width: 8em;
	font-weight: 500;
	color: var(--wp--preset--color--contrast-2);
	white-space: nowrap;
}
.sb-profile td {
	white-space: pre-line;
}

/* ============================================================
 * フクエス連携ブロック
 * ========================================================== */

.sb-embed {
	display: flex;
	justify-content: center;
}
.sb-embed iframe {
	display: block;
}

/*
 * 口コミウィジェットの高さ。
 * フクエス公式タグの height="420" は PC幅前提のジャスト寄りの値で、
 * 画面が狭いと本文の折返しが増えて下が切れることがある。
 * テーマ側でタグを生成しているので、ここで画面幅に応じて足しておく。
 */
@media (max-width: 640px) {
	.sb-embed--reviews iframe { height: 520px !important; }
}
@media (max-width: 380px) {
	.sb-embed--reviews iframe { height: 580px !important; }
}

.sb-textlink {
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--20);
}

.sb-banners {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
}
.sb-banners--column {
	flex-direction: column;
}
.sb-banners img {
	display: block;
	max-width: 100%;
	height: auto;
}
.sb-banners a {
	display: inline-block;
	line-height: 0;
	opacity: 0.92;
	transition: opacity 0.2s;
}
.sb-banners a:hover {
	opacity: 1;
}

/* ============================================================
 * 電話・LINE・予約ボタン
 * ========================================================== */

.sb-contact-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.sb-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 250px;
	padding: 0.85em 1.6em;
	border-radius: 999px;
	text-decoration: none !important;
	line-height: 1.45;
	transition: opacity 0.2s;
}
.sb-btn:hover {
	opacity: 0.86;
}
.sb-btn__sub {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	opacity: 0.85;
}
.sb-btn__main {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	letter-spacing: 0.06em;
	font-weight: 500;
}
.sb-btn--tel {
	background: var(--wp--preset--color--dark);
	color: #fff !important;
}
.sb-btn--line {
	background: var(--wp--preset--color--line);
	color: #fff !important;
}
.sb-btn--reserve {
	background: var(--wp--preset--color--primary);
	color: #fff !important;
}
@media (max-width: 600px) {
	.sb-btn {
		width: 100%;
		min-width: 0;
	}
}

/* ============================================================
 * 店舗概要・地図
 * ========================================================== */

table.sb-shop-info {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}
table.sb-shop-info th,
table.sb-shop-info td {
	border-bottom: 1px solid var(--wp--preset--color--base-3);
	padding: 0.95em 0.4em;
	text-align: left;
	vertical-align: top;
}
table.sb-shop-info th {
	width: 10em;
	font-weight: 500;
	color: var(--wp--preset--color--contrast-2);
	letter-spacing: 0.08em;
	white-space: nowrap;
}
@media (max-width: 520px) {
	table.sb-shop-info th,
	table.sb-shop-info td {
		display: block;
		width: auto;
	}
	table.sb-shop-info th {
		border-bottom: none;
		padding-bottom: 0.2em;
		font-size: 0.75rem;
	}
	table.sb-shop-info td {
		padding-top: 0;
	}
}

.sb-map iframe {
	display: block;
	width: 100%;
	border-radius: 2px;
}

/* ============================================================
 * お知らせ一覧
 * ========================================================== */

.sb-posts .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0.2em 0 0.4em;
}
.sb-posts li {
	border-bottom: 1px solid var(--wp--preset--color--base-3);
	padding-bottom: var(--wp--preset--spacing--30);
}
.sb-posts .wp-block-post-date {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--contrast-2);
}

/* ============================================================
 * フッター
 * ========================================================== */

.sb-footer a {
	text-decoration: none;
}
.sb-footer a:hover {
	text-decoration: underline;
}

/*
 * フッターのページ一覧。core/page-list は layout 属性を持たないため、
 * ブロック側の設定では横並びにできない。ここで直接組む。
 */
.sb-footer .wp-block-page-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
}
.sb-footer .wp-block-page-list li {
	margin: 0;
}

/*
 * フッターは背景がダークなので、電話ボタン（既定は同じダーク）が沈む。
 * 枠線のみのスタイルに差し替える。
 */
.sb-footer .sb-btn--tel {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.45);
}
.sb-footer .sb-btn--tel:hover {
	background: rgba(255, 255, 255, 0.08);
	opacity: 1;
}

/* ============================================================
 * エディタ内だけに出る案内枠
 * ========================================================== */

.sb-placeholder {
	border: 1px dashed #c3c4c7;
	background: #f6f7f7;
	color: #50575e;
	padding: 1.3em;
	border-radius: 4px;
	font-size: 0.875rem;
	line-height: 1.75;
	text-align: center;
}