/*
 Theme Name: Divi Child
 Template: Divi
 */

/*
Other old shit.
*/
:root {
	--gc-primary: #0091ff;
	--gc-light: #ebf3fb;
	--gc-black: #0a0a0a;
	--gc-white: #fff;

	--gc-text: var(--gc-black);
	--gc-bg: var(--gc-light);
	--gc-border-color: var(--gc-bg);

	--gc-text-hover: var(--gc-white);
	--gc-bg-hover: var(--gc-primary);
	--gc-border-color-hover: var(--gc-bg-hover);

	--gc-text-active: var(--gc-white);
	--gc-bg-active: var(--gc-primary);
	--gc-border-color-active: var(--gc-bg-active);

	--gc-arrow-color: var(--gc-text-active);

	--gc-gap: 25px;
	--gc-padding: var(--gc-gap);
	--gc-border-width: 2px;
	--gc-border-radius: var(--gc-padding);

	--gc-button-padding-y: calc(0.25 * var(--gc-padding));
	--gc-button-padding-x: calc(var(--gc-padding));
	--gc-button-border-radius: var(--gc-border-radius);

	--gc-border: var(--gc-border-width) solid var(--gc-border-color);
	--gc-border-hover: var(--gc-border-width) solid var(--gc-border-color-hover);
	--gc-border-active: var(--gc-border-width) solid var(--gc-border-color-active);

	--gc-font-size: 1rem;
	--gc-font-size-title: var(--gc-font-size);
	--gc-font-weight: 700;
	--gc-font-weight-title: var(--gc-font-weight);
	--gc-transition: all 0.2s ease;
	--gc-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.z-n1 {
	z-index: -1;
}

/*
 * THE GRID
 */
.grid-filter {
	text-align: center;

	& .et_pb_ajax_pagination_container {
		display: grid;
		text-align: left;
		gap: var(--gc-gap);
		grid-template-columns: 1fr;

		& article {
			background-color: var(--gc-light);
			padding: var(--gc-padding) var(--gc-padding);
			border-radius: var(--gc-border-radius);
			overflow: hidden;
			display: flex;
			flex-direction: column;
			margin-bottom: 0;
			
			& h2,
			& h2 a {
				font-size: var(--gc-font-size-title);
    			line-height: 1.5;
    			font-weight: var(--gc-font-weight-title);
    			text-transform: uppercase;
			}
			
			& .post-content {
				flex-grow: 1;
				& .post-content-inner {
					height: 100%;
                    display: flex;
                    flex-direction: column;
					
					> :last-child {
						margin-top: auto;
					}
				}
			}

			&.filter-hidden {
				display: none;
			}

			.entry-featured-image-url {
				& img {
					margin: calc(-1 * var(--gc-padding));
					margin-bottom: 0;
					width: calc(100% + 2 * var(--gc-padding));
					max-width: unset;
					aspect-ratio: 16 / 9;
				}
			}

			a {
				color: var(--gc-text);
				font-weight: var(--gc-font-weight);
				&:hover {
					color: var(--gc-primary);
				}
			}

			.more-link {
				background-color: var(--gc-white);
				padding: var(--gc-button-padding-y) var(--gc-button-padding-x);
    			margin: 1em 0 0;
				border-radius: var(--gc-button-border-radius);
				display: inline-block;
				text-align: center;
			}
		}

		/* Tablet: 2 columns */
		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
		}

		/* Desktop: 3 columns */
		@media (min-width: 980px) {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	& .show-more-button {
		justify-self: center;
		padding: var(--gc-button-padding-y) var(--gc-button-padding-x);
		background-color: var(--gc-bg);
		border: var(--gc-border);
		border-radius: var(--gc-border-radius);
		cursor: pointer;
		font-size: var(--gc-font-size);
		font-weight: var(--gc-font-weight);
		color: var(--gc-text);
		transition: var(--gc-transition);
		min-height: var(--gc-font-size);
		margin: var(--gc-gap) 0;

		&:hover {
			background-color: var(--gc-bg-hover);
			border: var(--gc-border-hover);
			color: var(--gc-text-hover);
		}
	}
}

/*
 * THE CATEGORY CHOSER
 */
.grid-category-choser {
	position: relative;

	& select,
	& .grid-category-value {
		display: none;
	}

	/* Style the radio button list */
	& ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		gap: calc(0.5 * var(--gc-gap));
	}
	& li {
		margin: 0;
	}
	& input[type="radio"] {
		display: none;
	}
	& .grid-category-value,
	& label {
		padding: var(--gc-button-padding-y) var(--gc-button-padding-x);
		background-color: var(--gc-bg);
		border: var(--gc-border);
		border-radius: var(--gc-border-radius);
		cursor: pointer;
		font-size: var(--gc-font-size);
		font-weight: var(--gc-font-weight);
		color: var(--gc-text);
		transition: var(--gc-transition);
		min-height: var(--gc-font-size);
	}
	& label {
		display: inline-block;
	}
	& label:hover {
		background-color: var(--gc-bg-hover);
		border: var(--gc-border-hover);
		color: var(--gc-text-hover);
	}
	& input[type="radio"]:checked + label {
		background-color: var(--gc-bg-active);
		color: var(--gc-text-active);
		border: var(--gc-border-active);
	}

	@media (min-width: 980px) {
		& ul {
			display: none;
			flex-direction: column;
			gap: 0;
			position: absolute;
			left: 0;
			top: 100%;
		}
		
		& .grid-category-value,
		& label {
			width: 200px;
			text-align: left;
			border-radius: 0;
		}

		& .grid-category-value {
			display: inline-block;
			border-radius: var(--gc-border-radius);
			position: relative;
			
			&:after {
				content: '';
				position: absolute;
				right: var(--gc-button-padding-x);
				top: 50%;
				width: 8px;
				height: 8px;
				border-right: 2px solid #333;
				border-bottom: 2px solid #333;
				transform: translateY(-75%) rotate(45deg);
				transition: transform 0.3s ease;
			}

			&.open {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
				
				&:after {
  					transform: translateY(-25%) rotate(-135deg);
				}
				+ ul {
					display: inline-block;
				}
			}
		}

		li:last-child {
			& label {
				border-bottom-left-radius: var(--gc-border-radius);
				border-bottom-right-radius: var(--gc-border-radius);
			}
		}
	}
}