/* Social Media Imports — list templates. Scoped to .smi-wrap-feed so themes are untouched. */
.smi-wrap-feed {
	--smi-gap: 16px;
	--smi-radius: 10px;
	--smi-border: rgba(0, 0, 0, .1);
	--smi-card: #fff;
	--smi-text: inherit;
	--smi-muted: rgba(0, 0, 0, .6);
	--smi-facebook: #1877f2;
	--smi-instagram: #c13584;
	--smi-x: #111;
	margin: 1.5em 0;
}
.smi-wrap-feed *, .smi-wrap-feed *::before, .smi-wrap-feed *::after { box-sizing: border-box; }
.smi-wrap-feed a { color: inherit; text-decoration: none; display: block; height: 100%; }
.smi-wrap-feed a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.smi-wrap-feed img { max-width: 100%; height: auto; display: block; }
.smi-feed .smi-item { background: var(--smi-card); color: var(--smi-text); border: 1px solid var(--smi-border); border-radius: var(--smi-radius); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.smi-feed .smi-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.smi-body { padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.smi-text { margin: 6px 0; overflow-wrap: anywhere; }
.smi-wrap-feed time { font-size: 12px; color: var(--smi-muted); }
.smi-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--smi-muted); }
.smi-facebook .smi-badge { color: var(--smi-facebook); }
.smi-instagram .smi-badge { color: var(--smi-instagram); }
.smi-x .smi-badge { color: var(--smi-x); }
.smi-media-wrap { position: relative; }
.smi-is-video::after { content: ""; position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat; }

/* Grid */
.smi-tpl-grid { display: grid; gap: var(--smi-gap); grid-template-columns: repeat(var(--smi-cols), minmax(0, 1fr)); }
.smi-tpl-grid .smi-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* List */
.smi-tpl-list { display: grid; gap: var(--smi-gap); grid-template-columns: repeat(var(--smi-cols), minmax(0, 1fr)); }
.smi-tpl-list a { display: flex; gap: 0; align-items: stretch; }
.smi-tpl-list .smi-media-wrap { flex: 0 0 34%; max-width: 240px; }
.smi-tpl-list .smi-thumb { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.smi-tpl-list .smi-body { flex: 1; padding: 14px 18px; }
.smi-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.smi-account { font-size: 13px; font-weight: 600; }

/* Masonry */
.smi-tpl-masonry { column-count: var(--smi-cols); column-gap: var(--smi-gap); }
.smi-tpl-masonry .smi-item { break-inside: avoid; margin: 0 0 var(--smi-gap); display: inline-block; width: 100%; }
.smi-tpl-masonry .smi-thumb { width: 100%; height: auto; }

/* Photo wall */
.smi-tpl-wall { display: grid; gap: 4px; grid-template-columns: repeat(var(--smi-cols), minmax(0, 1fr)); }
.smi-tpl-wall .smi-item { position: relative; aspect-ratio: 1 / 1; border: 0; border-radius: 0; }
.smi-tpl-wall .smi-item:hover { transform: none; box-shadow: none; }
.smi-tpl-wall .smi-thumb { width: 100%; height: 100%; object-fit: cover; }
.smi-tpl-wall .smi-no-image { background: #f2f2f2; }
.smi-tpl-wall .smi-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 70%); opacity: 0; transition: opacity .2s ease; font-size: 13px; }
.smi-tpl-wall .smi-no-image .smi-overlay { opacity: 1; color: #222; background: none; justify-content: center; }
.smi-tpl-wall .smi-overlay time { color: inherit; opacity: .85; }
.smi-tpl-wall a:hover .smi-overlay, .smi-tpl-wall a:focus-visible .smi-overlay { opacity: 1; }
.smi-play, .smi-multi { position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; border-radius: 12px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 7px; }
.smi-play::before { content: ""; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
.smi-play + .smi-multi { right: 40px; }

/* Social feed */
.smi-tpl-feed { display: flex; flex-direction: column; gap: var(--smi-gap); max-width: 640px; margin: 0 auto; }
.smi-tpl-feed .smi-item:hover { transform: none; }
.smi-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.smi-avatar { flex: 0 0 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: var(--smi-muted); }
.smi-facebook .smi-avatar { background: var(--smi-facebook); }
.smi-instagram .smi-avatar { background: var(--smi-instagram); }
.smi-x .smi-avatar { background: var(--smi-x); }
.smi-who { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.smi-who .smi-account { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smi-tpl-feed .smi-text { padding: 0 16px; margin: 12px 0; font-size: 15px; }
.smi-tpl-feed .smi-thumb { width: 100%; height: auto; max-height: 640px; object-fit: cover; }
.smi-foot { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--smi-muted); border-top: 1px solid var(--smi-border); }

/* Pager */
.smi-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; font-size: 14px; }
.smi-pager a { display: inline-block; height: auto; padding: 6px 14px; border: 1px solid var(--smi-border); border-radius: 999px; }
.smi-page-num { color: var(--smi-muted); }

/* Responsive: wide layouts step down on smaller screens. */
.smi-feed { --smi-cols: var(--smi-cols-set, 3); }
/* Tablets (768–1024px): wide layouts step down. */
@media (max-width: 1024px) {
	.smi-feed.smi-cols-4, .smi-feed.smi-cols-5, .smi-feed.smi-cols-6 { --smi-cols: 3; }
	.smi-tpl-masonry.smi-cols-3, .smi-tpl-masonry.smi-cols-4, .smi-tpl-masonry.smi-cols-5, .smi-tpl-masonry.smi-cols-6 { --smi-cols: 2; }
	.smi-tpl-list.smi-feed { --smi-cols: 1; }
}
/* Below tablet size (phones, under 768px): every template is one column. */
@media (max-width: 767px) {
	.smi-wrap-feed .smi-feed { --smi-cols: 1; }
	.smi-wrap-feed .smi-tpl-wall { gap: 12px; }
	.smi-tpl-list .smi-media-wrap { flex-basis: 30%; }
}
.smi-tpl-wall .smi-text { margin: 0 0 4px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.smi-tpl-wall .smi-no-image .smi-overlay { justify-content: flex-start; }
/* Phones: no hover on touch screens, so the photo wall shows its caption at all times. */
@media (max-width: 767px) {
	.smi-tpl-wall .smi-overlay { opacity: 1; }
}