/* Leasing Page Specific Styles */

/* Page Hero Section (re-using styles from portfolio.css for consistency) */
.page-hero-section {
    padding-top: var(--spacing-6xl);
    /* pt-32 */
    padding-bottom: var(--spacing-4xl);
    /* pb-16 */
    background-color: var(--color-surface-light);
    border-bottom: 1px solid var(--color-border-light);
}

.page-title {
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--color-dark-charcoal);
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
}

.page-description {
    font-size: 1.0625rem;
    /* 17px */
    color: var(--color-slate-600);
    max-width: 48rem;
    /* max-w-3xl */
    font-weight: 300;
    line-height: 1.6;
    margin-top: var(--spacing-xl);
}

/* Leasing List Section */
.leasing-list-section {
    background-color: var(--color-white);
    padding-top: var(--spacing-xl);
    /* py-12 */
    padding-bottom: var(--spacing-xl);
}

.leasing-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border-light);
    /* Adds top border to first item, then div-y handles rest */
}

.leasing-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    /* items-start */
    padding-top: var(--spacing-2xl);
    /* py-8 */
    padding-bottom: var(--spacing-2xl);
    gap: var(--spacing-lg);
    /* gap-6 */
    border-bottom: 1px solid var(--color-border-light);
}

@media (min-width: 768px) {
    .leasing-item {
        flex-direction: row;
        align-items: center;
        /* md:items-center */
    }
}

.leasing-item-title {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 600;
    /* font-semibold */
    color: var(--color-dark-charcoal);
    margin-bottom: var(--spacing-xs);
}

.leasing-item-details {
    font-size: 0.875rem;
    /* text-[14px] */
    color: var(--color-slate-500);
}

.leasing-item-button {
    font-size: 0.8125rem;
    /* text-[13px] */
    padding-top: 0.5rem;
    /* py-2 */
    padding-bottom: 0.5rem;
}

/* Style for when there are no availabilities */
.no-availabilities-message {
    padding-top: var(--spacing-4xl);
    /* py-12 */
    padding-bottom: var(--spacing-4xl);
    color: var(--color-slate-500);
    font-size: 0.9375rem;
    /* 15px */
    font-weight: 300;
    /* font-light */
}