/* Shalestone community page (/shalestone-las-vegas).
   Brand fonts and color tokens (--lv-*) come from las-vegas.css, which _Layout loads for this page. */

/* Width comes from Bootstrap's .container (same as the nav, max 1320px) */
.community {
    display: grid;
    gap: 0.5rem;
    padding-top: 64px;
    padding-bottom: 0;
    color: var(--lv-green);
    font-family: var(--lv-sans);
}

/* Override the global section/article spacing from shus.css */
.community section {
    padding: 0;
}

.community article {
    padding: 0;
}


/* Hero: eyebrow, headline and intro use the shared .teaser-hero classes (las-vegas.css).
   Only the address / phone line is specific to this page. */

/* Phones: street, city and phone stacked. From 768px: one line, separated by pipes. */
.community-hero__contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin: 2rem 0 0;
    font-size: 1.125rem;
    font-weight: 400;
}

@media (min-width: 768px) {
    .community-hero__contact {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.community .community-hero__contact a {
    color: var(--lv-green);
    font-weight: 400;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

.community .community-hero__contact a:hover {
    color: var(--lv-green-hover);
    text-decoration: none;
}

/* "<street> | Las Vegas, NV 89124". Phones: street and city stacked, no pipe (a pipe left at
   the end of a wrapped line looks broken). From 768px: one line with the pipe. */
.community-hero__address {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

@media (min-width: 768px) {
    .community-hero__address {
        flex-direction: row;
    }
}

/* Pipes (street | city | phone) only show from 768px, when everything shares a line */
.community-hero__divider {
    display: none;
}

@media (min-width: 768px) {
    .community-hero__divider {
        display: inline;
    }
}


/* Feature cards: stacked on small screens, 3 columns on large */

/* Feature cards: the row and the cards use the shared .teaser-cards / .teaser-card classes
   (las-vegas.css) - a swipe carousel on mobile, 3 columns on desktop, same as the teaser */

/* Icons are commented out in Shalestone.cshtml for now; with only a title and a short
   paragraph, a little more vertical padding keeps the cards from looking cramped.
   Remove this if the icons come back. */
.community .teaser-cards .teaser-card {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
}


/* Area: "fitting backdrop" intro + three nearby spots, on white, narrower than the cards */

.community .community-area {
    padding: 4rem 1rem;
    text-align: center;
}

.community .community-area__title {
    font-family: var(--lv-mono);
    font-weight: 600;
    font-size: clamp(1.35rem, 0.9rem + 1.8vw, 1.875rem);
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 auto 0.75rem;
}

.community-area__body {
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.55;
    max-width: 39rem;
    margin: 0 auto 3rem;
}

/* Highlights: stacked and centered on mobile, three left-aligned columns from tablet up */
.community-area__grid {
    display: grid;
    gap: 2.5rem;
    max-width: 54rem;
    margin: 0 auto;
    text-align: center;
}

@media (min-width: 768px) {
    .community-area__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
        text-align: left;
    }
}

.community .community-spot__title {
    font-family: var(--lv-sans);
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 1rem;
}

.community-spot__img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2; /* matches the 1200x800 exports */
    height: auto;
    object-fit: cover;
    border-radius: 14px;
}


/* Floor plans slider. The intro card is the first slide, so the "Find your place" arrow
   scrolls it away along with the plans. Intro and plan cards use the shared .teaser-card
   classes (las-vegas.css) for padding, fonts and colors. */

.community .community-plans {
    position: relative; /* anchors the right-edge shadow */
    min-width: 0; /* grid item: don't grow to fit the slider's full row of cards */
}

/* Inner shadow on the right edge hints that the row scrolls; fades out at the end
   (.is-at-end, set by shalestone.js) */
.community .community-plans::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); /* white reads on both the green and mint cards */
    pointer-events: none;
    transition: opacity 0.2s;
}

.community .community-plans.is-at-end::after {
    opacity: 0;
}

.community .community-plans__scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.community-plans__scroller::-webkit-scrollbar {
    display: none;
}

.community-plans__scroller:focus-visible {
    outline: 2px solid var(--lv-green);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .community .community-plans__scroller {
        grid-auto-columns: 45%;
    }
}

@media (min-width: 992px) {
    .community .community-plans__scroller {
        grid-auto-columns: 28%;
    }
}

/* Intro slide */

.community-plans__intro {
    position: relative;
}

.community .community-plans__title {
    display: grid;
    gap: 1rem;
    margin: 0;
    font-family: var(--lv-mono);
    font-size: clamp(1.35rem, 0.9rem + 1.4vw, 1.75rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lv-mint);
}

/* Label + half-circle arrow. The negative right margin cancels the card's padding, so the
   half circle's flat side sits on the card's right edge (it doesn't cover the next card). */
.community-plans__next {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin: auto -1.75rem auto 0; /* vertically centered in the space below the title */
    padding: 2rem 0 0;
    background: none;
    border: 0;
    color: inherit;
}

.community-plans__next-label {
    font-family: var(--lv-mono);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Left half of a 3.5rem circle; the arrow's point touches the card's right edge */
.community-plans__next-arrow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 3.5rem;
    border-radius: 3.5rem 0 0 3.5rem;
    background: #fff;
    color: var(--lv-green);
}

.community-plans__next-arrow svg {
    flex: 0 0 auto;
    margin-right: -2px; /* the arrow's point sits ~2px in from the svg's right edge */
}

.community-plans__next:focus-visible {
    outline: none;
}

.community-plans__next:focus-visible .community-plans__next-arrow {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Plan cards: alternate dark green / mint, starting with green */

.community .community-plan:nth-of-type(even) {
    background: var(--lv-mint);
    color: var(--lv-green);
}

.community .community-plan:nth-of-type(even) :is(.teaser-card__title, .teaser-card__body) {
    color: var(--lv-green);
}

.community-plan__icon {
    display: block;
    width: 2.25rem;
    height: 2rem;
    margin-bottom: 1.5rem;
}

/* Facts list: same size as the card body text, a touch heavier */
.community-plan__facts {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
}

.community-plan__facts li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.25rem;
}

.community-plan__facts li::before {
    content: "";
    position: absolute;
    left: 0.125rem;
    top: 0.65em;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
}

.community-plan .teaser-card__body strong {
    font-weight: 500;
}