/*
Theme Name: QAI
Theme URI: https://qai.co.jp/
Author: 株式会社QAI一級建築士事務所
Description: QAI一級建築士事務所のためのブロックテーマ。余白と写真で見せる、装飾のない構成。欧文はInter、和文はOS標準書体。
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qai
Tags: full-site-editing, block-patterns, portfolio, one-column, editor-style
*/

/* 画像は常に幅いっぱいまで伸びる */
.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ギャラリーのキャプションは控えめに */
.wp-block-gallery figcaption,
.wp-block-image figcaption {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.02em;
}

/* 概要表：罫線は横だけ、数字は桁を揃える */
.wp-block-table table {
	border-collapse: collapse;
	font-feature-settings: "tnum" 1, "zero" 1;
}

.wp-block-table td,
.wp-block-table th {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.7em 1em 0.7em 0;
	text-align: left;
	vertical-align: top;
	font-weight: 400;
}

.wp-block-table th {
	width: 9em;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	white-space: nowrap;
}

/* 一覧カード：写真の下の作品名と補足 */
.wp-block-columns .wp-block-column > .wp-block-heading {
	margin-top: 0.8em;
	margin-bottom: 0.2em;
	line-height: 1.5;
}

.wp-block-columns .wp-block-column > .wp-block-heading a {
	text-decoration: none;
}

.wp-block-columns .wp-block-column > .wp-block-heading a:hover {
	opacity: 0.6;
}

/* 写真にゆっくり反応させる */
.wp-block-image a img {
	transition: opacity 0.4s ease;
}

.wp-block-image a:hover img {
	opacity: 0.75;
}

/* ナビゲーション：現在のページを示す */
.wp-block-navigation .current-menu-item a {
	opacity: 0.45;
}

/* 見出しの直後の余白を詰める */
h2.wp-block-heading {
	margin-top: 3.5em;
}

h2.wp-block-heading:first-child {
	margin-top: 0;
}

/* サイトタイトル */
.wp-block-site-title a {
	text-decoration: none;
}

.wp-block-site-title a:hover {
	opacity: 0.6;
	text-decoration: none;
}

/* メニュー */
.qai-nav {
	margin: 0;
	letter-spacing: 0.12em;
}

.qai-nav a {
	margin: 0 1.1em;
	text-decoration: none;
	white-space: nowrap;
}

.qai-nav a:hover {
	opacity: 0.5;
	text-decoration: none;
}

/* PDFの埋め込みプレビューは高さを抑える */
.wp-block-file__embed {
	max-height: 70vh;
}

/* 動画・埋め込みの下に余白 */
.wp-block-embed {
	margin-block: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------------
   画面幅への対応
   WordPress標準では 781px 以下でカラムが縦積みになる。
   そのままだと一覧が1列になって縦に長くなるので、中間の幅では2列にする。
   ------------------------------------------------------------------ */
@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - 1.25rem) !important;
		flex-grow: 0;
	}
}

/* ギャラリーは、幅に応じて列数を落とす（標準では3列のまま縮み続ける） */
@media (max-width: 781px) {
	.wp-block-gallery.has-nested-images.columns-3 > figure.wp-block-image {
		width: calc(50% - var(--wp--style--unstable-gallery-gap, 1rem) / 2);
	}
}

@media (max-width: 480px) {
	.wp-block-gallery.has-nested-images.columns-3 > figure.wp-block-image {
		width: 100%;
	}
}

/* 概要表：狭い画面では項目名の固定幅をやめる */
@media (max-width: 600px) {
	.wp-block-table th {
		width: auto;
		white-space: normal;
	}
}

/* メニュー：折り返したときに詰まらないように */
@media (max-width: 600px) {
	.qai-nav a {
		margin: 0 0.6em;
		display: inline-block;
		line-height: 2.2;
	}
}

/* 埋め込み（動画など）がはみ出さないように */
.wp-block-embed iframe,
.wp-block-embed video {
	max-width: 100%;
}

/* Instagramのアイコン（リンクがある作品にだけ付く） */
.qai-ig {
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-left: 0.7em;
	vertical-align: -0.18em;
	background-color: currentColor;
	opacity: 0.55;
	transition: opacity 0.3s ease;
	-webkit-mask: var(--qai-ig-icon) center / contain no-repeat;
	mask: var(--qai-ig-icon) center / contain no-repeat;
}

.qai-ig:hover {
	opacity: 1;
}

