/* wbv-det-cards.css — the .wbv-arc-card chassis, for DETAIL pages only.
 *
 * GENERATED from wbv-archive-v2.min.css. DO NOT HAND-EDIT: edit that
 * sheet, then re-run  tools/wbv-build-critical.py --detail-cards --write
 *
 * Detail pages reuse .wbv-arc-card for the "Similar villas" grid and
 * used to load the whole archive sheet render-blocking to get it.
 * Rules kept here are the ones that match an element on the daily, LT
 * and sale detail pages, in wbv-archive-v2.min.css SOURCE ORDER, so every
 * selector resolves exactly as it did before.
 *
 * Archive pages are deliberately NOT touched: .wbv-arc-card is co-owned
 * by up to four sheets there and re-ordering it caused the August 2026
 * CLS bugs. Do not "tidy" this by moving the rules out of the source.
 */
body.intent-lt .wbv-arc-card { grid-template-columns: 40% 60%; display: grid; align-items: stretch; height: 240px; overflow: hidden; }body.intent-lt .wbv-arc-card .photo-wrap { height: 100%; width: 100%; position: relative; overflow: hidden; }body.intent-lt .wbv-arc-card .photo { position: absolute; inset: 0px; width: 100%; height: 100%; }body.intent-lt .wbv-arc-card .body { display: flex; flex-direction: column; justify-content: space-between; min-width: 0px; padding: var(--sp-5); }body.intent-lt .wbv-arc-card .foot { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--hairline); }@media (max-width: 700px){body.intent-lt .wbv-arc-card { grid-template-columns: 1fr; height: auto; }body.intent-lt .wbv-arc-card .photo-wrap { height: 200px; }}.wbv-arc-card { background: var(--card); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-rest); transition: transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease); cursor: pointer; display: flex; flex-direction: column; }.wbv-arc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }.wbv-arc-card .photo-wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: rgb(200, 184, 160); }.wbv-arc-card .photo { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; background-size: cover; background-position: center center; transition: transform 1.2s var(--ease); }.wbv-arc-card:hover .photo { transform: scale(1.05); }.wbv-arc-card .body { padding: var(--sp-5); }.wbv-arc-card .name { font-size: 18px; font-weight: var(--fw-heavy); color: var(--ink); letter-spacing: var(--ls-tight); margin-bottom: 6px; }.wbv-det-similar-grid .wbv-arc-card .name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: calc(3.9em); }.wbv-arc-card .meta { display: flex; gap: var(--sp-3); font-size: 12px; color: var(--ink-soft); margin-bottom: var(--sp-3); flex-wrap: wrap; align-items: center; }.wbv-arc-card .meta-item { display: inline-flex; align-items: center; gap: 4px; }.wbv-arc-card .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }.wbv-arc-card .price { line-height: 1.15; }body.wbv-v2.intent-rental .wbv-arc-card-name { letter-spacing: var(--ls-tight); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; font-family: var(--font-sans) !important; font-weight: var(--fw-heavy) !important; color: var(--ink) !important; line-height: 1.3 !important; }body.wbv-v2.intent-rental .wbv-arc-card-desc { color: var(--ink-soft) !important; }body.wbv-v2.intent-rental .wbv-arc-card-meta { color: var(--ink-soft) !important; }body.wbv-v2.intent-rental .wbv-arc-card-meta-item svg { color: var(--accent-dark) !important; opacity: 1; }body.wbv-v2.intent-rental { --wbv-arc-pill-mint: #DCEAE2; --wbv-arc-pill-mint-text: #0E4D3F; --wbv-arc-pill-peach: #EFE6D7; --wbv-arc-pill-peach-text: #5C4A2C; --wbv-arc-pill-sky: #E5EAE5; --wbv-arc-pill-sky-text: #2D4943; }body.wbv-v2.intent-rental .wbv-arc-card-arrow { width: 36px !important; height: 36px !important; background: var(--accent-cream) !important; color: var(--accent-dark) !important; border: none !important; }body.wbv-v2.intent-rental .wbv-arc-card-arrow svg { width: 16px !important; height: 16px !important; }body.wbv-v2.intent-rental .wbv-arc-card:hover .wbv-arc-card-arrow { background: var(--accent) !important; color: rgb(255, 255, 255) !important; }body.wbv-v2.intent-rental .wbv-arc-card-price strong { color: var(--ink) !important; }body.wbv-v2.intent-rental { --wbv-cta: var(--accent); --wbv-cta-grad: linear-gradient(180deg,color-mix(in srgb,var(--accent),white 12%) 0%,var(--accent) 100%); --wbv-cta-grad-hover: linear-gradient(180deg,var(--accent) 0%,var(--accent-dark) 100%); --wbv-btn-bg: var(--accent); --wbv-btn-bg-hover: var(--accent-dark); --wbv-btn-grad: linear-gradient(180deg,color-mix(in srgb,var(--accent),white 12%) 0%,var(--accent) 100%); --wbv-btn-grad-hover: linear-gradient(180deg,var(--accent) 0%,var(--accent-dark) 100%); --wbv-arc-btn-bg: var(--accent); --wbv-arc-btn-bg-hover: var(--accent-dark); --wbv-arc-btn-grad: linear-gradient(180deg,color-mix(in srgb,var(--accent),white 12%) 0%,var(--accent) 100%); --wbv-arc-btn-grad-hover: linear-gradient(180deg,var(--accent) 0%,var(--accent-dark) 100%); }.wbv-arc-card { contain: layout style; }.wbv-arc-card .photo { will-change: transform; }.wbv-arc-card-img img { will-change: transform; }