/* Trend Lava: eigen sjablonen met AI (1.76.161) */

/* Tabbalk: tabs krimpen niet (anders schoof het getal over de naam heen op de telefoon). De balk schuift,
   en de rand vervaagt zolang er nog een tab buiten beeld staat (klassen is-l en is-r uit lava-studio.js). */
.nsl-tl-tabs { scroll-margin-top: 92px; } /* rechtstreekse link naar een tab: niet onder de kopbalk */
.nsl-tl-tabs button, .nsl-tl-tabs button > * { flex-shrink: 0; }
.nsl-tl-tabs.is-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.nsl-tl-tabs.is-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.nsl-tl-tabs.is-l.is-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }

/* Maken: eigen sjabloon kiezen onder de vaste sjablonen */
.nsl-tl-mytpl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 4px; }
.nsl-tl-mytpl .nsl-tl-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nsl-tl-mytpl .nsl-tl-link .nsl-ico { color: var(--green); }
.nsl-tl-mytpl select:disabled { opacity: .55; }

/* AI-vak: aantal posts en sjabloon laten kiezen */
.nsl-tl-ai__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 12px; }
.nsl-tl-ai__opts [data-tl-ain] { width: min(100%, 300px); }
.nsl-tl-ai__opts .nsl-check { margin: 0; font-size: .88rem; }

/* Tab Sjablonen */
.nsl-tl-tpl { display: grid; gap: 30px; }
.nsl-tl-tpl__new { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: start; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.nsl-tl-tpl__intro { display: grid; gap: 10px; }
.nsl-tl-tpl__intro .nsl-h3 { margin: 0; }
.nsl-tl-tpl__intro p { margin: 0; }
.nsl-tl-tpl__quota { padding-left: 12px; border-left: 2px solid var(--line-2); font: 500 .82rem/1.5 var(--f-mono); color: var(--muted); }
.nsl-tl-tpl__quota.is-out { border-left-color: var(--pink); color: var(--text); }
.nsl-tl-tpl__form { display: grid; gap: 14px; }
.nsl-tl-tpl__form [data-tl-tpl-go]:disabled { opacity: .55; cursor: not-allowed; }

.nsl-tl-tpl__view { display: grid; gap: 18px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.nsl-tl-tpl__view[hidden] { display: none; }
.nsl-tl-tpl__vhead { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: center; }
.nsl-tl-tpl__vhead p { margin: 0; }
/* Kolommen in de verhouding van de formaten (4:5, 9:16, 1:1): dan zijn alle drie even hoog */
.nsl-tl-tpl__fmts { display: grid; grid-template-columns: .8fr .5625fr 1fr; gap: 18px; align-items: end; max-width: 1040px; }
.nsl-tl-tpl__fmts figure { margin: 0; display: grid; gap: 8px; min-width: 0; }
.nsl-tl-tpl__cv { border-radius: 4px; overflow: hidden; background: #000; }
.nsl-tl-tpl__cv canvas { display: block; width: 100%; height: auto; }
.nsl-tl-tpl__fmts figcaption { font: 500 .76rem var(--f-mono); color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
.nsl-tl-tpl__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.nsl-tl-tpl__acts .nsl-tl-link { display: inline-flex; align-items: center; gap: 6px; }
.nsl-tl-tpl__acts [data-tl-tpl-del] { margin-left: auto; }
.nsl-tl-tpl__fix { max-width: 640px; }

.nsl-tl-tpl__listhead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: -12px; }
.nsl-tl-tpl__listhead .nsl-h3 { margin: 0; }
.nsl-tl-tpl__listhead small { font: 500 .78rem var(--f-mono); }
.nsl-tl-tpl__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 16px; }
.nsl-tl-tcard { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(19, 16, 33, .5); transition: transform .2s var(--ease), border-color .2s var(--ease); }
.nsl-tl-tcard:hover { transform: translateY(-2px); border-color: var(--line-2); }
.nsl-tl-tcard.is-on { border-color: rgba(138, 92, 230, .6); }
.nsl-tl-tcard__img { display: block; padding: 0; border: 0; background: #000; cursor: pointer; }
.nsl-tl-tcard__img canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.nsl-tl-tcard__body { display: grid; gap: 3px; padding: 11px 12px 10px; }
.nsl-tl-tcard__body b { font: 600 .92rem var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsl-tl-tcard__body small { color: var(--muted); font-size: .76rem; }

@media (max-width: 860px) {
	.nsl-tl-tpl__new { grid-template-columns: 1fr; gap: 18px; }
	.nsl-tl-tpl__vhead { grid-template-columns: 1fr; gap: 6px; }
	.nsl-tl-tpl__fmts { gap: 10px; }
}
@media (max-width: 560px) {
	.nsl-tl-mytpl { grid-template-columns: 1fr; gap: 8px; }
	.nsl-tl-mytpl .nsl-tl-link { justify-self: start; }
	.nsl-tl-tpl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.nsl-tl-tpl__acts [data-tl-tpl-del] { margin-left: 0; }
	.nsl-tl-tpl__fmts figcaption { font-size: .68rem; }
	/* Telefoon: feed en story naast elkaar, vierkant eronder. Alle drie even hoog: (breedte - gat) / (0,8 + 0,5625). */
	.nsl-tl-tpl__fmts { grid-template-columns: .8fr .5625fr; row-gap: 16px; }
	.nsl-tl-tpl__fmts figure[data-fmt="square"] { grid-column: 1 / -1; justify-self: center; width: calc((100% - 10px) / 1.3625); }
}

/* Verkooppagina: voorbeelden van eigen sjablonen */
.nsl-lava-own { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.nsl-lava-own figure { margin: 0; display: grid; gap: 10px; align-content: start; }
.nsl-lava-own canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 4px; background: #000; }
.nsl-lava-own figcaption { display: grid; gap: 2px; }
.nsl-lava-own figcaption small { font: 500 .74rem var(--f-mono); color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
.nsl-lava-own figcaption span { color: var(--muted); font-size: .92rem; }
.nsl-lava-own__rule { max-width: 720px; margin: 26px auto 0; text-align: center; color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) { .nsl-lava-own { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }