/* Responsive image styles for gabevso.dev */
@import "pagination.css";

.responsive-image {
  /* Ensure images don't exceed container width */
  max-width: 100%;
  height: auto;
}

/* Default styles for larger screens (desktop) */
.responsive-image.align-right {
  float: right;
  margin: 0px 0px 20px 20px;
}

.responsive-image.align-left {
  float: left;
  margin: 0px 20px 20px 0px;
}

.responsive-image.align-center {
  display: block;
  margin: 20px auto;
}

/* Tablet responsive styles (between 685px and 900px) */
@media (max-width: 900px) and (min-width: 685px) {
  .responsive-image.align-right,
  .responsive-image.align-left {
    /* On tablet, reduce margins slightly and limit width */
    max-width: 250px;
  }
  
  .responsive-image.align-right {
    margin: 0px 0px 15px 15px;
  }
  
  .responsive-image.align-left {
    margin: 0px 15px 15px 0px;
  }
}

/* Mobile responsive styles (684px and smaller) */
@media (max-width: 684px) {
  .responsive-image.align-right,
  .responsive-image.align-left {
    /* On mobile, center the image and remove float */
    float: none;
    display: block;
    margin: 20px auto;
    max-width: 90%; /* Leave some margin on sides */
    height: auto;
  }
  
  /* Also ensure centered images aren't too large on mobile */
  .responsive-image.align-center {
    max-width: 90%;
    margin: 20px auto;
  }
}

/* Very small screens (480px and smaller) */
@media (max-width: 480px) {
  .responsive-image.align-right,
  .responsive-image.align-left,
  .responsive-image.align-center {
    max-width: 95%;
    margin: 15px auto;
  }
}


/** Custom styles to reduce spacing between header and content **/
/* Reduce container padding to decrease overall white space */
.container {
  padding: 20px 40px; /* Reduced from 40px all around to 20px top/bottom, 40px left/right */

  @media (max-width: 768px) {
    padding: 15px 20px; /* Reduced mobile padding */
  }
}

/* Optionally, reduce the space above the first heading in content */
.content h1:first-child,
.content h2:first-child,
.content h3:first-child {
  margin-top: 0px; /* Reduced from default 40px */
}

/* Reduce space above posts */
.post {
  margin-top: 0px;
}