.jig-gallery {
	/* Inherits the site's own brand color (Porto's customizer setting) so the gallery matches
	   jiyyo.com's actual theme instead of a hardcoded guess; falls back to this navy if the
	   variable isn't defined (e.g. a different theme). */
	--jig-accent: var(--porto-primary-color, #1c3651);
	--jig-accent-soft: color-mix(in srgb, var(--jig-accent) 14%, transparent);
	max-width: 1600px;
	margin: 0 auto;
	padding: 52px 32px 64px;
	box-sizing: border-box;
	font-family: inherit;
}
.jig-gallery *,
.jig-gallery *::before,
.jig-gallery *::after {
	box-sizing: border-box;
}

.jig-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 44px;
}
.jig-heading {
	/* Font size/weight/color intentionally left unset — an <h2> already inherits the theme's
	   own heading style (Porto sets this globally), so this reads as part of the site rather
	   than a custom size we picked. */
	margin: 0 0 14px;
	position: relative;
	display: inline-block;
}
.jig-heading::after {
	/* Small accent underline so the heading reads as "this gallery" rather than a generic <h2> —
	   purely decorative, sized off the heading's own text rather than the full header width. */
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translateX(-50%);
	width: 56px;
	height: 3px;
	border-radius: 999px;
	background: var(--jig-accent);
}
.jig-subheading {
	margin: 18px 0 0;
	font-size: 16px;
	line-height: 1.6;
	opacity: .7;
}

/* Small uppercase kicker above a heading (intro and featured story). */
.jig-eyebrow {
	display: block;
	margin-bottom: 10px;
	color: var(--jig-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.jig-section-title {
	margin: 0 0 22px;
	text-align: center;
	font-size: 22px;
}

/* ── Figures strip ─────────────────────────────────────────────────────────────── */
.jig-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	max-width: 960px;
	margin: 0 auto 64px;
	border: 1px solid #e3e8ee;
	border-radius: 16px;
	background: linear-gradient(180deg, #fff, #f7f9fb);
	box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
	overflow: hidden;
}
.jig-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 26px 16px 24px;
	text-align: center;
}
.jig-stat + .jig-stat {
	border-left: 1px solid #e3e8ee;
}
.jig-stat-icon {
	width: 30px;
	height: 30px;
	margin-bottom: 6px;
	padding: 6px;
	border-radius: 10px;
	background: var(--jig-accent-soft);
	fill: none;
	stroke: var(--jig-accent);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	box-sizing: content-box;
}
.jig-stat-num {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	color: #16283a;
	font-variant-numeric: tabular-nums;
}
.jig-stat-label {
	font-size: 13px;
	color: #6b7785;
}

/* ── "What you're watching" steps ──────────────────────────────────────────────── */
.jig-steps {
	max-width: 1100px;
	margin: 0 auto 72px;
}
.jig-steps-list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.jig-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px 22px 22px;
	border-radius: 14px;
	background: #f5f8fb;
	border: 1px solid #e6ecf2;
	margin: 0;
}
.jig-step::marker {
	content: none;
}
.jig-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: var(--jig-accent);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	box-shadow: 0 6px 14px var(--jig-accent-soft);
}
.jig-step-title {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.35;
	color: #16283a;
}
.jig-step-text {
	font-size: 14px;
	line-height: 1.55;
	color: #5b6876;
}
@media (min-width: 900px) {
	/* Arrow between steps on wide screens so they read as a sequence, not three random cards. */
	.jig-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 42px;
		right: -19px;
		width: 14px;
		height: 14px;
		border-top: 2px solid #b9c6d3;
		border-right: 2px solid #b9c6d3;
		transform: rotate(45deg);
	}
}

