/* ==========================================================================
   BELSŐ ALKÍMIA CIKK - EGYEDI STÍLUSOK
   ========================================================================== */

/* A cikk fő konténere */
.qigong-article {
  max-width: 950px; /* <--- ITT állítsd be a neked tetsző teljes lapszélességet */
  margin: 0 auto; /* Ez húzza középre a teljes cikket az oldalon */
  padding: 60px 20px;
  font-family: 'Montserrat', sans-serif;
  color: #333333;
  background-color: #ffffff;
}

.qigong-article article {
  display: block;
}

/* Főcím feletti arany felcím és a Főcím */
.article-subtitle {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: #d4a017; /* Elegáns arany szín */
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-align: center;
}

.article-title {
  font-size: 2.6rem;
  font-weight: 700;
  color: #111111;
  line-height: 1.25;
  margin: 0 0 40px 0;
}

/* --- Szekciók általános formázása --- */
.article-section {
  margin-bottom: 50px;
}

.article-section-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #111111;
  margin-top: 0;
  margin-bottom: 25px;
  line-height: 1.3;
}

/* --- KÉP A CÍM ALATT, BALRA SZÖVEG, JOBBRA KÉP ELRENDEZÉS --- */
.section-content-layout {
  display: grid;
  /* Fix 320px helyett az oszlop igazodjon a tartalomhoz (max 150px), vagy legyen max 150px */
  grid-template-columns: 1fr 150px; 
  gap: 70px; 
  align-items: center;
}

/* Szövegtörzs bekezdések */
.section-text p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #444444;
  margin-top: 0;
  margin-bottom: 20px;
  text-align: justify;
}

.section-text p strong {
  color: #111111;
}

/* --- Képek és képaláírások kezelése --- */
.article-image-wrapper {
  width: 100%;
  max-width: 150px; /* Itt módosíthatod az asztali képméretet */
  text-align: center;
}

.article-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.image-caption {
  font-size: 0.85rem;
  color: #7f8c8d;
  font-style: italic;
  margin-top: 12px;
  line-height: 1.4;
  padding: 0 5px;
}

/* --- Jogi nyilatkozat --- */
.article-disclaimer-wrapper {
  width: 100%;
  margin-top: 60px;
  border-top: 1px solid #e9e2d5;
  padding-top: 25px;
}

.article-disclaimer p {
  font-size: 0.85rem;
  color: #7f8c8d;
  font-style: italic;
  line-height: 1.6;
  text-align: justify;
  margin: 0;
}


.article-lead {
  max-width: 800px;
  margin: 0 auto 40px auto; /* Alul hagyunk 40px helyet a következő alcím előtt */
  text-align: center; /* Ha a címek középen vannak, ez is mutasson jól középre zárva */
}

.article-lead p {
  font-size: 1.2rem; /* Kicsit nagyobb, mint a sima szöveg */
  line-height: 1.4;
  color: #555555; /* Lágyabb szürke, hogy elegánsabb legyen */
  font-weight: 500;
}

/* A Csung Jüan Csikung link egyedi formázása */
.qigong-link {
    color: #467d9c;
    font-weight: 600;
    text-decoration: none; /* Eltávolítja az aláhúzást, ha nincs rá szükség */
    transition: opacity 0.2s ease; /* Finom áttűnés az interakcióhoz */
}

/* Hover állapot, hogy a látogató érezze, hogy a szöveg kattintható */
.qigong-link:hover {
    opacity: 0.8;
    text-decoration: underline; /* Egérrel fölé víve finoman aláhúzza */
}


/* CTA szekció és kártya formázása */
.cta-section {
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    background-color: transparent; /* Ha a fő háttér fehéres, így érvényesül a kártya */
}

.cta-card {
    max-width: 780px;
    background-color: #f4f7f9; /* Lágy, kékes-szürkés háttér a kép alapján */
    padding: 50px 40px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Nagyon finom, elegáns árnyék */
}

/* Feliratok és szövegek stílusa */
.cta-subtitle {
    display: block;
    color: #cca23a; /* Aranysárga betűszín */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.cta-title {
    color: #1a1a1a;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 25px;
    font-family: sans-serif; /* Igazítsd a saját betűtípusodhoz */
}

.cta-text {
    color: #4a4a4a;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.cta-text strong {
    color: #1a1a1a;
    font-weight: 700;
}

/* Az aranysárga CTA gomb */
.cta-button {
    display: inline-block;
    background-color: #cca23a; /* Kép szerinti sárgás-arany tónus */
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 16px 36px;
    border-radius: 30px; /* Teljesen lekerekített sarkok */
    box-shadow: 0 4px 15px rgba(204, 162, 58, 0.2);
    transition: all 0.3s ease;
}

/* Gomb interakció (Hover) */
.cta-button:hover {
    background-color: #b89030; /* Kicsit sötétebb árnyalat rámutatáskor */
    transform: translateY(-2px); /* Finom megemelkedés */
    box-shadow: 0 6px 20px rgba(204, 162, 58, 0.3);
}

/* Reszponzivitás mobiltelefonokra */
@media (max-width: 600px) {
    .cta-card {
        padding: 35px 20px;
    }
    .cta-title {
        font-size: 24px;
    }
    .cta-button {
        width: 100%;
        box-sizing: border-box;
        padding: 14px 20px;
    }
}

/* ==========================================================================
   RESZPONZÍV JAVÍTÁSOK (MOBIL NÉZET)
   ========================================================================== */

@media (max-width: 768px) {
  .qigong-article {
    padding: 30px 15px;
  }

  /* Mobilon felbontjuk a két oszlopot, a kép a szöveg alá kerül */
  .section-content-layout {
    display: block;
  }

  .article-title {
    font-size: 1.9rem;
  }

  .article-section-title {
    font-size: 1.4rem;
  }

  .section-text p {
    font-size: 1rem;
    text-align: left;
  }

  .article-section .article-subtitle {
    margin-top: 35px !important;
  }
  
  .article-image-wrapper {
    max-width: 280px; /* Mobilos képméret */
    margin: 30px auto 0 auto; /* Középre zárt kép mobilon, felső térközzel */
  }


  /* A képet tartalmazó elrendezés egymás alá rakja a szöveget és a képet */
  .section-content-layout {
    display: flex;
    flex-direction: column;
    align-items: center; /* Középre igazítja a tartalmat mobilon */
    gap: 20px;
  }

  /* A kép konténerének maximális szélességet adunk, hogy ne nyúljon túl nagyra */
  .article-image-wrapper {
    width: 100%;
    max-width: 120px; /* <--- ITT KORLÁTOZZUK: Így mobilon szép, kompakt méretű lesz */
    margin: 0 auto;   /* Tökéletesen középre zárja a konténert */
  }

  /* Biztosítjuk, hogy a kép ne torzuljon el és reszponzív legyen */
  .article-image {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* A képaláírás szövege is igazodjon a kis mérethez */
  .image-caption {
    font-size: 0.85rem;
    text-align: center;
    margin-top: 8px;
  }
}