/**
 * Grid Fixed Title Layout Styles
 */

.envira-gallery-wrap.envira-layout-grid-fixed-title {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-areas: "description gallery";
	gap: 20px;
	clear: both;

	/**
	 * Mobile Landscape Size to Tablet Portrait (767px and below)
	 * - Switch to single column layout
	 */
	@media only screen and (max-width: 767px) {
		grid-template-columns: 1fr;
		grid-template-areas:
			"description"
			"gallery";
		gap: 15px;
	}

	/**
	 * Left Column - Fixed Description (rendered by Base class)
	 */
	.envira-gallery-description {
		grid-area: description;
		position: sticky;
		top: 20px;
		height: fit-content;
		
		.envira-gallery-title {
			font-size: 32px;
			font-style: normal;
			margin-bottom: 16px;
			line-height: 100%;
		}

		.envira-gallery-description-content {
			h1, h2, h3, h4, h5, h6 ,p{
				font-size: 16px!important;
				line-height: 26px!important;
			}
		}

		@media only screen and (max-width: 767px) {
			position: static;
		}
	}

	/**
	 * Full width when description is empty
	 */
	&:not(:has(.envira-gallery-description:not(:empty))) {
		grid-template-columns: 1fr;
		grid-template-areas: "gallery";
		gap: 0;

		@media only screen and (max-width: 767px) {
			grid-template-columns: 1fr;
			grid-template-areas: "gallery";
		}
	}

	/**
	 * Right Column - Gallery
	 */
	.envira-gallery-public {
		grid-area: gallery;
	}
}

/**
 * Hide default page/post title when this layout is used
 * Using :has() to target the parent/sibling elements from the presence of the gallery
 */
body:has(.envira-layout-grid-fixed-title) {
	.wp-block-post-title,
	.entry-title,
	.page-title {
		display: none !important;
	}
}