@use "variables" as *;

// ===========================================================================
// 関連リンク (page-link.php, slug `link`)
// Three sections of partner links. Each section = flower-mark heading over a
// green rule + a list of whole-row external <a> (logo left / "LINK" pill right;
// pill fills green on row hover). Logos are theme assets, capped by height.
// ===========================================================================

.link-section {
	& + & {
		margin-top: rem(90);

		@include sp {
			margin-top: rem(60);
		}
	}
}

.link-section__head {
	display: flex;
	align-items: center;
	gap: rem(10);
	padding-bottom: rem(18);
	margin-bottom: rem(30);
	border-bottom: 1px solid $color-green;

	@include sp {
		padding-bottom: rem(14);
		margin-bottom: rem(20);
	}
}

.link-section__icon {
	flex-shrink: 0;
	width: rem(30);
	height: auto;
}

.link-section__title {
	font-family: $font-sans;
	font-weight: 600;
	font-size: rem(20);
	line-height: 1.3;
	color: $color-green;

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

.link-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.link-item {
	max-width: rem(512);
}

.link-item__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: rem(20);
	padding-block: rem(24);
	text-decoration: none;

	&:hover {
		text-decoration: none;

		.link-item__btn {
			background: $color-green;
			color: $color-white;
		}
	}

	@include sp {
		gap: rem(14);
		padding-block: rem(18);
	}
}

.link-item__logo {
	flex: 0 1 auto;
	min-width: 0;

	img {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: rem(50);

		@include sp {
			max-height: rem(38);
		}
	}
}

// 多摩中医薬研究会: テキスト主体のバナーで他より大きく見えるので約3/5に縮小。
.link-item--sm .link-item__logo img {
	max-height: rem(28);

	@include sp {
		max-height: rem(22);
	}
}

.link-item__btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: rem(120);
	padding-block: rem(7);
	background: $color-white;
	border: 1px solid $color-green;
	border-radius: $radius-pill;
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(14);
	line-height: 1.2;
	color: $color-green;
	transition: background-color 0.3s, color 0.3s;

	@include sp {
		width: rem(100);
		font-size: rem(13);
	}
}

.link-back {
	margin-top: rem(60);
	padding-top: rem(40);
	border-top: 1px dashed #bebebe;
	text-align: center;

	@include sp {
		margin-top: rem(40);
		padding-top: rem(30);
	}
}