/*
Theme Name: Xbox Guide
Template: generatepress
Sheet: coming-soon-games.css */

body {
  font-family: Arial, sans-serif;
}

.container {
  /* display: flex; */
  flex-wrap: wrap;
  margin: 20px;
}

.main-content {
  flex: 3; /* 75% width */
  padding: 20px;
  box-sizing: border-box;
}

.sidebar {
  flex: 1; /* 25% width */
  padding: 20px;
  box-sizing: border-box;
}

.timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  position: relative;
  margin: 20px;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(33.333% - 20px); /* Adjust width for responsiveness */
  box-sizing: border-box;
  margin-bottom: 10px;
  position: relative;
  padding-left: 0; /* Removed unnecessary padding */
}

.image-container {
  width: 100%;
  padding-top: 100%; /* Square aspect ratio */
  position: relative;
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.placeholder-image {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  color: #aaa;
}

.image-container .title {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  color: white;
  background: rgba(0, 0, 0, 0.7); /* Slightly darker background for better readability */
  display: block;
  text-align: center !important;
  padding: 5px 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-sizing: border-box; /* Ensures padding is included in the element's total width */
  font-size: 16px; /* Adjust font size if needed */
}

  .image-container .cs-title {
      position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  color: white;
  background: rgba(0, 0, 0, 0.7); /* Slightly darker background for better readability */
  text-align: center !important;
  padding: 5px 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-sizing: border-box; /* Ensures padding is included in the element's total width */
  font-size: 14px; /* Adjust font size if needed */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* Adds "..." at the end if the text overflows */
  }

@media only screen and (max-width: 768px) {
  /* Optional: Adjust font size for better readability on smaller screens */
  .image-container .cs-title {
   font-size: 14px;
}
}

@media only screen and (max-width: 768px) {
  /* Optional: Adjust font size for better readability on smaller screens */
.sidebar-timeline-item {
  width: calc(50% - 20px) !important; /* Adjust width for responsiveness */
}
}

@media only screen and (max-width: 550px) {
  /* Optional: Adjust font size for better readability on smaller screens */
  .image-container .cs-title {
   font-size: 13px;
}
}

@media only screen and (max-width: 400px) {
  /* Optional: Adjust font size for better readability on smaller screens */
  .image-container .cs-title {
   font-size: 12px;
}
}

.date {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

.timeline-year {
  font-size: 1.9em !important;
}

.timeline-month,
.timeline-year {
  width: 100%;
  font-size: 1.1em;
  margin: 10px 0 10px;
  font-weight: bold;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
  text-align: center;
  color: white; /* Ensuring text is white */
}

.timeline-month {
  background: #777; /* Slightly lighter grey background for months */
}

.timeline-year {
  background: #555; /* Dark grey background for years */
  color: #fff; /* White text */
  border-radius: 5px;
}

@media (max-width: 1200px) {
  .timeline-item {
    width: calc(50% - 20px); /* Adjusted for responsiveness */
  }
}

@media (max-width: 768px) {
  .timeline-item {
    width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .timeline-item {
    width: 100%;
  }
}

/* Sidebar-specific styles */
.sidebar-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0px;
  padding: 0px;
  background-color: #f9f9f9;
  border: 0px solid #ddd;
  border-radius: 5px;
  text-align: left;
}

.sidebar-timeline-analysis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto; /* Center the entire timeline */
  padding: 0px;
  background-color: #f9f9f9;
  border: 0px solid #ddd;
  justify-content: center; /* Center items within the container */
}


.sidebar-timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(33.3% - 10px); /* Adjust width for responsiveness */
  box-sizing: border-box;
  margin-bottom: 10px;
}

.sidebar-timeline-item-analysis {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(20% - 10px); /* Adjust width for responsiveness */
  box-sizing: border-box;
  margin-bottom: 10px;
}

.sidebar-image-container {
  width: 100%;
  padding-top: 100%; /* Square aspect ratio */
  position: relative;
  overflow: hidden;
    align-items: center;
  justify-content: center; /* Center the image within the container */
  border: 0px solid #ccc;
}

.sidebar-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.sidebar-placeholder-image {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  color: #aaa;
}

.sidebar-date {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.sidebar-title {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin-top: 5px;
}

.game-pass-home-sidebar {
	padding: 20px !important;
}

.coming-soon-button-container {
    text-align: left !important; /* Center align the button */
    margin-top: 10px; /* Optional: add some margin for spacing */
}