/* Main page sections, top to bottom. Desktop first; tablet and phone rules are at the end. */

/* The visible screen height. On phones, svh leaves out the browser's address bar. */
:root {
	--screen: 100vh;
}

@supports (height: 100svh) {
	:root {
		--screen: 100svh;
	}
}

/* Hero and church news share one row, lined up with the sermon section below them.
   --hero-height takes whatever height is left, so the sermon section fits on the first screen.
   The number is everything else on that screen: header, sermon section and small gaps.
   If those change size, change it to match, here and in the tablet and phone rules. */
main {
	--side: max(15px, calc(50% - 651px));
	--news-width: clamp(300px, 29%, 376px);
	--hero-height: clamp(200px, calc(var(--screen) - 570px), 480px);
	position: relative;
	margin-top: 166px;
}

.hero {
	position: relative;
	margin: 0 calc(var(--side) + var(--news-width) + 24px) 0 var(--side);
}

.hero-slide {
	position: relative;
	display: block;
	height: var(--hero-height);
	color: #fff;
}

.hero-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-copy {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	background: rgba(0, 0, 0, 0.25);
	text-align: center;
}

.hero-copy h2 {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.35;
}

.hero-copy p {
	margin-top: 12px;
	font-size: 20px;
}

.hero .pager {
	position: absolute;
	right: 0;
	bottom: 14px;
	left: 0;
	gap: 4px;
}

.hero .pager button {
	width: 28px;
	height: 6px;
	border-radius: 0;
	background: #fff;
}

.hero .pager button.is-active {
	background: #999;
}

/* Sermon band: the sermon photo, its links and the shortcut tiles side by side */
.sermon {
	margin-top: 24px;
	padding: 24px var(--side);
	background: #eceff6;
}

.sermon-layout {
	display: grid;
	grid-template-columns: minmax(0, 340fr) minmax(0, 502fr) minmax(0, 420fr);
	grid-template-rows: 316px;
	gap: 20px;
}

.sermon-feature {
	display: flex;
	flex-direction: column;
}

.sermon-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.sermon-card img {
	flex: 1;
	min-height: 0;
	width: 100%;
	object-fit: cover;
}

/* The church's sermon videos have a black band along their bottom and right edges, so their thumbnails zoom in
   from near the top left. That pushes the band out of the card, and the label covers what's left of the picture. */
.sermon-card .is-video-thumbnail {
	transform: scale(1.17);
	transform-origin: 35% 0;
}

.sermon-label {
	position: relative;
	flex: none;
	background: #123d63;
	color: #fff;
	font-size: 19px;
	font-weight: 300;
	line-height: 46px;
	text-align: center;
}

.sermon-label b {
	font-weight: 700;
}

.sermon-pastor {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 34px;
	margin: 10px 16px 0;
	border: 1px solid #1d1d1d;
	border-radius: 32px;
	color: #1d1d1d;
	font-size: 16px;
}

.sermon-pastor .material-symbols-outlined {
	font-size: 22px;
}

.sermon-links {
	display: grid;
	grid-auto-rows: 1fr;
	gap: 12px;
}

.sermon-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 28px;
	background: linear-gradient(to bottom, #1d69a9 50%, #3f8fd2 50%) 0 0 / 100% 200% no-repeat;
	color: #fff;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
}

.sermon-links a > span:first-child {
	min-width: 0;
}

/* Sermon titles come from the admin page, so a long one is cut off instead of crowding the button. */
.sermon-links small {
	display: block;
	overflow: hidden;
	margin-top: 2px;
	font-size: 15px;
	font-weight: 400;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sermon-links .material-symbols-outlined {
	flex: none;
	font-size: 44px;
	font-weight: 300;
}

/* Shortcut tiles: each one sets its two colours, used for both the outline and the icon */
.quick-bar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.quick-bar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border: 2px solid transparent;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--tile-from), var(--tile-to)) border-box;
	color: #111;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	word-break: keep-all;
}

