/*
  -----------------------------------------------------------------------------
  This file is part of a personal project by Sarlin Tejada, shared for portfolio purposes only.
  All rights reserved. This code is provided for view-only access.

  Do not copy, modify, reuse, or distribute without prior written permission.
  For license details, see the LICENSE file in the root of this repository.
  -----------------------------------------------------------------------------
*/

/* ==========================================
   HOME PAGE SECTIONS
========================================== */
.about-message, .article-preview {
	max-width: 665px;
	color: var(--primary-color);
	font-size: 1em;
	line-height: 1.6;
	text-align: left;
}  

.about-photo {
	width: 200px; 
	height: 200px; 
	float: left; 
	margin: 0.4rem 1rem 1rem 0; 
	border-radius: 5%; 
	object-fit: cover; 
	object-position: 40% center; 
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.article-preview {
	margin: 0;
  	display: block;                 
  	padding: 20px;                 
  	color: inherit;                 
  	text-decoration: none;          
  	border-radius: 0;               
  	background: transparent;       
  	box-shadow: none;               
  	transition:
      box-shadow .18s ease,
      background-color .18s ease,
      transform .18s ease,
      border-radius .18s ease;
  	cursor: pointer;
}

.article-preview:hover,
.article-preview:focus-visible {  
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transform: translateY(-2px);
  outline: none;                
}

.article-preview .preview-title {
	font-size: 0.92rem;
}

.article-preview .preview-summary {
	font-size: 0.89rem; 
	color: var(--text-light);
}

.article-preview .preview-meta {
	display: block; 
	font-size: 0.7rem; 
	margin-top: 0.5rem; 
	border-top: 1px solid var(--divider);
	padding-top: 0.45rem;
	position: relative;
}

.article-preview .preview-meta .read-more {
	font-size: 0.65rem; 	 
	font-weight: 500;
  	margin-top: 0.5rem;
	position: absolute;
  	right: 0;
  	top: 0;
}

/* ==========================================
   RESPONSIVE STYLES
========================================== */
@media (max-width: 480px) {
	.about-photo {
		float: none;
		display: block;
		margin: 0 auto 1.5rem auto;
	}
}