.blog-box {
  max-width: 90rem;
  background: rgb(250, 250, 250);
  text-decoration: none;
  padding: 3rem;
  margin-bottom: 2rem;
  border: 1px rgb(200, 200, 200) solid;
  border-radius: var(--br-default);
  box-shadow: 3px 3px 10px rgb(200, 200, 200);
  text-align: left;
}

.head-1-blog {
  font-size: 5.2rem;
  font-weight: var(--fw-semibold);
  color: var(--co-gray-dark);
  letter-spacing: var(--ls-header);
  margin-bottom: 2.4rem;
}

.blog-header {
  font-size: 2.4rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  color: var(--co-gray-default);
}

.blog-title-main {
  display: block; /* Biztosítja, hogy a második sor alá kerüljön */
  margin-bottom: 1rem;
}

.blog-title-sub {
  display: block; /* Biztosítja, hogy a második sor alá kerüljön */
  font-size: 3.6rem;
  font-weight: 350;
  margin-bottom: 1rem;
}

.blog-year-divider {
  font-size: 4rem;
  background: rgb(240, 240, 240);
  padding: 3rem 5rem;
  margin: 2rem auto;
  border-radius: var(--br-default);
  border: 1px rgb(200, 200, 200) solid;
  text-align: center;
}

/*  Kagami biraki small year list  */
.kb-year-list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.8rem;
}

.kb-year-list-item {
  font-size: 1.4rem;
  display: flex;
  line-height: 1.2;
  padding-top: 1rem;
}

.chikung-big-text {
  font-weight: var(--fw-bold);
  color: var(--co-gray-dark);
  letter-spacing: var(--ls-header);
  line-height: var(--lh-bigger);
  text-align: left;
  font-size: 6.2rem;
}

/* Event Info list */
.event-details-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}

.event-details-list-item {
  display: flex;
  gap: 0.7rem;
  line-height: 1.2;
}

/* numbered list */
.simple-numbered-list {
  list-style: decimal;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-left: 4rem;
  margin-bottom: 1.6rem;
}

.simple-numbered-list-item {
  align-items: center;
  gap: 1.2rem;
}

.simple-numbered-list-bold-item {
  font-weight: var(--fw-bold);
  align-items: center;
  gap: 1.2rem;
}

/*  beágyazott videók    */

.blog-embended-video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  margin: 3rem 0rem;
}

.blog-embended-video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* --- Személyes tipp (Personal Tip) doboz --- */

.personal-tip-box {
  background-color: rgb(236, 222, 236);
  border-left: 5px solid var(--co-primary);
  border-radius: 8px;
  padding: 25px;
  margin: 30px 0;
  display: flex;
  gap: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.tip-icon ion-icon {
  font-size: 36px;
  color: var(--co-primary);
  min-width: 36px;
  margin-top: 5px;
}

.tip-content p {
  margin-bottom: 12px;
  line-height: 1.6;
  color: #4a4a4a;
}

.tip-content p:last-child {
  margin-bottom: 0;
}

.tip-title {
  font-weight: 700;
  font-size: 1.5rem;
  color: #252e39;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mobil nézet optimalizálás */
@media (max-width: 600px) {
  .personal-tip-box {
    flex-direction: column;
    gap: 10px;
    padding: 20px;
  }

  .tip-icon ion-icon {
    font-size: 30px;
  }
}

/* =========================================
   ÉVVÁLASZTÓ (Archívum) STÍLUSOK
   ========================================= */

.blog-years-grid {
  display: flex;
  flex-wrap: wrap; /* Ha nem fér ki, törje a sort */
  gap: 1rem; /* Távolság a gombok között */
  justify-content: center; /* Középre rendezés */
  margin-top: 1rem;
}

.year-btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background-color: #333; /* Sötét háttér */
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid #555;
  font-size: 1.4rem;
  transition: all 0.3s;
}

.year-btn:hover {
  background-color: #e67e22; /* A narancssárga színed */
  border-color: #e67e22;
  transform: translateY(-2px); /* Kicsit "felemelkedik" */
}

/* Az éppen kiválasztott év stílusa */
.year-btn--active {
  background-color: #e67e22;
  border-color: #e67e22;
  font-weight: bold;
  pointer-events: none; /* Ne lehessen ráklikkelni, ha már ott vagy */
}