/* com_mygallery - อัลบั้มภาพกิจกรรม */

/* ===================================================== album list ====== */
/* Same card spec as the news section, so both read as one design. */
.my-alb { --alb-cols: 3; }

.my-alb__empty { color: var(--my-muted, #6b7280); }

.my-alb__grid {
	display: grid; gap: 18px;
	grid-template-columns: repeat(var(--alb-cols), minmax(0, 1fr));
}

.my-alb__card {
	display: flex; flex-direction: column;
	background: var(--my-card-bg, #fff);
	border: var(--my-card-bw, 1px) solid var(--my-card-bd, var(--my-line, #e5e7eb));
	border-radius: var(--my-radius, 14px); overflow: hidden;
	box-shadow: var(--my-card-shadow, var(--my-shadow, 0 2px 14px rgba(16, 40, 80, .08)));
	transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.my-alb__card:hover {
	transform: translateY(-4px);
	border-color: var(--my-card-glow, var(--my-primary, #1b5fa8));
	box-shadow: var(--my-card-shadow-hover, var(--my-shadow-lg, 0 10px 34px rgba(16, 40, 80, .14)));
}

.my-alb__card-img {
	position: relative; display: block; aspect-ratio: 16 / 10;
	background: #eef3f9; overflow: hidden; text-decoration: none;
}
.my-alb__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.my-alb__card-img:hover img { transform: scale(1.05); }

.my-alb__noimg {
	display: flex; align-items: center; justify-content: center; height: 100%;
	color: var(--my-primary, #1b5fa8); font-size: 2.2rem;
	background: linear-gradient(160deg, #eef4fb, #dfeaf7);
}

.my-alb__new {
	position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 3;
	display: inline-flex; align-items: center; gap: 5px;
	background: linear-gradient(135deg, var(--alb-badge-1, #ef4444), var(--alb-badge-2, #dc2626));
	color: var(--alb-badge-tx, #fff);
	font-size: .72rem; font-weight: 700; line-height: 1;
	border-radius: 999px; padding: 5px 11px;
	/* The glow follows whatever colour the badge was given. */
	box-shadow: 0 3px 10px color-mix(in srgb, var(--alb-badge-2, #dc2626) 40%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.my-alb__new { box-shadow: 0 3px 10px rgba(16, 40, 80, .28); }
}

.my-alb__count {
	position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 3;
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(6, 18, 35, .72); color: #fff;
	font-size: .74rem; border-radius: 999px; padding: 4px 11px;
}

.my-alb__chip {
	position: absolute; inset-inline-start: 10px; bottom: 10px; z-index: 3;
	background: color-mix(in srgb, var(--my-dark, #10427a) 90%, transparent); color: #fff; font-size: .74rem;
	border-radius: 999px; padding: 3px 10px;
}

.my-alb__card-body { padding: 14px 16px 18px; flex: 1 1 auto; display: flex; flex-direction: column; }
.my-alb__card-title { font-size: 1rem; margin: 0; line-height: 1.5; }
.my-alb__card-title a { color: #13203a; text-decoration: none; }
.my-alb__card-title a:hover { color: var(--my-primary, #1b5fa8); }
.my-alb__intro { font-size: .88rem; color: var(--my-muted, #6b7280); margin: 6px 0 0; }

/*
 * --alb-btn-1/-2/-tx come from the module options and fall back to the
 * template's own colours, so an untouched module still matches the site.
 */
.my-alb .my-heading__more { color: var(--alb-btn-1, var(--my-primary, #1b5fa8)); }

/*
 * Takes up whatever room is left in the card so the bottom row lands at the
 * bottom, and keeps a little air above it even when the text fills the card.
 */
.my-alb__spacer { flex: 1 1 auto; min-height: 4px; }

/*
 * "ดูภาพทั้งหมด" on each card. A filled pill, so it reads as something to
 * press rather than another line of text. --alb-more-* are its own colours
 * and fall back to the section's buttons when they are left unset.
 */

.my-alb__more {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 18px; border-radius: 999px;
	font-size: .85rem; font-weight: 600; text-decoration: none;
	background: linear-gradient(135deg,
		var(--alb-more-1, var(--alb-btn-1, var(--my-primary, #1b5fa8))),
		var(--alb-more-2, var(--alb-btn-2, var(--my-light, #2e80d6))));
	color: var(--alb-more-tx, var(--alb-btn-tx, #fff));
	align-self: flex-start;
	box-shadow: 0 4px 12px rgba(16, 40, 80, .18);
	transition: gap .18s ease, transform .18s ease, box-shadow .18s ease;
}
.my-alb__more:hover, .my-alb__more:focus-visible {
	gap: 12px; text-decoration: none;
	color: var(--alb-more-tx, var(--alb-btn-tx, #fff));
	transform: translateY(-1px);
	box-shadow: 0 7px 18px rgba(16, 40, 80, .26);
}

/* In the bottom row the button no longer decides its own placement. */
.my-cardfoot .my-alb__more { align-self: center; }

.my-alb__pagination { margin-top: 24px; }

/* "ดูอัลบั้มภาพทั้งหมด" - same button as the news sections use. */
.my-alb .my-news__all { display: flex; justify-content: center; margin-top: 20px; }
.my-alb .my-news__all-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 11px 30px; border-radius: 999px;
	background: linear-gradient(135deg,
		var(--alb-btn-1, var(--my-primary, #1b5fa8)),
		var(--alb-btn-2, var(--my-light, #2e80d6)));
	color: var(--alb-btn-tx, #fff); font-size: .95rem; font-weight: 600; text-decoration: none;
	box-shadow: 0 6px 18px rgba(16, 40, 80, .22);
	transition: gap .18s ease, transform .18s ease, box-shadow .18s ease;
}
.my-alb .my-news__all-btn:hover, .my-alb .my-news__all-btn:focus-visible {
	color: var(--alb-btn-tx, #fff); text-decoration: none; gap: 15px;
	transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 40, 80, .3);
}

/* ==================================================== album detail ===== */
.my-album {
	--ab-cols: 4;
	background: var(--my-card-bg, #fff);
	border: var(--my-card-bw, 1px) solid var(--my-card-bd, var(--my-line, #e5e7eb));
	border-radius: var(--my-radius, 14px); padding: 26px;
	box-shadow: var(--my-card-shadow, var(--my-shadow, 0 2px 14px rgba(16, 40, 80, .08)));
}

.my-album__title { font-size: 1.6rem; margin: 0 0 12px; }
.my-album__meta {
	list-style: none; margin: 0 0 18px; padding: 12px 0;
	display: flex; flex-wrap: wrap; gap: 10px 26px;
	border-block: 1px dashed var(--my-line, #e5e7eb); font-size: .9rem;
}
.my-album__meta li { display: flex; align-items: center; gap: 8px; }
.my-album__meta i { color: var(--my-primary, #1b5fa8); }

/* The like button brings its own colours; keep the list's icon tint off it. */
.my-album__meta .my-like i { color: inherit; }

.my-album__desc { line-height: 1.8; margin-bottom: 20px; }
.my-album__empty { color: var(--my-muted, #6b7280); }

.my-album__grid {
	display: grid; gap: 10px;
	grid-template-columns: repeat(var(--ab-cols), minmax(0, 1fr));
}

.my-album__thumb {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 1; border-radius: var(--my-radius-sm, 8px);
	background: #eef3f9; text-decoration: none;
}
.my-album__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.my-album__thumb:hover img, .my-album__thumb:focus-visible img { transform: scale(1.08); }

.my-album__zoom {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(6, 18, 35, .45); color: #fff; font-size: 1.3rem;
	opacity: 0; transition: opacity .2s ease;
}
.my-album__thumb:hover .my-album__zoom,
.my-album__thumb:focus-visible .my-album__zoom { opacity: 1; }

.my-album__foot { margin-top: 24px; }

/* ====================================================== lightbox ======= */
.my-lightbox {
	position: fixed; inset: 0; z-index: 1300;
	display: flex; align-items: center; justify-content: center;
	background: rgba(4, 10, 20, .93);
	opacity: 0; transition: opacity .2s ease;
	padding: 16px;
}
.my-lightbox.is-open { opacity: 1; }
.my-lightbox[hidden] { display: none; }

body.my-lightbox-open { overflow: hidden; }

.my-lightbox__figure {
	margin: 0; max-width: min(1200px, 100%); max-height: 100%;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.my-lightbox__figure img {
	max-width: 100%; max-height: calc(100vh - 120px);
	object-fit: contain; display: block;
	border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
	background: #0b1421;
}
.my-lightbox__figure figcaption {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
	color: #dbe6f3; font-size: .9rem;
}
.my-lightbox__counter { color: #8fa6bf; font-variant-numeric: tabular-nums; }

.my-lightbox.is-loading .my-lightbox__figure img { opacity: .35; }

.my-lightbox__close,
.my-lightbox__nav {
	position: absolute; z-index: 3;
	width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.1rem;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s ease;
}
.my-lightbox__close:hover,
.my-lightbox__nav:hover { background: rgba(255, 255, 255, .3); }

.my-lightbox__close { inset-block-start: 16px; inset-inline-end: 16px; }
.my-lightbox__nav { top: 50%; transform: translateY(-50%); }
.my-lightbox__nav.is-prev { inset-inline-start: 16px; }
.my-lightbox__nav.is-next { inset-inline-end: 16px; }

@media (max-width: 991px) {
	.my-alb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.my-album { padding: 18px; }
	.my-album__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
	.my-alb__grid { grid-template-columns: 1fr; }
	.my-album__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.my-lightbox__close, .my-lightbox__nav { width: 38px; height: 38px; font-size: .95rem; }
	.my-lightbox__nav.is-prev { inset-inline-start: 6px; }
	.my-lightbox__nav.is-next { inset-inline-end: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.my-lightbox, .my-album__thumb img, .my-alb__card-img img { transition: none; }
}