/* 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;
}

/*
 * Frosted glass: the page shows through, blurred, with a hairline of white
 * along the edge where the light would catch it. It only reads as glass when
 * there is something behind it to blur, which is why the page background or a
 * picture under the module matters more here than in the other two styles.
 */
.my-quicklinks.is-glass {
	background: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: var(--my-radius, 14px);
	box-shadow: 0 10px 34px rgba(16, 40, 80, .16);
	padding: 20px 12px;
}

/*
 * Without the blur the panel is just a pale wash, and the words on it lose
 * their footing against a busy picture. Made more solid instead, so it stays a
 * panel rather than turning into a smear.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.my-quicklinks.is-glass { background: rgba(255, 255, 255, .88); }
}

/* A solid hover would punch a hole in the glass; keep it translucent too. */
.my-quicklinks.is-glass a.my-quicklinks__link:hover { background: rgba(255, 255, 255, .6); }

.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); }
}

/* ------------------------------------------------------ ไอคอนเป็นรูปภาพ --- */

/*
 * A picture of the site's own in place of the icon. The tile keeps its size and
 * its round shape so a row of buttons still lines up whether each one carries a
 * glyph or a photograph, and the picture is clipped to that shape rather than
 * spilling out of it.
 *
 * "โล่ง" takes the coloured tile away and leaves the picture on its own, which
 * is what an emblem with its own shape and colours usually wants; the shadow
 * goes with it, because a shadow around nothing reads as a smudge.
 */
.my-quicklinks__icon.has-img { overflow: hidden; }

.my-quicklinks__img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: inherit;
}

.my-quicklinks__icon.is-plain {
	background: none;
	box-shadow: none;
	border-radius: 0;
}

/* Without the tile the picture keeps its own edges, so nothing clips it. */
.my-quicklinks__icon.is-plain,
.my-quicklinks__icon.is-plain .my-quicklinks__img { overflow: visible; border-radius: 0; }

.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,
	.my-quicklinks.is-glass { padding: 14px 8px; }
}