/*
    Public site additions on top of the theme (css/styles.css and css/custom.css are not modified).
    Loaded by Views/Shared/_Layout.cshtml after the theme styles.
*/

/* Listing cards (home page, category and region pages): every photo gets the same 4:3 box and is cropped to
   fill it, so photos of different sizes neither squeeze nor change the card height. */
.homelengo-box .images-style {
    aspect-ratio: 4 / 3;
    background-color: #eef1f3;
}
.homelengo-box .images-style img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* List layout: the photo column keeps the theme's width (it must not shrink for long texts) and a fixed
   minimum height on wide screens ... */
.homelengo-box.list-style-1 .archive-top {
    flex: 0 0 36.5%;
    min-width: 0;
}
.homelengo-box.list-style-1 .images-style {
    aspect-ratio: auto;
    height: 100%;
    min-height: 250px;
}
/* ... and becomes a 4:3 photo above the text on phones (the theme stacks the card there). */
@media only screen and (max-width: 575px) {
    .homelengo-box.list-style-1 .archive-top {
        flex-basis: auto;
    }
    .homelengo-box.list-style-1 .images-style {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }
}

/* Listing description (detail page): one font size and the theme text colour for all text; bold, italic and
   underline are kept. The HTML itself is cleaned by StringHelper.SanitizeContent. */
.property-description {
    font-size: 16px;
    line-height: 1.85;
    color: #5c6368;
    overflow-wrap: anywhere;
}
.property-description * {
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    line-height: inherit;
}
/* The theme resets these, so the formatting the description keeps is set explicitly. */
.property-description strong,
.property-description b { font-weight: 700; }
.property-description em,
.property-description i { font-style: italic; }
.property-description u { text-decoration: underline; }
.property-description p {
    margin: 0 0 14px;
}
.property-description p:last-child {
    margin-bottom: 0;
}
.property-description ul,
.property-description ol {
    margin: 0 0 14px;
    padding-left: 22px;
}
.property-description ul { list-style: disc; }
.property-description ol { list-style: decimal; }
.property-description a {
    color: #1563df;
    text-decoration: underline;
}

/* Placeholder of a missing image (Views/Shared/_ImageFallback): fills its box like the original photo would. */
img[data-img-fallback] {
    object-fit: cover;
    background-color: #eef1f3;
}

/* Grid cards (home page, category and region pages): equal heights in a row.
   The title always takes two lines (longer titles end with "..."), the card fills its column and the
   price row sits at the bottom, so one- and two-line titles or a wrapped meta list do not break the grid.
   The theme gives these cards a 30px bottom margin, which the height calculation leaves free. */
.flat-recommended .row > [class*="col-"] > .homelengo-box:not(.list-style-1) {
    display: flex;
    flex-direction: column;
    height: calc(100% - 30px);
}
.flat-recommended .homelengo-box:not(.list-style-1) .archive-bottom {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.flat-recommended .homelengo-box:not(.list-style-1) .content-top {
    flex: 1 1 auto;
}
.homelengo-box:not(.list-style-1) .content-top h6 {
    line-height: 28px;
    min-height: 56px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Location line on the card photo: one line, cut with "..." when long (the text is upper-cased in the views). */
.homelengo-box .images-group .bottom {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.homelengo-box .images-group .bottom svg {
    vertical-align: -3px;
    margin-right: 4px;
}

/* Listing detail gallery: every slide has the same 3:2 frame and the photo is cropped to fill it. */
.property-gallery .box-img-detail {
    aspect-ratio: 3 / 2;
    height: auto;
    background-color: #eef1f3;
}
.property-gallery .box-img-detail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Home page hero slider (Views/Shared/Components/HomeSlider): the theme's swiper containers have
   overflow: visible, so on phones the off-screen slides widened the page and allowed horizontal scrolling. */
.flat-slider.home-5 {
    overflow: hidden;
}

/* Heading levels for SEO (section titles are h2, card titles h3, prices are not headings) while keeping the
   theme's look: .heading-h2 / .heading-h3 / .heading-h6 copy the theme's h2 / h3 / h6 sizes from styles.css. */
.heading-h3 {
    font-size: 36px;
    line-height: 44px;
}

.heading-h2 {
    font-size: 44px;
    line-height: 62px;
}

.heading-h6 {
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 600;
    color: #161e2d;
}

@media only screen and (max-width: 991px) {
    .heading-h3 {
        font-size: 26px;
        line-height: 34px;
    }

    .heading-h6 {
        font-size: 16px;
        line-height: 23.2px;
    }
}

/* Header hamburger button (Views/Shared/_Header.*): the theme positions .mobile-button absolutely for a different
   header; here it sits in the flex row next to the logo. It is a <button>, so the browser's button look is reset.
   The theme (styles.css) hides it on wide screens and shows it below 991px. */
.main-header .inner-header-right {
    display: flex;
    align-items: center;
}
.main-header .mobile-button {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    border: 0;
    padding: 0;
    flex-shrink: 0;
}

/* Listing map (Views/Property/Category): the filter box overlaps the map's bottom by 48px (theme margin-top: -48px).
   The box is put above the map controls, and the bottom controls (attribution "i") move up by the same 48px so
   they stay visible and clickable. */
.flat-map .wrap-filter-search {
    z-index: 3;
}
.flat-map .maplibregl-ctrl-bottom-right,
.flat-map .maplibregl-ctrl-bottom-left {
    bottom: 48px;
}

/* Listing detail "İletişim" box: space between the agent photo row and the call button. */
.single-property-contact .box-avatar {
    margin-bottom: 24px;
}

/* Home page hero heading (Views/Shared/Components/HomeSlider): css/custom.css fixes .title-large at 64px on every
   screen and the theme's rotating text (js/animation_heading.js, "clip") keeps each phrase on one line, so the
   phrases ran off tablets and phones. Smaller sizes below 992px; on phones the phrases also wrap. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .flat-slider .title-large {
        font-size: 42px;
        line-height: 52px;
    }
}

@media only screen and (max-width: 767px) {
    .flat-slider .title-large {
        font-size: 32px;
        line-height: 40px;
    }
    /* The script animates the wrapper's width to the phrase's width (+10px), so each phrase gets a fixed width
       that fits the container (100vw minus the 15px gutters and those 10px; at most 500px for the 540px container
       at 576-767px); the wrapper never grows past the heading. */
    .flat-slider .title-large .item-text {
        display: block;
        white-space: normal;
        width: min(calc(100vw - 40px), 500px);
    }
    .flat-slider .title-large .cd-words-wrapper {
        max-width: 100%;
    }

    /* FAQ questions (Views/Shared/_Faq). */
    .box-faq .faq-item .faq-header {
        font-size: 16px;
        line-height: 24px;
    }

    /* "Hakkımızda" intro (Views/Page/About). */
    .flat-header-wrapper-about .title {
        font-size: 26px;
        line-height: 36px;
    }
    .flat-header-wrapper-about .desc,
    .flat-header-wrapper-about .desc p {
        font-size: 17px;
        line-height: 28px;
    }
}

/* Home page "Yatırım Alanları" slider (Views/Shared/Components/PropertyLocations): the theme leaves this section
   without side padding on phones and tablets (0px at 768-991px), so the slides touched the screen edges. It gets
   the same 15px gutter as the page container below 992px. */
@media only screen and (max-width: 991px) {
    .section-locations {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}