/*
Theme Name: Renku
Theme URI: https://wordpress.com/theme/renku/
Author: Automattic
Author URI: https://automattic.com/
Description: Renku community theme — a private feed for the people you actually know. Designed for Renku community sites running on WordPress.com.
Version: 0.1.0
Tested up to: 6.6
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: renku
Tags: blog, photography, three-columns, custom-logo, block-styles, block-patterns, full-site-editing
*/

/* ---------- Custom font faces ---------- */
/* Inter Variable — primary UI font. One file covers weights 100–900. */
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/InterVariable.woff2') format('woff2-variations'),
	     url('assets/fonts/InterVariable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
/* ---------- Global resets ---------- */
body {
	margin: 0;
	min-height: 100vh;
	background-color: #FFFFFF;
	background-image: linear-gradient(360deg, rgba(255, 255, 255, 0.5) 23.22%, rgba(216, 242, 255, 0.5) 60.27%, rgba(0, 221, 255, 0.5) 100%);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 50vh;
}

/* ---------- Site footer ---------- */
/* The credit line is muted via a className so the look survives block
   re-rendering (inline opacity on the group gets stripped by the parser
   because it isn't a declared block attribute). */
.renku-footer-credit {
	color: var(--wp--preset--color--ink);
	opacity: 0.6;
}
/* Inherit ink instead of the browser's default link blue; keep a soft
   underline so they still read as links. */
.wp-site-blocks > footer a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-site-blocks > footer a:hover {
	opacity: 0.7;
}

/* ---------- Site header (sticky logo) ---------- */
/* Sticky lives on the <header> wrapper that template-part emits — the inner
   .renku-site-header div is too short to provide its own scroll travel. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.renku-site-mark {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.renku-site-mark img {
	width: 35px;
	height: 35px;
	display: block;
}

/* ---------- Community hero ---------- */
.renku-community-hero {
	text-align: center;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--70);
}

.renku-community-hero .wp-block-site-logo img {
	width: 88px;
	height: 88px;
	border-radius: 22px;
	/* Subtle blueish-ink shadow so it sits in the sky gradient instead of feeling
	   like a flat black drop. */
	box-shadow: 0 12px 32px rgba(0, 60, 140, 0.10);
}

.renku-community-hero .wp-block-site-title {
	font-size: clamp(44px, 5vw, 72px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 36px 0 0;
}

.renku-community-hero .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

.renku-community-hero__byline {
	margin-top: 32px;
	margin-bottom: var(--wp--preset--spacing--50);
	font-size: 14px;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.renku-community-hero__byline > span {
	/* Dim the text only — keep avatars full color. */
	color: var(--wp--preset--color--ink);
	opacity: 0.65;
}

.renku-community-hero__avatars {
	display: inline-flex;
}
.renku-community-hero__avatars img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--paper);
	margin-left: -6px;
}
.renku-community-hero__avatars img:first-child {
	margin-left: 0;
}

/* =================================================================
   Feed — editorial mosaic, NOT a uniform photo grid.

   The first card of the first page is a 2×2 "hero" with display
   typography; everything else is a 1×1 card with a square photo and
   an editorial caption underneath. Wider gaps + dense auto-flow are
   what stop this from reading as Instagram.
   ================================================================= */
.renku-feed {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: dense;
	gap: 18px;
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
}

@media (max-width: 900px) {
	.renku-feed { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
	.renku-feed { grid-template-columns: 1fr; gap: 20px; padding-inline: var(--wp--preset--spacing--30); }
}

/* ---------- Card ---------- */
.renku-feed > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.renku-card {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--paper);
	cursor: pointer;
	/* First-paint reveal — staggered by --renku-card-index (set inline per card,
	   capped at 11 so a long feed settles in under a second). */
	opacity: 0;
	transform: translateY(8px);
	animation: renku-card-in 540ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: calc(var(--renku-card-index, 0) * 60ms);
}

/* The hero card claims two columns and two rows. The dense flow algorithm
   tucks normal 1×1 cards into the gap on its right. On 2-col viewports we
   step it down to 2×1 so it still feels featured but doesn't dominate. */
