/* Hallmark · shape: Bento Grid · genre: editorial · theme: Hedgerow (deal 2/3, seed prima-pagina-portal-imobiliare-7171·7db44923·2026-11-07·r0) · job: buy (caută un apartament; vinde, prin agenții) · draw: d7f5e7
 * hero: Stage · nav: slab · footer: letter close · imagery: photographs, library 3, natural · signature: fișa blocului ca bento lângă scara blocului, seara · hedgerow: sloe, DM Serif Display în loc de Prata (Prata nu are ș și ț)
 * axes: dark/high-contrast-serif/chromatic-straw · posture: drenched · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, fișa blocului e spusă în cuvinte; am pus lista reală de apartamente și zone din catalog ca să nu fie doar promisiuni */
@import url("fonts-F7EdOPu.css");
@import url("tokens-HraLedf.css");
@import url("base-Ip4pZ4h.css");

/* Prima pagină. Restul site-ului folosește app.css. */

.home {
    --chrome: 72px;
}

.home:has(.home-demo) {
    --chrome: calc(72px + 2.5rem);
}

.home-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    margin: 0;
    padding: 0 var(--gutter);
    background: var(--color-paper-3);
    color: var(--color-ink);
    font-size: var(--text-sm);
    text-align: center;
}

/* Bara de sus: o placă plină, cu numele și trei destinații. */
.slab {
    background: var(--color-paper-2);
    border-bottom: var(--rule-hair) solid var(--color-rule);
}

.slab__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    min-height: 72px;
}

.wordmark {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1;
    color: var(--color-ink);
    text-decoration: none;
    white-space: nowrap;
}

.slab__nav {
    display: flex;
    gap: var(--space-lg);
}

.slab__nav a {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--color-ink);
    text-decoration-line: underline;
    text-decoration-color: transparent;
    white-space: nowrap;
    transition: text-decoration-color var(--dur-short) var(--ease-out);
}

.slab__nav a:hover {
    text-decoration-color: var(--color-accent);
}

.wordmark:focus-visible,
.slab__nav a:focus-visible,
.text-link:focus-visible,
.index__title a:focus-visible,
.area:focus-visible,
.letter a:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Hero: textul pe stânga, fereastra pe dreapta. */
.hero {
    display: grid;
    align-items: center;
    min-height: calc(100svh - var(--chrome));
    padding-block: var(--space-2xl);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-2xl);
    align-items: center;
}

.hero__text {
    display: grid;
    gap: var(--space-lg);
}

.hero h1 {
    max-width: 14ch;
    line-height: 1.04;
}

.hero .lead {
    max-width: 36ch;
    color: var(--color-ink-2);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-xs);
}

.hero__photo {
    height: clamp(440px, 68svh, 660px);
}

/* Butoanele: o pastilă plină, una conturată. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--space-lg);
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.btn--primary {
    background: var(--color-accent);
    color: var(--color-accent-ink);
}

.btn--primary:hover {
    background: var(--color-accent-2);
    border-color: var(--color-accent-2);
}

.btn--secondary {
    background: transparent;
    color: var(--color-accent);
}

.btn--secondary:hover {
    background: color-mix(in oklab, var(--color-accent) 12%, transparent);
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Fotografiile: pătrate, cu o margine fină. */
.photo {
    margin: 0;
    border-radius: var(--radius-card);
}

.photo > img {
    outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent);
    outline-offset: -1px;
}

/* Fișa blocului, ca bento. */
.sheet {
    padding-block: var(--section-gap-s) var(--section-gap);
}

.sheet h2 {
    margin-bottom: var(--space-2xl);
}

.bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(220px, auto));
    gap: var(--gap-columns);
}

.bento__photo {
    grid-column: 1 / 6;
    grid-row: 1 / 4;
    min-height: 560px;
}

.tile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-xl);
    background: var(--color-paper-2);
    color: var(--color-ink-2);
}

.tile h3 {
    color: var(--color-ink);
    font-size: var(--text-2xl);
}

.tile p {
    max-width: 52ch;
}

.tile--lead {
    grid-column: 6 / 13;
    grid-row: 1;
    border-top: 1.5px solid var(--color-accent);
}

.tile--lead h3 {
    font-size: var(--text-3xl);
}

.tile:nth-of-type(2) {
    grid-column: 6 / 9;
}

.tile:nth-of-type(3) {
    grid-column: 9 / 13;
}

.tile--wide {
    grid-column: 6 / 13;
}

/* Apartamentele de acum, ca listă. */
.latest {
    padding-block: 0 var(--section-gap);
}

.latest__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md) var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.text-link {
    color: var(--color-ink);
    font-weight: 500;
    text-decoration-color: var(--color-accent);
    transition: text-decoration-color var(--dur-short) var(--ease-out);
}

