/*
Theme Name: Székmasszázs Child
Theme URI: https://szekmasszazs.hu
Description: Child theme for the Székmasszázs parent theme. Use this for custom PHP code modifications without touching the parent theme files.
Author: Práger Péter
Author URI: https://pragerfoto.hu
Template: szekmasszazs-theme
Version: 1.0.0
Text Domain: szekmasszazs-child
Tags: wellness, spa, massage, business, corporate, responsive
*/
/* ==========================================================================
   BLOG SZEKCIÓ – KÁRTYÁK ÉS KIEMELT KÉPEK
   ========================================================================== */

/* Blogkártyák rácsos elrendezése */
.blog-post__related,
.blog-section__grid,
section[id="blog"] .grid,
section[class*="blog"] .grid,
section[id*="blog"] .container > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  align-items: stretch !important;
}

/* Főoldali blogrács négy kártyával */
.blog-section__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Kártya függőleges felépítése */
.blog-post__related-card,
.blog-card,
article.post,
section[id="blog"] .grid > div,
section[class*="blog"] .grid > div {
  display: above !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
  border: 1px solid #f5f5f4 !important;
  border-radius: 1rem !important;
  box-shadow: 0 4px 12px rgba(28, 25, 23, 0.08) !important;
  text-decoration: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Kártya hover állapota */
.blog-post__related-card:hover,
.blog-card:hover,
article.post:hover,
section[id*="blog"] .grid > div:hover,
section[class*="blog"] .grid > div:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.12) !important;
}

/* A kiemelt kép mindig a kártya tetején legyen */
.blog-post__related-card > img,
.blog-card > img,
.blog-card .post-thumbnail img,
article.post img,
section[id="blog"] .grid > div > img,
section[class*="blog"] .grid > div > img {
  display: block !important;
  order: 1 !important;
  width: 100% !important;
  height: 220px !important;
  max-height: 220px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
  border-radius: 1rem 1rem 0 0 !important;
}

/* WordPress képburkoló elem */
.blog-card__image,
.blog-card .post-thumbnail,
.blog-post__related-card .post-thumbnail {
  order: 1 !important;
  width: 100% !important;
  height: 220px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Kép a WordPress képburkolón belül */
.blog-card__image img,
.blog-card .post-thumbnail img,
.blog-post__related-card .post-thumbnail img {
  display: block !important;
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* A kártya szöveges része a kép alá kerüljön */
.blog-post__related-card h3,
.blog-card__body,
.blog-card__content,
article.post .content,
section[id="blog"] .grid > div > div:not(:has(img)),
section[class*="blog"] .grid > div > div:not(:has(img)) {
  order: 2 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  padding: 1.25rem !important;
  text-align: left !important;
}

/* Kapcsolódó blogcikkek címe */
.blog-post__related-card h3,
.blog-card__title,
article.post h3,
section[id="blog"] .grid h3,
section[class*="blog"] .grid h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: #1c1917 !important;
  font-size: 1.125rem !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

/* Blogkártya kivonata */
.blog-card__excerpt,
.blog-card p,
article.post p,
section[id*="blog"] .grid p,
section[class*="blog"] .grid p {
  margin-top: 0.75rem !important;
  margin-bottom: 1.25rem !important;
  color: #78716c !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

/* Kategóriacímke */
.blog-post__related-card::before,
.blog-card__category,
.blog-category-pill,
section[id="blog"] .grid .tag,
section[class*="blog"] .grid .tag {
  color: #1a6b5c !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Kategóriacímke a főoldali kártyákon */
.blog-card__category,
.blog-category-pill,
section[id="blog"] .grid .tag,
section[class*="blog"] .grid .tag {
  display: inline-block !important;
  align-self: flex-start !important;
  margin-bottom: 0.75rem !important;
  padding: 0.25rem 0.75rem !important;
  background-color: #f0f9f7 !important;
  border-radius: 9999px !important;
}

/* Olvasási link a kártya aljára kerüljön */
.blog-post__related-card a,
.blog-card__link,
.blog-card__read-more,
article.post a.read-more,
section[id*="blog"] a[href*="blog"],
section[class*="blog"] a[href*="blog"] {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: auto !important;
  color: #1a6b5c !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Reszponzív elrendezés */
@media (max-width: 900px) {
  .blog-post__related,
  .blog-section__grid,
  section[id="blog"] .grid,
  section[class*="blog"] .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .blog-post__related,
  .blog-section__grid,
  section[id="blog"] .grid,
  section[class*="blog"] .grid {
    grid-template-columns: 1fr !important;
  }

  .blog-post__related-card > img,
  .blog-card > img,
  .blog-card__image,
  .blog-card__image img,
  .blog-card .post-thumbnail,
  .blog-card .post-thumbnail img {
    height: 220px !important;
    max-height: 220px !important;
  }
}