/* ==========================================================================
   Cards — property card and category tile
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared image behaviour
   -------------------------------------------------------------------------- */

.responsive-image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.responsive-image--empty {
    inline-size: 100%;
    block-size: 100%;
    background-color: var(--color-surface-sunken);
    /* A faint diagonal so an image-less card still reads as a place for one. */
    background-image: linear-gradient(
        135deg,
        transparent 46%,
        var(--color-border) 46%,
        var(--color-border) 47%,
        transparent 47%
    );
}

/* --------------------------------------------------------------------------
   Property grid
   -------------------------------------------------------------------------- */

.property-grid {
    display: grid;
    gap: var(--space-8) var(--space-6);
    grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   Rail

   Below the two-column breakpoint the featured row scrolls sideways instead of
   stacking. Six full-width cards is a long climb past on a phone, and a rail
   keeps the section a fixed height whatever the inventory.

   Pure CSS: the same markup is an ordinary grid from 640px up. Each card is a
   link, so the cards are reachable by tabbing and the browser scrolls them into
   view — the rail needs no keyboard handling of its own.
   -------------------------------------------------------------------------- */

@media (max-width: 39.9375rem) {
    .property-grid--rail {
        display: grid;
        /* The base rule declares one explicit 1fr column. Left in place it
           would swallow the first card at a width of its own while the rest
           took the auto size, so the explicit track is cleared first. */
        grid-template-columns: none;
        grid-auto-flow: column;
        /* A shade under full width, so the next card peeks and the rail
           announces itself as scrollable without an arrow or a hint. */
        grid-auto-columns: 82%;
        gap: var(--space-5);

        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;

        /* The rail bleeds to both screen edges while its cards stay aligned
           with the container's text above them. */
        margin-inline: calc(var(--container-gutter) * -1);
        padding-inline: var(--container-gutter);
        scroll-padding-inline: var(--container-gutter);

        /* overflow-x also clips vertically; this is the room a card's hover
           lift and shadow need. */
        padding-block: var(--space-2);

        /* Momentum scrolling without a visible bar: the peeking card is the
           affordance, and a scrollbar here would sit over the photography. */
        scrollbar-width: none;
    }

    .property-grid--rail::-webkit-scrollbar {
        display: none;
    }

    .property-grid--rail > * {
        scroll-snap-align: start;
    }
}

@media (min-width: 640px) {
    .property-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-10) var(--space-6);
    }
}

@media (min-width: 1024px) {
    .property-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-12) var(--space-8);
    }
}

/* --------------------------------------------------------------------------
   Property card
   -------------------------------------------------------------------------- */

.property-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.property-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--aspect-card);
    background-color: var(--color-surface-sunken);
    border-radius: var(--radius-md);
}

.property-card__media .responsive-image {
    transition: transform var(--duration-slow) var(--ease-out);
}

/* The photograph moves, nothing else. No lift, no shadow, no border. */
@media (hover: hover) {
    .property-card__link:hover .responsive-image {
        transform: scale(1.04);
    }
}

.property-card__body {
    padding-block-start: var(--space-5);
}

.property-card__kicker {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
}

.property-card__title {
    margin-block-start: var(--space-3);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-snug);
    /* Long titles must not push cards to different heights in a grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.property-card__link:hover .property-card__title {
    color: var(--color-accent-text);
}

.property-card__location {
    margin-block-start: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.property-card__price {
    margin-block-start: var(--space-4);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.property-card__currency,
.property-card__period {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-wide);
}

.property-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-subtle);
    list-style: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   Category tile
   -------------------------------------------------------------------------- */

.category-tile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-block-end: var(--border-subtle);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: border-color var(--transition-fast), padding-inline-start var(--transition-base);
}

@media (hover: hover) {
    .category-tile:hover {
        border-block-end-color: var(--color-accent);
        /* A small indent instead of a colour wash — quieter, more editorial. */
        padding-inline-start: var(--space-3);
    }
}

.category-tile__name {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    line-height: 1.1;
}

.category-tile:hover .category-tile__name {
    color: var(--color-accent-text);
}

.category-tile__count {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Price
   One presentation of money for the whole site.
   -------------------------------------------------------------------------- */

.price-tag {
    margin-block-start: var(--space-4);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.price-tag--lg {
    margin-block-start: var(--space-5);
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-tight);
}

.price-tag__currency,
.price-tag__period {
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-wide);
}

.price-tag--lg .price-tag__currency,
.price-tag--lg .price-tag__period {
    font-size: var(--font-size-sm);
}

.price-tag__on-request {
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
}

.price-tag--lg .price-tag__on-request {
    font-size: var(--font-size-xl);
}

/* --------------------------------------------------------------------------
   Development card
   Wider and quieter than a property card: a project, not a listing.
   -------------------------------------------------------------------------- */

.development-grid {
    display: grid;
    gap: var(--space-10) var(--space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .development-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.development-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.development-card__media {
    overflow: hidden;
    aspect-ratio: var(--aspect-editorial);
    background-color: var(--color-surface-sunken);
    border-radius: var(--radius-md);
}

.development-card__media .responsive-image {
    transition: transform var(--duration-slow) var(--ease-out);
}

@media (hover: hover) {
    .development-card__link:hover .responsive-image {
        transform: scale(1.03);
    }
}

.development-card__body {
    padding-block-start: var(--space-5);
}

.development-card__kicker {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
}

.development-card__title {
    margin-block-start: var(--space-3);
    font-size: var(--font-size-2xl);
}

.development-card__link:hover .development-card__title {
    color: var(--color-accent-text);
}

.development-card__location {
    margin-block-start: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.development-card__lead {
    max-inline-size: 46ch;
    margin-block-start: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}