@charset "utf-8";
/* ============================================================
   FILE: /sites/mhl/assets/css/review_page.css
   Review listing extras and the single review page (2.3.3)
   ------------------------------------------------------------
   Builds on, never repeats:
     blog_listing.css  .blog-listing wrapper, header, pager
     review_card.css   .review-grid and the cards
     blog_post.css     .post-page / .post-layout, the header,
                       the .mhl-gallery mosaic, Keep reading
     sidebar.css       the post sidebar boxes
   Colours route through the --post-* properties on .post-page
   and the --review-* ones below.
   ============================================================ */

/* ------------------------------------------------------------
   Listing — intro line and country chips
   ⚠ UNUSED SINCE 2.4.6 (decision 9): the listing's intro is
   blog_listing.css's .blog-listing__intro and its chips are the
   filter bar (filter_bar.css). Kept for Ben to decide; never
   delete unasked. The grid rule after them is still in use.
------------------------------------------------------------ */
.review-listing__intro {
  max-width: 46rem;
  margin: 1rem 0 0;
  color: var(--card-text, #555a60);
}

.review-chips { margin: 0 0 2rem; }
.review-chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.review-chips__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .9rem;
  border: 1px solid var(--card-border, #ebe8e1);
  border-radius: 999px;
  background: #fff;
  color: #394150;
  font-size: .9rem;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.review-chips__link:hover     { border-color: var(--mhl-blue, #1657aa); color: var(--mhl-blue, #1657aa); }
.review-chips__link.is-current { border-color: var(--mhl-blue, #1657aa); background: var(--mhl-blue, #1657aa); color: #fff; }
.review-chips__count {
  color: inherit;
  font-size: .78rem;
  opacity: .7;
}

/* The listing: three across, two on a tablet, one on a phone — the post grid's break points
   (blog_listing.css .post-grid), 2.6.0, DEV_PLAN_Stage3 §4.16. review_card.css keeps two on the
   homepage and the country pages. ⚠ The phone rule is restated here: this file loads after
   review_card.css, so the unqualified three-across rule would otherwise win on a phone.
   Until 2.6.0: three across from 1000px, two below. Previous: "review_page - v3 (pre-2.6.0).css". */
.review-grid--listing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media only screen and (max-width: 1024px) {
  .review-grid--listing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 640px) {
  .review-grid--listing { grid-template-columns: 1fr; }
}

/* ============================================================
   THE REVIEW PAGE — 2.6.3.5 (DEV_PLAN_Stage3 §4.17, Ben, 25 October
   2026; canvas "Review page", boards "Ben's layout, cleaned up").
   The header's key facts · one gallery (blog_post.css's mosaic) ·
   At a glance with the map · Our review beside the ratings ·
   What's here (the tiles) · Keep reading in the reviews green.
   ⚠ JAVASCRIPT-ONLY STATES ARE .js / .no-js (the layout's first
   <head> line): the closed tiles, the review cut to ten lines and
   the buttons only a script works — right from the first paint,
   never [hidden] on anything given a display here. Without
   JavaScript every section is open and the review is whole.
   Until 2.6.3.5: the stay box, the ratings box and a card per
   section, each with its own photos — "review_page - v4
   (pre-2.6.3.5).css".
============================================================ */
.review-page {
  --review-star:   var(--mwd-gold, #d7a93b);
  --review-green:  var(--reviews-mid, #14731c);
  --review-deep:   var(--reviews-deep, #105816);
  --review-light:  var(--reviews-light, #188721);
  --review-tint:   #e8f3e9;   /* the green chips and boxes — #14731c on it is 5.4:1 */
  --review-ink:    #1d2433;
  --review-line:   #e6e9f0;
  --review-card:   0 6px 22px rgba(22, 40, 80, .07);
  --review-link:   var(--btn-link, #1657aa);
}

/* The line icons (components/review_icons.php): colour from the text. */
.ricon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ricon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.25em;
}

/* A <button> drawn as a text link (.btn-txt is an <a>'s look): no box of its own. */
.review-page button.btn-txt {
  border: 0;
  background: none;
  padding-left: 0;
  cursor: pointer;
}

.review-stars { color: #d5d9e0; font-size: 1.05rem; letter-spacing: .05em; white-space: nowrap; }
.review-stars__star.is-on { color: var(--review-star); }

/* ------------------------------------------------------------
   The header: the place and the rating on one line, then the
   price and the card's tags (ReviewCards — the card's words).
------------------------------------------------------------ */
.review__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.5rem;
  margin: 0 0 .9rem;
}
.review__meta .post__countries { margin: 0; }
.review__meta-icon { width: 17px; height: 17px; opacity: .7; }
.review__overall {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
.review__score { color: var(--review-ink); font-weight: 700; }

.review-keyfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}
.review-keyfacts__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: var(--review-tint);
  color: var(--review-green);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
}
.review-keyfacts__item .ricon { width: 18px; height: 18px; }
.review-keyfacts__item--price {
  border: 1px solid #d5dbe5;
  background: #fff;
  color: var(--review-ink);
}
.review-keyfacts__item--price .ricon { color: var(--review-green); }
.review-keyfacts__item--no { background: #fbf1dc; color: #8a6417; }   /* the card's "No EHU" amber */

/* 2.6.7.7 (the price switch-over) — the price note, beneath the price pill: what the numbers
   can't say ("Low season", "Cash only"). The list gives up its bottom room to it. */
.review-keyfacts--noted { margin-bottom: .55rem; }
.review-keyfacts__note {
  margin: 0 0 1.6rem;
  color: var(--post-muted, #6b7076);
  font-size: .95rem;
  line-height: 1.45;
}

/* 2.5.0.4 — "In our posts: France – Dijon", last in the header. */
.review__posts {
  margin: -.6rem 0 1.6rem;
  color: var(--post-muted, #6b7076);
  font-size: .95rem;
  line-height: 1.6;
}
.review__posts-label { color: var(--post-text, #3f4449); font-weight: 600; }

/* The one gallery: blog_post.css's mosaic does the rest. */
.review-photos { margin: 0 0 1.75rem; scroll-margin-top: calc(var(--header-height, 80px) + 1rem); }

/* ------------------------------------------------------------
   At a glance — the facts and the contact on the left, the map,
   GPS and the buttons on the right (below on a phone).
------------------------------------------------------------ */
.review-glance {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 28px;
  margin: 0 0 2.25rem;
  padding: 22px 24px 24px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--review-card);
}
.review-glance__main  { flex: 999 1 330px; min-width: 0; }
.review-glance__place { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.review-glance__title {
  margin: 0 0 16px;
  color: var(--review-ink);
  font-family: "Quicksand", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
}
.review-glance__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.review-glance__fact { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.review-glance__icon { width: 22px; height: 22px; margin-top: 2px; color: var(--review-green); }
.review-glance__text  { display: flex; flex-direction: column; min-width: 0; }
.review-glance__value { color: var(--review-ink); font-size: 14.5px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.review-glance__label { color: var(--post-muted, #6b7076); font-size: 12.5px; line-height: 1.45; }
.review-glance__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--review-line);
  font-size: 14.5px;
}
.review-glance__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  color: var(--review-link);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.review-glance__link:hover { text-decoration: underline; }
.review-glance__link .ricon { width: 18px; height: 18px; color: var(--review-ink); }
.review-glance__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}
.review-glance__directions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.review-glance__directions .ricon { width: 16px; height: 16px; }

/* The map: our outline (europe.svg) inside a close-up viewBox (MapData::inset()) — no Google. */
.review-map {
  position: relative;
  display: block;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  border-radius: 10px;
  background: #e4eaf4;   /* the outline's sea, under the drawing while it loads */
}
.review-map__svg { display: block; width: 100%; height: 100%; }
.review-map__dot {
  fill: var(--review-light);
  stroke: #fff;
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}
.review-map__me {
  fill: var(--review-star);
  stroke: #fff;
  stroke-width: 2.5px;
  vector-effect: non-scaling-stroke;
}
.review-map__place {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(22, 40, 80, .12);
  color: var(--review-ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
.review-map__place .ricon { width: 14px; height: 14px; }
a.review-map:focus-visible { outline: 3px solid var(--review-green); outline-offset: 2px; }

.review-gps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
}
.review-gps__text  { display: flex; flex-direction: column; min-width: 0; }
.review-gps__label { color: var(--post-muted, #6b7076); font-size: 12px; line-height: 1.3; }
.review-gps__value { color: var(--review-ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.review-gps__copy {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #d5dbe5;
  border-radius: 999px;
  background: #fff;
  color: var(--review-ink);
  font-size: 13px;
  font-weight: 600;
}
.review-gps__copy .ricon { width: 16px; height: 16px; }
.no-js .review-gps__copy { display: none; }   /* only a script can copy */

/* ------------------------------------------------------------
   Our review (cut to ten lines when long — the PAGE decides) beside
   the ratings and "Would we go back?". The overall rating is the
   header's, so it is not here.
------------------------------------------------------------ */
.review-read {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 28px;
  margin: 0 0 2.5rem;
}
/* The ratings box as tall as the review only while the review is cut to its ten lines (Ben's
   "a little bigger (taller)"): opened, or with no script, the box keeps its own height. 2.6.7.1: so
   does a review with notes under the cut (Finding it, Top tips, Good to know) — stretched, the box
   ran past the cut text to the end of the notes, with a gap above "Would we go back?". */
.js .review-read--clamped:not(.is-open):not(.review-read--notes) { align-items: stretch; }
.review-read__review { flex: 999 1 400px; min-width: 0; scroll-margin-top: calc(var(--header-height, 80px) + 1rem); }
.review-read__title,
.review-sections__title {
  margin: 0 0 12px;
  color: var(--review-ink);
  font-family: "Quicksand", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}
.review-read__text {
  position: relative;
  color: var(--post-text, #3f4449);
  font-size: 16.5px;
  line-height: 1.7;
}
.review-prose p { margin: 0 0 1em; }
.review-prose:last-child p:last-child { margin-bottom: 0; }
.review-prose__label { margin: 0 0 .3rem; color: var(--review-ink); font-size: 1rem; }
.js .review-read__text.is-clamped {
  max-height: 17em;   /* ten lines of 1.7 */
  overflow: hidden;
}
.js .review-read__text.is-clamped::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.4em;
  background: linear-gradient(rgba(243, 245, 249, 0), var(--page-bg, #f3f5f9));
  pointer-events: none;
}
.js .review-read__text.is-clamped.is-open { max-height: none; overflow: visible; }
.js .review-read__text.is-clamped.is-open::after { content: none; }
.review-read__more { margin-top: .5rem; min-height: 44px; }
.no-js .review-read__more { display: none; }   /* without a script the review is whole */
/* 2.6.7.1 (DEV_PLAN_Stage3 §4.20): Finding it, Top tips, Good to know — after the main text and its
   "Read the whole review", never cut, in the main text's type. Previous file:
   "_backups/css/review_page - v8 (pre-2.6.7.1).css". */
.review-read__notes {
  margin-top: 1.25rem;
  color: var(--post-text, #3f4449);
  font-size: 16.5px;
  line-height: 1.7;
}

.review-rate {
  flex: 1 1 270px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px 22px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--review-card);
}
.review-rate__title {
  margin: 0 0 6px;
  color: var(--review-ink);
  font-family: "Quicksand", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
}
.review-rate__list { margin: 0; padding: 0; list-style: none; }
.review-rate__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #eef1f5;
  font-size: 15px;
}
.review-rate__label { color: var(--post-text, #3f4449); }
.review-rate__row .review-stars { font-size: 16px; }
.review-rate__back {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--review-tint);
  color: var(--review-deep);
}
.review-rate__back p { margin: 0; line-height: 1.3; }
.review-rate__back-icon { width: 28px; height: 28px; color: var(--review-green); }
.review-rate__back-label {
  display: block;
  color: var(--review-green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;   /* one line in the 270px card */
  text-transform: uppercase;
}
.review-rate__back-value {
  font-family: "Quicksand", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
}

/* ------------------------------------------------------------
   What's here (components/review_sections.php). With a script: a
   grid of tiles, the open one across its row with a gold outline
   (the site's "selected"), the others' details hidden. Without:
   every section open, one under another.
------------------------------------------------------------ */
.review-sections { margin: 0 0 1rem; }
.review-sections__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 14px;
}
.review-sections__title { margin: 0; }
.review-sections__hint { margin: 2px 0 0; color: var(--post-muted, #6b7076); font-size: 13.5px; }
.review-sections__all { min-height: 44px; }
.no-js .review-sections__hint,
.no-js .review-sections__all { display: none; }

/* Without a script: every section a card, open, one under another. */
.review-sections__grid { display: flex; flex-direction: column; gap: 10px; }
.review-tile {
  min-width: 0;
  border: 1px solid #e3e7ee;
  border-radius: 12px;
  background: #fff;
}
.review-tile__heading { margin: 0; min-width: 0; font: inherit; }
.review-tile__toggle {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 15px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.review-tile__toggle:focus-visible { outline: 3px solid var(--review-green); outline-offset: -3px; }
.review-tile__icon { width: 24px; height: 24px; color: var(--review-green); }
.review-tile.is-absent .review-tile__icon { color: #8b919c; }
.review-tile__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.review-tile__name { color: var(--review-ink); font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.review-tile__summary { color: var(--post-muted, #6b7076); font-size: 13px; line-height: 1.45; }
.review-tile__summary .review-stars { font-size: 13px; }
.review-tile__body { padding: 0 20px 20px; }
.review-tile__panel-head { display: none; }

/* Without a script the toggles do nothing: they read as headings. */
.no-js .review-tile__toggle { align-items: center; padding: 16px 20px 0; cursor: default; }
.no-js .review-tile__text { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.no-js .review-tile__icon { width: 28px; height: 28px; }
.no-js .review-tile__name {
  font-family: "Quicksand", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 19px;
}
.no-js .review-tile__summary { font-size: 13.5px; }

/* With a script — 2.6.4.1 (Ben, 25 October 2026: "it does jump about"; boards "Smoother tiles").
   THE TILES STAY PUT: each .review-tile is display: contents, so its heading and its details are
   two grid items. A heading keeps its size and its place — the open one only gains the gold
   outline (an inset shadow, so its size does not change). The details span the row and, with the
   dense flow, land in the row UNDER the open tile's: the tiles after it fill its row first. They
   fade in. "Open all sections" (.is-all) makes the grid one column: each tile over its details,
   joined into one card. review.js keeps the clicked tile still on the screen. Previous file:
   "review_page - v5 (pre-2.6.4.1).css". */
.js .review-sections__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row dense;
}
.js .review-tile { display: contents; }
.js .review-tile__toggle {
  border: 1px solid #e3e7ee;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.js .review-tile__toggle:hover { border-color: #c9d0da; }
.js .review-tile.is-open .review-tile__toggle {
  border-color: var(--review-star);
  box-shadow: inset 0 0 0 1px var(--review-star);   /* 2px of gold, the size unchanged */
}
.js .review-tile__body {
  display: none;
  grid-column: 1 / -1;
  min-width: 0;
  padding: 14px 20px 20px;
  border: 2px solid var(--review-star);
  border-radius: 12px;
  background: #fff;
}
.js .review-tile.is-open .review-tile__body {
  display: block;
  animation: review-panel-in .2s ease-out;
}
.js .review-tile__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.review-tile__panel-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--review-ink);
  font-family: "Quicksand", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.review-tile__panel-icon { width: 24px; height: 24px; color: var(--review-green); }
.review-tile__shut {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--review-link);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.review-tile__shut .ricon { width: 16px; height: 16px; }

/* Open all sections: a list — each tile over its details, as one card. */
.js .review-sections.is-all .review-sections__grid { grid-template-columns: minmax(0, 1fr); }
.js .review-sections.is-all .review-tile.is-open .review-tile__toggle {
  border-color: #e3e7ee;
  border-bottom-color: transparent;
  border-radius: 12px 12px 0 0;
  box-shadow: none;
}
.js .review-sections.is-all .review-tile__body {
  margin-top: -10px;   /* over the grid's gap, onto its heading */
  padding-top: 4px;
  border: 1px solid #e3e7ee;
  border-top: 0;
  border-radius: 0 0 12px 12px;
}
/* 2.6.4.3 (Ben, 25 October 2026: "move the close button to the top right of the panel"): in the
   list, Close sits on the section's own title row — the heading's "Close ✕" label, top right (the
   heading button opens and closes it). The panel's Close (2.6.4.2, below the heading — Ben: "floating
   in no man's land") is the tile grid's only. Previous file: "review_page - v7 (pre-2.6.4.3).css". */
.js .review-sections.is-all .review-tile__panel-head { display: none; }
.review-tile__close { display: none; }
.js .review-sections.is-all .review-tile__toggle { position: relative; }
.js .review-sections.is-all .review-tile.is-open .review-tile__toggle { padding-right: 96px; }
.js .review-sections.is-all .review-tile.is-open .review-tile__close {
  position: absolute;
  top: 14px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--review-link);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.review-tile__close .ricon { width: 16px; height: 16px; }

@keyframes review-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .review-tile.is-open .review-tile__body { animation: none; }
  .js .review-tile__toggle { transition: none; }
}

.review-tile__absent { margin: 12px 0 0; color: var(--post-muted, #6b7076); font-style: italic; }
.review-tile__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 16px 0 0;
}
.review-tile__fact { min-width: 0; }
.review-tile__fact dt { color: var(--post-muted, #6b7076); font-size: 12.5px; line-height: 1.4; }
.review-tile__fact dd {
  margin: 1px 0 0;
  color: var(--review-ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.review-tile__ratings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.review-tile__rating > span:first-child { display: block; color: var(--post-text, #3f4449); }
.review-tile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.review-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 7px;
  border-radius: 6px;
  background: var(--review-tint);
  color: var(--review-green);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.review-chip .ricon { width: 14px; height: 14px; }
.review-chip.is-no { background: #f0f2f6; color: #5b6270; }   /* 5.6:1 — not struck through (2.6.3.5) */
.review-tile__prose { margin: 14px 0 0; }
.review-tile__prose-label { margin: 0 0 2px; color: var(--review-ink); font-size: 14.5px; font-weight: 600; }
.review-tile__prose p {
  max-width: 43.2em;
  margin: 0;
  color: var(--post-text, #3f4449);
  font-size: 15px;
  line-height: 1.6;
}
.review-tile__photos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--review-link);
  text-decoration: none;
}
.review-tile__photos .ricon { width: 18px; height: 18px; color: var(--review-ink); }

/* ------------------------------------------------------------
   Keep reading — the post page's (blog_post.css), in the reviews
   green: the country card's shade and its colour under the photo.
------------------------------------------------------------ */
.review-page .keep-reading { margin-top: 3rem; }
.review-page .keep-reading__country { background: var(--review-deep); }
.review-page .keep-reading__country::before {
  background: linear-gradient(90deg, rgba(16, 64, 22, .86) 0%, rgba(16, 64, 22, .5) 50%, rgba(16, 64, 22, .08) 100%);
}
.review-page .keep-reading__card:focus-visible { outline-color: var(--review-green); }

/* ------------------------------------------------------------
   Smaller screens. The sidebar drops under the article at 900px
   (blog_post.css), so the column is wide again until a phone.
------------------------------------------------------------ */
@media only screen and (min-width: 901px) and (max-width: 1150px) {
  .js .review-sections__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-tile__facts,
  .review-tile__ratings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media only screen and (max-width: 600px) {
  .review-keyfacts { gap: 6px; margin-bottom: 1.25rem; }
  .review-keyfacts--noted { margin-bottom: .5rem; }                      /* 2.6.7.7 — after the line above */
  .review-keyfacts__note { margin-bottom: 1.25rem; font-size: 14px; }
  .review-keyfacts__item { padding: 4px 11px 4px 8px; font-size: 13px; }
  .review-keyfacts__item .ricon { width: 16px; height: 16px; }
  .review-photos { margin-bottom: 1.25rem; }

  .review-glance { gap: 16px; padding: 16px; }
  .review-glance__title { margin-bottom: 12px; font-size: 19px; }
  .review-glance__facts { gap: 12px 14px; }
  .review-glance__value { font-size: 14px; }
  .review-glance__label { font-size: 12px; }
  .review-glance__contact { flex-direction: column; gap: 2px; margin-top: 14px; padding-top: 12px; }
  .review-glance__buttons { justify-content: space-between; }

  .review-read { gap: 12px; }
  .review-read__title, .review-sections__title { font-size: 21px; }
  .review-read__text, .review-read__notes { font-size: 16px; line-height: 1.65; }
  .review-rate { padding: 16px 16px 18px; }
  .review-rate__back-value { font-size: 22px; }

  .js .review-sections__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .js .review-tile__toggle { flex-direction: column; gap: 6px; padding: 12px; }
  .review-tile__name { font-size: 14px; }
  .review-tile__summary { font-size: 12.5px; }
  .review-tile__body { padding: 0 14px 16px; }
  .js .review-tile__body { padding: 10px 14px 16px; }
  .no-js .review-tile__toggle { padding: 14px 14px 0; }
  .no-js .review-tile__name { font-size: 17px; }
  .review-tile__panel-title { font-size: 16.5px; }
  .js .review-sections.is-all .review-tile__body { margin-top: -8px; padding-top: 2px; }
  .review-tile__facts,
  .review-tile__ratings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .review-chip { font-size: 12.5px; }
}