/**
 * ALMOND CLINIC GUIDE トップページ（front-page.php 専用。トップでだけ読み込む）
 * 共通の土台（書体・リンク色・見出しの余白）は guide-common.css の .acg-main で済ませてある。
 */

.acg-top {
	--acg-hero-copy: #6c6259;
	--acg-hero-index: #5f4a3b;
	--acg-circle-line: #c9ad97;
	--acg-topic-number: #8d7966;
	--acg-topic-hover-line: #b98d6e;
	--acg-step-no: #bd9d83;

	/* カテゴリごとのカード地色と線画の色 */
	--acg-topic-bg-aga: #eee7dd;
	--acg-topic-bg-removal: #eee2dd;
	--acg-topic-bg-diet: #e6e8dd;
	--acg-topic-art-aga: #a58d76;
	--acg-topic-art-removal: #ae8d82;
	--acg-topic-art-diet: #8c9578;
}

.circle-arrow {
	display: grid;
	place-items: center;
	border: 1px solid var(--acg-circle-line);
	border-radius: 50%;
	width: 34px;
	height: 34px;
	font-size: 16px;
}

/* =========================================================
 * メインビジュアル
 * ========================================================= */

.hero {
	position: relative;
	min-height: 510px;
	background: var(--acg-cream);
	overflow: hidden;
}

.hero-picture {
	position: absolute;
	top: 0;
	right: 0;
	width: 58%;
	height: 100%;
	object-fit: cover;
	object-position: 65% center;
}

/* 左側の文字を読みやすくするグラデーション（色は --acg-cream と同じ #f5f1ea） */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #f5f1ea 0%, #f5f1ea 30%, #f5f1eaf5 41%, #f5f1ea00 68%);
	pointer-events: none;
}

.hero-inner {
	position: relative;
	z-index: 1;
	padding-top: 78px;
	padding-bottom: 76px;
}

.hero h1 {
	font-size: 42px;
	line-height: 1.7;
	letter-spacing: .09em;
	margin: 22px 0;
}

.hero h1 em {
	font-style: normal;
	color: var(--acg-brand);
}

.hero-copy {
	color: var(--acg-hero-copy);
	line-height: 2.2;
	font-size: 13px;
}

.hero-bottom {
	margin-top: 30px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.hero-index {
	position: absolute;
	right: 0;
	bottom: 40px;
	display: flex;
	gap: 12px;
	align-items: center;
	color: var(--acg-hero-index);
	font-family: var(--acg-latin);
	font-size: 11px;
	letter-spacing: .15em;
}

.hero-index::before {
	content: "";
	width: 60px;
	height: 1px;
	background: currentColor;
}

/* =========================================================
 * FIND YOUR TOPIC（カテゴリカード）
 * ========================================================= */

.topics-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.topic-card {
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--acg-line);
	background: var(--acg-paper);
}

.topic-card:hover {
	border-color: var(--acg-topic-hover-line);
}

.topic-card:hover .circle-arrow {
	background: var(--acg-brand);
	color: #fff;
}

.topic-art {
	height: 160px;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--acg-topic-bg-aga);
}

.topic-card.removal .topic-art {
	background: var(--acg-topic-bg-removal);
}

.topic-card.diet .topic-art {
	background: var(--acg-topic-bg-diet);
}

.topic-art::before {
	content: "";
	position: absolute;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: #ffffff40;
	left: calc(50% - 85px);
	top: 30px;
}

.topic-art .art-mark {
	width: 75px;
	height: 90px;
	color: var(--acg-topic-art-aga);
}

.topic-card.removal .art-mark {
	color: var(--acg-topic-art-removal);
}

.topic-card.diet .art-mark {
	color: var(--acg-topic-art-diet);
}

.topic-number {
	position: absolute;
	top: 13px;
	left: 19px;
	font-family: var(--acg-latin);
	color: var(--acg-topic-number);
	font-size: 12px;
	letter-spacing: .1em;
}

.topic-body {
	padding: 23px 24px;
}

.topic-body .eyebrow {
	font-size: 10px;
}

.topic-body h3 {
	font-family: var(--acg-serif);
	font-size: 21px;
	margin: 6px 0 10px;
}

.topic-body p {
	font-size: 12px;
	color: var(--acg-muted);
	line-height: 1.9;
}

.topic-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	font-size: 11px;
	color: var(--acg-brand);
}

/* =========================================================
 * START HERE
 * ========================================================= */

.starting {
	background: var(--acg-cream);
	border-top: 1px solid var(--acg-line);
	border-bottom: 1px solid var(--acg-line);
}

.starting-inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 70px;
	align-items: center;
	padding-block: 43px;
}

.starting h2 {
	font-size: 23px;
	line-height: 1.7;
	letter-spacing: .05em;
	margin-top: 8px;
}

.starting-items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.starting-items a {
	display: flex;
	gap: 14px;
	align-items: center;
}

.step-no {
	font-family: var(--acg-latin);
	font-size: 25px;
	color: var(--acg-step-no);
}

.starting-items strong {
	display: block;
	font-size: 12px;
	font-weight: 500;
}

.starting-items small {
	display: block;
	font-size: 10px;
	color: var(--acg-muted);
}

/* =========================================================
 * 新着記事（カード本体は guide-common.css の「記事カード」）
 * ========================================================= */

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
}

