/* The main white card container */
.review-section {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

  /* Constrains the box size */
  width: 100%;
  max-width: 80%; /* Adjust this number to make the box wider or narrower */
  box-sizing: border-box;

  /* Pins the container to the left and pushes empty space to the right */
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

/* Each review block wrapper */
.review-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 1px; /* Space between bar and next category text */
  gap: 1px; /* Space between text label and the bar row below it */
}

/* Container for the bar graphic and numerical score side-by-side */
.bar-row {
  display: flex;
  align-items: center;
  gap: 15px; /* Space between the end of the bar and the number */
}

/* The grey background track */
.bar-container {
  position: relative;
  flex-grow: 1; /* Forces the bar track to take up all remaining space in the row */
  height: 10px; /* Thickness of the bar */
  background-color: #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

/* The actual coloured filled rating track */
.bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s ease-in-out;
  width: 0%; /* Starts at zero, JavaScript dynamically sets this */
}

/* Text category styling */
.category {
  font-weight: bold;
  color: #0a1c30;
  font-size: 0.95em;
  letter-spacing: 0.5px;
}

/* Numerical score styling */
.score-text {
  color: #4a5568;
  font-weight: bold;
  font-size: 0.95em;
  min-width: 35px;
  text-align: right;
}

/* Updated layout wrapper */
.blog-summary-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px; /* Reduced gap slightly to save horizontal space */
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

/* The review section box needs to play nice with the flex layout */
.review-section {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

  /* Changed from fixed width to a flexible base width */
  flex: 0 0 450px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}

/* Styling for the text block on the right */
.review-text-side {
  flex: 1 1 300px; /* Allows the text to shrink down to 300px before wrapping */
  color: #2d3748;
  line-height: 1.6;
  margin: 0;
}

/* #################################################################
<div class="review-section">
      <div class="review-item" data-score="9" data-color="#72c78a">
        <div class="category">Embarkation</div>
        <div class="bar-row">
          <div class="bar-container">
            <div class="bar-fill"></div>
          </div>
          <div class="score-text"></div>
        </div>
      </div>

      <div class="review-item" data-score="4" data-color="#72c78a">
        <div class="category">Buffet Restaurant</div>
        <div class="bar-row">
          <div class="bar-container">
            <div class="bar-fill"></div>
          </div>
          <div class="score-text"></div>
        </div>
      </div>

      <div class="review-item" data-score="8" data-color="#72c78a">
        <div class="category">Cabin Comfort</div>
        <div class="bar-row">
          <div class="bar-container">
            <div class="bar-fill"></div>
          </div>
          <div class="score-text"></div>
        </div>
      </div>

      <div class="review-item" data-score="6" data-color="#72c78a">
        <div class="category">Cabin Cleanliness</div>
        <div class="bar-row">
          <div class="bar-container">
            <div class="bar-fill"></div>
          </div>
          <div class="score-text"></div>
        </div>
      </div>

      <div class="review-item" data-score="0" data-color="#72c78a">
        <div class="category">Balcony Cleanliness</div>
        <div class="bar-row">
          <div class="bar-container">
            <div class="bar-fill"></div>
          </div>
          <div class="score-text"></div>
        </div>
      </div>
    </div>

    <script>
      document.querySelectorAll(".review-item").forEach((item) => {
        const score = parseFloat(item.getAttribute("data-score"));
        const color = item.getAttribute("data-color");

        // Multiply score by 10 to turn 0-10 into a 0-100% width
        const percentage = score * 10;

        // Set the width and colour dynamically
        const barFill = item.querySelector(".bar-fill");
        barFill.style.width = percentage + "%";
        barFill.style.backgroundColor = color;

        // Output the score value into the text column
        item.querySelector(".score-text").textContent = score+"/10";
      });
    </script>

      */