@charset "utf-8";
/* ============================================================
   FILE: /sites/mhl/assets/css/review_card.css
   Review cards and their grid — components/review_card.php
   ------------------------------------------------------------
   Written for the homepage (15 September 2026) and kept in its
   own file so the Stage 2 reviews listing can load it as is.
   Colours route through the --review-* properties on .review-card.

   2.6.0 (DEV_PLAN_Stage3 §4.16, Ben, 22 October 2026): the post
   card's shape and size (blog_listing.css .post-card) — a 16:10
   photo, 14px corners, the soft shadow and no border on every page
   (until 2.6.0 only home and the country pages had them, through
   home.css) — the stay type above the title in the reviews green,
   .btn-txt for the link, and THE BAR in the reviews colour
   (--tone-reviews-bar, header_footer_v2.css), as the post card's.
   The grid takes the post grid's gaps and break points. Previous
   file: "review_card - v2 (pre-2.6.0).css".

   2.6.1: the 'popup' shape, the map's popup (after the 2.5.0
   shapes). Previous file: "review_card - v3 (pre-2.6.1).css".
   ============================================================ */

.review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;   /* the post grid's (blog_listing.css); was 1.25rem */
  margin-top: 1.25rem;
}
@media only screen and (max-width: 1024px) {
  .review-grid { gap: 1.5rem; }
}
@media only screen and (max-width: 640px) {   /* the post grid's break point; was 600px */
  .review-grid { grid-template-columns: 1fr; }
}

