/*
 * Blanky Studio – Single Portfolio Styles
 *
 * 個別投稿ページ専用スタイル。
 * studio-style.css（共通）とは別に、single-portfolio テンプレートでのみ読み込む。
 *
 * @package blanky-studio
 * @since 1.1.0
 */

/* ============================================================
   ヒーロー
   ============================================================ */
.studio-project-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--studio-color-slate-900);
}

/* カバーブロックのデフォルトをオーバーライド */
.studio-project-hero.wp-block-cover {
	min-height: 70vh;
	padding: 0;
}

/* 背景画像: グレースケール */
.studio-project-hero .wp-block-cover__image-background {
	filter: grayscale(100%);
}

/* オーバーレイ: モックと同じ下方向グラデーション */
.studio-project-hero .wp-block-cover__background {
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.1) 0%,
		rgba(0, 0, 0, 0.6) 100%
	) !important;
	opacity: 1 !important;
}

/* inner-container: flex で下寄せ — absolute 配置を使わずフロー内に収める */
.studio-project-hero .wp-block-cover__inner-container {
	max-width: none;
	width: 100%;
	padding: 0;
	min-height: inherit;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* メタ情報: ヘッダーと同じ max-width + padding で左端を揃える */
.studio-project-hero-meta {
	width: 100%;
	max-width: var(--studio-max-w-full);
	margin-inline: auto;
	padding: 0 1.5rem 3rem;
}

@media (min-width: 768px) {
	.studio-project-hero-meta {
		padding: 0 3rem 3rem;
	}
}

.studio-project-hero-cat {
	display: inline-block;
	font-size: 0.6875rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	font-weight: 600;
	opacity: 0.6;
	margin-bottom: 1rem;
}

.studio-project-hero-cat a {
	color: inherit;
	text-decoration: none;
}

.studio-project-hero-title {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: clamp(2.5rem, 7vw, 5.5rem);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0;
}

/* バッジ（日時・カテゴリ・タグ） */
.studio-project-hero-badges {
	margin-top: 1.25rem;
	gap: 0.5rem;
}

.studio-project-hero-date {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	opacity: 0.6;
}

.studio-project-hero-badge a {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
	transition: background-color 0.2s, border-color 0.2s;
}

.studio-project-hero-badge a:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   メタ情報
   ============================================================ */
.studio-project-intro {
	padding-block: 3rem;
	border-bottom: 1px solid var(--studio-border-color, rgba(0, 0, 0, 0.15));
}

.studio-project-intro-inner {
	max-width: var(--studio-max-w-article);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

@media (min-width: 768px) {
	.studio-project-intro-inner {
		padding-inline: 3rem;
	}
}

@media (min-width: 1024px) {
	.studio-project-intro-inner {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 5rem;
		align-items: start;
	}
	.studio-project-meta-list {
		flex-direction: column;
		gap: 1.5rem;
	}
}

.studio-project-meta-list {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 3rem;
	margin: 0;
	padding: 0;
}

.studio-project-meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.studio-project-meta-label {
	font-size: 0.625rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	opacity: 0.45;
}

.studio-project-meta-value {
	font-size: 0.9375rem;
	font-weight: 300;
	margin: 0;
}

.studio-project-lead {
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.8;
	margin: 2.5rem 0 0;
	opacity: 0.75;
}

@media (min-width: 1024px) {
	.studio-project-lead {
		margin-top: 0;
	}
}

/* ============================================================
   本文
   ============================================================ */
.studio-project-content {
	padding-block: 4rem;
}

.studio-project-content-inner {
	max-width: var(--studio-max-w-article);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

@media (min-width: 768px) {
	.studio-project-content {
		padding-block: 5rem;
	}
	.studio-project-content-inner {
		padding-inline: 3rem;
	}
}

.studio-project-content-inner h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 300;
	line-height: 1.3;
	margin-block: 3rem 1.5rem;
}
.studio-project-content-inner h2:first-child { margin-top: 0; }

.studio-project-content-inner h3 {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-block: 2.5rem 0.75rem;
	opacity: 0.5;
}

.studio-project-content-inner p {
	font-size: 1rem;
	line-height: 1.85;
	font-weight: 300;
	margin-block: 0 1.5rem;
}

.studio-project-content-inner figure {
	margin-block: 3rem;
}
.studio-project-content-inner figure img {
	width: 100%;
	height: auto;
	display: block;
}
.studio-project-content-inner figcaption {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.45;
	margin-top: 0.75rem;
}

.studio-project-content-inner .wp-block-gallery.alignfull,
.studio-project-content-inner .alignfull {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

/* ============================================================
   シェアボタン
   ============================================================ */
.studio-project-share {
	padding-block: 2.5rem;
	border-top: 1px solid var(--studio-border-color, rgba(0, 0, 0, 0.15));
	border-bottom: 1px solid var(--studio-border-color, rgba(0, 0, 0, 0.15));
}

.studio-project-share-inner {
	max-width: var(--studio-max-w-full);
	margin-inline: auto;
	padding-inline: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

@media (min-width: 768px) {
	.studio-project-share-inner {
		padding-inline: 3rem;
	}
}

.studio-project-share-label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.45;
	margin: 0;
	flex-shrink: 0;
}

.studio-project-share-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.studio-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	border: 1px solid currentColor;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.2s, color 0.2s;
	line-height: 1;
}

.studio-share-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.studio-share-btn--x:hover         { background: #000; color: #fff; border-color: #000; }
.studio-share-btn--facebook:hover  { background: #1877f2; color: #fff; border-color: #1877f2; }
.studio-share-btn--linkedin:hover  { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.studio-share-btn--copy:hover      { background: currentColor; }
.studio-share-btn--copy:hover span,
.studio-share-btn--copy:hover svg  { filter: invert(1); }

.is-dark .studio-share-btn--x:hover { background: #fff; color: #000; border-color: #fff; }

/* ============================================================
   前後ナビ
   ============================================================ */
.studio-project-nav {
	padding: 0;
	border-top: 1px solid var(--studio-border-color, rgba(0, 0, 0, 0.15));
	border-bottom: 1px solid var(--studio-border-color, rgba(0, 0, 0, 0.15));
}

.studio-project-nav-inner {
	max-width: var(--studio-max-w-full, 1440px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.studio-project-nav-inner {
		grid-template-columns: 1fr 1fr;
	}
}

.studio-project-nav-link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2.5rem 1.5rem;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: background-color 0.3s;
}

.studio-project-nav-link:hover {
	background-color: var(--wp--preset--color--surface, rgba(0, 0, 0, 0.02));
}

.studio-project-nav-link + .studio-project-nav-link {
	border-top: 1px solid var(--studio-border-color, rgba(0, 0, 0, 0.15));
}

@media (min-width: 640px) {
	.studio-project-nav-link {
		padding: 3rem;
	}
	.studio-project-nav-link + .studio-project-nav-link {
		border-top: none;
		border-left: 1px solid var(--studio-border-color, rgba(0, 0, 0, 0.15));
	}
}

@media (min-width: 1024px) {
	.studio-project-nav-link {
		padding: 4rem;
	}
}

/* prev: コンテンツを左寄せ、max-width で制限 */
.studio-project-nav-link--prev .studio-project-nav-dir,
.studio-project-nav-link--prev .studio-project-nav-info {
	max-width: calc(var(--studio-max-w-full, 1440px) / 2);
	margin-right: auto;
}

/* next: コンテンツを右寄せ、max-width で制限 */
.studio-project-nav-link--next .studio-project-nav-dir,
.studio-project-nav-link--next .studio-project-nav-info {
	max-width: calc(var(--studio-max-w-full, 1440px) / 2);
	margin-left: auto;
	text-align: right;
}

.studio-project-nav-link--next .studio-project-nav-dir {
	justify-content: flex-end;
}

/* 背景画像: 通常は非表示、ホバーで薄く表示 */
.studio-project-nav-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: grayscale(100%);
	opacity: 0;
	transition: opacity 0.5s;
	z-index: 0;
}

.studio-project-nav-link:hover .studio-project-nav-bg {
	opacity: 0.12;
}

.studio-project-nav-dir,
.studio-project-nav-info {
	position: relative;
	z-index: 1;
}

.studio-project-nav-dir {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.4;
	margin-bottom: 1rem;
}

.studio-project-nav-cat {
	display: block;
	font-size: 0.625rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	opacity: 0.4;
	margin-bottom: 0.5rem;
}

.studio-project-nav-title {
	font-size: clamp(1.1rem, 2.5vw, 1.75rem);
	font-weight: 300;
	line-height: 1.2;
	margin: 0;
}

/* ============================================================
   コメント欄
   ============================================================ */
.studio-project-comments {
	padding-block: 4rem;
}

.studio-project-comments > .wp-block-comments {
	max-width: var(--wp--style--global--content-size, 800px);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

@media (min-width: 768px) {
	.studio-project-comments > .wp-block-comments {
		padding-inline: 3rem;
	}
}

.studio-project-comments-title {
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 300;
	margin-bottom: 2rem;
}

.studio-project-comment {
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	gap: 1rem;
}

.studio-project-comment-avatar img {
	border-radius: 50%;
}

.studio-project-comment-meta {
	gap: 0.75rem;
	align-items: baseline;
}

.studio-project-comment-body .wp-block-comment-content p {
	line-height: 1.7;
}

/* コメントフォーム */
.studio-project-comments .comment-reply-title {
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 300;
	margin-bottom: 1.5rem;
}

.studio-project-comments .comment-form label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.5;
	margin-bottom: 0.375rem;
}

.studio-project-comments .comment-form input[type="text"],
.studio-project-comments .comment-form input[type="email"],
.studio-project-comments .comment-form input[type="url"],
.studio-project-comments .comment-form textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(0, 0, 0, 0.1);
	background-color: transparent;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	transition: border-color 0.2s;
}

.studio-project-comments .comment-form input:focus,
.studio-project-comments .comment-form textarea:focus {
	border-color: currentColor;
	outline: none;
}

.studio-project-comments .comment-form textarea {
	min-height: 10rem;
	resize: vertical;
}

.studio-project-comments .comment-form p {
	margin-bottom: 1.25rem;
}

.studio-project-comments .comment-form .form-submit .submit {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 2rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.studio-project-comments .comment-form .form-submit .submit:hover {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

.studio-project-comments .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.studio-project-comments .comment-form-cookies-consent label {
	display: inline;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sm);
	opacity: 0.6;
	margin-bottom: 0;
}

/* ============================================================
   ダークモード
   ============================================================ */
.is-dark .studio-project-intro {
	--studio-border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .studio-project-content {
	background-color: #0a0a0a;
}

.is-dark .studio-project-share {
	--studio-border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .studio-project-nav {
	--studio-border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .studio-project-nav-link + .studio-project-nav-link {
	border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .studio-project-nav-link:hover {
	background-color: rgba(255, 255, 255, 0.03);
}

.is-dark .studio-project-comment {
	border-color: rgba(255, 255, 255, 0.06);
}