/*!
 * D'leaps r39 — widget/dleaps-realhomes.css
 *
 * Styling for the "Real homes" gallery. Kept as a stylesheet rather than as
 * inline styles for the reason recorded in NAV_SPEC.md: React rewrites the
 * style prop on every re-render, so anything that must survive hydration has
 * to be a rule keyed on a class or data attribute, not an inline declaration.
 *
 * Tokens are shadcn HSL triplets. hsl(var(--x)) everywhere, never var(--x).
 */

.dlp-rh { margin-top: 2.5rem; }

.dlp-rh-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
}
@media (min-width: 640px) {
  .dlp-rh-grid { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
}
@media (min-width: 1024px) {
  .dlp-rh-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px;
                 grid-auto-flow: dense; }
}

.dlp-rh-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: hsl(var(--line) / .4);
  aspect-ratio: 4 / 3;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 1024px) {
  .dlp-rh-card { aspect-ratio: auto; grid-row: span 1; grid-column: span 1; height: 100%; }
  .dlp-rh-tall { grid-row: span 2; }
  .dlp-rh-wide { grid-column: span 2; }
}

.dlp-rh-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.dlp-rh-card:hover .dlp-rh-img,
.dlp-rh-card:focus-visible .dlp-rh-img { transform: scale(1.055); }

/* The caption sits on a gradient rather than a flat scrim so the top of the
   photograph is never dimmed — the ceiling detail is usually the reason the
   photograph was chosen. */
.dlp-rh-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              hsl(210 24% 8% / .78) 0%,
              hsl(210 24% 8% / .34) 34%,
              hsl(210 24% 8% / 0) 62%);
  opacity: .92;
  transition: opacity .35s ease;
  pointer-events: none;
}
.dlp-rh-card:hover .dlp-rh-veil { opacity: 1; }

.dlp-rh-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding: .95rem 1rem 1rem;
  text-align: left;
  pointer-events: none;
}
.dlp-rh-title {
  font-family: "Poiret One", Lato, sans-serif;
  font-size: 1.15rem;
  line-height: 1.15;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 16px hsl(210 24% 8% / .5);
  transform: translateY(6px);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.dlp-rh-meta {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .3, 1);
}
/* r41. The cards are links to the project pages now, so they need to say so.
   It reads on hover for a pointer and is always present on touch, where
   there is no hover to reveal it. */
.dlp-rh-go {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .3, 1);
}
.dlp-rh-go svg { transition: transform .2s ease; }
.dlp-rh-card:hover .dlp-rh-go svg { transform: translateX(3px); }

.dlp-rh-card:hover .dlp-rh-title,
.dlp-rh-card:focus-visible .dlp-rh-title { transform: none; }
.dlp-rh-card:hover .dlp-rh-go,
.dlp-rh-card:focus-visible .dlp-rh-go { opacity: 1; transform: none; }
.dlp-rh-card:hover .dlp-rh-meta,
.dlp-rh-card:focus-visible .dlp-rh-meta { opacity: 1; transform: none; }

/* Touch has no hover, so the metadata must be visible without one. */
@media (hover: none) {
  .dlp-rh-title { transform: none; }
  .dlp-rh-meta { opacity: 1; transform: none; }
  .dlp-rh-go { opacity: 1; transform: none; }
}

.dlp-rh-count {
  position: absolute;
  top: .7rem; right: .7rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: hsl(210 24% 8% / .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.dlp-rh-card:hover .dlp-rh-count,
.dlp-rh-card:focus-visible .dlp-rh-count { opacity: 1; }

.dlp-rh-card:focus-visible {
  outline: 3px solid hsl(var(--brand-turquoise));
  outline-offset: 3px;
}

.dlp-rh-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  margin-top: 1.4rem;
}
.dlp-rh-note {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: hsl(var(--ink) / .55);
  max-width: 34rem;
}
.dlp-rh-all {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  font-weight: 700;
  color: hsl(var(--brand-turquoise-deep));
  text-decoration: none;
  white-space: nowrap;
}
.dlp-rh-all:hover { color: hsl(var(--brand-magenta)); }
.dlp-rh-all svg { transition: transform .18s ease; }
.dlp-rh-all:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------ lightbox */

.dlp-rh-lb {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dlp-rh-lb[hidden] { display: none; }

.dlp-rh-lb-bg {
  position: absolute;
  inset: 0;
  background: hsl(210 24% 6% / .92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: dlpRhFade .2s ease both;
}
@keyframes dlpRhFade { from { opacity: 0 } to { opacity: 1 } }

.dlp-rh-lb-stage {
  position: relative;
  width: min(1180px, calc(100vw - 2rem));
  height: min(88vh, calc(100vh - 6rem));
  display: flex;
  align-items: center;
  justify-content: center;
}
.dlp-rh-lb-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 30px 90px hsl(210 24% 4% / .6);
  animation: dlpRhPop .26s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes dlpRhPop {
  from { opacity: 0; transform: scale(.975) }
  to   { opacity: 1; transform: none }
}

.dlp-rh-lb-prev,
.dlp-rh-lb-next,
.dlp-rh-lb-x {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.dlp-rh-lb-prev:hover,
.dlp-rh-lb-next:hover,
.dlp-rh-lb-x:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.dlp-rh-lb-prev:focus-visible,
.dlp-rh-lb-next:focus-visible,
.dlp-rh-lb-x:focus-visible { outline: 3px solid hsl(var(--brand-turquoise)); outline-offset: 2px; }
.dlp-rh-lb-prev { left: -10px; }
.dlp-rh-lb-next { right: -10px; }
.dlp-rh-lb-x    { top: -54px; right: -10px; }
@media (max-width: 720px) {
  .dlp-rh-lb-prev { left: 6px; }
  .dlp-rh-lb-next { right: 6px; }
  .dlp-rh-lb-x { top: -50px; right: 4px; }
}

.dlp-rh-lb-bar {
  position: absolute;
  left: 0; right: 0; bottom: -52px;
  display: flex;
  align-items: center;
  gap: .9rem;
  color: rgba(255, 255, 255, .88);
}
.dlp-rh-lb-name {
  font-family: "Poiret One", Lato, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
}
.dlp-rh-lb-pos {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .55);
}
.dlp-rh-lb-cta {
  margin-left: auto;
  padding: .55rem 1.1rem;
  border-radius: 11px;
  background: hsl(var(--brand-magenta));
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.dlp-rh-lb-cta:hover { filter: brightness(1.08); }
@media (max-width: 560px) {
  .dlp-rh-lb-bar { bottom: -60px; flex-wrap: wrap; gap: .5rem; }
  .dlp-rh-lb-cta { margin-left: 0; width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .dlp-rh-img,
  .dlp-rh-title,
  .dlp-rh-meta,
  .dlp-rh-count,
  .dlp-rh-go,
  .dlp-rh-go svg,
  .dlp-rh-all svg { transition: none; }
  .dlp-rh-card:hover .dlp-rh-img { transform: none; }
  .dlp-rh-lb-bg,
  .dlp-rh-lb-img { animation: none; }
}