/* ==========================================================================
   AALANKAAR STUDIOS — 09 · REAL HOMES CAPTIONS + CUSTOMER REVIEWS PAGE

   Additive only. Nothing here redefines a rule that 02-base.css or
   06-home.css already owns: the photo row keeps its existing grid, frame
   and hover veil, and this file adds the caption that sits on top of it.
   Every value comes from 01-tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HOVER CAPTION — the text that rises over a photo on pointer-over.
   The frame (.media) is already position:relative, so the caption anchors
   to it without touching the existing rule.
   -------------------------------------------------------------------------- */

.real-homes__caption{
  position:absolute;
  inset:auto 0 0 0;
  z-index:2;
  padding:var(--s-6) var(--s-3) var(--s-3);

  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--fs-xs);
  line-height:1.35;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-ivory);
  text-wrap:balance;

  /* Its own scrim, so the caption stays legible over a pale photo even as
     .media::after lifts on hover. */
  background:linear-gradient(180deg, rgba(23,12,9,0) 0%, rgba(23,12,9,.55) 42%, rgba(23,12,9,.88) 100%);

  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
  pointer-events:none;
}

.real-homes__item:hover .real-homes__caption,
.real-homes__item:focus-within .real-homes__caption{
  opacity:1;
  transform:none;
}

/* A hairline that draws in under the caption, echoing .voices__item::after. */
.real-homes__caption::before{
  content:"";
  position:absolute;
  left:var(--s-3); top:calc(var(--s-6) - var(--s-3));
  width:34px; height:1px;
  background:var(--c-gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--dur-3) var(--ease) .08s;
}
.real-homes__item:hover .real-homes__caption::before,
.real-homes__item:focus-within .real-homes__caption::before{ transform:scaleX(1); }

/* Touch screens have no hover state to reveal it, so the caption rests
   visible — the photos are the point, but the text must not be unreachable. */
@media (hover:none){
  .real-homes__caption{ opacity:1; transform:none; }
  .real-homes__caption::before{ transform:scaleX(1); }
}

@media (prefers-reduced-motion:reduce){
  .real-homes__caption,
  .real-homes__caption::before{ transition:none; }
}

/* --------------------------------------------------------------------------
   VIDEO TILES — a customer clip sits in the same frame as a photo and is
   cropped the same way, so a mixed row still reads as one even grid.
   -------------------------------------------------------------------------- */

.real-homes__video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  background:var(--bg-lift);
}

/* The play mark: a quiet gold triangle that fades out once the clip runs. */
.real-homes__play{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  border:0;
  background:none;
  padding:0;
  pointer-events:none;
  transition:opacity var(--dur-2) var(--ease);
}
.real-homes__play-mark{
  width:44px; height:44px;
  border-radius:var(--radius-pill);
  background:rgba(23,12,9,.42);
  backdrop-filter:blur(2px);
  display:block;
  position:relative;
}
.real-homes__play-mark::after{
  content:"";
  position:absolute;
  top:50%; left:52%;
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent var(--c-gold-soft);
}
.real-homes__item--video:hover .real-homes__play{ opacity:0; }

/* Where the script fell back to native controls there is no hover-to-play,
   so the decorative mark would only sit in the way. */
.real-homes__item--controls .real-homes__play{ display:none; }
.real-homes__item--controls .real-homes__caption{
  /* Keep the caption clear of the control bar. */
  inset:0 0 auto 0;
  padding:var(--s-3) var(--s-3) var(--s-6);
  background:linear-gradient(0deg, rgba(23,12,9,0) 0%, rgba(23,12,9,.55) 42%, rgba(23,12,9,.88) 100%);
  transform:none;
  opacity:1;
}
.real-homes__item--controls .real-homes__caption::before{ top:auto; bottom:calc(var(--s-6) - var(--s-3)); }

/* --------------------------------------------------------------------------
   HOMEPAGE CTA — the link out to the full Customer Reviews page.
   .btn--outline keys its colour off --fg, which is still dark ink inside this
   section (the row never opted into .on-dark), so the button is re-keyed to
   ivory here. The vermilion hover wipe from .btn::before is left alone.
   -------------------------------------------------------------------------- */

.real-homes__cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-3);
  margin-top:var(--s-6);
}

.real-homes__btn{
  --btn-fg:var(--c-ivory);
  border-color:rgba(232,218,180,.42);
}
.real-homes__btn:hover,
.real-homes__btn:focus-visible{
  color:var(--c-ivory);
  border-color:var(--c-vermilion);
}

/* --------------------------------------------------------------------------
   CUSTOMER REVIEWS PAGE
   Reuses .real-homes__grid and the .voices block wholesale so the page reads
   as the same site. Only the things a full page needs — a roomier grid and
   the spacing between the two halves — are set here.
   -------------------------------------------------------------------------- */

/* Four across, so a full page of eight lands as two even rows with no ragged
   gap at the end. The per-page count and this column count are a matched
   pair — change one and the other wants changing too. */
.reviews-gallery .real-homes__grid{
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--s-4);
}
@media (max-width:1024px){
  .reviews-gallery .real-homes__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:640px){
  .reviews-gallery .real-homes__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* The intro line above the grid. */
.reviews-intro{
  max-width:var(--maxw-text);
  margin-bottom:var(--s-6);
  color:var(--fg-muted);
  font-size:var(--fs-sm);
  line-height:var(--lh-loose);
}

/* Editor-authored copy, when the page has any. */
.reviews-content{ margin-bottom:var(--s-6); }

/* The quotes half sits on the maroon ground the homepage uses; give it the
   page's own top rule so the two halves are visibly separate sections. */
.reviews-voices{ margin-top:0; }

/* --------------------------------------------------------------------------
   PAGER — same geometry as the shop's .pagination (44px cells, hairline
   border, tabular numerals) so it reads as the same control, but keyed to
   ivory because this section sits on the dark ground. 07-woocommerce.css,
   where .pagination lives, is not loaded on this template.
   -------------------------------------------------------------------------- */

.reviews-pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  margin-top:var(--s-7);
  padding-top:var(--s-4);
  border-top:1px solid var(--rule-dark);
}

.reviews-pager__count{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:rgba(232,218,180,.52);
  font-variant-numeric:tabular-nums lining-nums;
}

.reviews-pager__links{
  display:flex;
  gap:var(--s-2);
  align-items:center;
  margin-left:auto;
}

.reviews-pager__num,
.reviews-pager__step{
  display:grid;
  place-items:center;
  min-width:44px; height:44px;
  padding:0 var(--s-2);
  border:1px solid var(--rule-dark);
  color:var(--c-ivory);
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums lining-nums;
  text-decoration:none;
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.reviews-pager__num:hover,
.reviews-pager__step:hover{
  background:var(--c-ivory);
  color:var(--c-ink);
  border-color:var(--c-ivory);
}

.reviews-pager__num.is-current{
  background:var(--c-vermilion);
  border-color:var(--c-vermilion);
  color:var(--c-ivory);
  cursor:default;
}

@media (max-width:640px){
  .reviews-pager{ justify-content:center; }
  .reviews-pager__links{ margin-left:0; }
  .reviews-pager__count{ width:100%; text-align:center; }
}

.reviews-empty{
  padding:var(--s-6) 0;
  color:var(--fg-muted);
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--fs-md);
  text-align:center;
}