/* mod_my_quicklinks - ปุ่มลัดบริการ */

.my-quicklinks { --ql-cols: 5; --ql-size: 58px; }

.my-quicklinks.is-card {
	background: #fff;
	border-radius: var(--my-radius, 14px);
	box-shadow: var(--my-shadow-lg, 0 10px 34px rgba(16, 40, 80, .14));
	padding: 20px 12px;
}

.my-quicklinks__list {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--ql-cols), minmax(0, 1fr));
	gap: 10px;
}

.my-quicklinks__link {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	text-align: center; padding: 10px 6px; border-radius: var(--my-radius-sm, 8px);
	color: #33405a; text-decoration: none;
	transition: transform .18s ease, background .18s ease;
}
a.my-quicklinks__link:hover { background: #f4f8fd; transform: translateY(-3px); text-decoration: none; color: var(--my-primary, #1b5fa8); }

.my-quicklinks__icon {
	width: var(--ql-size); height: var(--ql-size); border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--c1, #2e80d6), var(--c2, #1b5fa8));
	color: #fff; font-size: calc(var(--ql-size) * .42);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--c2, #1b5fa8) 38%, transparent);
}

/* graceful fallback where color-mix() is unsupported */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.my-quicklinks__icon { box-shadow: 0 6px 16px rgba(16, 40, 80, .22); }
}

.my-quicklinks__text { display: flex; flex-direction: column; line-height: 1.35; }
.my-quicklinks__label { font-size: .92rem; font-weight: 600; }
.my-quicklinks__sub { font-size: .78rem; color: var(--my-muted, #6b7280); }

@media (max-width: 991px) {
	.my-quicklinks__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
	.my-quicklinks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.my-quicklinks { --ql-size: 48px; }
	.my-quicklinks.is-card { padding: 14px 8px; }
}