/* ============================================================
   サイト共通コンテナ（max-width: 1200px）
   ============================================================ */
.hst-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.hst-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 768px) {
	.hst-container { padding-left: 2rem; padding-right: 2rem; }
}

/* ============================================================
   ピックアップ記事 — セクション共通
   ============================================================ */
.hst-pickup-section {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

@media (min-width: 640px) {
	.hst-pickup-section {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.hst-pickup-section {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

/* デザイン別 max-width（1200px コンテナ内で "2/3 程度" に抑える） */
.hst-pickup--luxury_minimal   { max-width: 800px;  }
.hst-pickup--magazine_overlay  { max-width: 860px;  }
.hst-pickup--modern_asymmetry  { max-width: 1200px; }

/* ============================================================
   共通グリッド
   ============================================================ */
.hst-pickup-grid {
	display: grid;
	gap: 1.75rem;
	width: 100%;
	grid-template-columns: minmax(0, 1fr);
}

/* SM: 2 列（--2 以上） */
@media (min-width: 540px) {
	.hst-pickup-grid--2,
	.hst-pickup-grid--3,
	.hst-pickup-grid--4,
	.hst-pickup-grid--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* LG: 3・4・5 列 */
@media (min-width: 900px) {
	.hst-pickup-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.hst-pickup-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.hst-pickup-grid--5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* 1〜2 枚時は中央寄せで横幅を絞る */
@media (min-width: 900px) {
	.hst-pickup-grid--1 {
		max-width: 20rem;
		margin-left: auto;
		margin-right: auto;
	}
	.hst-pickup-grid--2 {
		max-width: 38rem;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ============================================================
   デザイン 1: Luxury Minimal
   ============================================================ */
.hst-pickup--luxury_minimal .hst-pickup-grid {
	gap: 2rem;
}

/* SP: 画像を 16:9 でコンパクトに */
.hst-pickup--luxury_minimal .hst-pickup-card-img {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

/* PC: 4:3 に戻す */
@media (min-width: 768px) {
	.hst-pickup--luxury_minimal .hst-pickup-card-img {
		aspect-ratio: 4 / 3;
	}
}

/* ============================================================
   デザイン 2: Magazine Overlay
   ============================================================ */
.hst-pickup-overlay-grid {
	gap: 1.25rem;
}

/* SP: 16:9 でコンパクト */
.hst-pickup-overlay-card {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: #1e293b;
}

/* SM〜MD: 4:3 */
@media (min-width: 540px) {
	.hst-pickup-overlay-card {
		aspect-ratio: 4 / 3;
	}
}

/* PC: 縦長 3:4 でスタイリッシュに */
@media (min-width: 900px) {
	.hst-pickup-overlay-card {
		aspect-ratio: 3 / 4;
	}
	/* 4〜5 枚は横長に戻してカードを詰めない */
	.hst-pickup-grid--4 .hst-pickup-overlay-card,
	.hst-pickup-grid--5 .hst-pickup-overlay-card {
		aspect-ratio: 4 / 5;
	}
}

/* Magazine Overlay ボタン hover
   テキスト色は動的なため、CSS では半透明の白オーバーレイで処理 */
.hst-pickup-overlay-card:hover .hst-pickup-overlay-btn {
	background-color: rgba(255, 255, 255, 0.18);
}

/* ============================================================
   デザイン 3: Modern Asymmetry
   Tailwind の動的クラスに依存せず CSS のみで制御
   ============================================================ */
.hst-pickup-asymmetry {
	width: 100%;
}

/* 各行 */
.hst-pickup-asym-row {
	display: flex;
	flex-direction: column; /* SP: 縦積み */
	align-items: stretch;
	transition: background-color 0.5s ease;
}

.hst-pickup-asym-row:hover {
	background-color: rgba(250, 250, 249, 0.7); /* zinc-50/70 相当 */
}

/* PC: 横並び */
@media (min-width: 768px) {
	.hst-pickup-asym-row {
		flex-direction: row;
	}
	.hst-pickup-asym-row--reverse {
		flex-direction: row-reverse;
	}
}

/* 画像エリア */
.hst-pickup-asym-img {
	display: block;
	overflow: hidden;
	background-color: #f1f5f9;
	flex-shrink: 0;
	/* SP: 固定高さ（縦長を防ぐ） */
	width: 100%;
	height: 200px;
}

@media (min-width: 768px) {
	.hst-pickup-asym-img {
		width: 44%;
		height: auto;
		min-height: 340px;
	}
}

@media (min-width: 1024px) {
	.hst-pickup-asym-img {
		min-height: 400px;
	}
}

/* テキストエリア */
.hst-pickup-asym-text {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.5rem 2rem;
}

@media (min-width: 768px) {
	.hst-pickup-asym-text {
		padding: 3.5rem 3.5rem 3.5rem 3rem;
	}
	.hst-pickup-asym-row--reverse .hst-pickup-asym-text {
		padding: 3.5rem 3rem 3.5rem 3.5rem;
	}
}

@media (min-width: 1024px) {
	.hst-pickup-asym-text {
		padding: 4rem 5rem 4rem 4rem;
	}
	.hst-pickup-asym-row--reverse .hst-pickup-asym-text {
		padding: 4rem 4rem 4rem 5rem;
	}
}

/* 区切り線 */
.hst-pickup-asym-divider {
	border: none;
	border-top: 1px solid #f1f5f9;
	margin: 0;
}

/* READ MORE 矢印ライン：hover で伸びる */
.hst-pickup-asym-row:hover .hst-pickup-asym-line {
	width: 4rem;
}
.hst-pickup-asym-row:hover .hst-pickup-asym-btn {
	gap: 1.25rem;
}