/**
 * Pastwork Single Page Styles - Modern Design
 */

/* ========================================
 * Variables
 * ======================================== */
:root {
	--pw-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pw-font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--pw-text-xs: 0.8125rem;
	--pw-text-sm: 0.9375rem;
	--pw-text-base: 1rem;
	--pw-text-lg: 1.0625rem;
	--pw-text-xl: 1.25rem;
	--pw-text-2xl: 1.5rem;
	--pw-text-3xl: 2rem;
	--pw-text-title: clamp(1.375rem, 3.5vw, 2.2rem);

	--pw-color-text: #1d1d1f;
	--pw-color-text-secondary: #515154;
	--pw-color-text-tertiary: #6e6e73;
	--pw-color-border: #c7c7cc;
	--pw-color-border-light: #d5d5da;
	--pw-color-bg: #f5f5f7;
	--pw-color-bg-card: #ffffff;
	--pw-color-accent: #0071e3;
	--pw-color-accent-hover: #0077ed;

	--pw-radius-sm: 8px;
	--pw-radius-md: 12px;
	--pw-radius-lg: 20px;
	--pw-radius-xl: 28px;

	--pw-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--pw-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ========================================
 * Single Page Layout
 * ======================================== */
.pastwork-single {
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	background: #ffffff;
}
body:not(.home) .site .site-content {
	padding: 60px 0 0;
}

/* ========================================
 * Hero Header
 * ======================================== */
.pastwork-single .entry-header {
	position: relative;
	padding: 4rem 5vw 2rem;
	text-align: center;
	background: #ffffff;
}

.pastwork-single.hentry .entry-header .entry-title {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-title);
	font-weight: 600;
	max-width: 1000px;
	margin: 0 auto 1rem;
	line-height: 1.5;
	letter-spacing: -0.025em;
	color: var(--pw-color-text);
}

.pastwork-single.hentry .entry-header .en-title {
	font-family: var(--pw-font-text);
	font-size: 0.9rem;
	color: var(--pw-color-border);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 500;
	margin: 0 0 0.5rem;
	opacity: 0.6;
}

/* ========================================
 * Eyecatch Image (under title)
 * ======================================== */
.pastwork-eyecatch {
	margin: 0 auto 3rem;
	text-align: center;
}

.pastwork-eyecatch img {
	max-width: 100%;
	height: auto;
	display: inline-block;
}

/* ========================================
 * Content Container
 * ======================================== */
.pastwork-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 5vw 6rem;
}

/* ========================================
 * Sections Container - PC 2-Column Layout
 * ======================================== */
.pastwork-sections {
	display: grid;
	gap: 2rem;
}

/* ========================================
 * Section Cards
 * ======================================== */
.pastwork-section {
	position: relative;
	padding: 2rem 0;
	background: transparent;
}

.pastwork-scope {
	padding: 1.5rem;
	background: var(--pw-color-bg);
	margin-top: 1.5rem;
}

