/*
 * Layout overrides after the September 2026 responsive audit.
 * Loaded last, so it wins over the older stylesheets without touching them.
 * Checked at 1440, 1280, 1024, 768 and 390 px wide.
 */

/* ------------------------------------------------------------------ */
/* 1. One type scale for all section headings                          */
/* ------------------------------------------------------------------ */
.vybavenie-left h2,
.apartments-heading h2,
.info-text h2,
.location-left h2,
.auto-slideshow-title {
    font-size: 52px;
    line-height: 1.1;
    font-weight: 200;
    letter-spacing: 0;
}

@media (max-width: 1199px) {
    .vybavenie-left h2,
    .apartments-heading h2,
    .info-text h2,
    .location-left h2,
    .auto-slideshow-title {
        font-size: 46px;
    }
}

@media (max-width: 991px) {
    .vybavenie-left h2,
    .apartments-heading h2,
    .info-text h2,
    .location-left h2 {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    .vybavenie-left h2,
    .apartments-heading h2,
    .info-text h2,
    .location-left h2 {
        font-size: 34px;
        line-height: 1.15;
    }
}

@media (max-width: 480px) {
    .vybavenie-left h2,
    .apartments-heading h2,
    .info-text h2,
    .location-left h2 {
        font-size: 30px;
    }
}

/* Hero headline: let it wrap naturally on phones instead of forced breaks */
@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 32px;
        line-height: 1.15;
        text-wrap: balance;
    }

    .hero-text h1 br {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* 2. Header logo: the intro animation kept translateX(-50%) on tablets */
/* ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .logo,
    .logo.logo-animation {
        transform: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* 3. Footer: navigation must never run into the centred logo          */
/* ------------------------------------------------------------------ */
@media (max-width: 1200px) {
    .footer-navbar {
        padding: 0 60px;
    }

    .footer-nav-left,
    .footer-nav-right {
        gap: 28px;
    }

    .footer-nav-item {
        letter-spacing: 3px;
    }
}

@media (max-width: 991px) {
    .footer-nav-left,
    .footer-nav-right {
        display: none;
    }

    .footer-navbar {
        justify-content: center;
    }

    .footer-logo {
        position: static;
        transform: none;
        margin: 0 auto;
    }
}

/* ------------------------------------------------------------------ */
/* 4. Grid slider: tiles share edges, nothing floats or gets cut       */
/* ------------------------------------------------------------------ */
@media (min-width: 1201px) {
    .grid-slider-container {
        --tile: 300px;
        height: calc(var(--tile) * 2 + 20px);
    }

    .image-grid {
        grid-template-columns: 1fr var(--tile) 1fr;
        grid-template-rows: repeat(2, var(--tile));
    }

    .grid-item:nth-child(2),
    .grid-item:nth-child(3) {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        align-self: stretch;
        justify-self: stretch;
    }
}

@media (min-width: 1441px) {
    .grid-slider-container {
        --tile: 400px;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .grid-slider-container {
        height: calc(var(--tile, 340px) * 2 + 15px);
    }

    .image-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, var(--tile, 340px));
    }

    .grid-item,
    .grid-item:nth-child(1),
    .grid-item:nth-child(2),
    .grid-item:nth-child(3),
    .grid-item:nth-child(4) {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        align-self: stretch;
        justify-self: stretch;
    }
}

/* ------------------------------------------------------------------ */
/* 5. Apartment table: fits on desktop, becomes cards below 1100 px    */
/* ------------------------------------------------------------------ */
.apartments-table {
    min-width: 0;
}

.apartments-table th,
.apartments-table td {
    padding-left: 12px;
    padding-right: 12px;
}

.apartments-table td {
    font-size: 14px;
}

/* Parking description may wrap instead of widening the whole table */
.apartments-table td:nth-child(10) {
    white-space: normal;
    min-width: 120px;
}

