@use "variables" as *;

// ---------------------------------------------------------------------------
// Front page — News section (TOP-specific)
//   PC : ~200 heading box on the left (News / お知らせ, centered) with a right
//        divider, news list on the right.
//   SP : stacked. Heading on top with EN/JP side by side and a bottom divider.
// ---------------------------------------------------------------------------
$news-divider: #d5d5d5;

.front-news__wrap {
	display: flex;
	align-items: stretch;
	gap: rem(40);

	@include sp {
		flex-direction: column;
		gap: rem(20);
	}
}

.front-news__head {
	flex-shrink: 0;
	width: rem(200);
	border-right: 1px solid $news-divider;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: rem(8);

	@include sp {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid $news-divider;
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start; // SP: left-aligned heading
		gap: rem(12);
		padding-bottom: rem(16);
	}
}

.front-news__en {
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(30);
	color: $color-green;
	line-height: 1;

	@include sp {
		font-size: rem(26);
	}
}

.front-news__ja {
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(16);
	color: $color-text;
	line-height: 1;

	@include sp {
		font-size: rem(14);
	}
}

.front-news__list {
	flex: 1;
	min-width: 0;
}

.front-news__empty {
	flex: 1;
	color: $color-text;
}

// --- news item ---
// Grid lets PC and SP regroup the same DOM:
//   PC : "date cat" / "date title"  (date spans the left column)
//   SP : "date cat" / "title title" (date+cat one row space-between, title below)
.news-item {
	display: grid;
	grid-template-columns: rem(110) 1fr;
	grid-template-areas:
		"date cat"
		"date title";
	align-items: start;
	column-gap: rem(40);
	row-gap: rem(10);
	padding-block: rem(30);

	@include sp {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"date cat"
			"title title";
		column-gap: rem(12);

		// SP only: divider between items
		& + & {
			border-top: 1px solid $news-divider;
		}
	}
}

.news-item__date {
	grid-area: date;
	font-family: $font-sans;
	font-size: rem(16);
	color: $color-text;
	line-height: 1.6;

	@include sp {
		justify-self: start;
		font-size: rem(13);
	}
}

.news-item__cat {
	grid-area: cat;
	justify-self: start;
	align-self: start;
	padding: rem(5) rem(16);
	background: $color-lime;
	border-radius: $radius-pill;
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(14);
	line-height: 1.2;
	color: $color-white;
	transition: opacity 0.2s;

	&:hover {
		opacity: 0.8;
		text-decoration: none;
	}

	@include sp {
		justify-self: end; // pushed to the right -> space-between with date
		font-size: rem(13);
	}
}

.news-item__title {
	grid-area: title;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-family: $font-sans;
	font-size: rem(16);
	line-height: 1.75;
	color: $color-text;
}