/* -------------------------------------------------------------------------
 * 加 LINE 邀請卡（浮在「聯絡我們」上層）
 *
 * 關掉之後看到的是聯絡表單，所以這張卡不需要把路堵死 ——
 * 背景點一下、ESC、右上角、下面那行文字，四個地方都能關。
 * ---------------------------------------------------------------------- */

.aark-lineinv {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 1.25rem;
}

.aark-lineinv[hidden] { display: none; }

.aark-lineinv-back {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 62, .62);
	backdrop-filter: blur(2px);
}

.aark-lineinv-card {
	position: relative;
	z-index: 1;
	width: min(30rem, 100%);
	max-height: calc(100vh - 2.5rem);
	overflow-y: auto;
	padding: 2rem 2rem 1.5rem;
	background: var(--aark-white);
	border-radius: 3px;
	box-shadow: 0 24px 60px rgba(0, 0, 62, .34);
	text-align: center;
	font-family: var(--aark-sans);
	color: var(--aark-ink);
	animation: aark-lineinv-in .22s ease-out;
}

@keyframes aark-lineinv-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.aark-lineinv-card { animation: none; }
}

.aark-lineinv-x {
	position: absolute;
	top: .5rem;
	right: .65rem;
	width: 2.25rem;
	height: 2.25rem;
	font-size: 1.65rem;
	line-height: 1;
	color: var(--aark-slate);
	background: none;
	border: 0;
	cursor: pointer;
}

.aark-lineinv-x:hover { color: var(--aark-ink); }

.aark-lineinv-card .k {
	margin: 0 0 .35rem;
	font-family: var(--aark-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--aark-orange);
}

.aark-lineinv-card h2 {
	margin: 0 0 .6rem;
	font-size: 1.5rem;
	line-height: 1.4;
	color: var(--aark-navy);
}

.aark-lineinv-card .lead {
	margin: 0 0 1.25rem;
	font-size: .9375rem;
	line-height: 1.8;
	color: var(--aark-slate);
}

.aark-lineinv-qr { margin: 0 0 1.1rem; }

.aark-lineinv-qr img {
	display: block;
	width: 220px;
	height: auto;
	margin: 0 auto;
	/* QR 不要壓縮、不要加圓角遮住定位點，否則掃不到 */
	image-rendering: -webkit-optimize-contrast;
	border: 1px solid var(--aark-line);
}

.aark-lineinv-qr figcaption {
	margin-top: .5rem;
	font-size: .8125rem;
	color: var(--aark-slate);
}

/*
 * ⚠ 選擇器要帶上 .aark-lineinv-card a，而且 visited／hover 都要寫。
 *   只寫 .aark-lineinv-go 的話，主題的連結色（橘）會蓋過來 ——
 *   綠底配橘字，實測就是這樣。這是同一個坑的第六次：
 *   **凡是自己有底色的元素，文字顏色一定要用足夠的權重寫死。**
 */
.aark-lineinv-card a.aark-lineinv-go,
.aark-lineinv-card a.aark-lineinv-go:link,
.aark-lineinv-card a.aark-lineinv-go:visited {
	display: block;
	padding: .85rem 1.5rem;
	font-weight: 700;
	color: #fff;
	background: #06c755;   /* LINE 品牌綠 */
	border-radius: 2px;
	text-decoration: none;
}

.aark-lineinv-card a.aark-lineinv-go:hover,
.aark-lineinv-card a.aark-lineinv-go:focus {
	color: #fff;
	background: #05a948;
}

.aark-lineinv-alt {
	display: block;
	width: 100%;
	margin-top: .9rem;
	padding: .35rem;
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--aark-navy);
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: .25em;
	cursor: pointer;
}

.aark-lineinv-alt:hover { color: var(--aark-orange); }

.aark-lineinv-card .foot {
	margin: .9rem 0 0;
	font-size: .8125rem;
	line-height: 1.7;
	color: var(--aark-slate);
}

/*
 * 手機上 QR 沒有用（沒辦法用同一支手機掃自己的螢幕），
 * 所以縮小、把「開啟 LINE」那顆按鈕推上來當主角。
 */
@media (max-width: 600px) {
	.aark-lineinv-card { padding: 1.75rem 1.25rem 1.25rem; }
	.aark-lineinv-qr { order: 2; margin: 1.1rem 0 0; }
	.aark-lineinv-qr img { width: 128px; }
	.aark-lineinv-qr figcaption { font-size: .75rem; }
	.aark-lineinv-card { display: flex; flex-direction: column; }
	.aark-lineinv-card .k { order: 0; }
	.aark-lineinv-card h2 { order: 0; }
	.aark-lineinv-card .lead { order: 0; margin-bottom: 1rem; }
	.aark-lineinv-go { order: 1; }
	.aark-lineinv-alt { order: 3; }
	.aark-lineinv-card .foot { order: 4; }
}