/* ==========================================================================
   Blog
   ========================================================================== */
.zg3-blog-grid-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zg3-sp-16);
  margin-top: var(--zg3-sp-48);
}
@media (min-width: 768px) {
  .zg3-blog-grid-top { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .zg3-blog-grid-top { grid-template-columns: repeat(4, 1fr); }
}

/* Cards — no white bg */
.zg3-blog-card {
  background: transparent;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.zg3-blog-card:hover { transform: translateY(-4px); }

.zg3-blog-card__image {
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: var(--zg3-r-lg);
}
.zg3-blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--zg3-r-lg);
  transition: transform 0.6s;
}
.zg3-blog-card:hover .zg3-blog-card__image img { transform: scale(1.05); }

.zg3-blog-card__body { padding: var(--zg3-sp-16) 0 0; }
.zg3-blog-card__title {
  font-size: 20px;
  font-weight: var(--zg3-fw-semibold);
  line-height: 1.4;
  margin-bottom: var(--zg3-sp-8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zg3-blog-card__excerpt {
  font-size: var(--zg3-fs-micro);
  color: var(--zg3-gray);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blog list grid */
.zg3-blog-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zg3-sp-16);
  margin-top: var(--zg3-sp-48);
}
@media (min-width: 768px) {
  .zg3-blog-list-grid { grid-template-columns: repeat(2, 1fr); }
}

.zg3-blog-list-col {
  display: flex;
  flex-direction: column;
}

.zg3-blog-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--zg3-sp-16) var(--zg3-sp-12);
  position: relative;
  overflow: hidden;
  border-radius: var(--zg3-r-md);
  transition: padding 0.5s cubic-bezier(0.22,1,0.36,1);
}
.zg3-blog-list-item__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 2;
}
.zg3-blog-list-item__title {
  font-size: 16px;
  font-weight: var(--zg3-fw-medium);
  transition: color 0.4s;
  line-height: 1.4;
}
.zg3-blog-list-item__arrow {
  flex-shrink: 0;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.3s, transform 0.3s;
  position: relative;
  z-index: 2;
}
.zg3-blog-list-item__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s;
  border-radius: var(--zg3-r-md);
}
.zg3-blog-list-item__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  border-radius: var(--zg3-r-md);
}

.zg3-blog-list-item:hover { padding: var(--zg3-sp-32) var(--zg3-sp-20); }
.zg3-blog-list-item:hover .zg3-blog-list-item__bg { opacity: 1; filter: brightness(0.5); }
.zg3-blog-list-item:hover .zg3-blog-list-item__title { color: var(--zg3-white); }
.zg3-blog-list-item:hover .zg3-blog-list-item__arrow { opacity: 1; transform: translate(0, 0); color: var(--zg3-white); }

/* Show excerpt on hover */
.zg3-blog-list-item__excerpt {
  position: relative;
  z-index: 2;
  font-size: var(--zg3-fs-micro);
  color: rgba(255,255,255,0.7);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s, opacity 0.4s 0.1s;
  line-height: 1.5;
  margin-top: 0;
}
.zg3-blog-list-item:hover .zg3-blog-list-item__excerpt {
  max-height: 60px;
  opacity: 1;
  margin-top: var(--zg3-sp-8);
}