/* Explain: Styles for page layout elements, including hero image and floorplan. */
/* Hero háttérkép – a ház és a gyepes udvar is látszik, a levegős felső rész tömörítve, hogy a szöveg a zöld tető fölé essen */
.hero-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    /* Kevesebb nagyítás, mint eddig, hogy az udvar is bekerüljön a képbe */
    transform: scale(1.4);
    /* A kép alsó részét húzzuk előtérbe, így a ház és a zöld tető feljebb, a gyepes udvar pedig alul jelenik meg */
    transform-origin: 50% 70%;
}

@media (max-width: 767px) {
    .hero-media-img {
        object-position: 50% 50%;
        transform: scale(1.45);
        transform-origin: 50% 70%;
    }
}

/* Alaprajzok egységes, fekvő tájolású kerete – a két alaprajz egyforma méretben és irányban jelenik meg */
.plan-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--background-color);
}

.plan-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Az álló tájolású alaprajzot 90°-kal elforgatjuk, hogy ugyanolyan fekvő legyen, mint a másik */
.plan-img.plan-img-rotated {
    width: 75%;
    height: 133.333%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    transform: rotate(90deg);
}