/* ===== Category Archive Template Styles ===== */

/* Override GeneratePress columns on category pages */
.cat-archive .generate-columns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
}

/* ===== Page wrapper ===== */
.cat-archive{
  width: 100%;
}

/* ===== Hero band ===== */
.cat-hero{ background: color-mix(in srgb, var(--primary) 15%, var(--bg)); border-radius: var(--radius); margin:24px 0 28px; }
.cat-hero__inner{ display:flex; gap:28px; align-items:center; padding:32px; }
.cat-crumbs{ font-size:.9rem; color: color-mix(in srgb, var(--text) 60%, #000); margin-bottom:6px; }
.cat-crumbs a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.cat-hero__title{ margin:0 0 10px; font-weight:800; letter-spacing:.01em; color: var(--text); }
.cat-hero__desc{ color: color-mix(in srgb, var(--text) 80%, #000); line-height:1.8; }

/* tilted photo with white border & shadow */
.cat-hero__right{ flex:0 0 360px; display:flex; justify-content:flex-end; }
.cat-hero__photo-wrap{
  transform: rotate(3deg);
  background:#fff; padding:10px; border-radius: calc(var(--radius) - 2px);
  box-shadow: var(--shadow-2);
  height: fit-content;
}
.cat-hero__img{ display:block; width:100%; height:auto; border-radius: calc(var(--radius) - 4px); }

@media (max-width: 900px){
  .cat-hero__inner{ flex-direction:column; align-items:flex-start; padding:24px; }
  .cat-hero__right{ width:100%; justify-content:center; }
  .cat-hero__left{ width:100%; }
}

/* ===== Section label (chip) ===== */
.cat-section__label{ margin: 10px 0 16px; }
.cat-chip{
  display:inline-flex; align-items:center; gap:8px;
  background: color-mix(in srgb, var(--primary) 30%, #fff); 
  color: color-mix(in srgb, var(--text) 75%, #000); 
  padding:8px 12px; border-radius:6px;
  font-weight:700;
}

/* ===== Grid ===== */
.cat-grid{ display:flex; flex-wrap:wrap; gap:18px; }

/* columns: 3 → 2 → 1 with proper gap math */
:root{ --cat-gap:18px; --cat-cols-lg:3; --cat-cols-md:2; }
.cat-card{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-1);
  overflow:hidden; padding:0 0 12px;
  flex: 0 0 calc((100% - (var(--cat-cols-lg) - 1) * var(--cat-gap)) / var(--cat-cols-lg));
  display:flex; flex-direction:column;
}
.cat-card__thumb{ display:block; }
.cat-card__img{
  width:100%; height:auto; display:block;
  aspect-ratio: 4/3; object-fit:cover;
}
.cat-card__title{ font-size:1.05rem; line-height:1.3; margin:10px 12px 6px; font-weight:800; color: var(--text); }
.cat-card__title a{ color:inherit; text-decoration:none; }
.cat-card__title a:hover{ color: var(--accent); text-decoration:underline; }
.cat-card__meta{
  display:flex; align-items:center; gap:6px;
  color: color-mix(in srgb, var(--text) 60%, #000); font-size:.92rem; margin: 0 12px;
}

@media (max-width: 980px){
  .cat-card{ flex-basis: calc((100% - (var(--cat-cols-md) - 1) * var(--cat-gap)) / var(--cat-cols-md)); }
}
@media (max-width: 640px){
  .cat-card{ flex-basis: 100%; }
}

/* ===== Pagination ===== */
.cat-pagination{ margin-top:26px; display:flex; justify-content:center; }

.cat-pagination .page-numbers.prev,
.cat-pagination .page-numbers.next {
  text-indent: -9999px; /* Hide the text */
  position: relative;
}

.cat-pagination .page-numbers.prev::before {
  content: "‹";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-indent: 0;
  font-size: 1.2rem;
  font-weight: bold;
}

.cat-pagination .page-numbers.next::before {
  content: "›";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-indent: 0;
  font-size: 1.2rem;
  font-weight: bold;
}