/**
 * BITS Perth Reviews — styling.
 * Uses the theme's own custom properties so it inherits the palette rather
 * than hard-coding a second set of brand colours.
 */

.bits-reviews {
  --br-navy:   var(--b-navy,   #0a1628);
  --br-blue:   var(--b-blue,   #1565c0);
  --br-gray:   var(--b-gray,   #6b7280);
  --br-border: var(--b-border, #e5e7eb);
  --br-light:  var(--b-light,  #f4f7fb);
  --br-radius: var(--b-radius, 14px);
}

/*
 * Flex rather than grid, because the review count is not ours to choose -
 * Google returns up to five and we show whatever arrives. An auto-fit grid
 * packed five cards as 4 + 1, leaving a lone orphan on the second row.
 * Flex with a fixed basis and centred wrapping lets the trailing row sit
 * centred under the one above it, which reads as deliberate at any count.
 */
.bits-reviews-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.25rem;
  margin-top: 2.5rem;
  text-align: left;
}

.bits-reviews-grid > .bits-review {
  flex: 1 1 280px;
  max-width: 360px;
}

/*
 * Cap the rows so five cards break 3 + 2 rather than 4 + 1. The calc
 * subtracts the gaps that sit between cards on a full row.
 */
.bits-reviews-grid[data-count="5"] > .bits-review,
.bits-reviews-grid[data-count="6"] > .bits-review {
  flex-basis: calc((100% - 2 * 1.25rem) / 3);
}

/* Four reviews read better as a balanced 2 x 2 than a thin single row */
.bits-reviews-grid[data-count="4"] > .bits-review {
  flex-basis: calc((100% - 1.25rem) / 2);
  max-width: 460px;
}

/* One or two reviews should not stretch across the full width */
.bits-reviews-grid[data-count="1"] { max-width: 520px; margin-inline: auto; }
.bits-reviews-grid[data-count="2"] { max-width: 820px; margin-inline: auto; }

.bits-review {
  /*
   * border-box is load-bearing, not housekeeping.
   *
   * The theme does not set a global border-box, so these cards inherited
   * content-box: the 1.5rem padding was added OUTSIDE the flex-basis and
   * max-width. A card sized to 360px actually occupied 408px, which is why
   * only two fitted per row inside the 820px content column and five
   * reviews laid out 2 + 2 + 1 instead of 3 + 2.
   */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(10,22,40,.06), 0 1px 2px rgba(10,22,40,.04);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}
.bits-review:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10,22,40,.12);
}

.bits-review-stars {
  margin: 0 0 .75rem !important;
  color: #f5a623;
  letter-spacing: .1em;
  font-size: 1rem !important;
  line-height: 1;
}

.bits-review-text {
  margin: 0 0 1.25rem !important;
  color: var(--br-navy);
  font-size: .95rem !important;
  line-height: 1.7;
  max-width: none !important;
  text-align: left !important;
}

.bits-review-author {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.bits-review-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
}
.bits-review-avatar--initials {
  background: linear-gradient(135deg, var(--br-navy), var(--br-blue));
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  font-family: var(--wp--preset--font-family--heading, inherit);
}

.bits-review-meta { display: flex; flex-direction: column; line-height: 1.3; }
.bits-review-name { font-weight: 700; font-size: .9rem; color: var(--br-navy); }
.bits-review-name a { color: inherit; text-decoration: none; }
.bits-review-name a:hover { text-decoration: underline; }
.bits-review-when { font-size: .8rem; color: var(--br-gray); }

.bits-reviews-empty {
  margin: 2rem 0 0 !important;
  text-align: center;
  color: var(--br-gray);
  font-size: .95rem;
}

.bits-reviews-attrib {
  margin: 1.75rem 0 0 !important;
  text-align: center;
  color: var(--br-gray);
  font-size: .9rem;
}
.bits-reviews-attrib strong { color: var(--br-navy); font-size: 1.05rem; }
.bits-reviews-link { color: var(--br-blue); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bits-reviews-link:hover { text-decoration: underline; }

.bits-reviews-notice {
  padding: 1rem 1.25rem;
  background: #fff8e5;
  border: 1px solid #f0d48a;
  border-radius: 10px;
  color: #6b5900;
  font-size: .9rem;
}

/* Tablet: two per row regardless of count, so cards never go narrower than they read well at */
@media (max-width: 900px) {
  .bits-reviews-grid > .bits-review,
  .bits-reviews-grid[data-count="4"] > .bits-review,
  .bits-reviews-grid[data-count="5"] > .bits-review,
  .bits-reviews-grid[data-count="6"] > .bits-review {
    flex-basis: calc((100% - 1.25rem) / 2);
    max-width: none;
  }
}

@media (max-width: 600px) {
  .bits-reviews-grid { margin-top: 2rem; }
  .bits-reviews-grid > .bits-review,
  .bits-reviews-grid[data-count="4"] > .bits-review,
  .bits-reviews-grid[data-count="5"] > .bits-review,
  .bits-reviews-grid[data-count="6"] > .bits-review {
    flex-basis: 100%;
    max-width: none;
  }
}