.apartments-table tr.apartment-sold td {
    font-weight: 200;
    color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 1100px) {
    .apartments-table-container {
        overflow-x: visible;
    }

    .apartments-table-wrapper {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    .apartments-table thead {
        display: none;
    }

    .apartments-table,
    .apartments-table tbody {
        display: block;
        width: 100%;
    }

    .apartments-table tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .apartments-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 20px;
        padding: 24px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
    }

    .apartments-table td {
        display: block;
        padding: 0;
        border: 0;
        white-space: normal;
        line-height: 1.35;
        font-size: 15px;
    }

    .apartments-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 300;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
    }

    /* Apartment code works as the card title */
    .apartments-table td:first-child {
        grid-column: 1 / -1;
        font-size: 28px;
        font-weight: 300;
    }

    .apartments-table td:first-child::before,
    .apartments-table td:last-child::before {
        display: none;
    }

    .apartments-table td:last-child {
        grid-column: 1 / -1;
    }

    .apartments-table td:last-child .apartment-cta-btn {
        display: block;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .apartments-table tbody {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ */
/* 6. Financing: image column matches the text column, no side scroll  */
/* ------------------------------------------------------------------ */
.info-section {
    overflow-x: hidden;
}

@media (min-width: 1025px) {
    .info-content {
        align-items: stretch;
    }

    .info-images {
        position: relative;
    }

    .image-slider {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
        gap: 20px;
        height: auto;
    }

    .image-slider img {
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: cover;
    }
}

/* Steps keep the desktop row layout on smaller screens (circle left, text right) */
@media (max-width: 1024px) {
    .finance-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
    }

    .finance-number,
    .finance-percent {
        display: flex !important;
        flex-shrink: 0;
        width: 50px !important;
        height: 50px !important;
        margin: 0 20px 0 0 !important;
    }

    .finance-number,
    .finance-percent {
        font-size: 16px !important;
    }

    .finance-details {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0;
    }

    .finance-details,
    .finance-details h3,
    .finance-details p {
        text-align: left !important;
        padding: 0 !important;
    }

    .info-text {
        width: 100% !important;
        max-width: 720px !important;
    }

    .finance-item::after {
        left: 70px !important;
        right: 0 !important;
        width: auto !important;
        margin: 0 !important;
    }
}

/* ------------------------------------------------------------------ */
/* 7. Gallery: parallax never reveals black bands above or below      */
/* ------------------------------------------------------------------ */
@media (min-width: 769px) {
    .gallery-slide img {
        height: calc(100% + 60px);
        margin-top: -30px;
    }
}

/* ------------------------------------------------------------------ */
/* 8. Location: one alignment on phones                                */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .location-left,
    .location-left .section-label,
    .location-left h2,
    .location-left p {
        text-align: left;
    }
}