.renku-card--hero {
	grid-column: span 2;
	grid-row: span 2;
	gap: 16px;
}
@media (max-width: 900px) {
	.renku-card--hero { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 600px) {
	.renku-card--hero { grid-column: 1 / -1; }
}

@keyframes renku-card-in {
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.renku-card {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* ---------- Media: holds the photo + the inset caption ---------- */
.renku-card__media {
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 8px;
	background: var(--wp--preset--color--cloud);
	isolation: isolate;
}
/* Direct child only — the avatar inside the caption is also an <img>,
   we don't want the poster styles bleeding onto it. Video cards render a
   <video> here instead of an <img>; both get the same treatment. */
.renku-card__media > img,
.renku-card__media > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 540ms cubic-bezier(0.16, 1, 0.3, 1);
}
.renku-card:hover .renku-card__media > img,
.renku-card:hover .renku-card__media > video,
.renku-card:focus-visible .renku-card__media > img,
.renku-card:focus-visible .renku-card__media > video {
	transform: scale(1.012);
}

/* The "lifted into light" inset glow. Painted by a pseudo-element layered
   ABOVE the absolutely-positioned <img>; setting box-shadow on the media
   element itself put the shadow behind the image, where it was invisible. */
.renku-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 30px #FFFFFF;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 1;
}
.renku-card:hover .renku-card__media::after,
.renku-card:focus-visible .renku-card__media::after {
	opacity: 1;
}

/* Hide the "video" badge while the preview is actually playing — it would
   be redundant on top of the moving image. */
.renku-card.is-previewing .renku-card__type {
	opacity: 0;
}
.renku-card__type {
	transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Video badge — top-right corner, paper chip on a subtle ink scrim. */
.renku-card__type {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--paper);
	background: rgba(10, 10, 10, 0.45);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 50%;
	pointer-events: none;
	z-index: 3;
}

/* ---------- Caption: a single row, anchored to the bottom of the photo.
   Lives ABOVE the inset-shadow layer (z-index:2 > ::after's 1). Subtle
   ink gradient ensures the white text reads on any photo without becoming
   a heavy Instagram-style black wash. ---------- */
.renku-card__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 64px 14px 12px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--wp--preset--color--paper);
	background: linear-gradient(
		180deg,
		rgba(10, 10, 10, 0) 0%,
		rgba(10, 10, 10, 0.35) 55%,
		rgba(10, 10, 10, 0.7) 100%
	);
	z-index: 2;
	pointer-events: none;
}

.renku-card__byline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex: 1 1 auto;
}
.renku-card__avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.4);
}
.renku-card__author {
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.renku-card__dot {
	color: rgba(255, 255, 255, 0.65);
	flex-shrink: 0;
}
.renku-card__date {
	color: rgba(255, 255, 255, 0.75);
	flex-shrink: 0;
}

.renku-card__stats {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.9);
	flex-shrink: 0;
}
.renku-card__stat {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* ---------- Hero card: bigger photo, same caption styling ---------- */
.renku-card--hero .renku-card__media {
	border-radius: 12px;
}

/* Phosphor Fill sprite icons. Size comes from the inline width/height attrs
   (set by renku_icon() in PHP or directly in JS); color follows currentColor. */
.renku-icon {
	flex-shrink: 0;
	fill: currentColor;
	vertical-align: middle;
}

/* =================================================================
   Lightbox — desktop "open in window" experience for grid cards.

   One coherent dark surface (no white-shell-with-dark-sidebar split):
   the media gets a calm theater stage, the conversation lives in a
   sidebar on the right. Backdrop is dim, sky-tinted, heavily blurred.
   Photos and videos fit naturally via object-fit: contain — no more
   aspect-ratio fight that caused stacking glitches.
   ================================================================= */
.renku-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: none;
}
.renku-lightbox[data-open="true"] {
	display: block;
	animation: renkuLightboxFade 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes renkuLightboxFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

body.renku-lightbox-open {
	overflow: hidden;
}

.renku-lightbox__backdrop {
	position: absolute;
	inset: 0;
	/* Restrained frosted scrim — the blur does the heavy lifting, the tint
	   is just a hint. The radial vignette this replaced felt theatrical
	   and dated; this is the Apple-sheet / Linear / Vercel register —
	   page underneath stays barely visible through the frost, the modal
	   stands out by contrast not by burying its context in black. */
	background: rgba(15, 22, 32, 0.30);
	backdrop-filter: blur(28px) saturate(140%);
	-webkit-backdrop-filter: blur(28px) saturate(140%);
}

/* =========================================================
   LIGHTBOX SHELL — Instagram-desktop pattern.

   Fixed-size modal sized to the VIEWPORT, not the media.
   Photo column (1fr) is roomy; sidebar (400px) is stable.
   Media uses `object-fit: contain` inside its stage —
   accepts slight letterbox/pillarbox on non-matching aspects.
   Stage is solid black so any bars vanish into the modal.

   The modal stays the same shape regardless of what's inside;
   only the media's position-within-stage adapts. That's the
   Instagram approach and it's the right one for a feed
   lightbox: the chrome is predictable, the media is honored.
   ========================================================= */
.renku-lightbox__shell {
	--renku-sidebar-w: 400px;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	grid-template-columns: 1fr var(--renku-sidebar-w);

	width:  min(1300px, 96vw);
	height: min(900px,  92vh);

	background: linear-gradient(180deg, #161616 0%, #0A0A0A 100%);
	border-radius: 18px;
	overflow: hidden;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.05) inset,
		0 30px 80px rgba(0, 60, 140, 0.22),
		0 8px 20px rgba(0, 0, 0, 0.30);
	animation: renkuLightboxIn 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
	color: var(--wp--preset--color--paper);
}

@media (max-width: 1099px) {
	.renku-lightbox__shell {
		--renku-sidebar-w: 360px;
	}
}
@keyframes renkuLightboxIn {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.renku-lightbox__close {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 5;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--paper);
	background: rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.renku-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.18);
}
.renku-lightbox__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--paper);
	outline-offset: 3px;
}

