/**
 * 手機版的頁尾摺疊。
 *
 * ── 為什麼需要 ──
 *
 * 頁尾在手機上是 1020px 高：兩家門市的地址電話、公司的統編營業時間、
 * 付款圖示，全部攤開排成一長條。整頁 1883px 裡它佔了 54%——
 * 客人捲到底看到的比內容還多，而那些資訊他多半不是現在要看的。
 *
 * 收成兩個可以點開的區塊之後是 463px，佔比降到 35%。
 * 資訊沒有拿掉，只是不預設攤開。
 *
 * 桌機不變：那裡是三欄並排，本來就不長。
 *
 * 對應的 JS 在 footer-fold.js。
 */

@media ( max-width: 768px ) {

	.lyfh-fold {
		border-top: 1px solid rgba( 0, 0, 0, .08 );
	}

	.lyfh-fold__btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 15px 2px;
		border: 0;
		background: none;
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		color: #242424;
		text-align: left;
		cursor: pointer;
	}

	/* 箭頭：收起時朝下，展開時朝上。 */
	.lyfh-fold__btn::after {
		content: "";
		flex: none;
		width: 8px;
		height: 8px;
		margin-inline-end: 4px;
		border-right: 2px solid #a99e94;
		border-bottom: 2px solid #a99e94;
		transform: rotate( 45deg ) translateY( -2px );
		transition: transform .18s ease;
	}

	.lyfh-fold[open] .lyfh-fold__btn::after {
		transform: rotate( -135deg ) translateY( -2px );
	}

	.lyfh-fold__body {
		display: none;
		padding: 0 2px 16px;
	}

	.lyfh-fold[open] .lyfh-fold__body {
		display: block;
	}

	@media ( prefers-reduced-motion: reduce ) {
		.lyfh-fold__btn::after {
			transition: none;
		}
	}

	/* 第一欄（logo 與標語）不摺，只把它跟下面的區塊拉開一點。 */
	.main-footer .vc_col-sm-4:first-child {
		padding-bottom: 8px;
	}
}