/* ==========================================================================
   Fully Ups · Website demos directory (/demo/)
   Loaded only on demo/index.html. Uses the main site tokens.
   ========================================================================== */

/* Photo frames with a fallback if an image fails */
.ph { position: relative; overflow: hidden; background: #DCD6CA; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph--failed img { opacity: 0; }
.ph--failed::after {
  content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(19, 26, 66, .5);
}
html.js-anim [data-clip] { clip-path: inset(100% 0 0 0); }
.icon { width: 1.15em; height: 1.15em; flex: none; stroke-width: 1.8; }

/* Hero ------------------------------------------------------------------- */
.dhero { padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(4rem, 8vw, 7rem); overflow: hidden; }
.dhero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.dhero__copy { display: grid; gap: 1.6rem; justify-items: start; }
.dhero__kicker { margin: 0; }
.dhero__title { margin: 0; max-width: 12ch; }
.dhero__lead { margin: 0; max-width: 32rem; }
.dhero .btn-row { margin: .4rem 0 0; }
.dhero__trust { margin: .3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9375rem; font-weight: 600; color: var(--charcoal); }

.dhero__art { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.dhero__art figure { margin: 0; display: grid; gap: .6rem; }
.dhero__art .ph { width: 100%; border-radius: 6px; }
.dhero__art figcaption { font-size: .8125rem; font-weight: 600; color: var(--charcoal); }
.dhero__a { grid-column: 3 / -1; grid-row: 1; align-self: start; }
.dhero__a .ph { aspect-ratio: 4 / 5; }
.dhero__b { grid-column: 1 / span 6; grid-row: 1; position: relative; z-index: 2; margin-bottom: -2.5rem; }
.dhero__b .ph { aspect-ratio: 1; outline: 10px solid var(--off); }
.dhero__a figcaption { justify-self: end; }

/* Demo list: three full-width rows ------------------------------------- */
.demos__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: end; margin-bottom: clamp(3rem, 7vw, 5rem); }
.demos__head .h2 { margin-top: .9rem; }
.demos__head .body { margin: 0; }
.demos__list { border-top: 1px solid var(--line); }

.demo-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2.5rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--line); }
.demo-row:nth-child(even) .demo-row__media { order: 2; }
.demo-row__media { display: block; border-radius: 6px; }
.demo-row__img { aspect-ratio: 16 / 11; border-radius: 6px; }
.demo-row__img img { transition: transform .7s var(--ease); }
.demo-row:focus-within .demo-row__img img { transform: scale(1.04); }
@media (hover: hover) and (pointer: fine) { .demo-row:hover .demo-row__img img { transform: scale(1.04); } }

.demo-row__body { display: grid; gap: 1rem; justify-items: start; }
.demo-row__no { display: flex; gap: 1rem; margin: 0; font-size: .875rem; font-weight: 600; color: var(--charcoal); }
.demo-row__no span { font-variant-numeric: tabular-nums; color: var(--navy); }
.demo-row__name { margin: 0; line-height: 1; color: var(--navy); }
.demo-row--hotel .demo-row__name { font-family: "Geist", system-ui, sans-serif; font-weight: 400; font-size: clamp(2.3rem, 4vw, 3.4rem); letter-spacing: -.05em; }
.demo-row--villa .demo-row__name { font-family: "Outfit", system-ui, sans-serif; font-weight: 400; font-size: clamp(2.3rem, 4vw, 3.4rem); letter-spacing: -.045em; }
.demo-row--guesthouse .demo-row__name { font-family: "Satoshi", system-ui, sans-serif; font-weight: 500; font-size: clamp(2.3rem, 4vw, 3.4rem); letter-spacing: -.045em; }
.demo-row__desc { margin: 0; color: var(--charcoal); max-width: 32rem; }
.demo-row__feats { display: grid; width: 100%; padding: 0; margin: .25rem 0 0; list-style: none; border-top: 1px solid var(--line); font-size: .9375rem; }
.demo-row__feats li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.demo-row__style { margin: 0; font-size: .8125rem; color: var(--charcoal); }
.demo-row__cta { margin-top: .5rem; }

.demos__note { max-width: 46rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; font-size: .9375rem; color: var(--charcoal); }

/* What every website includes ------------------------------------------- */
.inc__wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.inc__wrap .h2 { margin: 0; }
.inc__list { display: grid; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }
.inc__list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.inc__no { grid-row: span 2; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--green-ink); padding-top: .2rem; }
.inc__list h3 { margin: 0; font-size: 1.125rem; line-height: 1.3; }
.inc__list p { margin: .35rem 0 0; color: var(--charcoal); font-size: .9375rem; }

/* Closing call to action ------------------------------------------------- */
.demos-cta .btn--light { color: var(--white); border-color: var(--line-inv); }
.demos-cta .btn--light:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1023px) {
  .dhero__grid, .demos__head, .inc__wrap { grid-template-columns: 1fr; }
  .dhero__art { max-width: 38rem; width: 100%; margin-inline: auto; }
  .demo-row { grid-template-columns: 1fr; gap: 1.75rem; }
  .demo-row:nth-child(even) .demo-row__media { order: 0; }
}
@media (max-width: 699px) {
  .dhero { padding-top: calc(var(--nav-h) + 2rem); }
  .dhero__b .ph { outline-width: 6px; }
  .demo-row .btn { width: 100%; }
}