/* ---------- Stage: media holder, fills 1fr column ----------------
   The stage is the photo column. It has a SOLID size (1fr of the
   shell's width × full shell height) and a BLACK background. The
   media inside uses object-fit: contain to fit naturally — any
   resulting bars are black on black and read as the photo's own
   matte, not as broken layout. This is the Instagram approach.   */
.renku-lightbox__stage {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;  /* media + (optional) gallery dots */
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: #000;
}

.renku-lightbox__media {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: #000;
}
.renku-lightbox__media img,
.renku-lightbox__media video {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ---------- Gallery nav + thumbnails ---------- */
.renku-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--paper);
	background: rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms;
	z-index: 4;
	font-size: 18px;
	font-weight: 500;
}
.renku-lightbox__stage:hover .renku-lightbox__nav,
.renku-lightbox__nav:focus-visible {
	opacity: 1;
}
.renku-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.18);
}
.renku-lightbox__nav--prev { left: 16px; }
.renku-lightbox__nav--next { right: 16px; }
.renku-lightbox__nav[hidden] { display: none; }

/* Carousel position indicator — Instagram-style dots, active dot stretches
   into a pill so it reads at a glance. Click any dot to jump. */
.renku-lightbox__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 24px 22px;
}
.renku-lightbox__dots[hidden] { display: none; }
.renku-lightbox__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.renku-lightbox__dot:hover { background: rgba(255, 255, 255, 0.55); }
.renku-lightbox__dot[aria-current="true"] {
	background: var(--wp--preset--color--paper);
}
.renku-lightbox__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--sky);
	outline-offset: 3px;
}

/* ---------- Video sound toggle ---------- */
.renku-lightbox__sound {
	position: absolute;
	bottom: 24px;
	left: 24px;
	z-index: 4;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--paper);
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.renku-lightbox__sound:hover {
	background: rgba(0, 0, 0, 0.75);
}
.renku-lightbox__sound[hidden] { display: none; }

/* ---------- Sidebar (right column) -----------------------------------
   Single dark column. Three rows: author header → scrolling body
   (title + comments) → actions footer. Stable height; comments
   scroll inside. */
.renku-lightbox__sidebar {
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-width: 0;
	min-height: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--paper);
}

.renku-lightbox__author {
	padding: 18px 22px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.renku-lightbox__author-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}
.renku-lightbox__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.renku-lightbox__author-name {
	font-weight: 500;
	font-size: 14px;
}
.renku-lightbox__author-dot {
	color: rgba(255, 255, 255, 0.32);
}
.renku-lightbox__author-date {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
}

.renku-lightbox__body {
	overflow-y: auto;
	padding: 18px 22px 12px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 0;
}

.renku-lightbox__title {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0;
	text-wrap: balance;
}

