/* Home page sections: city rows, collections, browse tiles, recently viewed, payment band.
   Loaded by the blocks themselves. Uses the --vy-* tokens from vacayum.css. */

.vy-home-sec { padding-bottom: clamp(40px, 5vw, 64px); }

/* ---- Villa rows: exactly four columns on desktop (two rows of four), scaling up to wide screens ---- */
.vy-home-sec .vy-villa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 32px clamp(16px, 1.4vw, 28px); }
.vy-home-sec .vy-villa-grid--4 .vy-villa h3 { font-size: clamp(17px, 1.1vw, 20px); }
@media (max-width: 1100px) {
  .vy-home-sec .vy-villa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 479px) {
  .vy-home-sec .vy-villa-grid--4 { grid-template-columns: 1fr !important; }
}

/* ---- Browse by trip ---- */
.vy-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); }
.vy-tile { position: relative; display: block; isolation: isolate; overflow: hidden; border-radius: var(--vy-radius); color: #fff !important; aspect-ratio: 4 / 3; background: var(--vy-sea); }
.vy-tile__ph { position: absolute; inset: 0; z-index: -2; border-radius: 0; aspect-ratio: auto; }
.vy-tile__ph img { width: 100%; height: 100%; object-fit: cover; }
.vy-tile:hover .vy-tile__ph img { transform: scale(1.05); }
.vy-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 22, 26, .05) 30%, rgba(6, 22, 26, .78)); }
.vy-tile__text { position: absolute; inset: auto 0 0 0; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 1px; align-items: center; padding: 12px 14px; }
.vy-tile__text svg { width: 16px; height: 16px; grid-row: span 2; opacity: .95; }
.vy-tile__text b { font: 600 clamp(14px, 1vw, 16px)/1.2 var(--vy-display); letter-spacing: -.005em; }
.vy-tile__text small { font-size: 12px; line-height: 1.3; opacity: .9; }
.vy-tile:focus-visible { outline-offset: 4px; }
@media (min-width: 1500px) { .vy-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } .vy-tile { aspect-ratio: 3 / 4; } }
@media (max-width: 640px) { .vy-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vy-tile { aspect-ratio: 1 / 1; } .vy-tile__text { padding: 12px 14px; } .vy-tile__text svg { display: none; } .vy-tile__text { display: block; } }

/* ---- Pick up where you left off (hidden until JS finds viewed villas) ---- */
.vy-recent__list { list-style: none; margin: 0; padding: 4px 0 12px; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 23%, 320px); gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.vy-recent__list > li { scroll-snap-align: start; min-width: 0; }
.vy-recent__list .vy-villa h3 { font-size: 17px; }

/* ---- Pay your way ---- */
.vy-pay { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: calc(var(--vy-radius) + 6px); background: var(--vy-accent-soft); }
.vy-pay__intro { display: grid; gap: 16px; justify-items: start; }
.vy-pay__intro h2 { font-size: clamp(28px, 3.2vw, 44px); }
.vy-pay__intro p { color: var(--vy-muted); max-width: 46ch; }
.vy-pay__note { font-size: 14px; }
.vy-pay__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vy-pay__card { background: var(--vy-surface); border-radius: var(--vy-radius); padding: 22px; display: grid; gap: 8px; align-content: start; box-shadow: 0 1px 0 rgba(16, 38, 43, .04); }
.vy-pay__ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--vy-accent-soft); color: var(--vy-accent); }
.vy-pay__ic svg { width: 22px; height: 22px; }
.vy-pay__card h3 { font-size: 19px; }
.vy-pay__card p { color: var(--vy-muted); font-size: 15px; }
@media (max-width: 980px) { .vy-pay { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .vy-pay__cards { grid-template-columns: 1fr; } .vy-pay { padding: 24px 18px; } }
@media (prefers-reduced-motion: reduce) { .vy-tile__ph img { transition: none; } }