/* Page: Home (front-page.php) ------------------------------------------- */

.front-page { max-width: var(--container); margin: 0 auto; }

/* GP 컨테이너 패딩 제거 + front-page 자체 여백 지정(.home .site-main 접두사로
   GP 를 specificity 로 제압. .front-page 가 곧 .site-main 이다). */
.home .content-area { padding: 0; }
.home .site-main.front-page { padding: var(--space-5) var(--space-4); }
@media (max-width: 600px) {
  /* 모바일 홈: 좌우 여백 넉넉히, 상단은 붙여 히어로가 헤더 바로 아래로 */
  .home .site-main.front-page { padding: 0 var(--space-6) var(--space-4); }
}

.home-section { margin-bottom: var(--space-7); }

.home-section .post-grid { padding-top: var(--space-1); }

/* 글 없을 때 안내 문구 */
.home-section .post-grid > p { color: var(--color-text-soft); grid-column: 1 / -1; }

/* 카테고리 둘러보기(포토 카드) ------------------------------------------
   카테고리 대표 사진(썸네일 있는 최신 글)을 배경에 깔고, 어두운 그라디언트
   오버레이 위에 라벨+글 수를 얹는다. 사진이 없으면 브랜드 그라디언트로 폴백. */
.category-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.cat-block {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
  min-height: 170px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--color-text-inverse);
  background: var(--color-primary) center / cover no-repeat;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cat-block:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--color-text-inverse); }

/* 사진 위 가독성 오버레이 */
.cat-block::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(16, 28, 48, 0.10) 0%, rgba(16, 28, 48, 0.30) 45%, rgba(16, 28, 48, 0.78) 100%);
  transition: opacity var(--dur) var(--ease);
}
.cat-block.has-photo::after {
  background: linear-gradient(180deg, rgba(16, 28, 48, 0.05) 0%, rgba(16, 28, 48, 0.35) 45%, rgba(16, 28, 48, 0.85) 100%);
}
.cat-block:hover::after { opacity: 0.88; }

.cat-block > * { position: relative; z-index: 1; }
.cat-block .cat-block-label { font-size: var(--fs-xl); font-weight: var(--fw-black); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.cat-block .cat-block-desc  { font-size: var(--fs-sm); opacity: 0.92; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.cat-block .cat-block-count { opacity: 0.85; }

/* 사진 없을 때 브랜드 그라디언트 폴백 */
.cat-block.cat-travel:not(.has-photo) { background: linear-gradient(135deg, var(--c-blue-400), var(--c-blue-600)); }
.cat-block.cat-food:not(.has-photo)   { background: linear-gradient(135deg, #e8965f, var(--color-cat-food)); }
.cat-block.cat-kids:not(.has-photo)   { background: linear-gradient(135deg, #4cb98a, var(--color-cat-kids)); }

@media (max-width: 860px) {
  .category-nav { grid-template-columns: 1fr; gap: var(--space-4); }
  .cat-block { min-height: 140px; }
}