/*
 * Phones: the desktop page stacked (logo band with the main tabs,
 * stage, list tabs, list, footer). While a video is on the stage, player and list tabs
 * stay at the top, so the video keeps running in view while other lists are browsed.
 */
@media screen and (max-width: 767px) {
	:root {
		--band: #305263;
		--panel: #304958;
		--tab: #62737d;
		--tab-dark: #0d1418;
		--vip: #f8841a;
		--gutter: 12px;
		/* 16:9 video plus its title line */
		--stage-height: calc(56.25vw + 30px);
	}

	body {
		background: #1c252c;
	}

	.page {
		width: auto;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	h1 {
		display: none;
	}

	/* logo band with the main tabs */
	.site-header {
		height: auto;
		background: var(--band);
		padding: 14px var(--gutter) 0;
	}

	.logo {
		position: static;
		margin-bottom: 12px;
		width: min(300px, 75vw);
		height: auto;
		aspect-ratio: 434 / 55;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.main-navigation {
		position: static;
		display: flex;
		gap: 5px;
		width: auto;
		height: auto;
	}

	.main-navigation li {
		flex: 1 1 0;
	}

	.main-navigation li a,
	.main-navigation li a:visited,
	.main-navigation li a:link {
		width: auto;
		margin: 0;
	}

	/* stage */
	.stage {
		width: auto;
		height: auto;
		margin: 0;
		background: #000;
	}

	.stage::before,
	.stage::after {
		display: none;
	}

	.slideshow,
	.slideshow--loading {
		height: auto;
	}

	.slideshow__images {
		position: relative;
		width: 100%;
		height: auto;
		aspect-ratio: 736 / 360;
	}

	.slideshow__image,
	.slideshow__image:link {
		inset: 0;
	}

	.slideshow__image img {
		width: 100%;
		height: auto;
	}

	.slideshow__thumbs,
	.slideshow__next,
	.slideshow:hover .slideshow__next {
		display: none;
	}

	/*
	 * Video: native controls (stage.js), the title as a line below. While a video is on
	 * the stage (or the next one loads), logo and main navigation scroll away, player and
	 * list tabs stay at the top and the list scrolls with the page below them.
	 */
	.stage:has(.player--video),
	.stage:has(.stage__content.loading) {
		position: sticky;
		top: 0;
		z-index: 20;
		height: var(--stage-height);
		overflow: hidden;
	}

	.page:has(.player--video) .list-tabs,
	.page:has(.stage__content.loading) .list-tabs {
		position: sticky;
		top: var(--stage-height);
		z-index: 19;
	}

	.media-player {
		width: 100%;
		height: auto;
	}

	.player--video video {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 9;
		background: #000;
	}

	.player--video .media-controls,
	.player--video .media-state,
	.player--video .player__text {
		display: none;
	}

	.player__info {
		position: static;
		width: auto;
		height: 30px;
		padding: 9px 70px 0 var(--gutter);
		box-sizing: border-box;
	}

	.player h2 {
		margin: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 10px;
		letter-spacing: 2px;
	}

	.player__share {
		right: var(--gutter);
		bottom: 6px;
	}

	/* album: cover, info and tracklist stacked */
	.player--audio {
		height: auto;
		background-size: cover;
		background-position: center;
		padding: 20px var(--gutter) 0;
	}

	.player__album,
	.player--audio .playlist {
		position: static;
		width: auto;
		text-align: left;
		background: rgba(0, 0, 0, 0.55);
		padding: 10px;
	}

	.player__album dd {
		width: auto;
	}

	.player--audio .media-controls {
		position: relative;
		left: 0;
		bottom: 0;
		width: auto;
		margin: 10px calc(-1 * var(--gutter)) 0;
	}

	.player--audio .media-bar {
		padding-right: 110px;
	}

	.player--audio .playlist {
		margin: 0 calc(-1 * var(--gutter));
		padding: 14px var(--gutter) 20px;
	}

	.player--audio .playlist ul {
		margin-left: 0;
	}

	/* list tabs: a scrolling row of folder tabs that merges into the list panel */
	.list-tabs {
		position: static;
		display: flex;
		gap: 4px;
		overflow-x: auto;
		scrollbar-width: none;
		padding: 8px var(--gutter) 0;
		background: #000;
	}

	.list-tabs::-webkit-scrollbar {
		display: none;
	}

	.list-tabs li {
		flex: none;
		margin: 0;
	}

	.list-tabs li a,
	.list-tabs li a:visited,
	.list-tabs li a:link,
	.list-tabs li.is-vip a,
	.list-tabs li.is-vip a:visited,
	.list-tabs li.is-vip a:link {
		width: auto;
		height: auto;
		padding: 11px 9px 11px 13px;
		line-height: 10px;
		border-radius: 6px 6px 0 0;
		background: var(--tab-dark);
	}

	.list-tabs li a.active,
	.list-tabs li a:hover,
	.list-tabs li.is-vip a.active,
	.list-tabs li.is-vip a:hover {
		background: var(--panel);
	}

	.list-tabs li.is-vip a::after {
		content: "VIP";
		margin-left: 6px;
		padding: 2px 3px 1px 5px;
		border-radius: 1px;
		background: var(--vip);
		font-size: 8px;
		letter-spacing: 2px;
		vertical-align: 1px;
	}

	/* list */
	.list {
		flex: 1 0 auto;
		min-height: 0;
		/* keeps the thumbnail badges below the pinned stage */
		position: relative;
		z-index: 1;
		margin: 0;
		background: var(--panel);
	}

	.list__scroll {
		width: auto;
		height: auto !important;
		overflow: visible !important;
	}

	.list__inner {
		padding: 14px var(--gutter) 6px;
	}

	.list-item--video,
	.list-item--audio,
	.list-item--photo {
		display: flex;
		flex-wrap: wrap;
		column-gap: 12px;
		height: auto;
	}

	.list-item__thumb {
		position: relative;
		flex: none;
		width: 146px;
		height: auto;
		aspect-ratio: 202 / 94;
		border-radius: 6px;
	}

	.list-item--audio .list-item__thumb {
		width: 77px;
		aspect-ratio: 106 / 94;
	}

	.list-item__thumb img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.list-item__new,
	.list-item__overlay,
	.list-item__thumb a .list-item__play,
	.list-item--audio .list-item__overlay,
	.list-item--audio .list-item__thumb a .list-item__play {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.list-item__new {
		background-size: auto 100%;
	}

	.list-item__overlay,
	.list-item--audio .list-item__overlay {
		display: none;
	}

	.list-item__thumb a .list-item__play {
		background-size: 34px 34px;
	}

	.list-item__thumb a.active::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 203;
		border: 2px solid #fff;
		border-radius: 6px;
	}

	.list-item__info {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		margin: 2px 0 0;
		overflow-wrap: anywhere;
	}

	.list .list-item__info p {
		margin-bottom: 4px;
	}

	.list-item__awards {
		flex: 1 0 100%;
		width: auto;
		margin: 6px 0 0;
	}

	.list-item__awards:empty {
		display: none;
	}

	.list-item {
		margin-bottom: 15px;
	}

	.list img {
		max-width: 100%;
		height: auto;
	}

	/* photo grids: square tiles that fill the columns */
	.gallery__row {
		gap: 6px;
		margin-bottom: 6px;
	}

	.gallery__col {
		float: none;
		margin: 0;
	}

	.gallery__item,
	.gallery__item a {
		display: block;
		margin: 0;
	}

	.gallery__item img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		object-fit: cover;
	}

	/* footer: Photography, VIP login, Contact */
	.site-footer {
		height: auto;
		margin: 0;
		padding: 18px 0 24px;
		background: #000;
	}

	.site-footer .footer-navigation {
		float: none;
		display: flex;
		justify-content: center;
	}

	.site-footer .footer-navigation li a,
	.site-footer .footer-navigation li a:visited,
	.site-footer .footer-navigation li a:link {
		margin: 0 12px;
		line-height: 10px;
		padding: 6px 0;
	}

	/* home: logo and the two section buttons centered over the background video */
	body.is-home .page {
		position: absolute;
		width: auto;
		height: auto;
		min-height: 0;
		left: var(--gutter);
		right: var(--gutter);
		margin: 0;
		transform: translateY(-50%);
	}

	body.is-home .site-header {
		background: none;
		padding: 0;
		height: auto;
	}

	body.is-home .logo {
		width: 100%;
		height: auto;
		/* 74px desktop header plus the 16px gap to the buttons (the margins collapse) */
		margin-bottom: 35px;
		aspect-ratio: 410 / 62;
		left: 0;
		background-size: contain;
	}

	body.is-home .main-navigation {
		left: 0;
		width: auto;
		height: auto;
		margin-top: 16px;
		padding: 0;
		background: none;
		gap: 10px;
	}

	body.is-home .main-navigation li a,
	body.is-home .main-navigation li a:visited,
	body.is-home .main-navigation li a:link {
		width: auto;
		margin: 0;
	}

	body.is-home .site-footer {
		background: none;
		padding: 0 var(--gutter) 14px;
	}
}

/*
 * Small tablets: the desktop layout with a 24px edge on both sides. The stage keeps
 * the desktop proportions (1001 × 360), the list fills the space next to the list tabs;
 * band and black stage area stay full width.
 */
@media screen and (min-width: 768px) and (max-width: 1000px) {
	:root {
		--edge: 24px;
		--stage: calc((100vw - 2 * var(--edge)) * 360 / 1001);
	}

	/*
	 * line from the screen edge into the logo's underline, blue band, black stage area,
	 * page background (bg_body.png for 1001px)
	 */
	body {
		background:
			linear-gradient(#a7b3ba, #a7b3ba) 0 77px / calc(var(--edge) + 30px) 2px no-repeat,
			#1c252c linear-gradient(#305263 0 79px, #000 79px calc(106px + var(--stage)), #1c252c calc(106px + var(--stage))) no-repeat;
	}

	.page {
		width: auto;
		margin: 0 var(--edge);
	}

	/* logo, tabs and footer line up with the edge */
	.logo {
		left: 0;
	}

	.main-navigation {
		right: 0;
	}

	.site-footer {
		margin-right: 0;
	}

	.stage {
		position: relative;
		width: 100%;
		height: auto;
		aspect-ratio: 1001 / 360;
	}

	.stage__content,
	.stage__content > .block,
	.stage__content .player,
	.slideshow,
	.slideshow--loading {
		height: 100%;
	}

	.slideshow {
		position: relative;
	}

	.slideshow__images {
		position: relative;
		width: 73.53%;
		height: 100%;
	}

	.slideshow__image,
	.slideshow__image:link {
		inset: 0;
	}

	.slideshow__image img,
	.slideshow__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.slideshow__thumbs {
		width: 26.47%;
		height: 100%;
	}

	.slideshow__thumb {
		width: 100%;
		height: 33.334%;
	}

	.slideshow__next {
		position: absolute;
		left: 83.2%;
		top: 57.2%;
	}

	/* video player: 640 × 360 of 1001 × 360, info on the right */
	.media-player {
		width: 100%;
		height: 100%;
	}

	.player--video video,
	.player--video .media-state,
	.player--video .media-controls {
		width: 63.94% !important;
	}

	.player--video video {
		height: 100% !important;
	}

	.player__info {
		left: 68.23%;
		top: 54.2%;
		width: 29%;
	}

	/* album */
	.player--audio {
		background-size: auto 100%;
	}

	.player__album {
		left: 29%;
		width: 40%;
	}

	.player--audio .media-controls {
		left: 5.6%;
		width: 65.33%;
	}

	.player--audio .playlist {
		width: 25.6%;
	}

	/* list tabs below the stage, list next to them */
	.list-tabs {
		top: calc(121px + var(--stage));
	}

	.list__scroll {
		width: auto;
	}

	.list-item__info {
		width: calc(100% - 234px);
	}

	.list-item__awards {
		display: none;
	}
}