/* ── Featured story ────────────────────────────────────────────────────────────── */
.jig-spotlight {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 36px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto 80px;
	padding: 22px;
	border-radius: 20px;
	background: #0f2233;
	color: #fff;
	box-shadow: 0 24px 50px rgba(15, 34, 51, .22);
}
.jig-spotlight-media {
	min-height: 340px;
	aspect-ratio: 16 / 10;
}
.jig-spotlight-media .jig-tile-overlay,
.jig-spotlight-media .jig-tile-chip {
	display: none; /* title and label sit in the text column instead */
}
.jig-spotlight-media .jig-play-icon {
	width: 72px;
	height: 72px;
	margin: -36px 0 0 -36px;
}
.jig-spotlight-media .jig-play-icon::after {
	border-width: 12px 0 12px 20px;
}
.jig-spotlight-body {
	padding: 8px 18px 8px 0;
}
.jig-spotlight .jig-eyebrow {
	color: #7cc4ec;
}
.jig-spotlight-chip {
	display: inline-block;
	margin-bottom: 12px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.jig-spotlight-title {
	margin: 0 0 6px;
	color: #fff;
	font-size: 26px;
	line-height: 1.25;
}
.jig-spotlight-subtitle {
	margin: 0 0 14px;
	color: #9fc2dd;
	font-weight: 500;
}
.jig-spotlight-desc {
	margin: 0 0 14px;
	color: #c9d5e0;
	font-size: 15px;
	line-height: 1.65;
}
.jig-spotlight-meta {
	margin: 0 0 22px;
	color: #8ea3b6;
	font-size: 13px;
}
.jig-spotlight-btn,
.jig-spotlight-btn:visited,
.jig-spotlight-btn:hover,
.jig-spotlight-btn:focus {
	color: #0f2233;
	text-decoration: none;
}
.jig-spotlight-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 999px;
	background: #fff;
	font-weight: 600;
	font-size: 15px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.jig-spotlight-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.jig-spotlight-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}

/* ── Browse header (title + filters + explanation) ────────────────────────────── */
.jig-browse {
	margin-bottom: 36px;
}
.jig-browse .jig-filter-bar {
	margin-bottom: 14px;
}
.jig-filter-count {
	display: inline-block;
	min-width: 22px;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #eef2f6;
	color: #52606d;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}
.jig-filter-btn.is-active .jig-filter-count {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}
.jig-filter-desc {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
	color: #6b7785;
	font-size: 14px;
	line-height: 1.55;
	min-height: 1.55em;
}
.jig-filter-desc[hidden] {
	display: none;
}

/* ── Closing call to action ────────────────────────────────────────────────────── */
.jig-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	max-width: 1200px;
	margin: 80px auto 0;
	padding: 40px 44px;
	border-radius: 20px;
	background: linear-gradient(120deg, var(--jig-accent), #0f2233);
	color: #fff;
}
.jig-cta-text {
	flex: 1 1 380px;
}
.jig-cta-heading {
	margin: 0 0 8px;
	color: #fff;
	font-size: 26px;
	line-height: 1.25;
}
.jig-cta-text p {
	margin: 0;
	color: rgba(255, 255, 255, .85);
	font-size: 15px;
	line-height: 1.6;
}
.jig-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.jig-cta-btn,
.jig-cta-btn:visited,
.jig-cta-btn:hover,
.jig-cta-btn:focus {
	text-decoration: none;
}
.jig-cta-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.jig-cta-btn-primary,
.jig-cta-btn-primary:visited,
.jig-cta-btn-primary:hover {
	background: #fff;
	color: #0f2233;
}
.jig-cta-btn-ghost,
.jig-cta-btn-ghost:visited,
.jig-cta-btn-ghost:hover {
	border: 1px solid rgba(255, 255, 255, .6);
	color: #fff;
}
.jig-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.jig-cta-btn-ghost:hover {
	background: rgba(255, 255, 255, .12);
}

.jig-filter-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 44px;
}
.jig-filter-btn {
	padding: 9px 20px;
	border-radius: 999px;
	border: 1px solid #d7dde3;
	background: #fff;
	color: #33414f;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.jig-filter-btn:hover {
	border-color: var(--jig-accent);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
	transform: translateY(-1px);
}
.jig-filter-btn:active {
	transform: translateY(0);
}
.jig-filter-btn.is-active {
	background: var(--jig-accent);
	border-color: var(--jig-accent);
	color: #fff;
	box-shadow: 0 6px 16px var(--jig-accent-soft);
}