:root {
	--qai-ig-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* プロフィール（AIページ）
   画像だけを半分の幅にし、キャプションはカラム幅いっぱいに置く。
   （画像ブロックの幅指定のままだと、氏名が画像幅で折り返してしまう） */
.qai-profile.wp-block-image.is-resized {
	width: 100% !important;
}

.qai-profile.wp-block-image img {
	width: 50%;
	height: auto;
}

.qai-profile figcaption {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.9;
	text-align: left;
	margin-top: 1em;
}

/* Works一覧のサムネイル：縦横比を4:3に揃える（はみ出す分は中央で切り取る） */
.qai-card img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: auto;
}

/* Works一覧：作品名と、場所・Statusの行を近づける */
.wp-block-columns .wp-block-column > .wp-block-heading {
	margin-top: 0.75em;
	margin-bottom: 0;
}

.wp-block-columns .wp-block-column > .wp-block-heading + p {
	margin-top: 0.15em;
	line-height: 1.6;
}

/* ==================================================================
   Works一覧（問題 ⇄ 計算 ⇄ 空間 で見せる）
   ================================================================== */
.qai-lead {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: 0.04em;
}

.qai-loop-mark {
	font-size: 0.8125rem;
	letter-spacing: 0.3em;
	color: var(--wp--preset--color--muted);
}

/* 手法による絞り込み */
.qai-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 1.6rem;
	margin: 3rem 0 3.5rem;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
}

.qai-filter button {
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	padding: 0.25em 0;
	font: inherit;
	letter-spacing: inherit;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}

.qai-filter button:hover,
.qai-filter button.is-active {
	color: var(--wp--preset--color--contrast);
}

.qai-filter button.is-active {
	border-bottom-color: currentColor;
}

/* カードの並び（CSSグリッド。絞り込みで消えたカードの分は自動で詰まる） */
.qai-works {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4rem 2.5rem;
}

@media (max-width: 900px) {
	.qai-works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 1.75rem; }
}

@media (max-width: 560px) {
	.qai-works { grid-template-columns: minmax(0, 1fr); }
}

.qai-work.is-hidden {
	display: none !important;
}

.qai-work > * {
	margin-block: 0;
}

/* 写真と解析図を重ねて、カーソルで切り替える */
.qai-work__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	text-decoration: none !important;
}

.qai-work__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.6s ease;
}

.qai-work__media img.is-diagram {
	object-fit: contain;
	background: #fff;
	opacity: 0;
}

.qai-work__media .qai-work__flip {
	position: absolute;
	left: 0.8em;
	top: 0.6em;
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--muted);
	opacity: 0;
	transition: opacity 0.6s ease;
}

@media (hover: hover) {
	.qai-work__media:hover img.is-diagram,
	.qai-work__media:hover .qai-work__flip {
		opacity: 1;
	}
}

.qai-work h3.wp-block-heading {
	margin-top: 1em;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.qai-work h3 a {
	text-decoration: none;
}

.qai-work__q {
	margin-top: 0.4em !important;
	font-size: 0.875rem;
	line-height: 1.75;
}

.qai-work__meta {
	margin-top: 0.7em !important;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.qai-work__tags {
	margin-top: 0.25em !important;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}

.qai-work__tags span + span::before {
	content: "／";
	margin: 0 0.4em;
	opacity: 0.6;
}

/* ==================================================================
   作品ページ
   ================================================================== */
.qai-meta-line {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}

.qai-question {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: 0.03em;
	margin-block: 3rem 3.5rem !important;
}

.qai-label {
	font-size: 0.75rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.24em !important;
	color: var(--wp--preset--color--muted);
	margin-top: 5rem !important;
	margin-bottom: 1.5rem !important;
}

/* 問題 → 計算 → 空間 の3段 */
.qai-loop {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	counter-reset: loop;
}

@media (max-width: 781px) {
	.qai-loop { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
}

.qai-loop__step > * {
	margin-block: 0;
}

.qai-loop__step img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.qai-loop__step.is-diagram img {
	object-fit: contain;
	background: #fff;
	outline: 1px solid var(--wp--preset--color--line);
	outline-offset: -1px;
}

.qai-loop__step h3.wp-block-heading {
	margin-top: 1.1em;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.2em;
}

.qai-loop__step p {
	margin-top: 0.5em;
	font-size: 0.9375rem;
	line-height: 1.85;
}

/* 顧客にとっての結果 */
.qai-result {
	background: var(--wp--preset--color--surface);
	padding: 2rem 2.25rem !important;
}

.qai-result > * {
	margin-block: 0;
}

.qai-result p {
	margin-top: 0.5em;
	line-height: 1.9;
}

/* 同じ手法の作品へ */
.qai-related a {
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.qai-related a:hover {
	border-bottom-color: currentColor;
}