/*
 * Novagirl Shots — the card in the feed.
 *
 * Same width and frame as a post card, but one joined object: the
 * white strip, the picture (or the video box), the white text panel,
 * the white foot with the ⋯ menu.
 * Square where the pieces meet, rounded on the outside only.
 */

/* The text font, shipped with the theme (assets/fonts, SIL Open
   Font License), so it loads from this site and nowhere else. */
@font-face {
	font-family: "Libre Baskerville";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/libre-baskerville-latin-400-italic.woff2") format("woff2");
}

.short-card { margin-inline: var(--frame); }

/* Whatever comes last (text panel, picture or video box) carries
   the rounded bottom corners. */
.short-card > :last-child {
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

/* ---------------------------------------------------------------
   The strip: NOVAGIRL SHOTS, the author's name in gold.
   --------------------------------------------------------------- */

.short-strip {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.25rem;
	padding: 0 0.875rem;
	background: var(--tablet);
	border-radius: var(--radius) var(--radius) 0 0;
	font-family: var(--sans);
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	white-space: nowrap;
}

.short-label {
	flex: none;
	color: var(--ink);
}

/* Gold, deep enough to read on white. Long names fade into "…". */
.short-name {
	min-width: 0;
	margin-left: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #8c6a12;
}

/* ---------------------------------------------------------------
   The foot: a slim white strip with the ⋯ button on the right.
   Above the picture in the stacking order, so the menu, which opens
   upwards, lies over the text and the picture.
   --------------------------------------------------------------- */

.short-foot {
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: flex-end;
	padding: 0.125rem 0.375rem 0.375rem;
	background: var(--tablet);
}

/* Straight under the picture (no text), it gets a little air. */
.short-picture + .short-foot,
.short + .short-foot { padding-top: 0.375rem; }

.short-actions {
	position: relative;
	flex: none;
}

.short-more {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.short-more:hover,
.short-more[aria-expanded="true"] { background: #efefec; }

.short-more:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: -2px;
}

.short-more svg {
	width: 18px;
	height: 18px;
}

.short-menu {
	position: absolute;
	bottom: calc(100% + 4px);
	right: 0;
	display: flex;
	flex-direction: column;
	min-width: 12.5rem;
	padding: 0.375rem;
	background: var(--tablet);
	border-radius: var(--radius-sm);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.short-menu[hidden] { display: none; }

.short-menu a {
	display: block;
	padding: 0.625rem 0.75rem;
	border-radius: 6px;
	color: var(--ink);
	text-decoration: none;
}

.short-menu a:hover,
.short-menu a:focus-visible {
	background: #f0f0ee;
	outline: none;
}

/* ---------------------------------------------------------------
   The picture
   --------------------------------------------------------------- */

.short-picture {
	display: block;
	width: 100%;
}

/* A link Shot: the picture is the link, with a link symbol in the
   middle in the same round style as the play button. */
.short-link {
	position: relative;
	display: block;
	overflow: hidden;
}

.short-link-icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.short-link-icon svg {
	width: 64px;
	height: 64px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
	transition: transform 200ms ease;
}

.short-link:hover .short-link-icon svg,
.short-link:focus-visible .short-link-icon svg { transform: scale(1.08); }

.short-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* With a video: a box in the video's shape (inline aspect-ratio),
   the picture over the video as its cover, and one button over all
   of it. */
.short {
	position: relative;
	aspect-ratio: 9 / 16; /* the inline style overrides this with the clip's own shape */
	overflow: hidden;
	background: #0d0d0d;
	isolation: isolate;
}

.short-video,
.short-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.short-video { z-index: 0; }

/* The cover sits over the video until the first real frame plays,
   and comes back when it ends. */
.short-poster {
	z-index: 1;
	transition: opacity 200ms ease;
}

.short.is-started .short-poster { opacity: 0; }

.short-play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.short-play svg {
	width: 64px;
	height: 64px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
	transition: opacity 200ms ease, transform 200ms ease;
}

.short.is-playing .short-play svg {
	opacity: 0;
	transform: scale(0.9);
}

.short-play:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* ---------------------------------------------------------------
   The text: in full, Libre Baskerville italic, roomy, on white,
   running straight on into the foot below it.
   --------------------------------------------------------------- */

.short-text {
	padding: 1.375rem 1.5rem 0.5rem;
	background: var(--tablet);
	color: var(--ink);
	font-family: "Libre Baskerville", georgia, serif;
	font-style: italic;
	font-size: 0.96875rem;
	line-height: 1.75;
	overflow-wrap: break-word;
}

.short-text p + p { margin-top: 0.9em; }

/* No menu under it (nothing to put in one): the text ends the card. */
.short-text:last-child { padding-bottom: 1.5rem; }