.quick-bar .material-symbols-outlined {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--tile-from), var(--tile-to));
	color: #fff;
	font-size: 36px;
}

.tile-green {
	--tile-from: #7fd93b;
	--tile-to: #2f9e14;
}

.tile-violet {
	--tile-from: #9a8bff;
	--tile-to: #5a5cf0;
}

.tile-red {
	--tile-from: #ff7f8e;
	--tile-to: #ee2f50;
}

.tile-pink {
	--tile-from: #ff85de;
	--tile-to: #e24fc6;
}

/* The load effect, the same as m.fgtv.com's front page: each piece rises and fades in, in the order js/reveal.js
   sets. Desktop only does this for the tiles. Phones and tablets do it for everything, further down this file. */
.is-revealing .quick-bar .reveal {
	opacity: 0;
	transform: translateY(45px);
}

.is-revealing .quick-bar .reveal.is-shown {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Vision band */
.vision {
	position: relative;
	height: 579px;
	padding-top: 103px;
	overflow: hidden;
	text-align: center;
}

/* Drawn in the page, not as a background, so js/waves.js can move each wave. */
.vision-waves {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: block;
	width: max(100%, 2000px);
	height: 650px;
	transform: translateX(-50%);
}

.vision-tag,
.vision-title {
	position: relative;
}

.vision-tag {
	display: inline-flex;
	gap: 18px;
	align-items: center;
	height: 58px;
	color: #1d69a9;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Thin lines that fade out on either side of the words */
.vision-tag::before,
.vision-tag::after {
	content: '';
	width: 64px;
	height: 2px;
	background: linear-gradient(to left, #1d69a9, transparent);
}

.vision-tag::after {
	background: linear-gradient(to right, #1d69a9, transparent);
}

.vision-title {
	margin-top: 58px;
	color: #2b1a1a;
	font-family: 'Nanum Pen Script', 'Noto Sans KR', sans-serif;
	font-size: 120px;
	/* This font has one weight, so the extra thickness is an outline in the text's own colour. */
	-webkit-text-stroke: 0.02em currentColor;
	font-weight: 400;
	line-height: 1.2;
}

/* Church news: pinned beside the hero at the same height, whatever the rows' content */
.news {
	position: absolute;
	top: 0;
	right: var(--side);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1fr 4fr;
	width: var(--news-width);
	height: var(--hero-height);
}

.news-title a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: #1d69a9;
	color: #fff;
	font-size: 26px;
	font-weight: 600;
}

.news-title .material-symbols-outlined {
	position: absolute;
	right: 16px;
	font-size: 32px;
}

.news-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: 1fr;
}

.news-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 10px;
	border-bottom: 1px solid #d9dbe1;
	color: #1d1d1d;
	font-size: 17px;
	line-height: 22px;
}

.news-list a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.news-list time {
	flex: none;
	color: #afafaf;
	font-size: 14px;
}

/* Button hover effects, the same ones as fgtv.com's front page */

/* 교회 소식 title: a lighter colour rises up the bar and the + turns. */
.news-title a {
	z-index: 1;
	overflow: hidden;
}

.news-title a::before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	height: 0;
	background: #3f8fd2;
	transition: height 0.4s ease-in-out;
}

.news-title-text {
	transition: transform 0.3s ease-in-out;
}

.news-title .material-symbols-outlined {
	transition: transform 0.4s ease-in-out;
}

/* News rows: the row lifts out and a line grows along its bottom edge. */
.news-list li {
	position: relative;
}

.news-list li::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 0;
	height: 2px;
	background: #1d69a9;
	transition: width 0.3s ease-in-out;
}

/* Sermon card: the photo brightens and the label grows a little. */
.sermon-card img {
	transition: filter 0.8s ease-in-out;
}

.sermon-label span {
	display: inline-block;
	transition: transform 0.5s ease;
}

