/******* INDEX PAGE *******/
main {
margin-top: 0;
}

.blog-title {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}

.blog-search-form {
display: flex;
gap: .5rem;
backdrop-filter: blur(1px);
}

.blog-search-form input[type=text] {
padding: .5rem .85rem;
border: 1px solid #dee2e6;
border-radius: .375rem;
font-size: .9rem;
min-width: 13.75rem;
background: #fff;
color: #000;
}

.blog-search-form button {
padding: .5rem 1.0rem;
background: var(--background);
color: #000;
border: none;
border-radius: .375rem;
cursor: pointer;
font-size: .9rem;
}

.blog-layout {
display: grid;
grid-template-columns: 9.375rem 1fr;
gap: 1.375rem;
align-items: start;
}

.blog-sidebar-section {
margin-bottom: 2rem;
}

.blog-sidebar-section h3 {
font-size: .75rem;
font-weight: 700;
letter-spacing: .075em;
text-transform: uppercase;
color: #9ca3af;
margin: 0 0 .75rem;
}

.blog-cat-list {
list-style: none;
margin: 0;
padding: 0;
}

.blog-cat-list li {
margin-bottom: .25rem;
}

.blog-cat-list a {
display: flex;
justify-content: space-between;
align-items: center;
padding: .35rem .6rem;
border-radius: .375rem;
text-decoration: none;
color: inherit;
font-size: .9rem;
transition: background .12s;
}

.blog-cat-list a:hover, .blog-cat-list a.active {
background: #f3f4f6; font-weight: 600;
}

.blog-cat-count {
font-size: .75rem;
color: #9ca3af;
background: #f3f4f6;
border-radius: 6.25rem;
padding: .1rem .5rem;
}

.blog-tag-cloud {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}

.blog-tag-cloud a {
display: inline-block;
padding: .25rem .65rem;
border-radius: 6.25rem;
font-size: .8rem;
background: #f3f4f6;
color: #374151;
text-decoration: none;
transition: background .12s, color .12s;
}

.blog-tag-cloud a:hover, .blog-tag-cloud a.active {
background: #111827;
color: #fff;
}

.blog-active-filter {
display: inline-flex;
align-items: center;
gap: .4rem;
background: #dbeafe;
color: #1d4ed8;
border-radius: 6.25rem;
padding: .25rem .75rem;
font-size: .85rem;
margin-bottom: 1.25rem;
text-decoration: none;
}

.blog-active-filter:hover {
background: #bfdbfe;
}

.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
gap: 2.0rem;
}

.blog-card {
border-radius: .625rem;
border: 1px solid #e5e7eb;
overflow: hidden;
display: flex;
flex-direction: column;
background: #fff;
transition: box-shadow .2s, transform .2s;
}

.blog-card:hover {
box-shadow: 0 .5rem 1.875rem rgba(0,0,0,.1);
transform: translateY(-2px);
}

.blog-card-img {
width: 100%;	
width: -webkit-fill-available;
aspect-ratio: 16/9;
object-fit: cover;
object-position: top;
display: block;
}

.blog-card-body {
padding: 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
}

.blog-card-cats {
display: flex;
flex-wrap: wrap;
gap: .25rem;
margin-bottom: .5rem;
}

.blog-card-cat {
font-size: .75rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: #6b7280;
text-decoration: none;
}

.blog-card-cat:hover { 
color: #111827;
}

.blog-card-title {
font-size: 1.0rem;
font-weight: 600;
margin: 0 0 .5rem;
line-height: 1.35;
}

.blog-card-title a {
color: inherit;
text-decoration: none;
}

.blog-card-title a:hover {
text-decoration: underline;
}

.blog-card-excerpt {
font-size: .90rem;
color: #6b7280;
line-height: 1.55;
margin: 0 0 1.0rem;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.blog-card-meta {
font-size: .75rem;
color: #9ca3af;
display: flex;
gap: .75rem;
flex-wrap: wrap;
align-items: center;
}

.blog-card-tags {
display: flex;
flex-wrap: wrap;
gap: .3rem;
margin-top: .6rem;
}

.blog-card-tag {
font-size: .75rem;
color: #6b7280;
text-decoration: none;
}

.blog-card-tag::before {
content: '#';
}

.blog-card-tag:hover {
color: #111827;
}

.blog-no-results {
text-align: center;
padding: 4rem 2rem;
color: #9ca3af;
grid-column: 1 / -1;
}

.blog-no-results p {
font-size: 1.1rem;
margin-bottom: 1rem;
}

.blog-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: .5rem;
margin-top: 3rem;
flex-wrap: wrap;
}