/* ------------------------------------------------------------------ */
/* 9. Contact: text block and company details can no longer overlap   */
/* ------------------------------------------------------------------ */
@media (min-width: 769px) {
    .auto-slideshow-section {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 56px;
        height: auto;
        min-height: 100vh;
        padding: 160px var(--gutter) 80px;
        box-sizing: border-box;
    }

    .auto-slideshow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .auto-slideshow-content,
    .contact-columns {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .contact-columns,
    .contact-info-wrapper {
        justify-content: flex-start;
    }

    .contact-info-wrapper {
        gap: 64px;
    }

    .contact-column {
        width: auto;
        margin-right: 0;
    }
}

@media (min-width: 1200px) {
    .auto-slideshow-section {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: 80px;
        padding: 160px max(80px, calc((100% - 1520px) / 2 + 80px)) 96px;
    }

    .contact-columns {
        width: auto;
        justify-content: flex-end;
    }
}

/* ------------------------------------------------------------------ */
/* 10. One side gutter for every section, header and footer            */
/* ------------------------------------------------------------------ */
:root {
    --gutter: 80px;
}

@media (max-width: 1200px) {
    :root {
        --gutter: 60px;
    }
}

@media (max-width: 991px) {
    :root {
        --gutter: 40px;
    }
}

@media (max-width: 480px) {
    :root {
        --gutter: 25px;
    }
}

.container,
.info-section .container {
    width: 100% !important;
    max-width: 1520px !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    box-sizing: border-box;
}

.navbar,
.hero-content,
.location-container,
.footer-navbar,
.apartments-table-wrapper {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
}

.apartments-table-wrapper {
    max-width: 1520px;
    box-sizing: border-box;
}

.gallery-disclaimer {
    left: var(--gutter);
}

@media (max-width: 991px) {
    .logo {
        left: var(--gutter) !important;
        margin-left: 0 !important;
    }

    .hamburger-menu {
        right: var(--gutter) !important;
        margin-right: 0 !important;
    }

    .info-text {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Forced line breaks in headings are desktop typography; phones wrap naturally */
@media (max-width: 480px) {
    .vybavenie-left h2 br,
    .info-text h2 br,
    .location-left h2 br {
        display: none;
    }

    .vybavenie-left h2,
    .info-text h2,
    .location-left h2 {
        text-wrap: balance;
    }
}

/* ------------------------------------------------------------------ */
/* 11. Motion: GSAP owns transform/opacity, CSS must not smear it      */
/* ------------------------------------------------------------------ */
.section-label,
h2,
p,
.grid-item,
.feature-item,
.timeline-item,
.vybavenie-slider-container,
.apartments-table,
.map-container,
.info-section-item,
.gallery-section,
.location-section,
.slide-from-right,
.hero-slide {
    transition: none !important;
}

/* Slider steps glide with one ease-in-out curve */
.vybavenie-slider,
.grid-slider,
.gallery-slider {
    --swiper-wrapper-transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

.grid-slider .swiper-slide,
.gallery-slider .swiper-slide {
    transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1) !important;
}

/* Contact background: same crossfade as the hero */
.auto-slide {
    transition: opacity 1.6s cubic-bezier(0.45, 0, 0.55, 1);
}

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

/* ------------------------------------------------------------------ */
/* 12. Image grid on phones: height follows the mosaic, same gutter    */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .grid-slider-section,
    .grid-slider-container {
        width: 100%;
        max-width: 100%;
    }

    .grid-slider-container,
    .grid-slider .swiper-wrapper {
        height: auto !important;
    }

    .image-grid {
        padding: 0 var(--gutter) !important;
        gap: 10px !important;
    }
}

/* ------------------------------------------------------------------ */
/* 13. Contact section: render on top, all type below it on solid      */
/*     No text over the photograph on any width. The band keeps the    */
/*     mood, the dark block underneath carries the information.        */
/* ------------------------------------------------------------------ */
.auto-slideshow-section {
    --band: 0px;                      /* no render above the footer, the block stands on its own */
    background-color: #070707;
}

.auto-slideshow,
.auto-slideshow-section::before {
    display: none !important;
}

.contact-label {
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    grid-column: 2;
    grid-row: 1;
}

/* icon | caption over value */
.contact-email,
.contact-phone {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 6px;
    align-items: center;
    margin: 0;
}

.contact-email > a,
.contact-phone > a {
    grid-column: 2;
    grid-row: 2;
}

.contact-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 24px;
    height: 24px;
    align-self: center;
    color: rgba(255, 255, 255, 0.5);
}

.contact-icon svg,
.info-icon svg,
.whatsapp-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* fact rows in the developer / seller columns */
.info-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
}

.info-row + .info-row {
    margin-top: 16px;
}

.info-icon {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.4);
}

.whatsapp-icon {
    width: 17px;
    height: 17px;
}

.column-title {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
    margin-bottom: 16px;
}

.column-text {
    font-size: 14px;
    line-height: 1.75;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.78);
    opacity: 1;
}