.sermon-pastor {
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Blue buttons: the lighter half of the background slides up and the contents rise. */
.sermon-links a {
	transition: background-position 0.3s ease-in-out;
}

.sermon-links a > span {
	transition: transform 0.3s ease-in-out;
}

/* Tiles: the tile lifts and a thick outline sweeps in from the top left corner. */
.quick-bar a {
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-bar a::before {
	content: '';
	position: absolute;
	inset: 0;
	padding: 5px;
	background: linear-gradient(135deg, var(--tile-from), var(--tile-to));
	clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	pointer-events: none;
	transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* Touch screens skip these, because a hover effect would stick after a tap. */
@media (hover: hover) {
	.news-title a:hover::before {
		height: 100%;
	}

	.news-title a:hover .news-title-text {
		transform: scale(1.04);
	}

	.news-title a:hover .material-symbols-outlined {
		transform: rotate(90deg) scale(1.05);
	}

	.news-list li:hover {
		background: #fff;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
		font-weight: 500;
	}

	.news-list li:hover::after {
		width: 100%;
	}

	.news-list li:hover a {
		color: #123d63;
	}

	.news-list li a:hover {
		color: #1d69a9;
	}

	.sermon-card:hover img {
		filter: brightness(1.15);
	}

	.sermon-card:hover .sermon-label span {
		transform: scale(1.05);
	}

	.sermon-pastor:hover {
		border-color: #1d69a9;
		background: #1d69a9;
		color: #fff;
	}

	.sermon-links a:hover {
		background-position: 0 100%;
	}

	.sermon-links a:hover > span {
		transform: translateY(-3px);
	}

	.quick-bar a:hover {
		box-shadow: 0 6px 15px #b1b6e3;
		transform: translateY(-5px);
	}

	.quick-bar a:hover::before {
		clip-path: polygon(-50% -50%, 200% -50%, 200% 200%, -50% 200%);
	}
}

@media (max-width: 1020px) {
	.is-revealing .reveal {
		opacity: 0;
		transform: translateY(45px);
	}

	.is-revealing .reveal.is-shown {
		opacity: 1;
		transform: none;
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	main {
		--side: 29px;
		--news-width: 40%;
		--hero-height: clamp(200px, calc(var(--screen) - 272px), 31vw);
		margin-top: 0;
	}

	.hero-copy h2 {
		font-size: 26px;
	}

	.hero-copy p {
		font-size: 17px;
	}

	.hero .pager {
		bottom: 16px;
	}

	.sermon {
		margin-top: 20px;
		padding: 16px var(--side);
	}

	/* The photo and its links sit side by side at the same height, with the pastor link under the photo
	   and the tiles across the bottom, in the same order as m.fgtv.com. */
	.sermon-layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		gap: 12px 16px;
	}

	.sermon-feature {
		display: contents;
	}

	.sermon-card {
		grid-column: 1;
		grid-row: 1;
	}

	.sermon-links {
		grid-column: 2;
		grid-row: 1;
	}

	.sermon-pastor {
		grid-column: 1;
		grid-row: 2;
		margin: 0;
	}

	.quick-bar {
		grid-column: 1 / -1;
		grid-row: 3;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
	}

	.quick-bar a {
		gap: 8px;
		height: 110px;
		font-size: 16px;
	}

	.quick-bar .material-symbols-outlined {
		width: 44px;
		height: 44px;
		border-radius: 10px;
		font-size: 30px;
	}

	.sermon-card img {
		flex: none;
		height: 200px;
	}

	.sermon-label {
		font-size: 17px;
		line-height: 42px;
	}

	.sermon-links a {
		padding: 0 20px;
		font-size: 18px;
	}

	.sermon-links small {
		font-size: 14px;
	}

	.sermon-links .material-symbols-outlined {
		font-size: 38px;
	}

	.vision {
		height: 368px;
		padding-top: 57px;
	}

	.vision-waves {
		width: 100%;
		height: 432px;
	}

	.vision-tag {
		height: 56px;
		font-size: 22px;
	}

	.vision-title {
		margin-top: 20px;
		font-size: min(92px, 17vw);
	}

	.news-title a {
		font-size: 22px;
	}

	.news-title .material-symbols-outlined {
		right: 10px;
		font-size: 28px;
	}

	.news-list li {
		gap: 8px;
		padding: 0 8px;
		font-size: 15px;
	}

	.news-list time {
		font-size: 13px;
	}
}

/* Too narrow to have the news beside the hero, so the hero goes full width with the news under it. */
@media (max-width: 700px) {
	main {
		--hero-height: clamp(200px, calc(var(--screen) - 252px), 51.7vw);
	}

	.sermon {
		margin-top: 16px;
	}

	.sermon-card img {
		height: auto;
		max-height: 240px;
		aspect-ratio: 1;
	}

	.sermon-links a {
		gap: 8px;
		padding: 0 14px;
		font-size: 16px;
		word-break: keep-all;
	}

	.sermon-links .material-symbols-outlined {
		font-size: 32px;
	}

	/* The links' column is narrow here, so sermon details wrap onto a second line before they're cut off. */
	.sermon-links small {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		white-space: normal;
		word-break: keep-all;
	}

	.hero {
		margin: 0;
	}

	.hero-copy h2 {
		font-size: 32px;
	}

	.news {
		position: static;
		display: block;
		width: auto;
		height: auto;
		margin-top: 16px;
		padding: 0 var(--side);
	}

	.news-title a {
		height: 60px;
	}

	.news-list {
		display: block;
	}

	.news-list li {
		height: 52px;
		font-size: 16px;
	}

	/* Unused rows would only push the sermon links further down. */
	.news-list li:empty {
		display: none;
	}
}

@media (max-width: 480px) {
	main {
		--side: 15px;
		--hero-height: clamp(96px, calc(var(--screen) - 240px), 51.7vw);
	}

	/* The extra padding keeps the text clear of the dashes when the hero is at its shortest. */
	.hero-copy {
		padding: 0 12px 14px;
	}

	.hero-copy h2 {
		font-size: 20px;
	}

	.hero-copy p {
		margin-top: 4px;
		font-size: 13px;
	}

	.hero .pager {
		bottom: 6px;
	}

	.hero .pager button {
		width: 20px;
		height: 5px;
	}

	.sermon {
		padding: 14px var(--side) 20px;
	}

	.sermon-layout {
		gap: 10px 12px;
	}

	.quick-bar {
		gap: 8px;
	}

	/* The icon goes first here, so one- and two-line labels still start level. */
	.quick-bar a {
		flex-direction: column-reverse;
		justify-content: flex-end;
		gap: 6px;
		height: 96px;
		padding-top: 10px;
		font-size: 13px;
	}

	.quick-bar .material-symbols-outlined {
		width: 36px;
		height: 36px;
		border-radius: 9px;
		font-size: 24px;
	}

	.sermon-label {
		font-size: 15px;
		line-height: 36px;
	}

	.sermon-links {
		gap: 8px;
	}

	.sermon-links a {
		gap: 6px;
		padding: 0 10px 0 12px;
		font-size: 15px;
	}

	.sermon-links small {
		font-size: 12px;
		line-height: 15px;
	}

	.sermon-links .material-symbols-outlined {
		font-size: 28px;
	}

	.vision {
		height: 225px;
		margin-top: 15px;
		padding-top: 23px;
	}

	.vision-waves {
		height: 100%;
	}

	.vision-tag {
		gap: 12px;
		height: 50px;
		font-size: 19px;
	}

	.vision-tag::before,
	.vision-tag::after {
		width: 36px;
	}

	.vision-title {
		margin-top: 26px;
		font-size: min(62px, 17vw);
	}

	.news-title a {
		height: 52px;
		font-size: 20px;
	}

	.news-list li {
		height: 46px;
		font-size: 15px;
	}
}

/* The narrowest phones: just small enough to keep each sermon link's title on one line. */
@media (max-width: 359px) {
	.sermon-links a {
		gap: 4px;
		padding: 0 8px 0 10px;
		font-size: 13px;
	}

	.sermon-links .material-symbols-outlined {
		font-size: 24px;
	}
}