/* mod_my_news - ข่าวสาร / ประชาสัมพันธ์ */

.my-news { --news-cols: 3; }

.my-news a { text-decoration: none; }
.my-news a:hover { text-decoration: none; }

.my-news__date {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .82rem; color: var(--my-muted, #6b7280);
}
.my-news__date i { color: var(--my-primary, #1b5fa8); }

.my-news__badge {
	display: inline-block; font-size: .74rem; font-weight: 600;
	background: color-mix(in srgb, var(--my-primary, #1b5fa8) 12%, #fff); color: var(--my-primary, #1b5fa8);
	border-radius: 999px; padding: 2px 10px; margin-bottom: 6px;
}

.my-news__intro { font-size: .88rem; color: var(--my-muted, #6b7280); margin: 6px 0 0; }

/* ------------------------------------------------- "ข่าวใหม่" flag ------ */
.my-news__new {
	display: inline-flex; align-items: center; gap: 5px;
	background: linear-gradient(135deg, var(--news-badge-1, #ef4444), var(--news-badge-2, #dc2626));
	color: var(--news-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(--news-badge-2, #dc2626) 40%, transparent);
	white-space: nowrap;
}

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

/* On a picture the flag floats in the top corner. */
.my-news__card-img .my-news__new,
.my-news__lead-img .my-news__new {
	position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 3;
}

.my-news__row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ------------------------------------------------ "อ่านต่อ" button ------ */
/*
 * --news-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-news .my-heading__more { color: var(--news-btn-1, var(--my-primary, #1b5fa8)); }

.my-news__more {
	display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
	padding: 7px 16px; border-radius: 999px;
	border: 1px solid var(--news-btn-1, var(--my-primary, #1b5fa8));
	color: var(--news-btn-1, var(--my-primary, #1b5fa8)); background: transparent;
	font-size: .85rem; font-weight: 600; text-decoration: none;
	transition: background .18s ease, color .18s ease, gap .18s ease, box-shadow .18s ease;
}
.my-news__more:hover, .my-news__more:focus-visible {
	background: var(--news-btn-1, var(--my-primary, #1b5fa8));
	color: var(--news-btn-tx, #fff); text-decoration: none; gap: 11px;
	box-shadow: 0 4px 14px rgba(16, 40, 80, .2);
}
.my-news__more i { font-size: .75rem; }

/* In the card's bottom row the spacing above belongs to the row, not the button. */
.my-cardfoot .my-news__more { margin-top: 0; }

/* --------------------------------------------- media + logo fallback ---- */
.my-news__media { display: block; width: 100%; height: 100%; }
.my-news__media img { width: 100%; height: 100%; object-fit: var(--news-fit, cover); display: block; }

/* A stand-in (organisation logo) is contained and padded, never cropped. */
.my-news__media.is-fallback {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(160deg, #eef4fb, #dfeaf7); padding: 12%;
}
.my-news__media.is-fallback img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

.my-news__media.is-icon {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(160deg, #eef4fb, #dfeaf7);
	color: var(--my-primary, #1b5fa8); font-size: 2rem;
}
.my-news__thumb .my-news__media.is-icon { font-size: 1.2rem; }

/* ---------------------------------------------------- split (default) --- */
.my-news__split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: start; }

.my-news__lead {
	background: #fff; border: 1px solid var(--my-line, #e5e7eb);
	border-radius: var(--my-radius, 14px); overflow: hidden;
	box-shadow: var(--my-shadow, 0 2px 14px rgba(16, 40, 80, .08));
}
/*
 * --news-img-h wins when the module options ask for an exact height; with it
 * unset the ratio keeps the picture tidy at whatever width the column is.
 */
.my-news__lead-img {
	position: relative; display: block; background: #eef3f9; overflow: hidden;
	aspect-ratio: var(--news-ratio, 16 / 10);
	height: var(--news-img-h, auto);
}
.my-news__lead-img img { width: 100%; height: 100%; object-fit: var(--news-fit, cover); display: block; transition: transform .35s ease; }
.my-news__lead-img:hover img { transform: scale(1.04); }
.my-news__lead-body { padding: 16px 18px 20px; }
.my-news__lead-title { font-size: 1.08rem; margin: 0 0 6px; line-height: 1.5; }
.my-news__lead-title a { color: #13203a; }
.my-news__lead-title a:hover { color: var(--my-primary, #1b5fa8); }

.my-news__side { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.my-news__row {
	display: flex; gap: 12px; align-items: center;
	background: #fff; border: 1px solid var(--my-line, #e5e7eb);
	border-radius: var(--my-radius-sm, 8px); padding: 10px 12px;
	transition: box-shadow .18s ease, transform .18s ease;
}
.my-news__row:hover { box-shadow: var(--my-shadow, 0 2px 14px rgba(16, 40, 80, .08)); transform: translateY(-2px); }
.my-news__row-body { flex: 1 1 auto; min-width: 0; }
.my-news__row-title { font-size: .95rem; margin: 0 0 3px; line-height: 1.5; font-weight: 600; }
.my-news__row-title a { color: #23324d; }
.my-news__row-title a:hover { color: var(--my-primary, #1b5fa8); }

.my-news__thumb {
	position: relative; flex: 0 0 auto;
	width: var(--news-thumb-w, 92px);
	height: var(--news-thumb-h, 68px);
	border-radius: 6px; overflow: hidden; background: #eef3f9;
}

/* The wide row uses a larger thumbnail, scaled from the same setting. */
.my-news__thumb--lg {
	width: calc(var(--news-thumb-w, 92px) * 1.41);
	height: calc(var(--news-thumb-h, 68px) * 1.35);
	border-radius: var(--my-radius-sm, 8px);
}

/* -------------------------------------------------------------- list --- */
.my-news__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.my-news__row--wide { align-items: flex-start; padding: 12px; }
.my-news__row--wide .my-news__row-title { font-size: 1rem; }

/* ------------------------------------------------------------- cards --- */
.my-news__grid {
	display: grid; gap: 18px;
	grid-template-columns: repeat(var(--news-cols), minmax(0, 1fr));
}
.my-news__card {
	background: #fff; border: 1px solid var(--my-line, #e5e7eb);
	border-radius: var(--my-radius, 14px); overflow: hidden;
	box-shadow: var(--my-shadow, 0 2px 14px rgba(16, 40, 80, .08));
	display: flex; flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}
.my-news__card:hover { transform: translateY(-4px); box-shadow: var(--my-shadow-lg, 0 10px 34px rgba(16, 40, 80, .14)); }
.my-news__card-img {
	position: relative; display: block; background: #eef3f9;
	aspect-ratio: var(--news-ratio, 16 / 10);
	height: var(--news-img-h, auto);
}
.my-news__card-img img { width: 100%; height: 100%; object-fit: var(--news-fit, cover); display: block; }
.my-news__chip {
	position: absolute; inset-inline-start: 10px; bottom: 10px;
	background: color-mix(in srgb, var(--my-dark, #10427a) 90%, transparent); color: #fff; font-size: .74rem;
	border-radius: 999px; padding: 3px 10px;
}
.my-news__card-body { padding: 14px 16px 18px; flex: 1 1 auto; }
.my-news__card-title { font-size: 1rem; margin: 0; line-height: 1.5; }
.my-news__card-title a { color: #13203a; }
.my-news__card-title a:hover { color: var(--my-primary, #1b5fa8); }

/* ------------------------------------------ gallery (ข่าวกิจกรรม) ------- */
.my-news__gal { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.my-news__gal-item {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px;
	align-items: center;
	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: 16px;
	box-shadow: var(--my-card-shadow, var(--my-shadow, 0 2px 14px rgba(16, 40, 80, .08)));
	transition: box-shadow .25s ease, border-color .2s ease, transform .2s ease;
}
.my-news__gal-item:hover {
	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)));
	transform: translateY(-3px);
}

.my-news__gal-titles { min-width: 0; }
.my-news__gal-title { font-size: 1.1rem; margin: 6px 0; line-height: 1.5; }
.my-news__gal-title a { color: #13203a; }
.my-news__gal-title a:hover { color: var(--my-primary, #1b5fa8); }

.my-news__gal-shots { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; min-width: 0; }
.my-news__gal-shots:has(.my-news__gal-lead:only-child) { grid-template-columns: 1fr; }

.my-news__gal-lead {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: var(--news-ratio, 4 / 3);
	height: var(--news-img-h, auto);
	border-radius: var(--my-radius-sm, 8px); background: #eef3f9;
}
.my-news__gal-lead img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.my-news__gal-lead:hover img { transform: scale(1.05); }

.my-news__gal-thumbs { display: grid; grid-template-rows: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.my-news__gal-thumb {
	display: block; overflow: hidden; border-radius: var(--my-radius-sm, 8px);
	background: #eef3f9; min-height: 0;
}
.my-news__gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.my-news__gal-thumb:hover img { transform: scale(1.06); }

/* ------------------------------------- "ดูข่าวทั้งหมด" bottom button ---- */
.my-news__all { display: flex; justify-content: center; margin-top: 20px; }
.my-news__all-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 11px 30px; border-radius: 999px;
	background: linear-gradient(135deg,
		var(--news-btn-1, var(--my-primary, #1b5fa8)),
		var(--news-btn-2, var(--my-light, #2e80d6)));
	color: var(--news-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-news__all-btn:hover, .my-news__all-btn:focus-visible {
	color: var(--news-btn-tx, #fff); text-decoration: none; gap: 15px;
	transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 40, 80, .3);
}

@media (max-width: 991px) {
	.my-news__split { grid-template-columns: 1fr; }
	.my-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.my-news__gal-item { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
	.my-news__grid { grid-template-columns: 1fr; }

	/* Phones cap the thumbnail so a large setting cannot crowd out the text. */
	.my-news__thumb { width: min(var(--news-thumb-w, 92px), 84px); height: min(var(--news-thumb-h, 68px), 64px); }
	.my-news__thumb--lg { width: min(calc(var(--news-thumb-w, 92px) * 1.41), 104px); height: min(calc(var(--news-thumb-h, 68px) * 1.35), 78px); }
	.my-news__row--wide { flex-direction: row; }
}