/* =============================================
   Variables: Common properties
   ============================================= */
.view-id-recent_articles {
	container-type: inline-size;
		
	--font-family: Lato, sans-serif;
	--text-color: #333;
	--line-clamp: 3;
	--transition-duration: 400ms;
	
	.view-header h2 {
	  border-bottom: 2px solid #333;
	  color: var(--text-color);
   
	  font-family: var(--font-family);
	  font-size: 2rem;
	  line-height: 2.375rem;
	}
}

/* =============================================
   Section titles — blocks
   ============================================= */

.view-id-recent_articles.view-display-id-block_1,
.view-id-recent_articles.view-display-id-block_2 {
  .view-header h2 {
	  margin-top: 5rem;
	  margin-bottom: 1.25rem;
	}
	
	/*Two-column card row — blocks */
	.view-content {
	  display: flex;
	  gap: 1.5rem;
	  
	  /*One-column card row — blocks */
	  @container (width < 80ch) {
	  	flex-direction: column;
		}
	}
	
	.views-row {
		flex: 1 1 0;
		@container (width < 80ch) {
	  	flex: auto;
		}
	}
	
	.view-footer {
		a:hover {
			background-color: var(--sub-theme-accent-color);
		}
	}
}

/* =============================================
   Page — grid of cards
   ============================================= */

.view-id-recent_articles.view-display-id-page_1,
.view-id-recent_articles.view-display-id-page_2 {
	container-type: inline-size;
  
  .view-header h2 {
    margin-top: 2rem;
    margin-bottom: 1.25rem;
	}
	
	/* Three-column card row */
	.view-content {
  	display: grid;
  	grid-template-columns: repeat(3, 1fr);
  	gap: 1.5rem;
  	
  	/*Two-column card row */
  	@container (width > 81ch) and (width < 130ch) {
  		grid-template-columns: repeat(2, 1fr);
		}
  	
  	/*One-column card row */
  	@container (width < 80ch) {
			grid-template-columns: 1fr;
		}
	}

}

/* =============================================
   Shared card styles — all displays
   ============================================= */
	
.view-id-recent_articles {
	.views-row {
		--field-padding-block: 0.5rem;
		--field-padding-inline: 1rem;
		
		display: flex;
		flex-direction: column;
		overflow: hidden;
		
		padding-inline: 4px;
    padding-top: 4px;
    padding-bottom: 8px;
		
		background: #fff;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		corner-shape: squircle;
		
		cursor: pointer;
		
		transition: all var(--transition-duration);
		
		/* Card hover */
		&:hover {
			background-color: #fafafa;
			border-color: var(--sub-theme-accent-lighter-color);
			box-shadow: 0 0 5px #cdcdcd;
			
			img {
				scale: 1.05;
				translate: 0 -5px;
			}
		}
		
		/* links */
		a {
			color: var(--text-color);
			&:hover {
				color: var(--sub-theme-accent-color);
			}
	  }
		
		/* Image field */
		.views-field-field-image {
			margin-bottom: 0.25rem;
			min-height: 180px;
			
			.field-content {
			  --color: #eee;
			  width: 100%;
			  height: 100%;
			  background: repeating-linear-gradient(45deg, var(--color), var(--color) 1px, white 1px, white 6px) var(--color);
			  border-radius: 8px;
        corner-shape: squircle;
        mix-blend-mode: multiply;
			}
			
		  img {
		  	width: 100%;
			  height: 180px;
			  object-fit: cover;
			  object-position: center;
			  padding: 0;
			  border-radius: 8px;
			  box-shadow: none;
			  border-width: 0;
			  corner-shape: squircle;
			  transition: all var(--transition-duration);
			}
		}
		
		/* Created field */
		.views-field-created {
			padding-block: var(--field-padding-block);
	  	padding-inline: var(--field-padding-inline);
		}
		
		/* Title field */
		.views-field-title {
			padding-block: var(--field-padding-block);
	  	padding-inline: var(--field-padding-inline);
	    
	  	text-wrap-style: balance;
	  	font-size: 1.5rem;
	  	line-height: 1.3;
	  	
	  	/* line clamp */ 
	  	display: -webkit-box;
  		-webkit-box-orient: vertical;
  		-webkit-line-clamp: var(--line-clamp);
			overflow: hidden;
		}
		
		/* Body field */
		.views-field-body {
		  padding-inline: var(--field-padding-inline);
		  
		  font-size: 0.95rem;
		  line-height: 1.5;
		  
		  /* line clamp */ 
		  display: -webkit-box;
  		-webkit-box-orient: vertical;
  		-webkit-line-clamp: var(--line-clamp);
			overflow: hidden;
		}
		
		/* Tags field */
		.views-field-field-tags {
			padding-block: var(--field-padding-block);
	  	padding-inline: var(--field-padding-inline);
	  	
	  	ul.list-group {
	  		display: flex;
  			flex-direction: row;
  			flex-wrap: wrap;
	  		gap: 8px;
	  	}
	  	
	  	li.list-group-item {
	  		padding-inline: 6px;
	  		padding-block: 4px;
				background-color: #f6f6f6;
				border: none;
				border-radius: 8px;
				corner-shape: squircle;
				transition: all var(--transition-duration);
				 
				&:hover {
					background-color: #eee;
				}
	  	}
		}
	}
}