/**
 * Travelblog Child Theme – Frontend Styles
 * ----------------------------------------
 * Purpose:
 *  - simple responsive layout wrapper
 *  - hide desktop-only elements on mobile
 *  - consistent styling for Pods shortcodes (time periods, galleries)
 */

/* ------------------------------
   Basic Responsive Container
   ------------------------------ */
   
 @media (min-width: 1024px) {
  .responsive-container-header {
     max-width: 85%;
     margin: 0 auto;
   }
  .responsive-container {
     max-width: 80%;
     margin: 0 auto;
   }
   .post-image-max-width{
      max-width: 60vh;
   }
 }

 /* Configure the grid container for 3 equal columns and 20px gaps */
.immich-grid, 
.immich-album-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 20px !important; 
    padding: 0 !important;
    margin-bottom: 30px !important;
}

/* Ensure container items fill the grid cell perfectly */
.immich-grid > div,
.immich-album-grid > div {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
    background: transparent !important;
}

/* Force images to be perfectly square using aspect-ratio */
.immich-grid img, 
.immich-album-grid img {
    width: 100% !important;
    height: auto !important; /* Override any fixed heights */
    aspect-ratio: 1 / 1 !important; /* Creates a perfect square dynamically */
    object-fit: cover !important; /* Ensures the image fills the square without distortion */
    border-radius: 10px !important; /* Optional: Keeps the rounded corners */
}

 @media (max-width: 1023px) {
  .responsive-container-header {
     max-width: 100%;
     margin: 0 auto;
   } 
   .responsive-container {
     width: 90%;
     margin: 0 auto;
   }
   .post-image-max-width{
      max-width: 60vh;
   }
  .immich-grid, 
  .immich-album-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
 }

/* ------------------------------
   Time Period Navigation
   ------------------------------ */
.time-period-nav {
  display: flex;
  justify-content: space-between;
  margin: 1em 0;
}

.time-period-nav a {
  text-decoration: none;
  color: var(--wp--preset--color--contrast, #000);
}

.time-period-nav a:hover,
.time-period-nav a:focus {
  text-decoration: underline;
}

/* Align the "Next →" navigation on the right side */
.nav-next {
  text-align: right;
}

/* ------------------------------
   Time Period List Wrapper
   ------------------------------ */
.post-time-periods-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

/* .post-time-periods-wrapper .post-time-period a {
  color: var(--wp--preset--color--contrast, #000);
  transition: background-color 0.2s ease-in-out;


  border-radius: 20px;
  border-color: var(--wp--preset--color--accent-6);
  border-width: 0.8px;
  border-style: solid;
  font-weight: 400;
  line-height: 2.8;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  text-decoration: none;
}

.post-time-periods-wrapper .post-time-period a:hover {
  background-color: var(--wp--preset--color--base-3, #e0e0e0);
} */

/* ------------------------------
   Gallery Layout
   ------------------------------ */
.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery-item {
  width: 100% !important; /* override inline WordPress width */
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

/* Optional: tighter spacing inside built-in WP gallery */
.wp-block-gallery.has-nested-images figure.wp-block-image {
  margin: 0;
}

/* ------------------------------
   Utility Elements
   ------------------------------ */
.time-period-date {
  font-weight: 600;
}

.time-period-gallery {
  margin: 1.5em 0;
}