/*
 * JYA Housing — OviPro property listings
 * OviPro presentation overrides. Template changes apply to OviPro lists site-wide.
 * The listing-page heading rule below is scoped to myytavat-asunnot.
 */

:root {
    --jya-ovipro-cream: #fcf4e2;
    --jya-ovipro-navy: #1c4482;
    --jya-ovipro-blue: #19a3dd;
    --jya-ovipro-border: #dfe4ea;
    --jya-ovipro-text: #202124;
    --jya-ovipro-muted: #626b76;
}

/* The search template adds this heading only on /myytavat-asunnot/. */
.jya-listings-page-title {
    margin: 0 0 1.1rem;
    color: #000;
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.12;
    text-transform: uppercase;
}

/* Listing page heading. */
body.page-myytavat-asunnot .entry-title,
body.page-myytavat-asunnot .wp-block-post-title {
    margin-bottom: 1.25rem;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
    text-transform: uppercase;
}

/* Search form panel — markup is customized by the child-theme template override. */
.gre-search-form.jya-search-form {
    --gre-search-border-color: #cbd5e0;
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none !important;
    margin: 0 auto 2rem;
    padding: 2.4rem clamp(1.25rem, 5vw, 4rem);
    border: 0;
    border-radius: 0;
    background: var(--jya-ovipro-cream);
    color: var(--jya-ovipro-text);
}

.gre-search-form.jya-search-form *,
.pdx_apartment_list * {
    box-sizing: border-box;
}

/* Six primary fields: type, location, price min/max, area min/max. */
.jya-primary-search-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem 0.8rem;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    align-items: start;
}

.jya-primary-search-grid .form-input {
    min-width: 0;
    margin: 0;
}

.gre-search-form.jya-search-form label,
.gre-search-form.jya-search-form legend {
    display: block;
    margin: 0 0 0.35rem;
    padding: 0;
    border: 0;
    color: var(--jya-ovipro-text);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
}

.jya-primary-search-grid .form-input input[type="text"],
.jya-primary-search-grid .form-input input[type="number"],
.jya-primary-search-grid .form-input select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 2.35rem;
    margin: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--jya-ovipro-border);
    border-radius: 0;
    background: #fff;
    color: var(--jya-ovipro-text);
    font-size: 0.82rem;
    line-height: 1.35;
}

.jya-primary-search-grid .select2-container {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

.jya-primary-search-grid .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.35rem;
    border: 1px solid var(--jya-ovipro-border);
    border-radius: 0;
    background: #fff;
}

.jya-primary-search-grid .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0.65rem;
    color: var(--jya-ovipro-text);
    font-size: 0.82rem;
    line-height: 1.35;
}

.jya-primary-search-grid .select2-container--default .select2-selection--single .select2-selection__arrow {
    min-height: 2.2rem;
}

.jya-field-hint {
    display: block;
    margin-top: 0.2rem;
    color: var(--jya-ovipro-muted);
    font-size: 0.68rem;
    line-height: 1.2;
}

/* Preserve OviPro's slider JavaScript hooks while removing the visual sliders. */
.jya-slider-accessory {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 300px !important;
    height: 2px !important;
    margin: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.jya-slider-accessory .gre-range-slider {
    width: 300px !important;
}

.gre-search-form.jya-search-form .jya-search-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.75rem;
    width: 100%;
    max-width: 900px;
    margin: 1.15rem auto 0;
    padding: 0;
    text-align: left;
}

.gre-search-form.jya-search-form .jya-search-actions .gre-search-button {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    min-height: 2.45rem;
    margin: 0;
    padding: 0.65rem 1rem;
    border: 1px solid var(--jya-ovipro-navy) !important;
    border-radius: 0 !important;
    background: var(--jya-ovipro-navy) !important;
    color: #fff !important;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
}

.gre-search-form.jya-search-form .jya-search-count {
    display: none;
}