.column-text a {
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding-bottom: 1px;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.column-text a:hover {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

.whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    margin-top: 26px;
    padding: 11px 22px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: rgba(255, 255, 255, 0.3) !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.whatsapp-link:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #070707 !important;
}

@media (min-width: 769px) {
    .auto-slideshow-section {
        align-items: start;
        row-gap: 0;
        min-height: 0;                    /* no empty half-screen under the block */
        padding-top: calc(var(--band) + 96px);
        padding-bottom: 96px;
    }

    .contact-columns {
        align-items: start;
    }

    .contact-column {
        max-width: 340px;
    }

    .contact-info-wrapper {
        gap: 0;
    }

    .contact-info-wrapper .contact-column + .contact-column {
        margin-left: 64px;
        padding-left: 64px;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }

    .auto-slideshow-title {
        margin-bottom: 44px;
    }

    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 34px;
        margin-top: 0;
    }

    .contact-email a,
    .contact-phone a {
        font-size: 34px;
        line-height: 1.2;
        margin-bottom: 0;
    }
}

@media (min-width: 1200px) {
    .auto-slideshow-section {
        column-gap: 96px;
    }
}

@media (max-width: 768px) {
    .auto-slideshow-section {
        --band: 0px;
        min-height: 0 !important;
        padding: 72px 0 64px !important;
        display: block !important;
    }

    .auto-slideshow-content,
    .contact-columns {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;     /* the desktop rules centred these absolutely */
        width: 100% !important;
        max-width: none !important;
        background: none !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        text-align: left !important;
        margin: 0 !important;
        padding-left: var(--gutter) !important;
        padding-right: var(--gutter) !important;
    }

    .auto-slideshow-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .auto-slideshow-label {
        font-size: 11px !important;
        letter-spacing: 0.2em !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.55) !important;
        margin-bottom: 14px !important;
    }

    .auto-slideshow-title {
        font-size: 30px !important;
        line-height: 1.15 !important;
        margin: 0 0 36px !important;
    }

    .contact-info {
        max-width: none !important;
        gap: 26px !important;
        margin: 0 !important;
    }

    .contact-email,
    .contact-phone {
        text-align: left !important;
        gap: 8px !important;
    }

    .contact-email a,
    .contact-phone a {
        font-size: 21px !important;
        font-weight: 300 !important;
        display: inline-block !important;
    }

    .contact-columns {
        padding-top: 44px !important;
        padding-bottom: 0 !important;
        gap: 0 !important;
    }

    .contact-info-wrapper {
        max-width: none !important;
        gap: 0 !important;
    }

    .contact-column {
        width: 100% !important;
        text-align: left !important;
    }

    .contact-info-wrapper .contact-column + .contact-column {
        margin-top: 32px !important;
        padding-top: 32px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    .column-title {
        font-size: 11px !important;
        font-weight: 400 !important;
        letter-spacing: 0.18em !important;
        color: rgba(255, 255, 255, 0.5) !important;
        margin-bottom: 14px !important;
    }

    .column-text {
        font-size: 14px !important;
        line-height: 1.75 !important;
        font-weight: 300 !important;
        color: rgba(255, 255, 255, 0.78) !important;
    }
}

/* ------------------------------------------------------------------ */
/* 14. Hero on phones: portrait render instead of a tight centre crop  */
/*     The wide render loses three quarters of its width on a phone,   */
/*     so the first slide swaps to a 9:16 version of the same view.    */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .hero-slider .hero-slide:first-child {
        background-image: url('../images/hero-mobil.jpg?v=20260923h') !important;
        background-position: center 50%;
        background-size: cover;
    }
}

/* ------------------------------------------------------------------ */
/* 15. Note under the price table                                      */
/* ------------------------------------------------------------------ */
.apartments-note {
    margin: 28px 0 0;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    max-width: 760px;
}

@media (max-width: 768px) {
    .apartments-note {
        margin-top: 22px;
        padding: 0 var(--gutter);
        font-size: 13px;
    }
}