.filter {
	padding: 8px 20px;
	border: 1px solid var(--acg-line);
	border-radius: 30px;
	background: transparent;
	font-size: 11px;
}

.filter[aria-pressed="true"],
.filter:hover {
	background: var(--acg-brand);
	border-color: var(--acg-brand);
	color: #fff;
}

/* タブで隠すパネル。.article-grid の display: grid に hidden 属性が負けないようにする */
.latest-panel[hidden] {
	display: none;
}

/* =========================================================
 * OUR APPROACH
 * ========================================================= */

.editorial {
	background: var(--acg-cream);
	margin: 30px auto 80px;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	overflow: hidden;
}

.editorial-image {
	width: 100%;
	height: 370px;
	object-fit: cover;
	object-position: center 44%;
	mix-blend-mode: multiply;
}

.editorial-copy {
	padding: 56px 55px;
}

.editorial h2 {
	font-size: 26px;
	letter-spacing: .07em;
	line-height: 1.8;
	margin: 14px 0;
}

.editorial p {
	color: var(--acg-muted);
	font-size: 12px;
	line-height: 2.1;
}

.editorial .text-link {
	margin-top: 15px;
}

/* =========================================================
 * 1600px 以上
 * ========================================================= */

@media (min-width: 1600px) {
	.hero {
		min-height: 560px;
	}

	.hero-inner {
		padding-top: 95px;
	}

	.hero h1 {
		font-size: 46px;
	}
}

/* =========================================================
 * 1000px 以下
 * ========================================================= */

@media (max-width: 1000px) {
	.hero h1 {
		font-size: 36px;
	}

	.topics-grid {
		gap: 18px;
	}

	.starting-inner {
		gap: 25px;
	}

	.starting-items {
		gap: 10px;
	}

	.editorial-copy {
		padding: 35px;
	}
}

/* =========================================================
 * 760px 以下（スマホ）
 * ========================================================= */

@media (max-width: 760px) {
	.circle-arrow {
		width: 26px;
		height: 26px;
		font-size: 13px;
	}

	/* メインビジュアル：写真を下半分に回す */
	.hero {
		min-height: 535px;
	}

	.hero-picture {
		width: 100%;
		height: 58%;
		top: auto;
		bottom: 0;
		object-position: 65% 65%;
	}

	.hero::after {
		background: linear-gradient(180deg, #f5f1ea 0%, #f5f1ea 37%, #f5f1eacc 52%, #f5f1ea00 75%);
	}

	.hero-inner {
		padding-top: 38px;
		padding-bottom: 32px;
	}

	.hero .eyebrow {
		font-size: 10px;
	}

	.hero h1 {
		font-size: 29px;
		line-height: 1.7;
		letter-spacing: .07em;
		margin: 16px 0;
	}

	.hero-copy {
		font-size: 11px;
		line-height: 2;
	}

	.hero-bottom {
		margin-top: 17px;
	}

	.hero-bottom .text-link {
		font-size: 11px;
	}

	.hero-index {
		bottom: -135px;
		right: 0;
		font-size: 9px;
	}

	/* カテゴリカード：横長の 1 列に */
	.topics-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.topic-card {
		display: grid;
		grid-template-columns: 100px 1fr;
		min-height: 166px;
	}

	.topic-art {
		height: 100%;
		min-height: 166px;
	}

	.topic-art::before {
		width: 120px;
		height: 120px;
		left: -10px;
		top: 35px;
	}

	.topic-art .art-mark {
		width: 52px;
		height: 70px;
		margin-top: 10px;
	}

	.topic-number {
		font-size: 10px;
		left: 13px;
		top: 10px;
	}

	.topic-body {
		padding: 17px 19px;
	}

	.topic-body h3 {
		font-size: 19px;
		margin: 4px 0;
	}

	.topic-body .eyebrow {
		font-size: 8px;
	}

	.topic-body p {
		font-size: 10px;
		line-height: 1.8;
	}

	.topic-foot {
		font-size: 10px;
		margin-top: 10px;
	}

	/* START HERE */
	.starting-inner {
		grid-template-columns: 1fr;
		gap: 25px;
		padding-block: 30px;
	}

	.starting h2 {
		font-size: 21px;
	}

	.starting h2 br {
		display: none;
	}

	.starting-items {
		gap: 13px;
	}

	.starting-items a {
		display: block;
	}

	.step-no {
		display: block;
		font-size: 23px;
		line-height: 1.6;
		margin-bottom: 7px;
	}

	.starting-items strong {
		font-size: 10px;
	}

	.starting-items small {
		font-size: 9px;
		line-height: 1.7;
		margin-top: 4px;
	}

	/* 新着記事 */
	.filters {
		gap: 7px;
		margin-bottom: 24px;
	}

	.filter {
		padding: 7px 13px;
		font-size: 10px;
	}

	/* OUR APPROACH */
	.editorial {
		width: calc(100% - 40px);
		grid-template-columns: 1fr;
		margin: 5px auto 48px;
	}

	.editorial-image {
		height: 210px;
		object-position: center 39%;
	}

	.editorial-copy {
		padding: 30px;
	}

	.editorial h2 {
		font-size: 23px;
	}

	.editorial p {
		font-size: 11px;
	}
}