.renku-lightbox__comments {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.renku-lightbox__loading,
.renku-lightbox__empty {
	color: rgba(255, 255, 255, 0.45);
	font-size: 13px;
	margin: 0;
}

/* Comment bubbles — uses the exact same SVG-shell pillow speech bubble as
   the renku-lp testimonials section. Avatar sits bottom-left, bubble has
   gradient white→light-gray with the bezier tail emerging from its
   bottom-left corner. Shell is generated by bubble-shell.js. */
.renku-testimonial {
	display: flex !important;
	align-items: flex-end;
	gap: 0.6rem;
}
/* Date stamp shown next to the author name inside the bubble's meta line.
   Relative when fresh (3m / 2h / 4d), absolute date when older. No hover
   tooltip — keep it quiet, the relative form is enough context. */
.renku-testimonial__date {
	margin-left: 4px;
	font-weight: 400;
	color: rgba(10, 10, 10, 0.45);
}

.renku-testimonial__avatar {
	flex: 0 0 24px;
	margin: 0;
	/* Pull avatar down a few px so its bottom aligns with the bubble tail tip
	   (the SVG tail extends 8px below the bubble's box). */
	transform: translateY(8px);
}
.renku-testimonial__avatar img {
	width: 24px !important;
	height: 24px !important;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.renku-testimonial__bubble {
	position: relative;
	background: transparent;        /* SVG shell owns the visual */
	color: #0A0A0A;
	border-radius: 0;
	padding: 12px 18px 14px;
	width: fit-content;
	max-width: 100%;
	letter-spacing: -0.01em;
}
.renku-testimonial__bubble-shell {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	overflow: visible;
	z-index: 0;
}
.renku-testimonial__bubble > p {
	position: relative;
	z-index: 1;
}
.renku-testimonial__meta {
	font-size: 12px;
	line-height: 1.2;
	margin: 0 0 2px;
	color: rgba(10, 10, 10, 0.55);
}
.renku-testimonial__meta strong {
	font-weight: 600;
	color: #0A0A0A;
}
.renku-testimonial__message {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
	margin: 0;
	color: #0A0A0A;
	text-wrap: balance;
}

/* ---------- Actions footer: like counter + share ------------------- */
.renku-lightbox__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	padding: 12px 18px 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.renku-lightbox__action--share {
	margin-left: auto;
}
.renku-lightbox__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	min-height: 36px;
	background: transparent;
	color: #FFFFFF;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	font-size: 12px;
	font-family: inherit;
	transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.renku-lightbox__action:hover {
	background: rgba(255, 255, 255, 0.08);
}
.renku-lightbox__action:active {
	transform: scale(0.96);
}
/* Static (read-only) variant — used for the like counter. No pointer,
   no hover or active effect. Keeps the cluster looking consistent with
   the share button next to it without inviting a click. */
.renku-lightbox__action--static {
	cursor: default;
	pointer-events: none;
}
.renku-lightbox__action--static:hover,
.renku-lightbox__action--static:active {
	background: transparent;
	transform: none;
}
.renku-lightbox__action-count {
	font-variant-numeric: tabular-nums;
	min-width: 12px;
}
.renku-lightbox__action[data-liked="true"] .renku-icon-heart {
	transform: scale(1.04);
	transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Toast — small floating message at top of sidebar (e.g. "Link copied"). */
.renku-lightbox__toast {
	position: absolute;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.94);
	color: #0A0A0A;
	font-size: 12px;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	z-index: 10;
	pointer-events: none;
	animation: renkuToastIn 180ms ease-out;
}
@keyframes renkuToastIn {
	from { opacity: 0; transform: translate(-50%, 6px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Mobile: full-screen vertical stack ----------------------
   Stage on top, sidebar (author / title / comments / actions) below
   in a single scroll. The whole modal fills the viewport — no rounded
   corners, no shell padding around it (rather than a tiny floating
   dialog on a 375px phone, which would feel cramped). */
@media (max-width: 880px) {
	.renku-lightbox__shell {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		width: 100vw;
		height: 100vh;
		max-width: 100vw;
		max-height: 100vh;
		border-radius: 0;
	}
	.renku-lightbox__stage {
		/* The photo takes the top portion of the viewport. 50vh feels right
		   for portrait media on a portrait device (photo + still see the
		   conversation below); landscape media within 50vh just letterboxes
		   inside its column, same as desktop. */
		height: 50vh;
		min-height: 0;
	}
	.renku-lightbox__sidebar {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.06);
	}
	.renku-lightbox__close {
		top: 12px;
		right: 12px;
	}
}