/*
 * NIGHT STUDIO brand film: the secondary link beside 記事を読む, the small poster card at the
 * foot of the entrance and the film dialog. Front page only, loaded after night-studio.css and
 * scoped to body.tbns-home (plus the scroll lock class brand-film.js puts on <html>).
 */

/* secondary link: quieter than the 記事を読む pill */
.tbns-home .actions { flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.tbns-home .tbns-film-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--tbns-ink2); font-size: 14px; letter-spacing: .04em; text-decoration: underline; text-decoration-color: var(--tbns-line2); text-underline-offset: 5px; }
.tbns-home .tbns-film-link:hover { color: var(--tbns-amber-hi); text-decoration-color: currentColor; }
.tbns-home .tbns-film-play { position: relative; flex: none; width: 24px; height: 24px; border: 1px solid var(--tbns-amber); border-radius: 50%; }
.tbns-home .tbns-film-play::before { content: ""; position: absolute; top: 50%; left: 50%; margin: -4px 0 0 -2px; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent var(--tbns-amber); }

/* poster card: nothing drawn over the poster, label and play mark beside it */
.tbns-home .tbns-film-card { display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: center; gap: 0 14px; max-width: 340px; margin-bottom: 12px; color: var(--tbns-ink2); text-decoration: none; }
.tbns-home .tbns-film-card__poster { display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--tbns-line2); border-radius: 2px; background: #000; transition: border-color .2s; }
.tbns-home .tbns-film-card__poster img { width: 100%; height: 100%; object-fit: cover; }
.tbns-home .tbns-film-card__body { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "play title" "play meta"; align-items: center; gap: 0 10px; }
.tbns-home .tbns-film-card .tbns-film-play { grid-area: play; }
.tbns-home .tbns-film-card__title { grid-area: title; color: var(--tbns-ink); font-size: 13px; letter-spacing: .04em; line-height: 1.5; }
.tbns-home .tbns-film-card__meta { grid-area: meta; color: var(--tbns-mute); font-size: 12px; line-height: 1.5; }
.tbns-home .tbns-film-card:hover .tbns-film-card__poster { border-color: var(--tbns-amber); }
.tbns-home .tbns-film-card:hover .tbns-film-card__title { color: var(--tbns-amber-hi); }

/* set by brand-film.js when the sticky entrance would be taller than the viewport */
.tbns-home .entry-inner.is-film-fit { position: static; }

@media (max-width: 1100px) {
	.tbns-home .tbns-film-card { grid-template-columns: 112px minmax(0, 1fr); }
}

/* one column: the compact entrance keeps only the link; the card would push the list down */
@media (max-width: 860px) {
	.tbns-home .actions { gap: 0 18px; }
	.tbns-home .tbns-film-link { min-height: 44px; gap: 8px; font-size: 13px; }
	.tbns-home .tbns-film-play { width: 22px; height: 22px; }
	.tbns-home .tbns-film-card { display: none; }
}

/* dialog: title, length/sound and 閉じる above the video, messages below it */
html.tbns-film-lock,
html.tbns-film-lock body.tbns-home { overflow: hidden; }
.tbns-home .tbns-film { width: min(960px, calc(100vw - 24px), calc((100vh - 150px) * 16 / 9)); max-width: none; max-height: calc(100vh - 16px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--tbns-line2); border-radius: 4px; background: var(--tbns-bg); color: var(--tbns-ink); color-scheme: dark; }
@supports (height: 100dvh) {
	.tbns-home .tbns-film { width: min(960px, calc(100vw - 24px), calc((100dvh - 150px) * 16 / 9)); max-height: calc(100dvh - 16px); }
}
.tbns-home .tbns-film::backdrop { background: rgba(8, 7, 6, .88); }
.tbns-home .tbns-film__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; padding: 6px 8px 6px 16px; }
.tbns-home .tbns-film__title { margin: 0; color: var(--tbns-ink); font-size: 15px; font-weight: 600; letter-spacing: .04em; line-height: 1.5; }
.tbns-home .tbns-film__meta { margin: 0; color: var(--tbns-mute); font-size: 13px; line-height: 1.5; }
.tbns-home .tbns-film__close { min-height: 44px; margin-left: auto; padding: 0 18px; border: 1px solid var(--tbns-line2); border-radius: 99px; background: transparent; color: var(--tbns-ink); font: inherit; font-size: 14px; cursor: pointer; }
.tbns-home .tbns-film__close:hover { border-color: var(--tbns-amber); color: var(--tbns-amber-hi); }
.tbns-home .tbns-film__frame { aspect-ratio: 16 / 9; background: #000; }
.tbns-home .tbns-film__video { display: block; width: 100%; height: 100%; background: #000; }
.tbns-home .tbns-film__foot { padding: 6px 16px 10px; color: var(--tbns-mute); font-size: 12.5px; line-height: 1.6; }
.tbns-home .tbns-film__status { margin: 0; color: var(--tbns-ink); font-size: 13.5px; }
.tbns-home .tbns-film__status:not(:empty) { margin: 4px 0 6px; }
.tbns-home .tbns-film__direct { margin: 0; }
.tbns-home .tbns-film__direct a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.tbns-home .tbns-film__direct a:hover { color: var(--tbns-amber-hi); }

@media (prefers-reduced-motion: no-preference) {
	.tbns-home .tbns-film[open] { animation: tbns-film-in .2s ease-out; }
	@keyframes tbns-film-in {
		from { opacity: 0; transform: translateY(6px); }
	}
}