/*
* PATTERNS STYLES
* Styles for specific custom patterns
* 
*/

/*
 * Query Block: Category Over Image
 * ------------------------------------------------------ */
.wp-block-query.is-style-query-category-over-image .wp-block-post-template li:first-child .wp-block-group.query-category-over-image-wrapper {
	flex-basis: 80%;
}
.wp-block-query.is-style-query-category-over-image .wp-block-post-template li:first-child .wp-block-group.query-category-over-image-wrapper .wp-block-post-featured-image {
   margin-top:0;
}

.wp-block-query.is-style-query-category-over-image .wp-block-post-template li:first-child {
  margin:0;
  grid-column: 1/-1;
}

.wp-block-query.is-style-query-category-over-image .wp-block-post-template li:first-child .wp-block-group.query-category-over-image-content {
  display: flex;
  column-gap:2rem;
  align-items:flex-end;
}

.wp-block-query.is-style-query-category-over-image .wp-block-post-template li:first-child .wp-block-post-excerpt { 
  display:block;
}

.wp-block-query.is-style-query-category-over-image .wp-block-post-template .wp-block-group.query-category-over-image-wrapper {
  position:relative;
  height: 100%;
}

.wp-block-query.is-style-query-category-over-image .wp-block-post-template .wp-block-group.query-category-over-image-wrapper .taxonomy-category {
  position:absolute;
  top:0;
  z-index: 1;
  padding:12px 15px;
  visibility: hidden;
}

.wp-block-query.is-style-query-category-over-image .wp-block-group.query-category-over-image-wrapper:hover .taxonomy-category {
  color:white;
  visibility: visible;
}

.wp-block-query.is-style-query-category-over-image .wp-block-post-template .wp-block-group.query-category-over-image-wrapper .wp-block-post-featured-image:hover {
   -webkit-filter: brightness(.45);
   filter: brightness(.45);
}