.gre-search-form.jya-search-form .jya-clear-search-button {
    display: none !important;
    grid-column: 1 / -1;
    justify-self: end;
    min-height: 0;
    margin: 0;
    padding: 0.15rem 0;
    border: 0;
    background: transparent;
    color: var(--jya-ovipro-navy);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.gre-search-form.jya-search-form .jya-search-actions .gre-search-button:hover,
.gre-search-form.jya-search-form .jya-search-actions .gre-search-button:focus-visible {
    border-color: var(--jya-ovipro-blue) !important;
    background: var(--jya-ovipro-blue) !important;
    color: #fff !important;
}

/* Advanced filters: preserve the plugin's show/hide wrapper and use a stable
   three-column grid for each actual filter group. */
.gre-search-form.jya-search-form > .additional-settings {
    width: 100%;
    max-width: 900px;
    margin: 0.5rem auto 0;
}

.gre-search-form.jya-search-form .additional-settings-toggle {
    display: inline-block;
    color: var(--jya-ovipro-navy);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.gre-search-form.jya-search-form .additional-settings-container {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(28, 68, 130, 0.2);
}

.gre-search-form.jya-search-form .jya-advanced-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1.25rem 1.1rem;
    width: 100%;
    min-width: 0;
}

/* OviPro groups some fields in .input-row wrappers and some directly in the
   grid. Flatten only those wrappers; explicitly reset each field's layout so
   theme/plugin flex styles cannot collapse its contents to a narrow column. */
.gre-search-form.jya-search-form .jya-advanced-grid > .input-row {
    display: contents !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gre-search-form.jya-search-form .jya-advanced-grid .form-input {
    display: block !important;
    flex: none !important;
    align-self: stretch;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gre-search-form.jya-search-form .jya-advanced-grid fieldset,
.gre-search-form.jya-search-form .jya-advanced-grid > .input-row > fieldset {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box;
}

.gre-search-form.jya-search-form .jya-advanced-grid legend,
.gre-search-form.jya-search-form .jya-advanced-grid .form-input > label:not(.selectable-label) {
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 0.45rem !important;
    padding: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    line-height: 1.4;
}

.gre-search-form.jya-search-form .jya-advanced-grid input[type="text"],
.gre-search-form.jya-search-form .jya-advanced-grid select {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    min-height: 2.25rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--jya-ovipro-border);
    border-radius: 0;
    background: #fff;
    color: var(--jya-ovipro-text);
    font-size: 0.82rem;
}

.gre-search-form.jya-search-form .jya-advanced-grid .form-input > input[type="text"],
.gre-search-form.jya-search-form .jya-advanced-grid .form-input > select {
    display: block;
    width: 100%;
}

.gre-search-form.jya-search-form .jya-advanced-grid .selectable-label {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0.3rem 0 !important;
    padding: 0 !important;
    gap: 0.45rem !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    line-height: 1.4;
}

.gre-search-form.jya-search-form .jya-advanced-grid .selectable-label input[type="checkbox"],
.gre-search-form.jya-search-form .jya-advanced-grid .selectable-label input[type="radio"] {
    display: inline-block !important;
    flex: 0 0 13px !important;
    width: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    height: 13px !important;
    min-height: 13px !important;
    margin: 0.15rem 0 0 !important;
    padding: 0 !important;
}

/* Numeric ranges remain side by side within each field group. */
.gre-search-form.jya-search-form .jya-advanced-grid .jya-range-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
}

.gre-search-form.jya-search-form .jya-advanced-grid .jya-range-fields--compact {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.gre-search-form.jya-search-form .jya-advanced-grid .jya-range-fields input[type="text"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.gre-search-form.jya-search-form .jya-advanced-grid .jya-range-separator,
.gre-search-form.jya-search-form .jya-advanced-grid .jya-range-unit {
    white-space: nowrap !important;
    word-break: keep-all !important;
    font-size: 0.78rem;
}

.gre-search-form.jya-search-form .jya-advanced-grid .pdx_search_field_remark {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 0.55rem;
    color: var(--jya-ovipro-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

/* Property result grid */
.pdx_apartment_list.real_estate_assignment_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.5rem;
    width: 100%;
    margin: 1.5rem 0 0;
    padding: 0;
}

.pdx_apartment_list .pdx_apartment_link {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--jya-ovipro-border);
    border-radius: 0;
    background: #fff;
    color: var(--jya-ovipro-text);
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.pdx_apartment_list .pdx_apartment_link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1) !important;
}

.pdx_apartment_list .pdx_apartment_link:focus-visible {
    outline: 3px solid var(--jya-ovipro-blue);
    outline-offset: 3px;
}

.pdx_apartment_list .pdx_apartment_link .kohde-div {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.pdx_apartment_list .pdx_apartment_link .kuva-div {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1.55 / 1;
    overflow: hidden;
    background: #f1f3f5;
    line-height: 0;
}

.pdx_apartment_list .pdx_apartment_link .kuva-div img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdx_apartment_list .pdx_apartment_link .tiedot-div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    padding: 1rem 1.1rem 1.25rem;
    overflow: visible;
    border: 0;
    background: #fff;
}

.pdx_apartment_list .pdx_apartment_link .address-div {
    display: block;
    flex: 0 0 auto;
    min-width: 0;
    margin: 0 0 0.7rem;
    padding: 0 0 0.7rem;
    overflow: visible;
    border-bottom: 1px solid var(--jya-ovipro-border);
    color: var(--jya-ovipro-navy);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Card content order: address, price/area row, location/type/year, rooms, CTA. */
.pdx_apartment_list .jya-property-card .tiedot-div {
    min-height: 250px;
}

.pdx_apartment_list .jya-property-card .jya-price-area-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.05rem 0 1.1rem;
    color: var(--jya-ovipro-text);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}

.pdx_apartment_list .jya-property-card .jya-card-price,
.pdx_apartment_list .jya-property-card .jya-card-area {
    min-width: 0;
}

.pdx_apartment_list .jya-property-card .jya-card-area {
    text-align: right;
    white-space: nowrap;
}

.pdx_apartment_list .jya-property-card .jya-property-description,
.pdx_apartment_list .jya-property-card .jya-property-rooms {
    color: var(--jya-ovipro-text);
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.5;
}

.pdx_apartment_list .jya-property-card .jya-property-description {
    margin: 0;
}

.pdx_apartment_list .jya-property-card .jya-property-description .pdx_apartment_construction_year {
    display: inline;
    margin-left: 0.15rem;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.pdx_apartment_list .jya-property-card .jya-property-rooms {
    margin-top: 0.1rem;
}

.pdx_apartment_list .jya-property-card .jya-property-rooms .pdx_apartment_room_types {
    display: inline;
    color: inherit;
    font-size: inherit;
}

.pdx_apartment_list .jya-property-card .jya-property-cta {
    display: inline-block;
    width: fit-content;
    margin-top: auto;
    padding: 0 0 0.25rem;
    border-bottom: 2px solid #111;
    color: #111;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
}

.pdx_apartment_list .jya-property-card:hover .jya-property-cta {
    border-color: var(--jya-ovipro-blue);
    color: var(--jya-ovipro-navy);
}

.pdx_apartment_list .pdx_apartment_link .address-div .pdx_apartment_street_address,
.pdx_apartment_list .pdx_apartment_link .address-div .pdx_apartment_city {
    display: inline;
    flex: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    color: inherit;
    font-weight: inherit;
    text-overflow: clip;
    white-space: normal;
}

.pdx_apartment_list .pdx_apartment_link .type-rooms-div {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0;
    overflow: visible;
    color: var(--jya-ovipro-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.pdx_apartment_list .pdx_apartment_link .type-rooms-div .pdx_apartment_type,
.pdx_apartment_list .pdx_apartment_link .type-rooms-div .pdx_apartment_room_types {
    flex: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.pdx_apartment_list .pdx_apartment_link .pdx_apartment_type {
    color: var(--jya-ovipro-text);
    font-weight: 600;
}

/* Keep related labels/values aligned in two columns. */
.pdx_apartment_list .pdx_apartment_link .koko-vuosi-hinta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.25rem 0.75rem;
    flex: 0 0 auto;
    min-width: 0;
    padding-top: 0.9rem;
}

.pdx_apartment_list .pdx_apartment_link .koko-vuosi-top,
.pdx_apartment_list .pdx_apartment_link .hinta-top {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 0;
    color: var(--jya-ovipro-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
}

.pdx_apartment_list .pdx_apartment_link .koko-vuosi-bottom,
.pdx_apartment_list .pdx_apartment_link .hinta-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    color: var(--jya-ovipro-text);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
}

.pdx_apartment_list .pdx_apartment_link .koko-vuosi-hinta .pdx_apartment_koko,
.pdx_apartment_list .pdx_apartment_link .koko-vuosi-hinta .pdx_apartment_tontin_koko,
.pdx_apartment_list .pdx_apartment_link .koko-vuosi-hinta .pdx_apartment_vuosi,
.pdx_apartment_list .pdx_apartment_link .koko-vuosi-hinta .pdx_apartment_hinta,
.pdx_apartment_list .pdx_apartment_link .koko-vuosi-hinta .pdx_apartment_site_square_meters,
.pdx_apartment_list .pdx_apartment_link .koko-vuosi-hinta .pdx_apartment_square_meters,
.pdx_apartment_list .pdx_apartment_link .koko-vuosi-hinta .pdx_apartment_construction_year,
.pdx_apartment_list .pdx_apartment_link .koko-vuosi-hinta .pdx_apartment_unencumbered_price {
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
}

/* Pagination */
.real_estate_assignment_list_pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.real_estate_assignment_list_pagination > a,
.real_estate_assignment_list_pagination > button {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--jya-ovipro-navy);
    border-radius: 0;
    background: var(--jya-ovipro-navy);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    text-transform: none;
}

.real_estate_assignment_list_pagination > a.gre-pagination-current {
    background: #fff;
    color: var(--jya-ovipro-navy);
}

.real_estate_assignment_list_pagination > a:hover,
.real_estate_assignment_list_pagination > button:hover {
    border-color: var(--jya-ovipro-blue);
    background: var(--jya-ovipro-blue);
    color: #fff;
}

/* Tablet */
@media (max-width: 1024px) {
    .jya-primary-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gre-search-form.jya-search-form .jya-advanced-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pdx_apartment_list.real_estate_assignment_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .gre-search-form.jya-search-form {
        padding: 1.25rem 1.1rem;
    }

    .jya-primary-search-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.8rem;
    }

    .gre-search-form.jya-search-form .jya-advanced-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .gre-search-form.jya-search-form .jya-search-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .pdx_apartment_list.real_estate_assignment_list {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .pdx_apartment_list .pdx_apartment_link .tiedot-div {
        min-height: 225px;
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdx_apartment_list .pdx_apartment_link {
        transition: none;
    }
}