.text-link:hover {
    text-decoration-thickness: 2px;
}

.index {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1.5px solid var(--color-accent);
}

.index__row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    gap: var(--gap-columns);
    align-items: baseline;
    padding-block: var(--space-lg);
    border-bottom: var(--rule-hair) solid var(--color-rule);
}

.index__title {
    font-size: var(--text-2xl);
}

.index__title a {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--dur-short) var(--ease-out);
}

.index__title a:hover {
    text-decoration-color: var(--color-accent);
}

.index__facts {
    color: var(--color-ink-2);
}

.index__demo {
    display: block;
    margin-top: var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.index__price {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-variant-numeric: lining-nums tabular-nums;
    text-align: right;
    color: var(--color-ink);
}

.index__empty {
    padding-block: var(--space-lg);
    color: var(--color-ink-2);
}

/* O propoziție pe banda crem. */
.statement {
    padding-block: var(--section-gap-s);
    background: var(--color-ink);
    color: var(--color-paper);
}

.statement__line {
    max-width: 21ch;
    font-family: var(--font-display);
    font-size: var(--text-display);
    line-height: 1.06;
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
}

/* Vânzătorii: fotografia pe stânga, textul pe dreapta. */
.sell {
    padding-block: var(--section-gap-l) var(--section-gap);
    scroll-margin-top: var(--space-lg);
}

.sell__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-3xl);
    align-items: center;
}

.sell__photo {
    order: -1;
    aspect-ratio: 4 / 3;
    min-height: 440px;
}

.sell__text {
    display: grid;
    gap: var(--space-lg);
    justify-items: start;
}

.sell .lead {
    color: var(--color-ink-2);
}

.facts {
    display: grid;
    margin: 0;
    width: 100%;
}

.facts > div {
    padding-block: var(--space-md);
    border-top: var(--rule-hair) solid var(--color-rule);
}

.facts dt {
    font-weight: 700;
    color: var(--color-ink);
}

.facts dd {
    margin: var(--space-2xs) 0 0;
    color: var(--color-ink-2);
}

/* Zonele. */
.areas {
    padding-block: 0 var(--section-gap-l);
}

.areas__head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--gap-columns);
    align-items: end;
    margin-bottom: var(--space-2xl);
}

.areas__head .lead {
    color: var(--color-ink-2);
}

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

.area {
    display: grid;
    gap: var(--space-xs);
    padding-block: var(--space-lg);
    border-top: var(--rule-hair) solid var(--color-rule);
    text-decoration: none;
    transition: border-color var(--dur-short) var(--ease-out);
}

.area:hover {
    border-top-color: var(--color-accent);
}

.area__name {
    font-family: var(--font-display);
    font-size: var(--text-title);
    line-height: 1.15;
    color: var(--color-ink);
}

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

/* Subsolul, ca încheierea unei scrisori. */
.letter {
    padding-block: var(--section-gap-s);
    background: var(--color-paper-2);
    border-top: var(--rule-hair) solid var(--color-rule);
}

.letter__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--gap-columns) var(--space-3xl);
    align-items: start;
}

.letter__close {
    font-family: var(--font-display);
    font-size: var(--text-section);
    line-height: 1.08;
    color: var(--color-ink);
    max-width: 14ch;
}

.letter__body {
    display: grid;
    gap: var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
}

.letter a {
    text-decoration-color: var(--color-accent);
}

.letter__credits {
    color: var(--color-muted);
}

@media (max-width: 60rem) {
    .hero {
        min-height: 0;
        padding-block: var(--space-xl) var(--space-2xl);
    }

    .hero__grid,
    .sell__grid,
    .areas__head,
    .letter__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }

    .hero__photo {
        height: auto;
        aspect-ratio: 4 / 3;
    }

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

    .bento__photo {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .tile--lead,
    .tile--wide {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .tile:nth-of-type(2),
    .tile:nth-of-type(3) {
        grid-column: auto;
    }

    .sell__photo {
        order: 0;
        min-height: 0;
    }

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

    .index__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .index__facts {
        grid-column: 1;
        grid-row: 2;
    }

    .index__price {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 40rem) {
    .slab__inner {
        flex-wrap: wrap;
        padding-block: var(--space-sm);
        gap: var(--space-xs) var(--space-lg);
    }

    .slab__nav {
        gap: var(--space-md);
    }

    .tile {
        padding: var(--space-lg);
    }

    .tile:nth-of-type(2),
    .tile:nth-of-type(3) {
        grid-column: 1 / -1;
    }

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

    .index__price {
        grid-column: 1;
        grid-row: 3;
        text-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .slab__nav a,
    .text-link,
    .index__title a,
    .area {
        transition: none;
    }

    .btn:active {
        transform: none;
    }
}