/* ==========================================================================
   ARGO — LAYOUT / GRID
   1128px, 12 колонок по 72px, проміжки 24px.
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

.argo-container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: 8px;
}

.argo-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

.argo-col-1  { grid-column: span 1; }
.argo-col-2  { grid-column: span 2; }
.argo-col-3  { grid-column: span 3; }
.argo-col-4  { grid-column: span 4; }
.argo-col-6  { grid-column: span 6; }
.argo-col-8  { grid-column: span 8; }
.argo-col-12 { grid-column: span 12; }

.argo-layout--with-sidebar {
  display: grid;
  grid-template-columns: var(--grid-content-width) var(--grid-sidebar-width);
  gap: var(--grid-gutter);
  max-width: var(--grid-max-width);
  margin-inline: auto;
}

/* Картки артефактів: 4 колонки на desktop */
.argo-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
}

/* ---------- BLOG / QUERY LOOP — 4 articles per row (design §4.1) ----------
   Front page articles come from WP blocks (Query Loop / Latest Posts). */
.argo-blog-grid,
.wp-block-post-template,
ul.wp-block-post-template,
.wp-block-query .wp-block-post-template,
.home .site-main .wp-block-post-template,
.page .site-main .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gutter);
  list-style: none;
  padding: 0;
  margin: 0;
}

.argo-blog-grid > *,
.wp-block-post-template > li,
.wp-block-post-template > .wp-block-post {
  margin: 0;
  min-width: 0;
}

/* Latest Posts block (grid layout) */
.wp-block-latest-posts.is-grid,
.wp-block-latest-posts__list.is-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gutter);
  list-style: none;
  padding: 0;
}

.wp-block-latest-posts.is-grid li,
.wp-block-latest-posts__list.is-grid li {
  margin: 0;
  width: auto !important;
}

/* Blog card image aspect (design: 264×176) */
.argo-blog-grid .wp-block-post-featured-image img,
.wp-block-post-template .wp-block-post-featured-image img,
.wp-block-latest-posts__featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* Blog title accent color */
.argo-blog-grid .wp-block-post-title a,
.wp-block-post-template .wp-block-post-title a,
.wp-block-latest-posts a {
  color: var(--color-accent);
}

/* ---------- АДАПТИВНІСТЬ ---------- */

@media (max-width: 1127px) {
  .argo-layout--with-sidebar {
    grid-template-columns: 1fr;
  }
  .argo-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .argo-blog-grid,
  .wp-block-post-template,
  ul.wp-block-post-template,
  .wp-block-query .wp-block-post-template,
  .wp-block-latest-posts.is-grid,
  .wp-block-latest-posts__list.is-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .argo-container {
    padding-inline: 16px;
  }
  .argo-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .argo-grid {
    gap: 16px;
  }
  .argo-blog-grid,
  .wp-block-post-template,
  ul.wp-block-post-template,
  .wp-block-query .wp-block-post-template,
  .wp-block-latest-posts.is-grid,
  .wp-block-latest-posts__list.is-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 419px) {
  .argo-card-grid {
    grid-template-columns: 1fr;
  }
}