/**
 * Cosamirai Property Main Informations
 * Version with flexible columns via CSS variables
 */

/* ============================================
   CONTAINER
   ============================================ */

.cosamirai-property-main-informations {
    --border-color: #c4b89a;
    --label-color: #8b7355;
    --value-color: #5c4a32;
    --bg-color: transparent;
    
    /* Default column counts (can be overridden via inline style) */
    --header-cols: 3;
    --details-cols: 6;
    --rent-cols: 3;
}

/* ============================================
   TITLE
   ============================================ */

.cosamirai-property-main-informations .property-info__title {
    font-family: "PP Fragment Glare", Georgia, serif;
    font-weight: 300;
    font-size: var(--fs-40, 3rem);
    color: var(--value-color);
    text-align: center;
    margin: 0 0 2rem 0;
}

/* ============================================
   HEADER - Dynamic columns
   ============================================ */

.cosamirai-property-main-informations .property-info__header {
    display: grid;
    grid-template-columns: repeat(var(--header-cols), 1fr);
    margin-bottom: 2rem;
}

.cosamirai-property-main-informations .property-info__header-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 2rem 1rem 0rem;
}

.cosamirai-property-main-informations .property-info__header-item:last-child {
    padding: 1rem 0rem 1rem 0rem;
}

.cosamirai-property-main-informations .property-info__label {
    font-size: var(--fs-14, 0.875rem);
    color: var(--label-color);
    font-weight: 400;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
}

.cosamirai-property-main-informations .property-info__value {
    font-size: var(--fs-20, 1.5rem);
    color: var(--value-color);
    font-weight: 300;
    line-height: 1.3;
}

/* ============================================
   TABLE
   ============================================ */

.cosamirai-property-main-informations .property-info__table {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

/* Row base */
.cosamirai-property-main-informations .property-info__row {
    display: grid;
}

/* Row 1: Details - dynamic columns */
.cosamirai-property-main-informations .property-info__row--details {
    grid-template-columns: repeat(var(--details-cols), 1fr);
}

/* Row 2: Rent - dynamic columns */
.cosamirai-property-main-informations .property-info__row--rent {
    grid-template-columns: repeat(var(--rent-cols), 1fr);
    border-top: 1px solid var(--border-color);
}

/* Cells */
.cosamirai-property-main-informations .property-info__cell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem 1rem;
}

.cosamirai-property-main-informations .property-info__cell:not(:first-child) {
    border-left: 1px solid var(--border-color);
}

.cosamirai-property-main-informations .property-info__cell-label {
    font-size: var(--fs-14, 0.875rem);
    color: var(--label-color);
    font-weight: 400;
}

.cosamirai-property-main-informations .property-info__cell-value {
    font-size: var(--fs-20, 1.5rem);
    color: var(--value-color);
    font-weight: 300;
    font-family: 'PP Fragment Glare';
}

/* ============================================
   RESPONSIVE - Tablet
   ============================================ */

@media (max-width: 1024px) {
    /* Header: max 3 cols on tablet */
    .cosamirai-property-main-informations .property-info__header {
        grid-template-columns: repeat(min(var(--header-cols), 3), 1fr);
    }
    
    /* Details: max 3 cols on tablet */
    .cosamirai-property-main-informations .property-info__row--details {
        grid-template-columns: repeat(min(var(--details-cols), 3), 1fr);
    }
    
    /* Add top border to cells that wrap to new row */
    .cosamirai-property-main-informations .property-info__row--details .property-info__cell:nth-child(n+4) {
        border-top: 1px solid var(--border-color);
    }
    
    .cosamirai-property-main-informations .property-info__row--details .property-info__cell:nth-child(3n+1):not(:first-child) {
        border-left: none;
    }
}

/* ============================================
   RESPONSIVE - Mobile
   ============================================ */

@media (max-width: 768px) {
    .cosamirai-property-main-informations .property-info__title {
        font-size: var(--fs-32, 2rem);
        text-align: left;
        margin-bottom: var(--wp--preset--spacing--small);
    }
    
    /* Header becomes stacked */
    .cosamirai-property-main-informations .property-info__header {
        display: flex;
        flex-direction: column;
        margin-bottom: 1.5rem;
    }
    
    .cosamirai-property-main-informations .property-info__header-item {
        padding: 0.5rem 0;
        border-right: none;
    }

    .cosamirai-property-main-informations .property-info__label {
        margin-bottom: 0;
    }
    
    .cosamirai-property-main-informations .property-info__header-item:first-child {
        border-top: none;
    }
    
    .cosamirai-property-main-informations .property-info__value {
        font-size: var(--fs-20, 1.25rem);
    }
    
    /* Table becomes 2-column rows (label | value) */
    .cosamirai-property-main-informations .property-info__table {
        border: 1px solid var(--border-color);
    }
    
    .cosamirai-property-main-informations .property-info__row--details,
    .cosamirai-property-main-informations .property-info__row--rent {
        display: flex;
        flex-direction: column;
    }
    
    .cosamirai-property-main-informations .property-info__row--rent {
        border-top: none;
    }
    
    .cosamirai-property-main-informations .property-info__cell {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-left: none !important;
    }
    
    .cosamirai-property-main-informations .property-info__cell:not(:first-child) {
        border-top: 1px solid var(--border-color);
    }
    
    .cosamirai-property-main-informations .property-info__row--rent .property-info__cell:first-child {
        border-top: 1px solid var(--border-color);
    }
    
    .cosamirai-property-main-informations .property-info__cell-label {
        font-size: var(--fs-16, 1rem);
    }
    
    .cosamirai-property-main-informations .property-info__cell-value {
        font-size: var(--fs-18, 1.125rem);
        text-align: right;
    }
}