/* remotefilename=/condos/style/layout.css
 *
 *	Copyright © 2025 by L5 Condos.  All rights reserved.
 *
 *	$Id: /condos/style/layout.css,v $
 */
/**
*	Layout page CSS rulesets for the site's condo section
*
*	Author:			Fred Koschara
*	Creation Date:	July second, 2025
*	Last Modified:	July 15, 2025 @ 10:40 am
*
*	Revision History:
*	   Date		  by		Description
*	2025/07/15	wfredk	change file to UTF-8 encoding
*	2025/07/11	wfredk	original development
*		|						|
*	2025/07/02	wfredk	original development
*/

.aerial-views
{	border-radius:8px;
	box-shadow:0 0 12px rgba(0,0,0,0.1);
	display:grid;
	gap:2em;
	grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
	margin:2em auto;
	max-width:800px;
	padding:1em;
}
.aerial-view
{	align-items:center;
	display:flex;
	flex-direction:column;
	text-align:left;
}
.aerial-view img
{	border-radius:6px;
	box-shadow:0 0 8px rgba(0,0,0,0.2);
	cursor:zoom-in;
	height:200px;
	margin-bottom:0.5em;
	width:auto;
}
/* Lightbox */
.litebox-overlay
{	align-items:center;
	background:rgba(0,0,0,0.85);
	display:none;
	flex-direction:column;
	left:0;
	height:100%;
	justify-content:center;
	position:fixed;
	top:0;
	width:100%;
	z-index:9999;
}
.litebox-overlay.active
{	display:flex;
}
.litebox-content
{	align-items:center;
	flex-direction:column;
	display:flex;
	max-height:95%;
	max-width:95%;
	position:relative;
}
.litebox-content img
{	border-radius:6px;
	box-shadow:0 0 12px #000;
	max-height:80vh;
	max-width:100%;
}
.litebox-caption
{	color:white;
	font-size:1.1em;
	margin-top:0.5em;
	text-align:center;
}
.litebox-nav
{	display:flex;
	justify-content:space-between;
	pointer-events:none;
	position:absolute;
	top:50%;
	width:100%;
}
.litebox-arrow
{	color:white;
	cursor:pointer;
	font-size:3em;
	padding:0 0.5em;
	pointer-events:auto;
	user-select:none;
}

body.dimmed::before
{	background:rgba(0,0,0,0.3);
	content:'';
	height:100vh;
	left:0;
	pointer-events:none;
	position:fixed;
	top:0;
	width:100vw;
	z-index:999;
}

.video-wrapper
{	align-items:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
	margin:2em auto;
	padding:2em 1em;
	text-align:center;
}

.video-thumb
{	cursor:pointer;
	display:inline-block;
	position:relative;
}
.video-thumb img
{	border-radius:8px;
	box-shadow:0 0 12px rgba(0,0,0,0.2);
	display:block;
	height:auto;
	width:100%;
}
.video-play-button
{	background:rgba(0,0,0,0.6);
	border-radius:2em;
	color:white;
	cursor:pointer;
	font-size:1.25em;
	left:50%;
	padding:0.75em 1.25em;
	position:absolute;
	text-align:center;
	top:50%;
	transform:translate(-50%,-50%);
}
.video-play-button:hover
{	background-color:rgba(0,0,0,0.85);
	transform:translate(-50%,-50%) scale(1.05);
	transition:transform 0.2s ease,background-color 0.2s ease;
}
@media (max-width:640px)
{	.video-play-button
	{	font-size:1em;
		padding:0.6em 1em;
		width:80%;
	}
}

#walkthrough-lightbox
{	display:none;
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:1000;
}

.wt-bg-overlay
{	background:rgba(0,0,0,0.3);
	cursor:pointer;
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:1;
}

.wt-frame-container
{	background:black;
	border-radius:8px;
	box-shadow:0 0 12px rgba(0,0,0,0.5);
	overflow:hidden;
	position:absolute;
	z-index:1001;
}

.wt-close
{	background:none;
	border:none;
	color:#efefef;
	cursor:pointer;
	font-size:1.5em;
	position:absolute;
	right:0.5em;
	top:0.5em;
	z-index:3;
}

.wt-frame
{	flex:1;
	height:100%;
	width:100%;
}
.wt-frame iframe
{	border:0;
	display:block;
	height:100%;
	width:100%;
}
/* EOF: layout.css */