/* Blog Hero Szekció Alapstílusok */
.blog-hero-section {
    padding: 80px 20px;
    background-color: #f7f9ff; /* vagy a weboldalad lágy törtfehér háttere */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* cseréld a saját betűtípusodra, ha szükséges */
    text-align: center;
}

.blog-hero-section .container {
    max-width: 900px;
    margin: 0 auto;
}

/* Ősi bölcsesség a modern világban alcím */
.blog-hero-section .section-subtitle {
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d4a373; /* Az arany/okker árnyalat a képed alapján */
    font-weight: 600;
    margin-bottom: 15px;
     font-weight: bold;
}

.section-subtitle {
    color: #d4a373; /* Így az összes ilyen osztályú felirat arany lesz az egész oldalon */
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
     font-weight: 700 !important;;
}

/* Mi a Csung Jüan Csikung? / Főcím */
.blog-hero-section .section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 25px;
    line-height: 1.2;
}

/* Dőlt betűs, bevezető rész */
.blog-hero-section .section-lead {
    font-size: 18px;
    font-style: italic;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 40px;
    font-weight: 400;
}

/* Főszöveg bekezdések */
.blog-hero-section .section-content p {
    font-size: 16px;
    color: #333333;
    line-height: 1.7;
    margin-bottom: 20px;
  
}


/* Második szekció alapok */
.blog-concept-section {
    padding: 60px 20px;
    background-color: #faf9f6; /* Egy nagyon lágy, természetes törtfehér a jó olvashatóságért */
    color: #333333;
      text-align: center; 
}


.blog-concept-section .section-subtitle {
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d4a373; /* Az arany/okker árnyalat a képed alapján */
    font-weight: 600;
    margin-bottom: 15px;
     font-weight: bold;
}



.blog-concept-section .container {
    max-width: 900px; /* Kicsit szélesebb, hogy a kép és szöveg kényelmesen elférjen egymás mellett */
    margin: 0 auto;
}

.concept-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 35px;
    text-align: center;
}

/* Rugalmas elrendezés (Flexbox) a szövegnek és a képnek */
.concept-flex-container {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 30px;
}

.concept-text {
    flex: 1.2; /* A szöveg kicsit több helyet kap */
}

