/* ---------------------------------------------------------------------------
   The review wall: the latest guest reviews, drawn from the same Repuso feed
   that supplies the headline figures (see js/reviews-live.js).

   Built rather than embedded. Repuso's own widget ships its stylesheet, its
   fonts and its branding, none of which match this site; we take the JSON and
   draw the cards ourselves.

   No reviewer photographs. The feed carries an avatar URL for most reviews,
   but hotlinking them would mean a third-party image request per card on a
   page that promises no third-party tracking, and a broken face whenever one
   404s. An initial on a tinted chip carries the same weight and costs nothing.

   Radius and colours follow the tokens the property cards and search bar use.
   --------------------------------------------------------------------------- */

.ch-wall[hidden] {
  display: none;
}

.ch-wall {
  margin-top: 3rem;
  text-align: left;
}

.ch-wall__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ch-wall__card {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid rgba(59, 65, 38, .35);
  border-radius: var(--radius--16, 1rem);
  background-color: #f1ecdb;
  color: var(--accent, #3b4126);
}

/* Beyond the first row the cards are hidden until the button is pressed,
   so the section does not open at three screens tall. */
.ch-wall__card[hidden] {
  display: none;
}

.ch-wall__head {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.ch-wall__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  background-color: rgba(59, 65, 38, .12);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
}

.ch-wall__who {
  min-width: 0;
}

.ch-wall__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-wall__meta {
  margin: .125rem 0 0;
  font-size: 1rem;
  line-height: 1.3;
  opacity: .72;
}

.ch-wall__stars {
  margin: 0;
  font-size: 1.125rem;
  letter-spacing: .12em;
  line-height: 1;
}

/* Reviews run from one line to several paragraphs. Clamping keeps the grid
   even; the link underneath goes to the full text at the source. */
.ch-wall__text {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ch-wall__src {
  margin-top: auto;
  padding-top: .25rem;
  color: inherit;
  font-size: 1.125rem;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.ch-wall__src:hover,
.ch-wall__src:focus-visible {
  text-decoration-thickness: 2px;
}

.ch-wall__more {
  display: inline-flex;
  align-items: center;
  margin-top: 2rem;
  padding: .8rem 1.6rem;
  border: 0;
  border-radius: 50em;
  background-color: var(--accent, #3b4126);
  color: #f1ecdb;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .18s ease;
}

/* The class sets a display, which beats the browser's own [hidden] rule --
   they have the same weight and an author's wins. Without this the button
   stays on the page after it has been pressed, doing nothing. */
.ch-wall__more[hidden] {
  display: none;
}

.ch-wall__more:hover,
.ch-wall__more:focus-visible {
  opacity: .9;
}

/* On the dark band the cards keep their cream, but the button has to invert
   or it disappears into the background. */
.ch-section--accent .ch-wall__more {
  background-color: #f1ecdb;
  color: var(--accent, #3b4126);
}

.ch-wall__note {
  margin: 1.25rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  opacity: .72;
}

@media screen and (max-width: 991px) {
  .ch-wall__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .ch-wall__grid {
    grid-template-columns: 1fr;
  }

  .ch-wall__text {
    -webkit-line-clamp: 7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ch-wall__more {
    transition: none;
  }
}

/* ===========================================================================
   3. Platform cards, and the hub's property cards

   The evidence behind a headline figure used to be a bulleted list, which made
   a reader parse "Google - 5.0 from 101 reviews" before they could see the
   shape of it. As cards the score comes first and the platform sits under it,
   so the record reads at a glance and still adds up to the number above.

   --plat is the platform's own brand colour, set per card by the generator and
   used only for a hairline along the top edge. We do not reproduce the
   platforms' logos: the only copies in reach are 28px, and a trademark blown
   up from a thumbnail looks worse than type set properly.
   =========================================================================== */

.ch-plat-block + .ch-plat-block {
  margin-top: 3rem;
}

.ch-plat__headline {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

.ch-plat-grid {
  /* Capped rather than 1fr: with auto-fit the empty tracks collapse and three
     cards stretched to 309px each on a wide screen, which made a two-digit
     score look lost in the middle of a banner. Centred so a row of two or
     three still sits under the headline rather than off to the left. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 14rem));
  justify-content: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.ch-plat {
  margin: 0;
}

.ch-plat__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  height: 100%;
  padding: 1.25rem 1rem;
  border: 1px solid rgba(59, 65, 38, .35);
  /* The brand colour reads as a marker on the card, not as a fill. */
  border-top: 3px solid var(--plat, #3b4126);
  border-radius: var(--radius--16, 1rem);
  background-color: #f1ecdb;
  color: var(--accent, #3b4126);
  text-align: center;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}

.ch-plat__link:hover,
.ch-plat__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 .625rem 1.25rem rgba(16, 19, 7, .12);
}

.ch-plat__score {
  font-family: var(--font-family--heading, Crimsonpro), serif;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
}

/* Two copies of the same five stars, the filled row clipped to the width the
   rating earns, so 4.9 does not draw as five full stars. */
.ch-plat__stars {
  position: relative;
  display: inline-block;
  font-size: 1.125rem;
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
}

.ch-plat__stars-off {
  opacity: .25;
}

.ch-plat__stars-on {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.ch-plat__name {
  margin-top: .375rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.ch-plat__listing {
  font-size: 1rem;
  line-height: 1.35;
  opacity: .7;
}

.ch-plat__count {
  font-size: 1rem;
  opacity: .7;
}

/* --- the hub's two woodlands ------------------------------------------- */

.ch-prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ch-prop {
  margin: 0;
}

.ch-prop__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(59, 65, 38, .35);
  border-radius: var(--radius--16, 1rem);
  background-color: #f1ecdb;
  color: var(--accent, #3b4126);
  text-decoration: none;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}

.ch-prop__link:hover,
.ch-prop__link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 .75rem 1.75rem rgba(16, 19, 7, .16);
}

.ch-prop__shot {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: rgba(59, 65, 38, .08);
}

.ch-prop__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ch-prop__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .375rem;
  padding: 1.25rem;
  text-align: left;
}

.ch-prop__name {
  font-family: var(--font-family--heading, Crimsonpro), serif;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.ch-prop__score {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.ch-prop__meta {
  font-size: 1.125rem;
  line-height: 1.5;
  opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
  .ch-plat__link,
  .ch-prop__link {
    transition: none;
  }

  .ch-plat__link:hover,
  .ch-prop__link:hover {
    transform: none;
  }
}

/* The cross-links under a breakdown ("Cedar Hollow Dorset has its own
   reviews...") sit outside both .ch-prose and .ch-list, the two things the
   page-level styles colour, so nothing claimed them and they rendered in
   default browser blue against the cream. Scoped to exclude the platform
   cards, which are links but carry their own treatment. */
.ch-review-sources a:not(.ch-plat__link):not(.ch-prop__link) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.ch-review-sources a:not(.ch-plat__link):not(.ch-prop__link):hover,
.ch-review-sources a:not(.ch-plat__link):not(.ch-prop__link):focus-visible {
  text-decoration-thickness: 2px;
}


/* ---- The controls over the wall ---------------------------------------
   Two rows: which woodland, and which platform the review was left on.
   The press page has a bar that looks like this; its rules are in
   press.css, which this page does not load, so the shape is repeated here
   rather than dragging a page's worth of rules along for two rows of
   buttons. Restyle one and the other should follow.
   ---------------------------------------------------------------------- */
.ch-wall__filters {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2.5rem;
  text-align: center;
}

.ch-wall__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  margin: 0;
}

/* Naming the group on the page keeps each button to a word, which is what
   makes the row fit a phone, and gives the group its accessible name so
   what is read out and what is seen are the same words. */
.ch-wall__filter-label {
  margin-right: .125rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  opacity: .6;
}

.ch-wall__btn {
  appearance: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  padding: .5rem 1rem;
  font: inherit;
  font-size: .9375rem;
  line-height: 1;
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}

.ch-wall__btn:hover {
  opacity: .85;
}

.ch-wall__btn[aria-pressed="true"] {
  background-color: var(--accent, #3b4126);
  border-color: var(--accent, #3b4126);
  color: var(--brand, #efeed5);
  opacity: 1;
}

.ch-wall__btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* A count beside the word, so a button says how much it would reveal. */
.ch-wall__btn .ch-wall__count {
  margin-left: .375rem;
  font-size: .8125rem;
  opacity: .7;
}

/* A choice that matches nothing says so rather than leaving a gap. */
.ch-wall__empty {
  margin: 0;
  padding: 2rem 0;
  text-align: center;
  opacity: .75;
}

.ch-wall__empty[hidden] {
  display: none;
}

@media screen and (max-width: 479px) {
  /* The label takes a line of its own so the buttons keep the rest of the
     width to wrap into. Stacking the buttons as well would turn two rows
     into seven. */
  .ch-wall__filter-label {
    flex-basis: 100%;
    margin-right: 0;
  }
}


/* ---- The guest album ---------------------------------------------------
   Ten guests who posted a picture of their own stay, laid out as prints
   rather than tiles: a white border, a caption written underneath, and a
   slight tilt taken from each print's place in the row so it is the same
   on every load. Several of the photographs still carry the handle they
   were posted under, which is the credit and is left alone.
   ---------------------------------------------------------------------- */
.ch-album__intro {
  margin: 0 0 2.5rem;
  opacity: .8;
}

.ch-album {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.75rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ch-album__print {
  width: 12rem;
  padding: .625rem .625rem 0;
  background: #fdfdf6;
  border-radius: 2px;
  box-shadow: 0 .5rem 1.25rem rgba(16, 19, 7, .35);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1),
              box-shadow .3s ease;
}

/* The tilt, by position rather than at random, so a print sits the same way
   every time the page is opened. */
.ch-album__print:nth-child(3n+1) { transform: rotate(-1.8deg); }
.ch-album__print:nth-child(3n+2) { transform: rotate(1.2deg); }
.ch-album__print:nth-child(3n+3) { transform: rotate(-.6deg); }

.ch-album__print:hover,
.ch-album__print:focus-within {
  transform: rotate(0) translateY(-4px);
  box-shadow: 0 .875rem 1.75rem rgba(16, 19, 7, .45);
}

.ch-album__print img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #e8e8dc;
}

/* The caption is written on the print, so it takes the colour of ink on
   paper rather than the colour of the band behind it. */
.ch-album__caption {
  display: block;
  padding: .625rem .125rem .75rem;
  color: #3b4126;
  text-align: center;
}

.ch-album__name {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
}

.ch-album__note {
  display: block;
  margin-top: .1875rem;
  font-size: .75rem;
  line-height: 1.25;
  opacity: .65;
}

@media screen and (max-width: 767px) {
  /* Two to a row on a phone, and the prints keep their tilt: it is what
     makes them read as prints rather than thumbnails. */
  .ch-album {
    gap: 1.5rem 1rem;
  }
  .ch-album__print {
    width: calc(50% - 1.5rem);
    max-width: 11rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ch-album__print {
    transition: none;
  }
}


/* ---- The way out ------------------------------------------------------
   Each platform hands over its latest few reviews and holds hundreds, so
   once the wall has nothing left to unfold it offers the platforms rather
   than a button that would do nothing. Only the links matching the current
   choice are shown, which is why each carries the same data-* the cards do.
   ---------------------------------------------------------------------- */
.ch-wall__out {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .5rem .875rem;
  margin: 2rem 0 0;
  text-align: center;
}

.ch-wall__out[hidden] {
  display: none;
}

.ch-wall__out a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.ch-wall__out a[hidden] {
  display: none;
}


/* ---- One choice, over the two halves of the page -----------------------
   Reviews or familiar faces. It sits between the hero and both sections
   rather than inside either, because the reviews arrive from a feed that
   may not arrive at all and the album has to stay reachable when it does
   not. The buttons borrow .ch-wall__btn so the two look like one thing.
   ---------------------------------------------------------------------- */
.ch-show {
  /* One colour, always. The strip is its own band between the hero above
     and whichever panel is below, with the same measure either side of
     the buttons so they sit in the middle of it. */
  background-color: var(--offwhite, #f8f8e8);
  color: var(--accent, #3b4126);
  padding: 2.5rem 1.25rem;
}

/* Under the band the panel brought a second lot of section padding, so the
   first review or print started most of a screen down. The band already
   separates the control from what it controls; the panel only needs enough
   to clear it. */
[data-show-panel] > .padding-section-medium {
  padding-top: 2rem;
}

/* The prints are tilted, so their corners reach higher than the row does
   and they need a little more clearance than a card. */
[data-show-panel="guests"] > .padding-section-medium {
  padding-top: 2.75rem;
}

@media screen and (max-width: 767px) {
  .ch-show {
    padding: 1.75rem 1.25rem;
  }

  [data-show-panel] > .padding-section-medium {
    padding-top: 1.5rem;
  }
}

.ch-show__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .875rem;
  margin: 0;
}

.ch-show__label {
  margin-right: .125rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  opacity: .6;
}

[data-show-panel][hidden] {
  display: none;
}

@media screen and (max-width: 479px) {
  .ch-show__label {
    flex-basis: 100%;
    margin-right: 0;
  }
}


/* ---- A print is a link ------------------------------------------------
   Each guest goes to the page that says who they are. The anchor wraps the
   picture and the caption both, so the whole print is the target rather
   than the name alone, and it carries no underline: the print is the
   affordance, and the lift on hover is already there.
   ---------------------------------------------------------------------- */
.ch-album__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.ch-album__link:focus-visible {
  outline: 2px solid var(--accent, #3b4126);
  outline-offset: 3px;
}