/* The Guest review part (design-system COMPONENTS.md), on every page that shows one: the trip page's reviews and its
   panel of all of them, and the home page's row. Moved from trip-page.css so the two places draw one card. */

/* A guest review: the score written beside the stars, and where it was posted written beside the logo. */
.review-list .item .review-score { display: inline-flex; align-items: center; gap: var(--space-2, 8px); }
.review-list .item .review-score__value { color: var(--color-contrast, #0b1f2e); font-size: var(--text-body-lg, 1rem); font-weight: var(--weight-bold, 700); line-height: var(--leading-tight, 1.1); }
.review-list .item .review-from { display: inline-flex; align-items: center; gap: var(--space-2, 8px); }
.review-list .item .review-from__label { color: var(--color-muted, #51606b); font-size: var(--text-body-md, 0.875rem); white-space: nowrap; }
.review-list .item .review-country { display: inline; color: var(--color-muted, #51606b); font-size: inherit; font-weight: var(--weight-450, 450); }

.review-list .item .review-from__link { display: inline-flex; align-items: center; gap: var(--space-2, 8px); color: inherit; text-decoration: none; }
.review-list .item .review-from__link:hover .review-from__label { color: var(--color-contrast, #0b1f2e); }
.review-list .item .review-from__link:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); border-radius: var(--radius-sm, 4px); }
.review-list .item .review-from__tick { flex: none; color: var(--color-primary-dark, #295e1d); }
/* The two logos differ in shape, so they share a height rather than a width; Google's squarer mark otherwise draws twice as tall. */
.review-list .item .review-from__label + img { width: auto; max-width: none; height: 20px; }

/* A guest's photographs: an even grid across the card, four to a row where there is room, each square, cropped to fill, with the inner corner. */
.review-list .item .review-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(7.5rem, calc((100% - 3 * var(--space-2, 8px)) / 4)), 1fr)); gap: var(--space-2, 8px); margin-top: var(--space-4, 16px); }
.review-list .item .review-photos img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-xl, 16px); corner-shape: squircle; }
.review-list .item .review-country__flag { display: inline-block; width: 20px; height: 15px; margin: 0 var(--space-1, 4px) 0 0; border-radius: 2px; box-shadow: 0 0 0 var(--border-hairline, 1px) var(--color-hairline, #e0e5e8); vertical-align: -2px; object-fit: cover; }

.review-list .item .review-score i { margin: 0; }
.review-list .item .review-title { display: block; }
.review.review-list .item .review-title .review-score { display: inline-flex; }

/* A guest's photograph or initial takes the system's corner, not a full circle. */
.review-list .item .review-bottom figure,
.review-list .item .review-bottom figure img,
.review-list .item .review-bottom figure .letter { border-radius: var(--radius-xl, 16px) !important; corner-shape: squircle; }

/* A guest's paragraphs: a clear gap between them, closer lines within. */
.review-list .item .review-text p { max-width: var(--container-prose, 40rem); margin: 0 0 var(--space-3, 12px); font-size: var(--text-body-lg, 1rem); line-height: var(--leading-body, 1.5); }
.review-list .item .review-text p:last-child { margin-bottom: 0; }

/* The guest's name and date sit close to their photograph, centred on it. */
.review-list .item .review-bottom { align-items: center; }
.review-list .item .review-bottom figure + .detail-content { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: var(--space-3, 12px); }
.review-list .item .review-bottom .detail-content > span { margin: 0; line-height: var(--leading-body, 1.5); }
.review .item .review-bottom .client-detail { font-size: var(--text-body-lg, 1rem); }
.review .item .review-bottom .review-meta { font-size: var(--text-body-md, 0.875rem); }
/* When, and with whom. The parts wrap whole, and the dot stays with the part before it, so a line never starts with one. */
.review-list .item .review-meta { display: flex; flex-wrap: wrap; column-gap: var(--space-2, 8px); }
.review-list .item .review-meta > span { white-space: nowrap; }
.review-list .item .review-meta > span:not(:last-child)::after { content: "\00B7"; margin-left: var(--space-2, 8px); }

/* The home page's reviews: six in full, in a masonry of two columns, one on a phone. Each card keeps its own height,
   so a long review never leaves a short one with empty space. */
.home-reviews .home-reviews__grid { display: block; overflow: visible; columns: 2; column-gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
/* The card is the trip page's: its corner and the theme's soft shadow, no border. The theme's slider widths and its
   centred, upper-case section heading are undone, so the title reads as it does on the trip page. */
.home-reviews .home-reviews__grid > li.item {
  display: block; flex: none; max-width: none; break-inside: avoid; margin: 0 0 var(--space-5);
  border-radius: var(--radius-2xl); corner-shape: squircle;
}
.home-review .home-reviews .item .review-text :is(h3, .review-text__title) {
  margin: 0 0 var(--space-2); padding: 0; color: var(--color-contrast); font-size: var(--text-heading-md);
  line-height: var(--leading-heading); text-align: start; text-transform: none;
}
.home-review .home-reviews .item .review-text :is(h3, .review-text__title)::before { content: none; }
@media (max-width: 767.98px) {
  .home-reviews .home-reviews__grid { columns: 1; }
  .home-reviews .item .review-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-reviews .item .review-photos img:nth-child(n+4) { display: none; }
}

.review-list .item .review-text__body { display: block; overflow: visible; }
.home-reviews .item .review-photos img:nth-child(n+5) { display: none; }

/* From the team's test of staging, 13 October 2026. */
/* A guest's photograph opens large on a click. */
.review-list:not(.client-reviews-page *) .item .review-photos img { cursor: zoom-in; }
.photo-viewer { max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; padding: var(--space-6, 32px) var(--space-8, 48px); border: 0; background: transparent; }
.photo-viewer[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3, 12px); }
.photo-viewer::backdrop { background: rgba(11, 31, 46, 0.92); }
.photo-viewer figure { grid-column: 2; display: grid; justify-items: center; gap: var(--space-3, 12px); min-width: 0; margin: 0; }
.photo-viewer figure img { max-width: 100%; max-height: calc(100dvh - 2 * var(--space-6, 32px) - var(--space-8, 48px)); border-radius: var(--radius-xl, 16px); corner-shape: squircle; object-fit: contain; }
.photo-viewer figcaption { color: var(--color-on-dark, #fff); font-size: var(--text-body-md, 0.875rem); text-align: center; }
.photo-viewer button { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min, 44px); height: var(--touch-min, 44px); padding: 0; border: 0; border-radius: 50%; background: var(--color-base, #fff); color: var(--color-contrast, #0b1f2e); cursor: pointer; }
.photo-viewer button:hover { background: var(--color-surface, #f4f7f3); }
.photo-viewer button:focus-visible { outline: 2px solid var(--color-focus-on-dark, #fff); outline-offset: 2px; }
.photo-viewer button[hidden] { display: none; }
.photo-viewer__close { position: fixed; top: var(--space-4, 16px); right: var(--space-4, 16px); }
.photo-viewer__step--prev { grid-column: 1; }
.photo-viewer__step--next { grid-column: 3; }
@media (max-width: 575.98px) {
  .photo-viewer { padding: var(--space-8, 48px) var(--space-2, 8px) var(--space-4, 16px); }
  .photo-viewer[open] { gap: var(--space-1, 4px); }
}