/* Base Image Styles */
.img-fluid {
 max-width: 100%;
 height: auto;
 display: block;
}

/* Image Containers */
.img-container {
 position: relative;
 width: 100%;
 overflow: hidden;
 z-index: 2; /* Higher than sidebar */
}

.img-container.full-width {
 margin: 0 -50vw;
 position: relative;
 left: 50%;
 right: 50%;
 width: 100vw;
}

/*

Changes to perform to allow scroll over the image

.side-column {
 ... existing styles ... 
  z-index: 2; Higher than content 
}

.img-container {
  position: relative;
  z-index: 1;
}

*/

/* Aspect Ratios */
.img-ratio {
 position: relative;
 width: 100%;
}

.img-ratio--16x9 { padding-top: 56.25%; }
.img-ratio--4x3 { padding-top: 75%; }
.img-ratio--1x1 { padding-top: 100%; }

.img-ratio > img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.overlap-image {
  position: relative;
  z-index: 10; /* Higher than sidebar */
  transform: translateZ(0); /* Force stacking context */
  will-change: transform; /* Optimize performance */
  border: 1px solid var(--brown-light);
  width: 100%;
}

.overlap-image.left {
    grid-column: 2 / 4;
    width:100%;
    padding: 0;
    margin: 1rem 0;
}

.overlap-image.center {
    grid-column: 2 / 5;
    width:100%;
    padding: var(--spacing-lg) 0;
}

/* Article Header Pattern */
.article-header {
  position: relative;
  margin-bottom: var(--section-spacing);
}

.article-hero {
  margin-bottom: var(--spacing-lg);
}

.article-meta {
  padding: var(--spacing-md) 0;
}

.article-metadata {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  font-size: 0.9rem;
  color: var(--medium-gray);
}

.article-category {
  background: var(--earthy-olive-lightest);
  color: var(--earthy-olive-dark);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius);
  font-weight: 500;
}

.article-date,
.article-read-time {
  color: var(--medium-gray);
}

/* Inline Image Variations */
.inline-image {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin: var(--spacing-md) 0;
}

.inline-figure {
  margin: var(--spacing-lg) 0;
  text-align: left;
}

.inline-figure--centered {
  text-align: center;
}

.inline-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  display: block;
}

.inline-figure figcaption {
  font-size: 0.9rem;
  color: var(--medium-gray);
  font-style: italic;
  margin-top: var(--spacing-sm);
  padding: 0 var(--spacing-sm);
}

.inline-figure--centered figcaption {
  text-align: center;
}

@media (max-width: 1024px) {
  .img-container.full-width {
   margin: 0;
   left: 0;
   right: 0;
   width: 100%;
  }
  .overlap-image {
      width: 100%;
      margin-bottom: var(--spacing-md);
  }
  
  /* Responsive adjustments for article metadata */
  .article-metadata {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
}