.jig-rows {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.jig-row-mosaic {
	display: flex;
	gap: 20px;
	/* The row's align-left/align-right class names collide with WordPress's own alignment
	   utility classes, which the theme styles with text-align — keep tile text left-aligned. */
	text-align: left;
}
.jig-row-mosaic.align-left {
	flex-direction: row-reverse;
}
.jig-mosaic-big {
	flex: 1 1 60%;
	min-height: 320px;
}
.jig-mosaic-small-col {
	flex: 1 1 38%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.jig-mosaic-small {
	flex: 1 1 0;
	min-height: 153px;
}

.jig-row-grid3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.jig-grid3-tile {
	min-height: 220px;
}

/* Scroll-reveal: rows start slightly lowered/faded and settle into place as they enter the
   viewport (see IntersectionObserver in the JS). Tiles appended later via "Load More"/filtering
   are marked already-visible by the JS so they don't replay the animation on every DOM insert.
   prefers-reduced-motion users skip straight to the settled state. */
.jig-row {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .5s ease, transform .5s ease;
}
.jig-row.jig-in-view {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.jig-row {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.jig-tile,
.jig-tile:visited,
.jig-tile:hover,
.jig-tile:active,
.jig-tile:focus {
	/* Tiles are real <a> elements (SEO — see render_tile()/buildTile()), so explicitly override
	   the browser's default link styling (underline, visited-purple) rather than relying on
	   specificity to sort it out. */
	color: #fff;
	text-decoration: none;
}
.jig-tile {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	outline-offset: 2px;
	box-shadow: 0 1px 3px rgba(16, 24, 32, .12);
	transition: box-shadow .25s ease, transform .25s ease;
}
.jig-tile::before {
	/* Soft accent-colored ring that fades in on hover, sitting above the image but below the
	   text/chip layer — gives the hover state some color instead of just a lift + shadow. */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 2px var(--jig-accent);
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
	z-index: 1;
}
.jig-tile:hover,
.jig-tile:focus-visible {
	box-shadow: 0 14px 30px rgba(16, 24, 32, .26);
	transform: translateY(-4px);
}
.jig-tile:hover::before,
.jig-tile:focus-visible::before {
	opacity: .55;
}
.jig-tile:focus-visible {
	outline: 2px solid var(--jig-accent);
}
.jig-tile-empty {
	cursor: default;
	opacity: .35;
	box-shadow: none;
}
.jig-tile-empty:hover {
	box-shadow: none;
	transform: none;
}
.jig-tile-empty::before {
	display: none;
}
.jig-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}
.jig-tile:hover img {
	transform: scale(1.08);
}
.jig-tile-chip {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	/* Leaves room for the duration badge in the opposite corner; a long speciality is cut with
	   an ellipsis instead of wrapping into a tall pill on narrow tiles. */
	max-width: calc(100% - 84px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .5);
	backdrop-filter: blur(2px);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.jig-tile-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 38px 18px 16px;
	background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
}
.jig-tile-title {
	display: -webkit-box;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jig-tile-subtitle {
	display: -webkit-box;
	margin-top: 3px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .78);
	line-height: 1.35;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jig-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
	transition: transform .25s ease, background .25s ease;
}
.jig-tile:hover .jig-play-icon {
	transform: scale(1.1);
	background: #fff;
}
.jig-play-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--jig-accent);
}
/* Short tiles: a smaller play button, raised a little, so it clears a two-line title. */
.jig-mosaic-small .jig-play-icon {
	top: 40%;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
}
.jig-mosaic-small .jig-play-icon::after {
	border-width: 7px 0 7px 12px;
}
.jig-duration-badge {
	/* Top-right, level with the chip, so it never sits on top of the title at the bottom. */
	position: absolute;
	top: 14px;
	right: 12px;
	z-index: 2;
	padding: 3px 8px;
	border-radius: 4px;
	background: rgba(0,0,0,.65);
	font-size: 12px;
}

.jig-state {
	padding: 40px 16px;
	text-align: center;
	color: #6b7785;
	background: #f5f7f9;
	border-radius: 10px;
}
.jig-state-loading {
	display: block;
	min-height: 0;
	padding: 0;
	background: none;
}

/* Skeleton grid shown while a category switch is loading, instead of a bare spinner — reads as
   "content is on its way" rather than a blank pause, and roughly previews the grid3 layout the
   real rows will settle into. */
.jig-skeleton-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.jig-skeleton-tile {
	min-height: 220px;
	border-radius: 14px;
	background: linear-gradient(100deg, #eceff2 30%, #f6f8fa 50%, #eceff2 70%);
	background-size: 220% 100%;
	animation: jig-shimmer 1.3s ease-in-out infinite;
}
@keyframes jig-shimmer {
	0% { background-position: 120% 0; }
	100% { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.jig-skeleton-tile { animation: none; }
}

.jig-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #d7dde3;
	border-top-color: var(--jig-accent);
	border-radius: 50%;
	animation: jig-spin .7s linear infinite;
}
@keyframes jig-spin {
	to { transform: rotate(360deg); }
}

.jig-load-more-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 40px;
}
.jig-progress {
	margin: 0;
	color: #6b7785;
	font-size: 14px;
}
.jig-progress[hidden] {
	display: none;
}
.jig-load-more-btn {
	padding: 11px 30px;
	border-radius: 999px;
	border: 1px solid var(--jig-accent);
	background: #fff;
	color: var(--jig-accent);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.jig-load-more-btn:hover {
	background: var(--jig-accent);
	color: #fff;
	box-shadow: 0 8px 20px var(--jig-accent-soft);
	transform: translateY(-1px);
}
.jig-load-more-btn:disabled {
	opacity: .6;
	cursor: default;
	transform: none;
	box-shadow: none;
}
.jig-load-more-btn[hidden] {
	display: none;
}

.jig-lightbox-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(8, 12, 16, .92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	animation: jig-fade-in .18s ease;
}
.jig-lightbox-backdrop[hidden] {
	display: none;
}
@keyframes jig-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
.jig-lightbox-content {
	position: relative;
	max-width: 1140px;
	width: 100%;
	max-height: 90vh;
	background: #12181f;
	border-radius: 14px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
	overflow: hidden;
	animation: jig-pop-in .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes jig-pop-in {
	from { opacity: 0; transform: scale(.97) translateY(8px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.jig-lightbox-backdrop,
	.jig-lightbox-content {
		animation: none;
	}
}
.jig-lightbox-close {
	/* Positioned relative to the (fixed, viewport-filling) backdrop rather than the content box,
	   so it always floats clear of the video/details panel instead of overlapping either one
	   regardless of layout. */
	position: absolute;
	top: 20px;
	right: 24px;
	z-index: 1;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .12);
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.jig-lightbox-close:hover {
	background: rgba(255, 255, 255, .24);
	transform: rotate(90deg);
}
.jig-lightbox-body {
	display: flex;
	flex-direction: column;
	max-height: 90vh;
	overflow-y: auto;
}
.jig-lightbox-media {
	position: relative;
	width: 100%;
	/* The JS sets --jig-media-ratio to the video's/image's own shape once it knows it, so an
	   upright phone video gets an upright box; capped so the details below stay on screen. */
	aspect-ratio: var(--jig-media-ratio, 16 / 9);
	max-height: 60vh;
	max-height: 60svh;
	background: #000;
	flex-shrink: 0;
}
.jig-lightbox-media img,
.jig-lightbox-media video,
.jig-lightbox-media iframe {
	/* Absolutely placed: a video's own height can't stretch the box (it did, for upright
	   videos, until the panel scrolled). */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
	display: block;
	background: #000;
}
.jig-lightbox-text {
	color: #fff;
	padding: 20px 24px 24px;
	overflow-y: auto;
}
.jig-lightbox-text::-webkit-scrollbar {
	width: 6px;
}
.jig-lightbox-text::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .18);
	border-radius: 999px;
}
.jig-lightbox-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.jig-lightbox-meta:empty {
	display: none;
}
.jig-lightbox-chip {
	padding: 3px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: var(--jig-accent, #7fb8e0);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.jig-lightbox-views {
	font-size: 12.5px;
	color: #8c9aab;
}
.jig-lightbox-title {
	margin: 0 0 6px;
	color: #fff; /* the theme's heading color is dark — unreadable on the lightbox's dark panel */
	font-size: 19px;
	line-height: 1.3;
}
.jig-lightbox-subtitle {
	margin: 0 0 10px;
	color: #9fb3c8;
	font-size: 14px;
	font-weight: 500;
}
.jig-lightbox-subtitle[hidden],
.jig-lightbox-description[hidden] {
	display: none;
}
.jig-lightbox-description {
	margin: 0 0 20px;
	color: #c4cdd6;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-line;
}

/* Share row: a small "Share" label followed by circular icon buttons. Each button tints toward
   its platform's brand color on hover so the row reads as distinct actions rather than one
   uniform button group; base state stays neutral to match the rest of the lightbox chrome. */
.jig-lightbox-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 16px;
	margin-top: auto;
	border-top: 1px solid rgba(255, 255, 255, .1);
}
.jig-share-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #8c9aab;
	margin-right: 2px;
}
.jig-share-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, .1);
	color: #e7ecf1;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.jig-share-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.jig-share-btn:hover {
	transform: translateY(-2px);
	color: #fff;
}
.jig-share-btn[data-platform="facebook"]:hover { background: #1877f2; }
.jig-share-btn[data-platform="twitter"]:hover { background: #000; }
.jig-share-btn[data-platform="whatsapp"]:hover { background: #25d366; }
.jig-share-btn[data-platform="linkedin"]:hover { background: #0a66c2; }
.jig-share-btn[data-platform="copy"]:hover { background: var(--jig-accent); }
.jig-share-btn[data-copied]::after {
	content: "Link copied";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;
	padding: 4px 9px;
	border-radius: 6px;
	background: #fff;
	color: #12181f;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	animation: jig-toast-pop 1.6s ease forwards;
}
@keyframes jig-toast-pop {
	0% { opacity: 0; transform: translate(-50%, 4px); }
	12% { opacity: 1; transform: translate(-50%, 0); }
	82% { opacity: 1; }
	100% { opacity: 0; }
}

@media (min-width: 800px) {
	.jig-lightbox-content {
		max-height: 80vh;
	}
	.jig-lightbox-body {
		flex-direction: row;
		max-height: 80vh;
	}
	.jig-lightbox-media {
		width: 66%;
		flex-shrink: 0;
		/* Side by side the panel has a fixed height: keep the 16:9 stage whatever the video's shape. */
		aspect-ratio: 16 / 9;
		max-height: none;
	}
	.jig-lightbox-text {
		width: 34%;
		flex-shrink: 0;
		padding: 26px 26px 26px 22px;
		display: flex;
		flex-direction: column;
	}
}

@media (max-width: 768px) {
	.jig-gallery {
		padding-left: 18px;
		padding-right: 18px;
	}
	.jig-row-mosaic {
		flex-direction: column;
	}
	.jig-row-mosaic.align-left {
		flex-direction: column;
	}
	.jig-mosaic-small-col {
		flex-direction: row;
	}
	.jig-row-grid3 {
		grid-template-columns: repeat(2, 1fr);
	}
	/* Two columns: the blank tiles that pad a short last row are hidden, and a row's odd tile
	   (a third tile, or a lone first one) spans both columns instead of sitting next to a gap. */
	.jig-tile-empty {
		display: none;
	}
	.jig-row-grid3 > .jig-tile:nth-child(3):not(.jig-tile-empty) {
		grid-column: 1 / -1;
	}
	/* Separate rule: a browser without :has() drops only this one, not the rule above. */
	.jig-row-grid3 > .jig-tile:first-child:has(+ .jig-tile-empty) {
		grid-column: 1 / -1;
	}
	.jig-skeleton-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.jig-stats {
		grid-template-columns: repeat(2, 1fr);
		margin-bottom: 44px;
	}
	.jig-stat + .jig-stat {
		border-left: 0;
	}
	.jig-stat:nth-child(even) {
		border-left: 1px solid #e3e8ee;
	}
	.jig-stat:nth-child(n+3) {
		border-top: 1px solid #e3e8ee;
	}
	.jig-stat-num {
		font-size: 28px;
	}
	.jig-steps {
		margin-bottom: 48px;
	}
	.jig-spotlight {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 14px;
		margin-bottom: 56px;
	}
	.jig-spotlight-media {
		/* The 16:10 ratio alone sets the height; a min-height here forced the width past a
		   narrow phone's screen. */
		min-height: 0;
	}
	.jig-spotlight-body {
		padding: 0 8px 10px;
	}
	.jig-spotlight-title,
	.jig-cta-heading {
		font-size: 22px;
	}
	.jig-cta {
		padding: 30px 24px;
		margin-top: 56px;
	}
}

/* Short screens (a phone held sideways): room above the lightbox for the close button. */
@media (max-height: 500px) {
	.jig-lightbox-backdrop {
		padding-top: 64px;
		padding-bottom: 12px;
	}
	.jig-lightbox-content,
	.jig-lightbox-body {
		max-height: calc(100vh - 76px);
	}
}

/* Phones: two narrow tiles side by side, so everything on a tile gets tighter. */
@media (max-width: 480px) {
	.jig-gallery {
		padding: 40px 14px 48px;
	}
	.jig-rows,
	.jig-row-mosaic,
	.jig-mosaic-small-col,
	.jig-row-grid3 {
		gap: 12px;
	}
	.jig-mosaic-big {
		min-height: 220px;
	}
	.jig-mosaic-small,
	.jig-grid3-tile {
		min-height: 190px;
	}
	.jig-tile-chip {
		top: 8px;
		left: 8px;
		max-width: calc(100% - 64px);
		padding: 3px 9px;
	}
	.jig-duration-badge {
		top: 10px;
		right: 8px;
		padding: 2px 6px;
	}
	.jig-tile-overlay {
		padding: 30px 10px 10px;
	}
	.jig-tile-title {
		font-size: 13.5px;
	}
	/* Half-width tiles: title only; the subtitle would be cut to a couple of words anyway. */
	.jig-mosaic-small .jig-tile-subtitle,
	.jig-row-grid3 > .jig-tile:nth-child(-n+2) .jig-tile-subtitle {
		display: none;
	}
	.jig-row-grid3 > .jig-tile:nth-child(-n+2) .jig-play-icon {
		top: 42%;
		width: 42px;
		height: 42px;
		margin: -21px 0 0 -21px;
	}
	.jig-row-grid3 > .jig-tile:nth-child(-n+2) .jig-play-icon::after {
		border-width: 7px 0 7px 12px;
	}
	.jig-filter-btn {
		padding: 8px 14px;
	}
	.jig-spotlight {
		padding: 10px;
	}
	.jig-spotlight-body {
		padding: 0 6px 8px;
	}
	.jig-cta {
		padding: 26px 18px;
	}
	.jig-lightbox-backdrop {
		padding: 12px;
	}
	.jig-lightbox-close {
		top: 12px;
		right: 12px;
	}
	.jig-lightbox-text {
		padding: 16px 16px 18px;
	}
}