/* =============================================
   GALLERY & PLANT PAGE CSS
   covers: gallery.php (landing) + individual plant
   ============================================= */

/* --- Section headings (landing page) --- */

.galSection {
	margin: 0 0 40px;
}

.galSection h3 {
	font-size: 11pt;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #409fa6;
	border-bottom: 1px solid #a8d4d6;
	padding-bottom: 6px;
	margin-bottom: 16px;
}

/* --- Card grid --- */

.galLanding {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 16px 0;
}

.galLanding > * {
	margin: 4px;
}

/* --- Individual card --- */

.galCard {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid #a8d4d6;
	overflow: hidden;
	background: #f8fcfc;
	width: 220px;
}

.galCard:hover .galCardImg {
	transform: scale(1.03);
}

.galCardImgWrap {
	overflow: hidden;
}

.galCardImg {
	width: 220px;
	height: 220px;
	background-color: #d0e7e8;
	background-repeat: no-repeat;
	transition: transform 0.3s;
}

.galCardInfo {
	padding: 10px 14px 14px;
	border-top: 2px solid #70b7bc;
}

.galCardInfo h5 {
	margin: 0 0 3px;
	color: #107790;
	font-size: 13pt;
}

.galCardInfo h6 {
	margin: 0;
	color: #409fa6;
	font-style: italic;
	font-size: 10pt;
}

/* --- Plant page header --- */

#content-head {
	margin: 16px 0;
	text-align: center;
}

#content-head h2 {
	margin: 0 0 4px;
	color: #107790;
}

#content-head h6 {
	margin: 0;
	color: #409fa6;
	font-style: italic;
}

/* --- Filter bar --- */

.filterBar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 16px 0 24px;
}

.filterBar > * {
	margin: 4px;
}

.filtBtn {
	padding: 6px 16px;
	border: 1px solid #a8d4d6;
	background: #f8fcfc;
	color: #409fa6;
	font-size: 10pt;
	cursor: pointer;
}

.filtBtn:hover {
	border-color: #409fa6;
	color: #107790;
}

.filtBtn.active {
	background: #70b7bc;
	border-color: #70b7bc;
	color: #f8fcfc;
}

/* =============================================
   LIGHTBOX
   ============================================= */

.lightbox {
	visibility: hidden;
	pointer-events: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.85);
	z-index: 9999;
}

.lightbox:target {
	visibility: visible;
	pointer-events: auto;
}

/* --- Click-to-close overlay (covers dark area outside lightboxInner) --- */

.lightboxOverlay {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	display: block;
}

/* --- Inner wrapper: polaroid frame, dark margin all around --- */

.lightboxInner {
	position: absolute;
	top: 80px;
	bottom: 80px;
	left: 10%;
	right: 10%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* --- Title bar (dark, with X+CLOSE button) --- */

.lightboxBar {
	background: #107790;
	display: flex;
	align-items: stretch;
	padding: 0;
	flex-shrink: 0;
}

.lightboxTitle {
	flex: 1;
	padding: 6px 16px;
	color: #d0e7e8;
	font-size: 11pt;
	font-weight: bold;
	align-self: center;
}

.lightboxClose {
	display: block;
	width: 46px;
	background: #783a4c;
	text-align: center;
	text-decoration: none;
	flex-shrink: 0;
	font-size: 14pt;
	font-weight: bold;
	color: #ffffff !important;
	line-height: 46px;
}

.lightboxClose:hover {
	background: #d39897;
	color: #005974;
}



/* --- Image area --- */

.lightboxImgWrap {
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
	background: #005974;
}

.lightboxImgWrap img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	user-select: none;
}

/* --- Watermark overlays --- */

.wm-wrap {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	pointer-events: none;
}

/* tint */
.wm-tint {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}

/* corner text/image */
.wm-corner {
	position: absolute;
	font-size: 9pt;
	color: #fff;
	opacity: 0.18;
	white-space: nowrap;
}

.wm-br { bottom: 8px; right: 8px; text-align: right; }
.wm-bl { bottom: 8px; left: 8px; }
.wm-tr { top: 8px; right: 8px; text-align: right; }
.wm-tl { top: 8px; left: 8px; }

/* diagonal */
.wm-diagonal {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%) rotate(-30deg);
	font-size: 14pt;
	color: #fff;
	opacity: 0.18;
	white-space: nowrap;
	letter-spacing: 4px;
}

/* tile */
.wm-tile {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	opacity: 0.18;
	background-repeat: repeat;
	background-size: 160px auto;
}

/* watermark image (corner) */
.wm-img {
	position: absolute;
	width: 60px;
	height: auto;
	opacity: 0.18;
}

.wm-img.wm-br { bottom: 8px; right: 8px; }
.wm-img.wm-bl { bottom: 8px; left: 8px; }
.wm-img.wm-tr { top: 8px; right: 8px; }
.wm-img.wm-tl { top: 8px; left: 8px; }

/* --- Caption bar (white, extends to bottom) --- */

.lightboxCaption {
	background: #f8fcfc;
	border-top: 2px solid #70b7bc;
	padding: 14px 20px;
	flex: 1;
	overflow-y: auto;
}

.lightboxCaption h5 {
	margin: 0 0 4px;
	color: #107790;
	font-size: 12pt;
}

.lightboxCaption h6 {
	margin: 0 0 8px;
	color: #409fa6;
	font-style: italic;
	font-size: 10pt;
}

.lightboxCaption p {
	margin: 0;
	color: #70b7bc;
	font-size: 10pt;
}

/* =============================================
   SMALL SCREEN  max-width: 1280px
   ============================================= */

@media screen and (max-width:1280px) {

	.galCard {
		width: 160px;
	}

	.galCardImg {
		width: 160px;
		height: 160px;
	}

	.filtBtn {
		font-size: 9pt;
		padding: 5px 12px;
	}

	.lightboxInner {
		top: 20px;
		bottom: 20px;
		left: 4%;
		right: 4%;
		min-width: 0;
	}

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

}

/* =============================================
   LANDSCAPE / ULTRATHIN
   orientation:landscape + max-width:1280px + max-height:500px
   ============================================= */

@media screen and (orientation:landscape) and (max-width:1280px) and (max-height:500px) {

	.lightboxInner {
		top: 10px;
		bottom: 10px;
		width: 90%;
		left: 5%;
		margin-left: 0;
		flex-direction: row;
		align-items: stretch;
	}

	.lightboxBar {
		display: none;
	}

	.lightboxImgWrap {
		width: 60%;
		flex-shrink: 0;
		order: 1;
	}



	.lightboxCaption {
		flex: 1;
		border-top: none;
		border-left: 2px solid #70b7bc;
		padding: 10px 14px;
		order: 2;
		overflow-y: auto;
	}

	.lightboxCaption h5 { font-size: 10pt; }
	.lightboxCaption h6 { font-size: 9pt; }
	.lightboxCaption p  { font-size: 9pt; }

}