/* ===================================================================== HBV FEATURED HOMES CAROUSEL — shared kit module (single source). Pairs with hbv/hbv-featured.js. LOAD ORDER: link this LAST in (after the page body CSS and after hbv-chrome.css / hbv-collection.css / hbv-services.css) so its equal-specificity rules win and it can override the per-page copies that used to drift between pages. What this fixes (global, every page with #featuredCarousel): • No loop — arrows stop at the ends (disabled / hidden), never wrap. • Dividers, "From …" and the CTA line up across every card (fixed loc / name / meta heights + bottom-pinned price + CTA). • Identical left/right gutter on desktop AND mobile, for any card count (4 / 5 / 7). Card edges align to the page content column. • Every card is the same size (equal width + equal height). • Mobile: prev / next arrows overlay the card image (saves space); hidden at the ends because there is no loop. • Whole card is clickable (image, title, CTA) — see hbv-featured.js. Type sizes are intentionally NOT set here so each page keeps its own scale; only layout/alignment properties are declared. ===================================================================== */ /* ---- Section head + desktop arrows -------------------------------- */ /* Desktop only — on mobile the edge-overlay arrows (below) replace these. */ .featured__nav { display: flex; gap: 0.6rem; align-items: center; } @media (max-width: 720px) { .featured__nav { display: none; } } .featured__arrow { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(21, 52, 66, 0.25); background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; transition: background 0.35s var(--ease-out-quart, ease), border-color 0.35s var(--ease-out-quart, ease), color 0.35s var(--ease-out-quart, ease), opacity 0.3s ease; } .featured__arrow:hover:not(:disabled) { background: var(--deep-teal); border-color: var(--deep-teal); color: var(--soft-ivory); } .featured__arrow:disabled { opacity: 0.28; cursor: not-allowed; } .featured__arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; } /* ---- Track -------------------------------------------------------- */ .featured__carousel-wrap { position: relative; width: 100%; overflow: hidden; } .featured__carousel { display: flex; gap: 1.5rem; align-items: stretch; /* equal-height cards */ justify-content: flex-start; /* constant side gutter for any card count */ overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-top: 0.75rem; padding-bottom: 1.5rem; /* Align card edges to the page content column (.wrap: max-width 1440 + gutter) */ padding-left: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))); scroll-padding-left: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))); -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .featured__carousel::-webkit-scrollbar { display: none; } .featured__carousel .home-card { flex: 0 0 calc((100% - 4.5rem) / 4); /* 4 up */ scroll-snap-align: start; min-width: 0; } @media (max-width: 1280px) { .featured__carousel .home-card { flex-basis: calc((100% - 3rem) / 3); } } /* 3 up */ @media (max-width: 1024px) { .featured__carousel .home-card { flex-basis: calc((100% - 1.5rem) / 2); } } /* 2 up */ @media (max-width: 720px) { .featured__carousel { padding-bottom: 1rem; } /* one card fills the content column exactly — same size, no wasted side space */ .featured__carousel .home-card { flex-basis: 100%; } } /* ---- Card shell --------------------------------------------------- */ .home-card { background: var(--soft-ivory); overflow: hidden; display: flex; flex-direction: column; height: 100%; } .home-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .home-card__link:hover { text-decoration: none; } .home-card__media { aspect-ratio: 16 / 11; position: relative; overflow: hidden; background-size: cover; background-position: center; background-color: var(--seafoam); } .home-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .home-card__media-link { display: block; } /* ---- Card body — heights fixed so every horizontal rule lines up --- */ .home-card__body { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; } /* Destination line: single line (e.g. "Kissimmee, FL") */ .home-card__loc { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; color: var(--taupe-deep); letter-spacing: 0.28em; min-height: 0; margin: 0 0 0.5rem; } /* Name: reserve two lines so the divider below sits at the same height */ .home-card__name { text-transform: uppercase; color: var(--ink); margin: 0 0 0.6rem; line-height: 1.2; min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Meta: fixed 3-line block (divider under the name) */ .home-card__meta { color: var(--ink-muted); line-height: 1.45; border-top: 1px solid var(--hairline); padding-top: 0.75rem; margin-top: 0; min-height: calc(3 * 1.45em + 0.75rem); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Price row: bottom-pinned so "From …" aligns across cards */ .home-card__price { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--hairline); } /* CTA: divider above it, aligned across cards */ .home-card__view { text-transform: uppercase; color: var(--deep-teal); margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--hairline); display: inline-flex; align-items: center; gap: 0.5rem; transition: gap 0.3s var(--ease-out-quart, ease); } .home-card:hover .home-card__view { gap: 0.75rem; } /* ---- Mobile edge arrows — solid deep-teal marks centered on the card's left/right edge (not floating over the image) ---------------------- */ .featured__edge { display: none; } @media (max-width: 720px) { .featured__edge { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: var(--featured-edge-top, 32%); transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.9); cursor: pointer; z-index: 6; padding: 0; background: var(--deep-teal); color: var(--soft-ivory); box-shadow: 0 6px 18px -6px rgba(21, 52, 66, 0.7); transition: opacity 0.25s ease, background 0.2s ease, transform 0.15s ease; } .featured__edge:active { transform: translateY(-50%) scale(0.92); } /* center the button on the card's vertical edge */ .featured__edge--prev { left: calc(var(--gutter) - 20px); } .featured__edge--next { right: calc(var(--gutter) - 20px); } .featured__edge:disabled { opacity: 0; pointer-events: none; } /* no loop → hide at ends */ .featured__edge svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; } }