/* ============================================================
   layout-post-grid.css — Unified Post Grid
   Scope: Blog (page-template) / Archive / Search
   ============================================================ */

/* ------------------------------------------------------------
   1) Container (Global) - GeneratePress 레이아웃 충돌 방지
------------------------------------------------------------ */
/* 홈/블로그/아카이브/검색: GeneratePress 컨테이너를 블록 레이아웃으로 강제 */
:is(.home, .page-template-page-blog, .archive, .search.search-results) .site-content,
:is(.home, .page-template-page-blog, .archive, .search.search-results) .content-area,
:is(.home, .page-template-page-blog, .archive, .search.search-results) .site-main {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* 홈 전용: site-latest-posts 섹션이 컨테이너 밖으로 나가지 않도록 */
.home .site-latest-posts {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  /* 내부 컨텐츠 중앙 정렬 보장 */
  display: block;
}

/* 홈 latest-inner 중앙 정렬 보장 */
.home .latest-inner {
  margin-left: auto;
  margin-right: auto;
}

:is(.home, .page-template-page-blog, .archive, .search.search-results) #primary {
  width: 100%;
}

.dfl-posts-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   2) Grid — Default (Blog page)
------------------------------------------------------------ */
.dfl-post-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

/* ------------------------------------------------------------
   3) Grid Override — Archive / Search / Home
------------------------------------------------------------ */
.home .dfl-post-grid,
.archive .dfl-post-grid,
.search.search-results .dfl-post-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Tablet — Large (iPad Pro, Desktop with sidebar) */
@media (max-width: 1100px) {
  .dfl-post-grid,
  .home .dfl-post-grid,
  .archive .dfl-post-grid,
  .search.search-results .dfl-post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet — Medium (iPad, Galaxy Tab)
   grid-template-columns 는 위 1100px 규칙이 이미 이 범위(≤1024px)에도
   적용되어 동일한 2열 값을 내므로 중복 선언하지 않고 gap 차이만 준다. */
@media (max-width: 1024px) {
  .dfl-post-grid,
  .home .dfl-post-grid,
  .archive .dfl-post-grid,
  .search.search-results .dfl-post-grid {
    gap: 24px;
  }

  .dfl-posts-wrap {
    padding: 0 16px;
  }
}

/* Tablet — Small (iPad Mini) */
@media (max-width: 800px) {
  .dfl-post-grid,
  .home .dfl-post-grid,
  .archive .dfl-post-grid,
  .search.search-results .dfl-post-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .dfl-post-card {
    max-width: 100%;
  }

  .dfl-posts-wrap {
    padding: 0 16px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  /* 블로그/아카이브/검색 그리드 컨테이너 모바일 */
  .dfl-posts-wrap {
    padding: 0 24px;
  }

  /* 홈/블로그/아카이브/검색 그리드 모바일에서 1열로 통일 */
  .dfl-post-grid,
  .home .dfl-post-grid,
  .archive .dfl-post-grid,
  .search.search-results .dfl-post-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: center;
  }

  /* 카드 크기 제한 */
  .dfl-post-card {
    width: 100%;
    max-width: 420px;
  }

  /* 카드 내부 요소 크기 통일 */
  .dfl-post-card__thumb {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
  }

  .dfl-post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dfl-post-card__body {
    padding: 16px 16px 18px;
  }

  .dfl-post-card__title {
    font-size: 16px;
    line-height: 1.35;
  }

  .dfl-post-card__excerpt {
    font-size: 14px;
    line-height: 1.55;
  }

  .dfl-post-card__meta {
    font-size: 13px;
  }

  /* 페이지 헤더 모바일 최적화 */
  :is(.archive, .search.search-results, .page-template-page-blog) #main header.page-header {
    padding: 0 16px;
    margin-bottom: 20px;
  }

  :is(.archive, .search.search-results, .page-template-page-blog) #main header.page-header .page-title {
    font-size: clamp(22px, 5vw, 28px);
  }
}

/* ------------------------------------------------------------
   4) Card
------------------------------------------------------------ */
.dfl-post-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-base);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Card Link */
.dfl-post-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Hover */
@media (hover: hover) {
  .dfl-post-card:hover {
    transform: translateY(-4px);
    background-color: rgba(255,255,255,0.02);
    box-shadow: var(--shadow-hover);
  }

  .dfl-post-card:hover .dfl-post-card__title {
    color: var(--accent);
  }
}

/* ------------------------------------------------------------
   5) Thumbnail
------------------------------------------------------------ */
.dfl-post-card__thumb {
  aspect-ratio: 16 / 9;
  background: var(--page-bg);
  overflow: hidden;
}

.dfl-post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------
   6) Body
------------------------------------------------------------ */
.dfl-post-card__body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dfl-post-card__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.dfl-post-card__cat {
  color: var(--accent);
  font-weight: 700;
}

.dfl-post-card__title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dfl-post-card__excerpt {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: auto;
}

/* ------------------------------------------------------------
   7) Pagination
------------------------------------------------------------ */
.dfl-pagination {
  margin: 40px 0 0;
  display: flex;
  justify-content: center;
  gap:0.5rem;
}

.archive .nav-links,
.search.search-results .nav-links,
.page-template-page-blog .nav-links {
  display: flex;
  justify-content: center;
  gap:0.5rem;

}

.archive .nav-links .page-numbers,
.search.search-results .nav-links .page-numbers,
.page-template-page-blog .nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

/* ------------------------------------------------------------
   8) Archive / Search title
   ------------------------------------------------------------
   과거에는 GeneratePress 기본 루프와 카드 그리드가 동시에 출력되어
   한쪽을 display:none 으로 숨겼습니다. 이제 archive.php / search.php
   가 그리드를 한 번만 출력하므로 숨김 규칙이 필요 없습니다.
------------------------------------------------------------ */
.dfl-archive-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
}

.dfl-archive-desc {
  margin: 0 0 24px;
  color: var(--dfl-text-muted, #6b7280);
}

@media (max-width: 640px) {
  .dfl-archive-title {
    font-size: 22px;
  }
}

/* ------------------------------------------------------------
   10) Page-specific alignment override (safety)
------------------------------------------------------------ */
.page-template-page-blog .dfl-posts-wrap {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}