/* Community detail page. Reads as a location dossier: the hero carries the three figures that
   decide an off-plan purchase, drawn from live project data rather than typed in. */

.chero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: min(78svh, 700px);
    padding-block: calc(var(--header-h) + var(--space-6)) var(--space-8);
    overflow: hidden;
}

.chero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--bg);
}

.chero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    filter: saturate(0.8) brightness(0.78);
}

.chero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(11, 10, 8, 0.94) 0%, rgba(11, 10, 8, 0.45) 44%, rgba(11, 10, 8, 0.1) 80%),
        linear-gradient(100deg, rgba(11, 10, 8, 0.72) 0%, rgba(11, 10, 8, 0.2) 52%, rgba(11, 10, 8, 0) 82%);
}

.chero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.chero__title {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: var(--fw-light);
    letter-spacing: -0.04em;
    line-height: 1;
}

.chero__pitch {
    max-width: 44ch;
    font-size: var(--text-md);
    color: var(--fg-muted);
}

.chero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    margin-top: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(217, 177, 98, 0.34);
}

.chero__facts div {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-1);
}

.chero__facts dd {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--accent);
}

.chero__facts dt {
    font-size: var(--text-2xs);
    letter-spacing: 0.04em;
    color: var(--fg-muted);
}

.coverview {
    padding-top: var(--space-8);
}

.coverview__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

.coverview__title {
    margin-top: var(--space-2);
    font-size: var(--text-3xl);
}

.coverview__body {
    margin-top: var(--space-4);
    max-width: 56ch;
    font-size: var(--text-md);
    line-height: 1.75;
    color: var(--fg-muted);
}

.coverview__facts {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.coverview__facts li {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-md);
}

.cothers {
    padding-block: var(--space-8);
}

.cothers__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-7);
}

.cothers__title {
    font-size: var(--text-3xl);
}

.cothers__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cother__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-decoration: none;
    color: inherit;
}

.cother__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    transition: transform var(--dur-slow) var(--ease-out);
}

.cother__link:hover .cother__image {
    transform: scale(1.03);
}

.cother__name {
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
}

.cother__pitch {
    font-size: var(--text-sm);
    color: var(--accent);
}

@media (max-width: 1000px) {
    .coverview__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .cothers__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .cothers__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Communities index. Reuses the detail page hero so both pages open at the same height, then runs
   alternating editorial rows so each masterplan gets room for its amenity lines and figures. */

.clist {
    padding-block: var(--space-8) var(--space-9);
}

.clist__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
    margin: 0;
    padding: 0;
    list-style: none;
}

.clist-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
}

.clist-row:nth-child(even) .clist-row__media {
    order: 2;
}

.clist-row__media {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.clist-row__media img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.clist-row:hover .clist-row__media img {
    transform: scale(1.03);
}

.clist-row__name {
    font-size: clamp(1.85rem, 3.2vw, 2.5rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.clist-row__name a {
    color: inherit;
    text-decoration: none;
}

.clist-row__name a:hover {
    color: var(--accent);
}

.clist-row__pitch {
    margin-top: var(--space-2);
    font-size: var(--text-md);
    color: var(--accent);
}

.clist-row__desc {
    max-width: 56ch;
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.75;
    color: var(--fg-muted);
}

.clist-row__facts {
    display: flex;
    flex-direction: column;
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.clist-row__facts li {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-sm);
}

.clist-row__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-7);
    margin-top: var(--space-5);
}

.clist-row__stats div {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.clist-row__stats dd {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
    color: var(--accent);
}

.clist-row__stats dt {
    font-size: var(--text-2xs);
    color: var(--fg-dim);
}

@media (max-width: 900px) {
    .clist__rows {
        gap: var(--space-8);
    }

    .clist-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .clist-row:nth-child(even) .clist-row__media {
        order: 0;
    }
}

/* Getting around. A divided travel-time strip rather than another fact row, so it does not repeat
   the shape of the hero figures directly above it. */

.creach {
    padding-block: var(--space-8);
}

.creach__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
    gap: var(--space-7) var(--space-8);
    align-items: center;
}

.creach__title {
    margin-top: var(--space-2);
    font-size: var(--text-3xl);
}

.creach__note {
    max-width: 40ch;
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--fg-muted);
}

.creach__times {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.creach__times li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-inline: var(--space-5);
    border-left: 1px solid var(--line-strong);
}

.creach__times li:first-child {
    padding-left: 0;
    border-left: 0;
}

.creach__minutes {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: var(--fw-light);
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--accent);
}

.creach__minutes span {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
}

.creach__to {
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

@media (max-width: 1000px) {
    .creach__inner {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .creach__times {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) 0;
    }

    .creach__times li:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }
}