.subpage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  grid-auto-rows: auto; /* Allows rows to adjust dynamically */
  gap: 20px; /* Adds space between items */
  align-items: start;
}

/* TEXT SECTION - Always in the Top Left */
.subpage-text {
  grid-column: 1; /* Always in the first column */
  grid-row: 1; /* Ensures it stays at the top */
  max-width: 600px;
  align-self: start; /* Aligns text at the top */
  padding-left: 0px;
  align-self: end;
}

/* 1. Overall page wrapper adjustments (optional) */
#custome-dashboard-page {
  margin: 0 auto;
  padding: 20px;
}
#custome-dashboard-page .subpage-text h1 {
  text-align: center; /* Centers only the heading */
}
/* 2. Header text styling */
#custome-dashboard-page .subpage-text {
  max-width: 800px;
  margin: 0 auto 40px;  /* Centers text and adds spacing below */
  text-align: left;
}

/* 3. Dashboard layout: stack images and iframe vertically with spacing */
#custome-dashboard-page .dashboard-layout {
  display: flex;
  flex-direction: column;
  gap: 40px; /* Adjust spacing between the images grid and the iframe */
  margin-top: 40px;
}

/* 4. Images Grid Container */
#custome-dashboard-page .images-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;           /* Space between each image item */
  max-width: 1200px;   /* Optional maximum width for the grid */
  margin: 0 auto;      /* Center the grid */
}

/* 5. Individual images styling */
#custome-dashboard-page .subpage-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

/* 6. Center the iframe container */
#custome-dashboard-page .iframe-container {
  text-align: center;
  margin: 0 auto;
}

/* 7. Bottom links styling */
#custome-dashboard-page .bottom-links {
  text-align: center;
  margin-top: 20px;
}
/* Wrap the images on top and the iframe below */
.dashboard-layout {
  display: flex;
  flex-direction: column;  /* Stack vertically */
  align-items: center;     /* Center them horizontally */
  gap: 20px;               /* Spacing between images container and iframe */
  margin-top: 20px;        /* Optional: extra spacing from the text above */
}
/* Additional styling for the iframe container if needed */
.iframe-container iframe {
  /* You already applied inline styles, but you can move them here */
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

/* Custom styling for the Nascuntur page */
#large-image-page .subpage-grid {
  display: grid;
  grid-template-columns: 1fr; /* One column to stack */
  justify-items: center;      /* Center content horizontally */
  gap: 40px;                  /* Space between text and image */
}


#large-image-page .subpage-text,
#large-image-page .subpage-image {
  grid-column: 1;
  justify-self: center;
}
#large-image-page .subpage-text {
  text-align: center;
  max-width: 800px;
  grid-row: 1;
}

#large-image-page .subpage-image img {
  max-width: 1000px; /* Make the image bigger */
  width: 100%;
  height: auto;
}

#long-image-page .subpage-text {
    grid-row: 1;
    align-self: start;
    text-align: center;
    width: 100%;
    padding: 20px;
}

#long-image-page .main-wrapper {
    padding: 20px; /* Reduce padding */
    margin: 0 auto; /* Keeps it centered */
    max-width: 1000px; /* Optional: Adjust width */
}

/* IMAGE PLACEMENT - Dynamic */
.subpage-grid .subpage-image {
  display: block;
  grid-column: auto;
  justify-self: center;
}

/* ENSURE IMAGES SCALE PROPERLY */
.subpage-grid img {
  width: 100%;
  height: auto;
  max-width: 550px; /* Adjust image sizes */
  border-radius: 8px; /* Rounded edges for aesthetics */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* CENTER LAST IMAGE ONLY IF THERE'S AN ODD NUMBER OF IMAGES */
.subpage-grid .subpage-image:nth-child(odd):last-of-type {
  grid-column: 1 / span 2; /* Makes it take full width */
  justify-self: center; /* Centers it horizontally */
}

/* VIDEO CONTAINER - Ensures Proper Placement */
.video-container {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.subpage-video {
  width: 100%;
  max-width: 550px;
  display: block;
  border-radius: 8px;
  grid-column: 2;
  grid-row: 3;
  justify-content: center;
  align-items: center;
  margin: 0;
}

/* BOTTOM RETURN LINK - Always Last */
.bottom-links {
  grid-column: 1 / span 2;
  text-align: center;
  margin-top: 30px;
  font-size: 1.1rem;
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
  .subpage-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .subpage-text {
    text-align: left; /* Left-align everything inside */
    max-width: 100%; /* Ensure full width */
    padding: 0 20px; /* Add side padding to prevent edge contact */
    font-size: 0.8rem; /* Make body text slightly smaller */
  }

  .subpage-text h1 {
    text-align: center; /* Keep the h1 centered */
    font-size: 1.9rem; /* Reduce the h1 size for better wrapping */
  }

  /* Ensure images stack properly */
  .subpage-grid .subpage-image {
    width: 100%;
    max-width: 400px;
  }

  /* Return link stays at the bottom */
  .bottom-links {
    margin-top: 40px;
  }
}