.homepage-banner {
  display: none;
}

#main-wrapper.layout-main-wrapper {
	background:
	  repeating-linear-gradient(45deg, #fafafa, #fafafa 1px, rgba(255, 255, 255, 0.5) 1px, rgba(255, 255, 255, 0.5) 6px),
	  linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #e7e7e7 100%);
}

.streams-header {
  max-width: 900px;
  margin: 3rem auto;
  text-align: center;
  
  .streams-logo {
	  max-width: 550px;
	  margin-bottom: 1.5rem;
	  
	  @media (width <= 768px) {
	  	max-width: 350px;
		}
	}
	
	.streams-tagline {
	  margin: 0;
	  color: #00779a;
	  font-size: 1.6rem;
	  line-height: 1.5;
	  font-weight: 700;
	  
	  @media (width <= 768px) {
	  	font-size: 1.3rem;
	  	line-height: 1.4;
		}
	}
	
	.streams-intro {
	  color: #444;
	  font-size: 1.4rem;
	  line-height: 1.5;
	  
	  @media (width <= 768px) {
	  	font-size: 1.2rem;
	  	line-height: 1.4;
		}
	}
}

/* ================================================
   Confluence Streams Homepage Block
   ================================================ */


/* 4-column grid — direct child prevents targeting inner subview's .view-content */
.view-id-confluence_streams_homepage.view-display-id-block_1 {

	--font-family: Lato, sans-serif;
	--text-color: #333;
	--line-clamp: 3;
	--transition-duration: 400ms;
	
	
	> .view-content {
	  display: grid;
	  grid-template-columns: repeat(4, 1fr);
	  gap: .8rem;
	  padding-block: 1rem;
	  
	  @media (width <= 768px) {
	  	grid-template-columns: repeat(1, 1fr);
		}
	}
	
	.stream-view {
	  display: flex;
	  flex-direction: column;
	  padding: 0.75rem;
	  border-radius: 0.5rem;
	  corner-shape: squircle;
	  transition: all var(--transition-duration);
	  
		&:hover {
			background-color: color-mix(in srgb, var(--primary-color), transparent 95%);
			.image__wrapper {
				border-radius: 1.5rem;	
			}
			img {
				scale: 1.1;
			}
		}
	}
	
	.stream-heading {
	  margin: 0 0 0.4rem;
		font-family: var(--font-family);
	  font-size: 2rem;
	  font-weight: 700;
	  line-height: 1.2;
	  color: var(--primary-color);
	  transition: all var(--transition-duration);
	  
	  a {
		  color: inherit;
		  text-decoration: none;
		  transition: all var(--transition-duration);
		  
		  &:hover {
		  	color: var(--secondary-color) !important;
		  }
		}
	}
	
	.stream-bar {
	  height: 8px;
	  width: 100%;
	  margin-bottom: 1rem;
	  border-radius: 1rem;
	  background-color: var(--secondary-color);
	  transition: all var(--transition-duration);
	}
	
	.views-field-field-short-description {
	  margin-bottom: 1.25rem;
	  font-size: 1.25rem;
	  font-family: var(--font-family);
	  line-height: 1.4;
	  /*font-weight: 300;*/
	}
	
	/* ================================================
   Inner subview (projects)
   ================================================ */
   
   .view-id-confluence_projects_by_stream {
   		font-family: var(--font-family);
   		font-size: 1rem;
   		line-height: 1.4;
  		
  		/* Block display so inline children work */
    	.views-row {
		  	display: block !important;
			}
			
			.image__wrapper {
			  min-height: 180px;
			  margin-bottom: 0.75rem;
			  overflow: hidden;
				border-radius: 1rem;
			  transition: all var(--transition-duration);
			  
			  img {
				  width: 100%;
				  height: 180px;
				  object-fit: cover;
				  object-position: center;
				  padding: 0;
				  transition: all var(--transition-duration);
				}
			}
			
			
			/* Project title — bold black, inline */
			.views-field-label {
			  display: inline !important;
			  font-weight: 700;
			  
			  a {
				  color: var(--text-color);
				  transition: all var(--transition-duration);
				  &:hover {
				  	color: var(--secondary-color);
				  }
				}
			}
			
			/* Project summary — inline, flush against title */
			.views-field-field-summary {
				display: inline !important;
			}
			
			 /*See more — block, bold black matching project title */
			.views-field-view-group {
			  margin-top: 0.4rem;
			  font-size: .9rem;
			  
			  display: inline-flex;
				align-items: center;
				height: 16px;
				margin-left: 0.2rem;
			  padding-inline: .2rem;
				background-color: color-mix(in srgb, var(--primary-color), transparent 95%);
				border-radius: 4px;
				corner-shape: squircle;
			  transition: all var(--transition-duration);
				 
				&:hover {
					background-color: color-mix(in srgb, var(--secondary-color), transparent 85%);
				}
			  
			  a {
			  	color: var(--text-color);
				  text-decoration: none;
				  transition: all var(--transition-duration);

				  &:hover {
						color: var(--primary-color);
					}
				}
			}
			
   }
   
}