.concept-intro {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.concept-text p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* Kép formázása */
.concept-image-wrapper {
    flex: 0.8; /* A kép konténere */
    text-align: center;
}

.concept-diagram {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Lágy árnyék a kép körül */
}

.image-caption {
    display: block;
    font-size: 13px;
    color: #777777;
    font-style: italic;
    margin-top: 10px;
}

/* Kiemelt idézet / Etimológiai blokk */
.etymology-quote {
    background-color: #ffffff;
    border-left: 4px solid #d4a373; /* Az arany szín az oldaladról */
    padding: 20px 25px;
    margin: 40px 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.etymology-quote p {
    font-size: 16px;
    line-height: 1.6;
    color: #444444;
    margin: 0;
}

.sub-concept-title {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin-top: 40px;
    margin-bottom: 15px;
}

/* Az elemek és állatok rácsszerkezete (Grid) */
.elements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

.element-card {
    background: #ffffff;
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.element-card h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #1a1a1a;
    font-weight: 600;
}

.element-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}




/* Yin és Yang vizuális megkülönböztetése a szövegben */
.yin-animal {
    font-weight: bold;
    color: #222222;
}

.yang-animal {
    font-weight: normal;
    color: #666666;
}

.concept-summary {
    font-size: 16px;
    line-height: 1.7;
    margin-top: 30px;
}



/* Tápláló ciklus szekció egyedi stílusai */


@media (max-width: 768px) {
    .nourishing-cycle {
        padding: 40px 15px;
    }
    .nourishing-cycle .element-title {
        font-size: 26px;
    }
}



/* Tápláló ciklus szekció egyedi stílusai */
.nourishing-cycle {
    background-color: #faf8f5; /* Nagyon lágy, neutrális csontfehér háttér */
    padding: 60px 20px;
    color: #333333;
    line-height: 1.8;
}

.nourishing-cycle .container {
    max-width: 900px; /* Megnövelt szélesség a két oszlop miatt */
    margin: 0 auto;
}

.nourishing-cycle .element-header {
    text-align: center;
    margin-bottom: 40px;
}

.nourishing-cycle .element-subtitle {
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    color: #8c7662; /* Finom, semleges föld-barna az alcímhez */
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.nourishing-cycle .element-title {
    font-size: 32px;
    color: #111111;
    font-weight: 600;
    margin: 0;
}

/* Kétoszlopos elrendezés flexbox segítségével */
.nourishing-cycle .cycle-two-columns {
    display: flex;
    gap: 40px;
    align-items: center; /* Függőlegesen középre igazítja a képet és a szöveget */
    margin-bottom: 30px;
}

.nourishing-cycle .cycle-text-column {
    flex: 1.2; /* A szöveges rész kicsit szélesebb lesz */
}

.nourishing-cycle .cycle-image-column {
    flex: 1; /* A kép oszlopa */
}

/* Kép formázása az oszlopban */
.nourishing-cycle .element-image-container {
    max-width: 100%;
    text-align: center;
}

.nourishing-cycle .element-featured-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Szöveges tartalom és listák */
.nourishing-cycle .element-content p {
    font-size: 16px;
    margin-bottom: 25px;
    color: #444444;
}

.nourishing-cycle .cycle-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.nourishing-cycle .cycle-list li {
    font-size: 15px;
    margin-bottom: 18px;
    padding-left: 20px;
    position: relative;
    color: #444444;
}

.nourishing-cycle .cycle-list li:last-child {
    margin-bottom: 0;
}

/* Elegáns egyedi pontok a listához */
.nourishing-cycle .cycle-list li::before {
    content: "•";
    color: #8c7662;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    left: 0;
    top: -2px;
}

.nourishing-cycle .element-subheading {
    font-size: 20px;
    color: #111111;
    font-weight: 600;
    margin-top: 45px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e8e2da;
    padding-bottom: 8px;
}

/* Kiemelt doboz a szervek harmóniájához */
.nourishing-cycle .organ-harmony-box {
    background-color: #f1ede6;
    padding: 22px 25px;
    border-radius: 4px;
    margin: 30px 0;
}

.nourishing-cycle .organ-harmony-box p {
    font-size: 15px;
    margin-bottom: 12px;
    color: #333333;
}

.nourishing-cycle .organ-harmony-box p:last-child {
    margin-bottom: 0;
}

/* Reszponzív nézet: Mobilon egymás alá ugranak az oszlopok */
@media (max-width: 768px) {
    .nourishing-cycle {
        padding: 40px 15px;
    }
    
    .nourishing-cycle .element-title {
        font-size: 26px;
    }

    .nourishing-cycle .cycle-two-columns {
        flex-direction: column; /* Egymás alá rakja az oszlopokat */
        gap: 30px;
    }
    
    .nourishing-cycle .cycle-image-column {
        order: -1; /* Opcionális: mobilon a kép jelenjen meg előbb, utána a lista */
    }
}












/* Minimál, skandináv/keleti letisztultság */
.wood-element {
    background-color: #f7fbf7;
    padding: 60px 20px;
    color: #333333;
    line-height: 1.8;
}

.wood-element .container {
    max-width: 700px; /* Keskenyebb sáv a könyvszerű, kényelmes olvashatóságért */
    margin: 0 auto;
}

/* Finom, diszkrét fejléc */
.wood-element .element-header {
    text-align: center;
    margin-bottom: 40px;
}

.wood-element .element-subtitle {
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    color: #d4a017; 
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.wood-element .element-title {
    font-size: 32px;
    color: #111111;
    font-weight: 600;
    margin: 0;
}

/* Folyószöveg és alcímek */
.wood-element .element-content p {
    font-size: 16px;
    margin-bottom: 25px;
    color: #444444;
}

.wood-element .element-subheading {
    font-size: 20px;
    color: #111111;
    font-weight: 600;
    margin-top: 45px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eaeaea; /* Finom elválasztó vonal a dobozok helyett */
    padding-bottom: 8px;
}

/* Apró megjegyzés a végén */
.wood-element .element-footer-note {
    font-size: 14px;
    color: #777777;
    font-style: italic;
    margin-top: 40px;
}

.element-image-container {
    margin: 0 auto 40px auto;
    text-align: center;
    max-width: 100%;
}

.element-featured-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px; /* Nagyon enyhe kerekítés, ami finomítja a sarkokat */
    display: block;
    margin: 0 auto;
}


/* Tűz elem szekció stílusok */
.fire-element {
    background-color: #fffafa;
    padding: 60px 20px;
    color: #333333;
    line-height: 1.8;
}

.fire-element .container {
    max-width: 700px; /* Megtartva a könyvszerű, kényelmes olvashatóságot */
    margin: 0 auto;
}

/* Finom, diszkrét fejléc */
.fire-element .element-header {
    text-align: center;
    margin-bottom: 40px;
}

.fire-element .element-subtitle {
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    color: #d4a017; 
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.fire-element .element-title {
    font-size: 32px;
    color: #111111;
    font-weight: 600;
    margin: 0;
}

/* Folyószöveg és alcímek */
.fire-element .element-content p {
    font-size: 16px;
    margin-bottom: 25px;
    color: #444444;
}

.fire-element .element-subheading {
    font-size: 20px;
    color: #111111;
    font-weight: 600;
    margin-top: 45px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eaeaea; /* Finom elválasztó vonal */
    padding-bottom: 8px;
}

/* Apró megjegyzés a végén */
.fire-element .element-footer-note {
    font-size: 14px;
    color: #777777;
    font-style: italic;
    margin-top: 40px;
}
/* Föld elem szekció stílusok */
.earth-element {
    background-color: #faf8f3; /* Nagyon lágy, meleg, krémes föld-sárgás fehér */
    padding: 60px 20px;
    color: #333333;
    line-height: 1.8;
}

.earth-element .container {
    max-width: 700px;
    margin: 0 auto;
}

.earth-element .element-header {
    text-align: center;
    margin-bottom: 40px;
}

.earth-element .element-subtitle {
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    color: #c49a45; /* Visszafogott, elegáns okkersárga/arany a Föld elemhez */
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.earth-element .element-title {
    font-size: 32px;
    color: #111111;
    font-weight: 600;
    margin: 0;
}

.earth-element .element-content p {
    font-size: 16px;
    margin-bottom: 25px;
    color: #444444;
}

.earth-element .element-subheading {
    font-size: 20px;
    color: #111111;
    font-weight: 600;
    margin-top: 45px;
    margin-bottom: 15px;
    border-bottom: 1px solid #f3ebd4; /* Halvány okkeres-szürke elválasztó vonal */
    padding-bottom: 8px;
}

.earth-element .element-footer-note {
    font-size: 14px;
    color: #777777;
    font-style: italic;
    margin-top: 40px;
}


/* Fém elem szekció stílusok */
.metal-element {
    background-color: #f5f5f5; /* Nagyon lágy, tiszta, enyhén hűvös szürkés-fehér */
    padding: 60px 20px;
    color: #333333;
    line-height: 1.8;
}

.metal-element .container {
    max-width: 700px;
    margin: 0 auto;
}

.metal-element .element-header {
    text-align: center;
    margin-bottom: 40px;
}

.metal-element .element-subtitle {
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    color: #d4a017; /* Visszafogott, fém-szürke árnyalat a felirathoz */
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.metal-element .element-title {
    font-size: 32px;
    color: #111111;
    font-weight: 600;
    margin: 0;
}

.metal-element .element-content p {
    font-size: 16px;
    margin-bottom: 25px;
    color: #444444;
}

.metal-element .element-subheading {
    font-size: 20px;
    color: #111111;
    font-weight: 600;
    margin-top: 45px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e2e8f0; /* Diszkrét, hűvös szürke elválasztó vonal */
    padding-bottom: 8px;
}

.metal-element .element-footer-note {
    font-size: 14px;
    color: #777777;
    font-style: italic;
    margin-top: 40px;
}


/* Víz elem szekció stílusok */
.water-element {
    background-color: #f4f8fa; /* Nagyon lágy, tiszta, enyhén kékes-fehér háttér */
    padding: 60px 20px;
    color: #333333;
    line-height: 1.8;
}

.water-element .container {
    max-width: 700px;
    margin: 0 auto;
}

.water-element .element-header {
    text-align: center;
    margin-bottom: 40px;
}

.water-element .element-subtitle {
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    color: #d4a017; /* Egy mélyebb, nyugodt tónus (vagy használható egy lágy sötétkék #4b6584) */
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.water-element .element-title {
    font-size: 32px;
    color: #111111;
    font-weight: 600;
    margin: 0;
}

.water-element .element-content p {
    font-size: 16px;
    margin-bottom: 25px;
    color: #444444;
}

.water-element .element-subheading {
    font-size: 20px;
    color: #111111;
    font-weight: 600;
    margin-top: 45px;
    margin-bottom: 15px;
    border-bottom: 1px solid #dee7ec; /* A halvány kékes háttérhez illő finom elválasztó vonal */
    padding-bottom: 8px;
}

.water-element .element-footer-note {
    font-size: 14px;
    color: #777777;
    font-style: italic;
    margin-top: 40px;
}



/* Gátló ciklus szekció egyedi stílusai */
.controlling-cycle {
    background-color: #f8f9fa; /* Nagyon lágy, tiszta szürkés-fehér háttér */
    padding: 60px 20px;
    color: #333333;
    line-height: 1.8;
}

.controlling-cycle .container {
    max-width: 900px;
    margin: 0 auto;
}

.controlling-cycle .element-header {
    text-align: center;
    margin-bottom: 40px;
}

/* Az arany színű alcím pontos beállítása */
.controlling-cycle .section-subtitle {
    color: #c49a45; /* Elegáns arany szín */
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 8px;
}

.controlling-cycle .element-title {
    font-size: 32px;
    color: #111111;
    font-weight: 600;
    margin: 0;
}

/* Kétoszlopos elrendezés flexboxszal */
.controlling-cycle .cycle-two-columns {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 30px;
}

.controlling-cycle .cycle-text-column {
    flex: 1.2;
}

.controlling-cycle .cycle-image-column {
    flex: 1;
}

/* Kép formázása */
.controlling-cycle .element-image-container {
    max-width: 100%;
    text-align: center;
}

.controlling-cycle .element-featured-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Szövegtartalom és listák */
.controlling-cycle .element-content p {
    font-size: 16px;
    margin-bottom: 25px;
    color: #444444;
}

.controlling-cycle .cycle-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.controlling-cycle .cycle-list li {
    font-size: 15px;
    margin-bottom: 18px;
    padding-left: 20px;
    position: relative;
    color: #444444;
}

.controlling-cycle .cycle-list li:last-child {
    margin-bottom: 0;
}

/* Egyedi lista pontok - a szabályozás szimbólumaként kicsit sötétebb tónusban */
.controlling-cycle .cycle-list li::before {
    content: "•";
    color: #c49a45; /* Az arany ponthoz igazítva */
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    left: 0;
    top: -2px;
}

.controlling-cycle .element-subheading {
    font-size: 20px;
    color: #111111;
    font-weight: 600;
    margin-top: 45px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 8px;
}

/* Kiemelt infó doboz */
.controlling-cycle .organ-harmony-box {
    background-color: #f1f3f5; /* Finom szürke kiemelés */
    padding: 22px 25px;
    border-radius: 4px;
    margin: 30px 0;
}

.controlling-cycle .organ-harmony-box p {
    font-size: 15px;
    margin-bottom: 0;
    color: #333333;
}


/* Végső Blog CTA szekció stílusai */
.blog-cta-section {
    background-color: #f8f9fa; /* Illeszkedik az előző szekció hátteréhez */
    padding: 80px 20px;
}

.blog-cta-section .container {
    max-width: 800px;
    margin: 0 auto;
}

/* Elegáns, sötét tónusú CTA doboz */
.blog-cta-section .cta-card {
    background-color: #f5f9fd; /* Mély, prémium sötét háttér */
    padding: 50px 40px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Az arany alcím a CTA-hoz igazítva */
.blog-cta-section .section-subtitle {
    color: #c49a45; /* Az immár jól ismert arany színed */
    display: block;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
}

.blog-cta-section .cta-title {
    color: #ffffff;
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.blog-cta-section .cta-description {
    color: #4b4b4b; /* Finom, jól olvasható szürke szöveg sötét háttéren */
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* Prémium, arany színű CTA Gomb */
.blog-cta-section .cta-button-wrapper {
    display: flex;
    justify-content: center;
}

.blog-cta-section .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #c49a45; /* Arany gombháttér */
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 35px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(196, 154, 69, 0.2);
}

/* Gomb lebegési (hover) effektus */
.blog-cta-section .cta-button:hover {
    background-color: #b38f43; /* Kicsit sötétebb arany érintésre */
    box-shadow: 0 6px 20px rgba(196, 154, 69, 0.3);
    transform: translateY(-2px); /* Enyhén megemelkedik */
}

/* A nyíl ikon mozgása hover esetén */
.blog-cta-section .cta-arrow {
    transition: transform 0.3s ease;
}

.blog-cta-section .cta-button:hover .cta-arrow {
    transform: translateX(4px); /* A nyíl kicsit jobbra mozdul, jelezve az ugrást */
}

/* Reszponzív nézet mobilra */
@media (max-width: 768px) {
    .blog-cta-section {
        padding: 50px 15px;
    }
    
    .blog-cta-section .cta-card {
        padding: 35px 20px;
    }
    
    .blog-cta-section .cta-title {
        font-size: 24px;
    }
    
    .blog-cta-section .cta-description {
        font-size: 15px;
    }
    
    .blog-cta-section .cta-button {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }




.element-section, 
    .element-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Ha van külön container osztályod, annak is adjunk biztonsági margót */
    .container {
        width: 100%;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box; /* Biztosítja, hogy a padding ne tolja szét az oldalt */
    }




}






/* Mobilnézet kezelése */
@media (max-width: 768px) {
    .controlling-cycle {
        padding: 40px 15px;
    }
    
    .controlling-cycle .element-title {
        font-size: 26px;
    }

    .controlling-cycle .cycle-two-columns {
        flex-direction: column;
        gap: 30px;
    }
    
    .controlling-cycle .cycle-image-column {
        order: -1; /* Mobilon a kép felülre ugrik */
    }
}
@media (max-width: 768px) {
    .water-element {
        padding: 40px 15px;
    }
}
@media (max-width: 768px) {
    .metal-element {
        padding: 40px 15px;
    }
}




@media (max-width: 768px) {
    .earth-element {
        padding: 40px 15px;
    }
}
/* Reszponzív finomítás */
@media (max-width: 768px) {
    .fire-element {
        padding: 40px 15px;
    }
    .fire-element .element-title {
        font-size: 26px;
    }
    .fire-element .element-subheading {
        font-size: 18px;
    }
}

/* Reszponzív finomítás */
@media (max-width: 768px) {
    .wood-element {
        padding: 40px 15px;
    }
    .wood-element .element-title {
        font-size: 26px;
    }
    .wood-element .element-subheading {
        font-size: 18px;
    }
}



/* Reszponzív töréspontok mobilra */
@media (max-width: 768px) {
    .blog-hero-section {
        padding: 50px 15px;
    }
    .blog-hero-section .section-title {
        font-size: 32px;
    }
    .blog-hero-section .section-lead {
        font-size: 16px;
    }

    .concept-flex-container {
        flex-direction: column; /* Mobilon egymás alá rakja a szöveget és a képet */
        gap: 25px;
    }
    
    .concept-image-wrapper {
        max-width: 320px; /* Mobilon ne legyen túl nagy a kép */
        margin: 0 auto;
    }

    .elements-grid {
        grid-template-columns: 1fr;
    }
    
    .concept-title {
        font-size: 26px;
    }
}