/* Szekció alapbeállításai */
.xu-section-1 {
    padding: 60px 20px;
    background-color: #fcfbf7; /* Világos, krémszínű háttér a kép szerint */
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #333;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Címek elrendezése */
.header-group {
    text-align: center;
    margin-bottom: 40px;
}

.gold-subtitle {
    color: #d4a017; /* Arany szín */
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.main-title {
    color: #1a1a1a;
    font-size: 36px;
    font-weight: 500;
    margin: 0;
}

/* Kétoszlopos elrendezés */
.content-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap; /* Mobilbarát megjelenéshez */
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.text-column {
    flex: 1;
    min-width: 300px;
}

.text-column p {
    line-height: 1.8;
    font-size: 17px;
    margin-bottom: 20px;
    text-align: justify;
}

/* Kép stílusa */
.image-column {
    flex: 0 0 400px; /* A kép szélessége fixálva */
    display: flex;
    justify-content: center;
}

.image-column img {
    width: 300px;
    height: auto;
}


.image-column-Xu {
    flex: 0 0 300px; /* 1. FELEMELJÜK A KÉP DOBOZÁT IS 500px-re */
    display: flex;
    justify-content: center;
}

.image-column-Xu img {
    width: 100%;     /* 2. SZÁZALÉKRA CSERÉLJÜK: Így a kép tökéletesen kitölti az 500px-es dobozt */
    height: auto;
}



.image-column-hangulat {
    flex: 0 0 400px; /* A kép szélessége fixálva */
    display: flex;
    justify-content: center;
}

.image-column-hangulat img {
    width: 350px;
    height: auto;
}


.hufa-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    border: 8px solid #fcfbf7; /* Keret hatás */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Enyhe árnyék */
    border-radius: 4px;
}

/* Ez az alapértelmezett világos háttér minden szekciónak */
.xu-section-1 {
    background-color: #ffffff; 
}

/* Ez pedig automatikusan átszínezi minden MÁSODIK szekció hátterét egy elegáns, lágy árnyékolásra */
.xu-section-1:nth-of-type(even) {
    background-color: #f9f7f3; /* Egy nagyon kellemes, meleg törtfehér/világos bézs */
}


/* --- ALAPÉRTELMEZETT (ASZTALI) ELRENDEZÉS --- */
.content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Függőlegesen középre zárja a szöveget és a képet */
    gap: 40px;           /* Biztonságos távolság a szöveg és a kép között */
}

.text-column {
    flex: 1;             /* A szöveg kitölti a rendelkezésre álló helyet */
}

.image-column img {
    width: 250px;        /* A kért fix szélesség asztali gépen */
    height: auto;
    display: block;
}

/* --- MOBIL ÉS TABLET NÉZET (768px szélesség alatt) --- */
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column-reverse; /* Megfordítja a sorrendet: felülre kerül a szöveg, alá a kép */
        text-align: center;             /* Mobilra jobban mutat a középre zárt szöveg */
        gap: 20px;                      /* Kisebb rés mobilra */
    }

    .image-column img {
        width: 100%;                    /* Mobil képernyőhöz igazodik */
        max-width: 280px;               /* De nem engedjük, hogy túl nagyra nyúljon */
        margin: 0 auto;                 /* Középre igazítja a képet */
    }

    .image-column {
        flex: 1;
        width: 100%;
        order: -1; /* Mobilon a kép kerülhet felülre */
    }
    .main-title {
        font-size: 28px;
    }

    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* 2. Flexbox oszlopok egymás alá rendezése */
    .content-wrapper {
        display: flex;
        flex-direction: column-reverse; /* Szöveg felül, kép alul */
        gap: 25px;                      /* Egészséges távolság az elemek között */
    }

    /* 3. A szöveg javítása (A legfontosabb rész!) */
    .text-column p {
        text-align: left;         /* Megszünteti a csúnya mobil sorkizárást */
        line-height: 1.6;         /* Jobb olvashatóság */
        font-size: 16px;          /* Optimális mobil betűméret */
        margin-bottom: 15px;      /* Bekezdések közötti szünet */
        word-spacing: normal;     /* Visszaállítja a természetes szótávolságot */
    }

    /* 4. A szekciók címei mobilon */
    .main-title {
        font-size: 24px !important; /* Ne legyen túl nagy a telefonon */
        text-align: center;
        line-height: 1.3;
        margin-top: 10px;
    }

    .gold-subtitle {
        display: block;
        text-align: center;
        font-size: 12px;
        letter-spacing: 2px;
    }

    /* 5. A generált és meglévő képek reszponzív méretezése */
    .image-column img {
        width: 100%;
        max-width: 260px;         /* Kompakt, elegáns méret mobilon */
        height: auto;
        display: block;
        margin: 15px auto 0 auto; /* Középre igazítja a képet és ad neki felső térközt */
        border-radius: 8px;       /* Finom kerekítés, ami jól áll a generált képeknek */
    }

    .main-title, h2 {
        font-size: 24px !important;    /* Kisebb, mobilbarát betűméret */
        line-height: 1.3 !important;   /* Biztosítja, hogy a sorok ne érjenek egymáshoz */
        white-space: normal !important;/* KIKÉNYSZERÍTI, hogy a szöveg új sorba törjön, ha nem fér el */
        word-wrap: break-word !important; /* Biztonsági törés a hosszú szavaknak */
        overflow-wrap: break-word !important;
        text-align: center;            /* Mobilon a középre zárt cím mutat a legjobban */
        padding-left: 10px;            /* Kis belső védőtávolság */
        padding-right: 10px;
    }

    .header-group {
        width: 100%;                   /* A címcsoport tölthesse ki a rendelkezésre álló szélességet */
        box-sizing: border-box;
        text-align: center;
        margin-bottom: 20px;
    }

}