.review-card {
  --review-accent: var(--mhl-blue, #1657aa);
  --review-star:   var(--mwd-gold, #d7a93b);
  --review-text:   #5b6270;
  --review-type:   var(--reviews-mid, #14731c);    /* the stay type — 6.0:1 on white */
  --review-radius: 14px;                           /* the post card's; was var(--img-border-radius, 7px) */
  --review-shadow: 0 6px 22px rgba(22, 40, 80, .07);

  display: flex;
  flex-direction: column;
  background: #fff;
  border: 0;   /* was 1px solid #ebe8e1 (--review-border) */
  border-radius: var(--review-radius);
  box-shadow: var(--review-shadow);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.review-card:hover {
  box-shadow: 0 12px 30px rgba(22, 40, 80, .12);
  transform: translateY(-2px);
}

.review-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;   /* the post card's; was 16 / 7 */
  background: #e6e9f0;   /* shows while the image loads; was beige #f2f1ee (2.4.1) */
  overflow: hidden;
}
.review-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.review-card:hover .review-card__image { transform: scale(1.03); }

/* The pill on the photo. Nothing fills it since 2.6.0 — the stay type moved above the title.
   §4.3's Favourite / Sponsored will take it, as Ben's white pills (style 1, 22 October 2026). */
.review-card__badge {
  position: absolute;
  top: .7rem;
  left: .7rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--review-accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.review-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.35rem 1.5rem 1.25rem;   /* the post card's; was 1.1rem 1.25rem 1.25rem */
}
.review-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.review-card__rating,
.review-card__price { margin: 0; }
.review-card__stars { color: #d5d9e0; letter-spacing: .05em; }
.review-card__star.is-on { color: var(--review-star); }
.review-card__score {
  margin-left: .35rem;
  color: #1d2433;
  font-size: .9rem;
  font-weight: 700;
}
/* The price is free text since 2.3.3 ("18 euros with electricity.") — let it wrap, right-aligned. */
.review-card__price { color: var(--review-text); font-size: .8rem; line-height: 1.3; text-align: right; }
.review-card__price strong { color: #1d2433; font-size: 1rem; }

/* The stay type, above the title (2.6.0 — Ben: "B but with a green eyebrow"). */
.review-card__type {
  margin: 0 0 .25rem;
  color: var(--review-type);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.review-card__title {
  margin: 0 0 .3rem;
  font-size: 1.35rem;   /* the post card's; was 1.25rem */
  line-height: 1.3;
}
.review-card__title a       { color: inherit; text-decoration: none; }
.review-card__title a:hover { color: var(--review-accent); }

/* The place, "Frías, Spain". Until 2.6.0 the line also held the stay date, now in the bar. */
.review-card__meta {
  margin: 0 0 .85rem;
  color: var(--review-text);
  font-size: .85rem;   /* was .8rem */
}

.review-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 .9rem;
  padding: 0;
  list-style: none;
}
.review-card__tag {
  padding: .25rem .55rem;
  border-radius: 6px;
  background: #f0f2f6;
  color: #394150;
  font-size: .72rem;
  font-weight: 600;
}
.review-card__tag--no { background: #fbf1dc; color: #8a6417; }

/* "Read the review" is the site's text link, .btn-txt (buttons.css), as "Read the post" — 2.6.0.
   Pushed to the bottom so the links line up across a row of tiles. */
.review-card__action { margin: auto 0 0; }
.review-card__action .btn-txt { font-size: .95rem; }

/* ------------------------------------------------------------
   THE BAR (2.6.0) — as the post card's (blog_listing.css):
     📍 country (a link to its reviews) | the stay date
   The reviews colour left to right from the deep end
   (--tone-reviews-bar, header_footer_v2.css), ALL the text white:
   4.6:1 on the lightest stop. ⚠ Nothing in the link blue or gold
   in here.
------------------------------------------------------------ */
.review-card__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .9rem;
  padding: .6rem 1.1rem;
  background: var(--tone-reviews-bar, var(--reviews-mid, #14731c));
  color: #fff;
  font-size: .82rem;
  line-height: 1.4;
}
.review-card__bar a       { color: inherit; text-decoration: none; }
.review-card__bar a:hover { text-decoration: underline; }
.review-card__bar a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 2px;
}
.review-card__country {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding-right: .9rem;
  border-right: 1px solid rgba(255, 255, 255, .35);
  font-weight: 700;
}
.review-card__country:last-child { padding-right: 0; border-right: 0; }   /* no date, no divider */
.review-card__date { font-weight: 600; }
.review-card__icon { flex: 0 0 auto; width: 15px; height: 15px; }

/* ------------------------------------------------------------
   2.5.0 — two more shapes, for a site review placed in a post
   (components/post_review.php, DEV_PLAN_Stage3 §4.13).
   2.6.0: both are grids, as post_card's 'row', so the bar runs
   across the whole card without a wrapper in the markup.
------------------------------------------------------------ */

/* 'wide' — the post's "Large card": the photo beside the text; stacked on phones. */
.review-card--wide {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
}
.review-card--wide .review-card__media {
  aspect-ratio: auto;
  min-height: 230px;
}
.review-card--wide .review-card__image {
  position: absolute;
  inset: 0;
}
.review-card--wide .review-card__body { padding: 1.25rem 1.4rem 1.3rem; }
.review-card--wide .review-card__bar  { grid-column: 1 / -1; }
@media only screen and (max-width: 600px) {
  .review-card--wide { grid-template-columns: 1fr; }
  .review-card--wide .review-card__media {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

/* 'row' — the post's "Small card": a small photo, the stay type, name, rating and place, and
   the bar. The component leaves out the tags, the price and the badge. */
.review-card--row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
}
.review-card--row .review-card__media {
  aspect-ratio: auto;
  min-height: 110px;
}
.review-card--row .review-card__image {
  position: absolute;
  inset: 0;
}
.review-card--row .review-card__body  { padding: .85rem 1.1rem .95rem; }
.review-card--row .review-card__top   { margin-bottom: .2rem; }
.review-card--row .review-card__type  { margin-bottom: .1rem; font-size: .66rem; }
.review-card--row .review-card__title { font-size: 1.1rem; }
.review-card--row .review-card__meta  { margin-bottom: .45rem; }
.review-card--row .review-card__bar   { grid-column: 1 / -1; padding: .45rem 1rem; font-size: .78rem; }
@media only screen and (max-width: 400px) {
  .review-card--row { grid-template-columns: 96px minmax(0, 1fr); }
}

/* 'popup' — the map's popup (2.6.1, DEV_PLAN_Stage3 §4.2): the tile, smaller, with no facility
   tags (the component leaves them out). It sits inside a popup or a phone sheet, so it neither
   floats nor lifts: no shadow, no hover. Its width is the popup's (map.css). */
.review-card--popup,
.review-card--popup:hover {
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.review-card--popup:hover .review-card__image { transform: none; }
.review-card--popup .review-card__media { aspect-ratio: 16 / 8; }
.review-card--popup .review-card__body  { padding: .9rem 1.1rem 1rem; }
.review-card--popup .review-card__top   { margin-bottom: .3rem; }
.review-card--popup .review-card__title { font-size: 1.12rem; }
.review-card--popup .review-card__meta  { margin-bottom: .6rem; font-size: .8rem; }
.review-card--popup .review-card__action .btn-txt { font-size: .9rem; }
.review-card--popup .review-card__bar   { padding: .5rem 1rem; font-size: .78rem; }

@media (prefers-reduced-motion: reduce) {
  .review-card,
  .review-card__image { transition: none; }
  .review-card:hover,
  .review-card:hover .review-card__image { transform: none; }
}

/* ------------------------------------------------------------
   ⚠ UNUSED SINCE 2.6.0 — review_card.php no longer draws it. Kept
   for Ben to decide; never delete unasked.
     .review-card__link   "Read the review →" — now .btn-txt
------------------------------------------------------------ */
.review-card__link {
  color: var(--review-accent);
  font-weight: 600;
  text-decoration: none;
}
.review-card__link:hover { text-decoration: underline; }