.wp-block-query.is-style-query-category-over-image .wp-block-post-template .wp-block-group.query-category-over-image-wrapper .wp-block-post-featured-image:hover img {
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.wp-block-query.is-style-query-category-over-image .wp-block-post-template .wp-block-post-excerpt { 
  display:none;
}


/*
 * Query Block: Horizontal Scroll
 * ------------------------------------------------------ */
.wp-block-query.is-style-horizontal-scroll {
  display:block;
  position: relative;
  width: 100%;
  margin: 1rem 0;
}

.wp-block-query.is-style-horizontal-scroll .wp-block-post-template {
  display: flex;
  align-items:flex-start;
  column-gap: 2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style:none; /* Hide scrollbar for IE, Edge */
  padding:0;
  height: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.wp-block-query.is-style-horizontal-scroll .wp-block-post-template::-webkit-scrollbar {
  display:none;
}

/* Individual post card */
.wp-block-query.is-style-horizontal-scroll.alignfull .wp-block-post-template > li {
  flex: 0 0 calc(24% - 2rem); /* 4 posts per view with gap consideration */
  align-self: flex-end;
  height: fit-content;
  min-width: 400px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.wp-block-query.is-style-horizontal-scroll .wp-block-post-template > li {
  flex: 0 0 calc(24% - 2rem); /* 4 posts per view with gap consideration */
  align-self: flex-end;
  height: fit-content;
  min-width: 400px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.wp-block-query.is-style-horizontal-scroll .wp-block-post-template .wp-block-post-featured-image,
.wp-block-query.is-style-horizontal-scroll .wp-block-post-template .wp-block-post-featured-image img {
  aspect-ratio: 3 / 4;
  width:100%;
  height: 100%;
  margin-top:0;
} 

.wp-block-query.is-style-horizontal-scroll .wp-block-post-template .wp-block-group.is-query-scroll-post-cover {
	position:relative;
}

.wp-block-query.is-style-horizontal-scroll .wp-block-post-template .wp-block-group.is-query-scroll-post-intro {
  position:absolute;
  left:0;
  bottom:0;
  margin-top:0;
  padding:25px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  visibility:hidden;
  width: 100%;
  height:auto;
}

.wp-block-query.is-style-horizontal-scroll .wp-block-post:hover img {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  -webkit-filter: brightness(.45);
  filter: brightness(.45);
}

.wp-block-query.is-style-horizontal-scroll .wp-block-post:hover .wp-block-group.is-query-scroll-post-intro {
  color:white;
  visibility:visible;
  z-index:1;
}


/* Custom Navigation Styles */
.wp-block-query.is-style-horizontal-scroll .horizontal-navigation {
  display: flex;
  justify-content: flex-end;
  gap: 25px;
  margin: 0 25px;
}

.wp-block-query.is-style-horizontal-scroll .horizontal-nav-prev,
.wp-block-query.is-style-horizontal-scroll .horizontal-nav-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color:transparent;
  border:0;
  border-radius:0;
  cursor: pointer;
  font-size: 1.5rem;
  font-family: 'Inter';
  transition: all 0.2s ease;
}

.wp-block-query.is-style-horizontal-scroll .horizontal-nav-prev.is-disabled,
.wp-block-query.is-style-horizontal-scroll .horizontal-nav-next.is-disabled {
  opacity: 0.4;
}



/*
 * Query Block: Colored Posts Cards
 * ------------------------------------------------------ */
.wp-block-query.is-style-query-colored-posts .query-post-color-card {
	transition:all .5s;
}

.wp-block-query.is-style-query-colored-posts .query-post-color-card .wp-block-post-featured-image {
	position:relative;
}

.wp-block-query.is-style-query-colored-posts .query-post-color-card-content {
	position: absolute;
	top: 25%;
	left:0;
	padding: 2.75em;
	box-sizing: border-box;
	width: 100%;
	visibility:hidden;
}

.wp-block-query.is-style-query-colored-posts .query-post-color-card:hover .query-post-color-card-content {
	visibility:visible;
}

.wp-block-query.is-style-query-colored-posts .query-post-color-card:hover .wp-block-post-featured-image {
    -webkit-filter: brightness(.45);
    filter: brightness(.45);
}

.wp-block-query.is-style-query-colored-posts .wp-block-post-date {
	position:absolute;
	right:9px;
    writing-mode: vertical-rl;
}


/* 
 * Query Block: Grid With Intro
 * --------------------------------------------- */

@media only screen and (min-width:48rem){
	.wp-block-group.query-grid-with-intro .wp-block-query {
		display:grid;
/* 		grid-template-columns: repeat(3, minmax(24rem, 1fr)); */
		grid-template-columns: repeat(3, minmax(24rem, 1fr));
		grid-auto-rows: 100%;
		gap:4px;
	}

/* 	.wp-block-group.query-grid-with-intro .wp-block-query > *:nth-child(1) {
	   grid:span 1 / -1; 
	} */

	.wp-block-group.query-grid-with-intro .wp-block-post-template {
		display:contents;
		flex-wrap:wrap;
	}

	.wp-block-group.query-grid-with-intro .wp-block-post-template li {
		 outline: 1px solid var(--wp--preset--color--accent-blue); 
		 transition: all 300ms ease-in-out;
	}

   .wp-block-group.query-grid-with-intro .wp-block-post-template li:hover {
		 background-color:white;
	}
}

/* PATTERN: PRODUCT CATEGORY HEADING 
 * ------------------------------------------------ */
/* .ct-product-category-header-wrapper .wp-block-query-title { 
	width:fit-content;
	margin-bottom:-50px;
} */

.ct-product-category-header-wrapper .ct-product-category-header-title { 
/* 	width:fit-content; */
	margin-bottom:-50px;
    position:relative;
	z-index:1;
}


.ct-product-category-header-wrapper .wp-block-term-description { 
    visibility:hidden;
	opacity:0;
    height:0;
    transition: all 600ms;
}

.ct-product-category-header-wrapper .ct-product-category-header-title:hover ~ .wp-block-term-description { 
    visibility:visible;
	opacity:1;
	height:auto;
	padding-top:35px;
	padding-bottom:25px;
}








/* 
@media only screen and (max-width:48rem){
  .wp-block-group.query-grid-with-intro .wp-block-post-template li {
	  border-bottom: 1px solid var(--wp--preset--color--accent-blue); 
  }
}
 */



/* COLUMNS with sloted content */
/* .ct-columns-slot-content {
	position:relative;
}

.ct-column-slot-content-second {
	position:relative;
	z-index:-1;
} */


/* Pattern: MAGAZINE PARENT => Responsive styles */
@media only screen and (min-width:64rem){
	.single-magazines #header-magazine {
		height:300vh;
	}

	.single-magazines #title-magazine {
		height:calc(100vh + 50px);
	}
	
    .single-magazines #intro-magazine-content,
	.single-magazines #edito-magazine {
		height:100vh;
	}
}


/* * * * *  Define styles for pages created on theme activation * * * * * /
/* Membership Page:
 * Pattern ----------------------- */
#membership-header {
	position:sticky;
	top:0;
	height: 100vh;
	padding:0 !important;
	overflow: scroll;
}

#membership-content {
	position:sticky;
	top:0;
}