.blog-pagination a, .blog-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
height: 2.25rem;
padding: 0 .75rem;
border-radius: .375rem;
font-size: .9rem;
text-decoration: none;
border: 1px solid #e5e7eb;
color: inherit;
transition: background .12s;
}

.blog-pagination a:hover {
background: #f3f4f6;
}

.blog-pagination .current {
background: #111827; 
color: #fff; 
border-color: #111827; 
font-weight: 600;
}

.blog-pagination .disabled {
color: #dee2e6; 
pointer-events: none;
}

/******* POST PAGE *******/
.blog-post {
padding: 1.5rem 0 5rem;
}

.blog-post-breadcrumb {
font-size: .85rem;
color: #9ca3af;
margin-bottom: 1.5rem;
}

.blog-post-breadcrumb a {
color: inherit; 
text-decoration: none;
}

.blog-post-breadcrumb a:hover {
color: #111827;
}

.blog-post-cats {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: .75rem;
}

.blog-post-cat {
font-size: .75rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: #6b7280;
text-decoration: none;
}

.blog-post-cat:hover {
color: #111827;
}

.blog-post-title {
font-size: clamp(1.8rem, 4vw, 2.4rem);
font-weight: 800;
line-height: 1.2;
margin: 0 0 1rem;
}

.blog-post-meta {
font-size: .85rem;
color: #9ca3af;
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}

.blog-post-featured-img {
max-width: 100%;
max-height: 25rem;
object-fit: cover;
border-radius: .625rem;
margin: 2.0rem 0;
display: block;
}

.blog-post-content {
font-size: 1.0rem;
line-height: 1.75;
color: #374151;
}

.blog-post-content h2 {
font-size: 1.5rem;
font-weight: 700;
margin: 2rem 0 .75rem;
}

.blog-post-content h3 {
font-size: 1.25rem;
font-weight: 700;
margin: 1.75rem 0 .5rem;
}

.blog-post-content p  {
margin: 0;
}

.blog-post-content ul, .blog-post-content ol {
margin: 0 0 .25rem 1.5rem;
}

.blog-post-content li {
margin-bottom: .5rem;
}

.blog-post-content blockquote {
border-left: 5px solid #e5e7eb;
margin: 1.5rem 0;
padding: .75rem 1.25rem;
color: #6b7280;
font-style: italic;
}

.blog-post-content img {
max-width: 100%;
border-radius: .5rem;
margin: .25rem 0;
}

.blog-post-content a {
color: #2563eb;
}

.blog-post-content code {
background: #f3f4f6;
padding: .1em .4em;
border-radius: 4px;
font-size: .9em;
}

.blog-post-content pre {
background: #1e293b;
color: #e2e8f0;
padding: 1.25rem;
border-radius: .5rem;
overflow-x: auto;
margin-bottom: 1.25rem;
}

.blog-post-content pre code {
background: none;
padding: 0;
color: inherit;
}

.blog-post-footer {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #e5e7eb;
}

.blog-post-tags {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 2.0rem;
}

.blog-post-tag {
display: inline-block;
padding: .3rem .8rem;
background: #f3f4f6;
border-radius: 6.25rem;
font-size: .8rem;
color: #6b7280;
text-decoration: none;
}

.blog-post-tag:hover {
background: #e5e7eb; color: #374151;
}

.blog-back-link {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .9rem;
color: inherit;
text-decoration: none;
}

.blog-back-link:hover {
text-decoration: underline;
}

/******* PREVIEW *******/
.preview-banner {
background: #fef9c3;
border-bottom: 2px solid #fcd34d;
padding: .65rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .75rem;
position: sticky;
top: 0;
z-index: 9999;
}

.preview-banner-btns {
display: flex;
gap: .5rem;
}

.preview-btn {
display: inline-flex; 
align-items: center;
padding: .35rem .85rem; 
border-radius: .375rem;
font-size: .85rem; 
font-weight: 600;
text-decoration: none; 
border: 1px solid;
cursor: pointer; 
transition: all .15s;
}

.preview-btn-edit {
background: #fff; 
color: #854d0e;
border-color: #fcd34d;
}

.preview-btn-edit:hover {
background: #fffbeb;
}

.preview-btn-publish {
background: #111827; 
color: #fff;
border-color: #111827;
}

.preview-btn-publish:hover {
background: #374151;
}

/******* RESPONSIVE *******/
@media (max-width: 76.5rem) {
	.blog-page-header {
	justify-content: space-around;
	}
	.blog-layout {
	grid-template-columns: 1fr;
	}
	.blog-sidebar {
	order: 2;
}
}