.pastwork-section-title {
	font-family: var(--pw-font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--pw-color-text-tertiary);
	margin: 0 0 1.5rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ========================================
 * Definition List - Modern Grid
 * ======================================== */
.pastwork-dl {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.pastwork-dl-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	align-items: baseline;
	gap: 1.5rem;
	padding: 0.875rem 0;
	font-size: var(--pw-text-sm);
	line-height: 1.6;
	border-bottom: 1px solid var(--pw-color-border-light);
}

.pastwork-dl-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.pastwork-dl-row:first-child {
	padding-top: 0;
}

.pastwork-dl-row dt {
	flex-shrink: 0;
	color: var(--pw-color-text-tertiary);
	font-family: var(--pw-font-text);
	font-size: var(--pw-text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.pastwork-dl-row dd {
	margin: 0;
	color: var(--pw-color-text);
	font-family: var(--pw-font-text);
	font-weight: 500;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.pastwork-dl-row dd a {
	color: var(--pw-color-accent);
	text-decoration: none;
	word-break: break-all;
	transition: color 0.2s ease;
}

.pastwork-dl-row dd a:hover {
	color: var(--pw-color-accent-hover);
	text-decoration: underline;
}

/* ========================================
 * Tag List - Pill Style
 * ======================================== */
.pastwork-tag-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.pastwork-tag-list li {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: var(--pw-color-bg);
	border: 1px solid var(--pw-color-border);
	border-radius: 100px;
	font-family: var(--pw-font-text);
	font-size: var(--pw-text-xs);
	font-weight: 600;
	color: var(--pw-color-text-secondary);
	line-height: 1.3;
	white-space: nowrap;
}

/* ========================================
 * Note - Highlight Box
 * ======================================== */
.pastwork-note {
	font-family: var(--pw-font-text);
	font-size: var(--pw-text-sm);
	color: var(--pw-color-text-secondary);
	line-height: 1.9;
	padding: 1.5rem;
	background: var(--pw-color-bg);
	border-radius: var(--pw-radius-md);
	border-left: 3px solid var(--pw-color-accent);
	margin: 0;
}

/* ========================================
 * Capture Images
 * ======================================== */
.pastwork-captures {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 3rem;
}

.pastwork-capture {
	margin: 0;
	padding: 0;
	line-height: 0;
	text-align: center;
}

.pastwork-capture img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ========================================
 * Body Content - Rich Text (No card)
 * ======================================== */
.pastwork-body {
	margin-top: 3rem;
	padding-top: 0;
}

.pastwork-body-content {
	font-family: var(--pw-font-text);
	font-size: var(--pw-text-base);
	line-height: 1.9;
	color: var(--pw-color-text);
}

.pastwork-body-content p {
	margin: 0 0 1.5em;
}

.pastwork-body-content p:last-child {
	margin-bottom: 0;
}

.pastwork-body-content h2,
.pastwork-body-content h3,
.pastwork-body-content h4 {
	font-family: var(--pw-font-display);
	font-weight: 600;
	color: var(--pw-color-text);
	margin: 2em 0 1em;
	letter-spacing: -0.01em;
}

.pastwork-body-content h2 {
	font-size: var(--pw-text-2xl);
}

.pastwork-body-content h3 {
	font-size: var(--pw-text-xl);
}

.pastwork-body-content h4 {
	font-size: var(--pw-text-lg);
}

.pastwork-body-content ul,
.pastwork-body-content ol {
	padding-left: 1.5em;
	margin: 1em 0;
}

.pastwork-body-content li {
	margin: 0.5em 0;
}

.pastwork-body-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--pw-radius-md);
	margin: 2em 0;
}

/* ========================================
 * Card Meta (Archive List)
 * ======================================== */
.pastwork-card-meta {
	margin-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pastwork-card-meta span {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: var(--pw-color-bg);
	color: var(--pw-color-text-secondary);
	font-family: var(--pw-font-text);
	font-size: var(--pw-text-xs);
	font-weight: 500;
	border-radius: var(--pw-radius-sm);
	border: 1px solid var(--pw-color-border-light);
	line-height: 1.3;
}

.pastwork-card-industry {
	font-weight: 600 !important;
}

.pastwork-card-period {
	color: var(--pw-color-text-tertiary) !important;
}

.pastwork-card-scope {
	color: var(--pw-color-text-tertiary) !important;
}

/* ========================================
 * Back Button
 * ======================================== */
.pastwork-back {
	display: flex;
	justify-content: center;
	padding: 0 5vw 4rem;
}

.pastwork-back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	background: var(--pw-color-text);
	color: #ffffff;
	font-family: var(--pw-font-text);
	font-size: var(--pw-text-sm);
	font-weight: 500;
	text-decoration: none;
	border-radius: 100px;
	transition: all 0.4s var(--pw-ease-out-expo);
}

.pastwork-back-link:hover {
	background: var(--pw-color-accent);
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 113, 227, 0.25);
}

.pastwork-back-link svg {
	width: 16px;
	height: 16px;
	transition: transform 0.3s var(--pw-ease-out-quart);
}

.pastwork-back-link:hover svg {
	transform: translateX(-4px);
}

/* ========================================
 * Responsive - Mobile
 * ======================================== */
@media (max-width: 640px) {
	.pastwork-single .entry-header {
		padding: 3rem 4vw 2rem;
	}

	.pastwork-single.hentry .entry-header .entry-title {
		font-size: 1.5rem;
	}

	.pastwork-eyecatch {
		margin-bottom: 2rem;
	}

	.pastwork-content {
		padding: 0 4vw 3rem;
	}

	.pastwork-section {
		padding: 1.5rem 0;
	}

	.pastwork-scope {
		padding: 1.5rem;
		margin-top: 1.5rem;
	}

	.pastwork-section-title {
		font-size: 0.625rem;
		margin-bottom: 1.25rem;
	}

	.pastwork-dl-row {
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
		padding: 0.75rem 0;
	}

	.pastwork-dl-row dt {
		width: auto;
		font-size: 0.75rem;
	}

	.pastwork-dl-row dd {
		font-size: var(--pw-text-sm);
	}

	.pastwork-tag-list {
		gap: 0.5rem;
	}

	.pastwork-tag-list li {
		padding: 0.4375rem 0.875rem;
		font-size: 0.75rem;
	}

	.pastwork-note {
		padding: 1.25rem;
		font-size: var(--pw-text-xs);
	}

	.pastwork-body {
		margin-top: 2rem;
		padding-top: 0;
	}
}

/* ========================================
 * Responsive - Tablet
 * ======================================== */
@media (min-width: 641px) and (max-width: 900px) {
	.pastwork-single .entry-header {
		padding: 5rem 5vw 3.5rem;
	}

	.pastwork-content {
		padding: 0 5vw 5rem;
	}

	.pastwork-section {
		padding: 1.75rem 0;
	}
}

/* ========================================
 * Responsive - Large Desktop (2-column)
 * ======================================== */
@media (min-width: 1000px) {
	.pastwork-content {
		max-width: 1400px;
		padding: 0 5vw 8rem;
	}

	.pastwork-sections {
		display: grid;
		grid-template-columns: 1fr 1px 1fr;
		grid-template-rows: auto auto;
		gap: 0;
	}

	.pastwork-section {
		padding: 2rem 0;
		border-bottom: none;
	}

	/* 中央の区切り線 */
	.pastwork-sections::before {
		content: "";
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		background: var(--pw-color-border-light);
	}

	/* Overview を左上に */
	.pastwork-overview {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		padding-right: 3rem;
	}

	/* Technology を右上に */
	.pastwork-tech {
		grid-column: 3 / 4;
		grid-row: 1 / 2;
		padding-left: 3rem;
	}

	/* Scope を下に1カラムフルワイド */
	.pastwork-scope {
		grid-column: 1 / -1;
		grid-row: 2 / 3;
		margin-top: 2.5rem;
		padding: 2.5rem;
		background: var(--pw-color-bg);
	}

	/* Note も下にフルワイド */
	.pastwork-description {
		grid-column: 1 / -1;
		grid-row: 3 / 4;
		margin-top: 2rem;
		padding-top: 2.5rem;
	}

	.pastwork-section-title {
		margin-bottom: 1.75rem;
		font-size: 0.75rem;
	}

	.pastwork-dl-row {
		grid-template-columns: 130px 1fr;
		gap: 1.5rem;
		padding: 1rem 0;
	}

	/* Captures span full width - centered */
	.pastwork-captures {
		grid-column: 1 / -1;
		margin-top: 4rem;
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Body content spans full width - centered */
	.pastwork-body {
		grid-column: 1 / -1;
		margin: 4rem auto 0;
		padding-top: 2rem;
		max-width: 900px;
	}
}

/* ========================================
 * Animation - Fade In Up
 * ======================================== */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.pastwork-single .entry-header {
	animation: fadeInUp 0.8s var(--pw-ease-out-expo) both;
}

.pastwork-section {
	animation: fadeInUp 0.6s var(--pw-ease-out-expo) both;
}

.pastwork-section:nth-child(1) { animation-delay: 0.1s; }
.pastwork-section:nth-child(2) { animation-delay: 0.15s; }
.pastwork-section:nth-child(3) { animation-delay: 0.2s; }
.pastwork-section:nth-child(4) { animation-delay: 0.25s; }
.pastwork-section:nth-child(5) { animation-delay: 0.3s; }