/* ============================================================
   Любощі — Blog category / archive page
   Magazine-style: hero · featured · grid · pagination · CTA
   Shares root tokens with lyu-blog.css; this file is loaded alongside it.
   ============================================================ */

/* Hide parent-theme page-header chrome on archives + blog home.
   High-specificity selectors + !important to override theme inline styles. */
html body.category .lte-page-header,
html body.tag .lte-page-header,
html body.archive .lte-page-header,
html body.blog .lte-page-header,
html body.category header.lte-page-header,
html body.tag header.lte-page-header,
html body.archive header.lte-page-header,
html body.blog header.lte-page-header,
html body.category .lte-header-wrapper.hasBreadcrumbs > header,
html body.tag .lte-header-wrapper.hasBreadcrumbs > header,
html body.archive .lte-header-wrapper.hasBreadcrumbs > header,
html body.blog .lte-header-wrapper.hasBreadcrumbs > header,
html body.category .lte-header-h1-wrapper,
html body.tag .lte-header-h1-wrapper,
html body.archive .lte-header-h1-wrapper,
html body.blog .lte-header-h1-wrapper,
html body.category ul.breadcrumbs,
html body.tag ul.breadcrumbs,
html body.archive ul.breadcrumbs,
html body.blog ul.breadcrumbs {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
html body.category .lte-header-wrapper.hasBreadcrumbs,
html body.tag .lte-header-wrapper.hasBreadcrumbs,
html body.archive .lte-header-wrapper.hasBreadcrumbs,
html body.blog .lte-header-wrapper.hasBreadcrumbs {
  padding-bottom: 0 !important;
  background: transparent !important;
}

/* ── Wrapper ── */
.lyu-archive {
  background: var(--lyu-surface, #fafafa);
  color: var(--lyu-text, #1a1a2e);
}
.lyu-archive * { box-sizing: border-box; }

/* The .lyu-blog__wrap class from lyu-blog.css gives us max-width: 1140px; reuse it */

/* ── HERO ── */
.lyu-archive__hero {
  position: relative;
  background: var(--lyu-card, #fff);
  border-bottom: 1px solid var(--lyu-line, #e2e4e9);
  padding: 36px 0 40px;
  overflow: hidden;
}
.lyu-archive__hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--lyu-grad, linear-gradient(135deg,#f2053c,#cb003d));
  opacity: 0.07;
  filter: blur(40px);
  pointer-events: none;
}
.lyu-archive__hero .lyu-blog__wrap { position: relative; }

.lyu-archive__hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.lyu-archive__hero-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--lyu-red, #f2053c);
}
.lyu-archive__hero-count {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  background: var(--lyu-surface-2, #f4f5f7);
  border: 1px solid var(--lyu-line, #e2e4e9);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lyu-muted, #6b7280);
}

.lyu-archive__title {
  font-family: var(--lyu-serif, "Iowan Old Style", Baskerville, serif);
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--lyu-charcoal, #1c1c1c);
  margin: 0 0 14px;
  text-wrap: balance;
}

.lyu-archive__desc {
  max-width: 720px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--lyu-text-2, #2d3142);
  margin: 0 0 22px;
}
.lyu-archive__desc p { margin: 0 0 12px; }
.lyu-archive__desc p:last-child { margin-bottom: 0; }

.lyu-archive__subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.lyu-archive__subcat-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 16px;
  background: var(--lyu-card, #fff);
  border: 1.5px solid var(--lyu-line, #e2e4e9);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lyu-charcoal, #1c1c1c);
  text-decoration: none !important;
  transition: all var(--lyu-ease, .22s ease);
}
.lyu-archive__subcat-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  background: var(--lyu-surface-2, #f4f5f7);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--lyu-muted, #6b7280);
}
.lyu-archive__subcat-pill:hover {
  border-color: var(--lyu-red, #f2053c);
  color: var(--lyu-red, #f2053c);
  background: var(--lyu-red-soft, #fff0f3);
}
.lyu-archive__subcat-pill:hover span { background: var(--lyu-red, #f2053c); color: #fff; }

/* ── CATEGORY NAV strip (under hero on blog home) ── */
.lyu-archive__cat-nav {
  background: var(--lyu-card, #fff);
  border-bottom: 1px solid var(--lyu-line, #e2e4e9);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  -webkit-backdrop-filter: saturate(1.2);
  backdrop-filter: saturate(1.2);
}
body.admin-bar .lyu-archive__cat-nav { top: 32px; }
.lyu-archive__cat-nav-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* Fade edges so users feel there's more */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  padding: 0 4px;
}
.lyu-archive__cat-nav-scroll::-webkit-scrollbar { display: none; }
.lyu-archive__cat-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 9px 14px 9px 18px;
  background: var(--lyu-surface-2, #f4f5f7);
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lyu-charcoal, #1c1c1c);
  text-decoration: none !important;
  letter-spacing: .1px;
  transition: all var(--lyu-ease, .22s ease);
  white-space: nowrap;
}
.lyu-archive__cat-nav-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  background: rgba(0,0,0,.06);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--lyu-muted, #6b7280);
}
.lyu-archive__cat-nav-pill:hover {
  background: var(--lyu-card, #fff);
  border-color: var(--lyu-red, #f2053c);
  color: var(--lyu-red, #f2053c);
}
.lyu-archive__cat-nav-pill:hover span {
  background: var(--lyu-red-soft, #fff0f3);
  color: var(--lyu-red, #f2053c);
}
.lyu-archive__cat-nav-pill.is-active {
  background: var(--lyu-grad, linear-gradient(135deg,#f2053c,#cb003d));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(242,5,60,.28);
}
.lyu-archive__cat-nav-pill.is-active span {
  background: rgba(255,255,255,.22);
  color: #fff;
}

/* ── FEATURED (first post) ── */
.lyu-archive__featured {
  padding-top: 36px;
  padding-bottom: 8px;
}
.lyu-archive__featured-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--lyu-card, #fff);
  border: 1px solid var(--lyu-line, #e2e4e9);
  border-radius: var(--lyu-radius-lg, 20px);
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  transition: box-shadow var(--lyu-ease, .22s ease), transform var(--lyu-ease, .22s ease), border-color var(--lyu-ease, .22s ease);
}
.lyu-archive__featured-card:hover {
  border-color: rgba(242,5,60,.25);
  box-shadow: var(--lyu-shadow-md, 0 4px 20px rgba(0,0,0,.08));
  transform: translateY(-2px);
}
.lyu-archive__featured-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--lyu-surface-2, #f4f5f7);
  overflow: hidden;
}
.lyu-archive__featured-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--lyu-ease, .22s ease);
}
.lyu-archive__featured-card:hover .lyu-archive__featured-image img { transform: scale(1.04); }
.lyu-archive__featured-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--lyu-grad, linear-gradient(135deg,#f2053c,#cb003d));
  color: rgba(255,255,255,.55);
  font-size: 86px;
}
.lyu-archive__featured-badge {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--lyu-grad, linear-gradient(135deg,#f2053c,#cb003d));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--lyu-shadow-cta, 0 8px 24px rgba(242,5,60,.28));
}
.lyu-archive__featured-body { padding: 24px 24px 26px; }
.lyu-archive__featured-title {
  font-family: var(--lyu-serif, serif);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--lyu-charcoal, #1c1c1c);
  letter-spacing: -0.4px;
  margin: 10px 0 12px;
}
.lyu-archive__featured-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lyu-text-2, #2d3142);
  margin: 0 0 16px;
}
.lyu-archive__featured-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--lyu-red, #f2053c);
  letter-spacing: .2px;
  transition: gap var(--lyu-ease, .22s ease);
}
.lyu-archive__featured-card:hover .lyu-archive__featured-cta { text-decoration: underline; text-underline-offset: 4px; }

/* ── GRID ── */
.lyu-archive__grid-wrap {
  padding-top: 30px;
  padding-bottom: 30px;
}
.lyu-archive__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.lyu-archive__card {
  display: flex;
  flex-direction: column;
  background: var(--lyu-card, #fff);
  border: 1px solid var(--lyu-line, #e2e4e9);
  border-radius: var(--lyu-radius-lg, 20px);
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  transition: transform var(--lyu-ease, .22s ease), box-shadow var(--lyu-ease, .22s ease), border-color var(--lyu-ease, .22s ease);
}
.lyu-archive__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--lyu-shadow-md, 0 4px 20px rgba(0,0,0,.08));
  border-color: rgba(242,5,60,.22);
}
.lyu-archive__card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--lyu-surface-2, #f4f5f7);
  overflow: hidden;
}
.lyu-archive__card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--lyu-ease, .22s ease);
}
.lyu-archive__card:hover .lyu-archive__card-image img { transform: scale(1.04); }
.lyu-archive__card-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--lyu-grad, linear-gradient(135deg,#f2053c,#cb003d));
  color: rgba(255,255,255,.45);
  font-size: 56px;
}
.lyu-archive__card-body {
  padding: 18px 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.lyu-archive__card-cat {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--lyu-red-soft, #fff0f3);
  color: var(--lyu-red, #f2053c);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.lyu-archive__card-title {
  font-family: var(--lyu-serif, serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--lyu-charcoal, #1c1c1c);
  line-height: 1.3;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lyu-archive__card-excerpt {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lyu-muted, #6b7280);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lyu-archive__card-meta {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: var(--lyu-muted, #6b7280);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--lyu-line-soft, #ebebf0);
}

/* ── PAGINATION ── */
.lyu-archive__pagination {
  padding: 24px 16px 48px;
}
.lyu-archive__pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lyu-archive__pagination .page-numbers li { margin: 0; padding: 0; }
.lyu-archive__pagination a.page-numbers,
.lyu-archive__pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--lyu-line, #e2e4e9);
  border-radius: 10px;
  background: var(--lyu-card, #fff);
  color: var(--lyu-charcoal, #1c1c1c);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all var(--lyu-ease, .22s ease);
  font-variant-numeric: tabular-nums;
}
.lyu-archive__pagination a.page-numbers:hover {
  border-color: var(--lyu-red, #f2053c);
  color: var(--lyu-red, #f2053c);
  background: var(--lyu-red-soft, #fff0f3);
}
.lyu-archive__pagination span.page-numbers.current {
  background: var(--lyu-grad, linear-gradient(135deg,#f2053c,#cb003d));
  color: #fff !important;
  border-color: transparent;
  box-shadow: var(--lyu-shadow-cta, 0 8px 24px rgba(242,5,60,.28));
}
.lyu-archive__pagination span.page-numbers.dots {
  background: none;
  border: 0;
  color: var(--lyu-muted, #6b7280);
  letter-spacing: 2px;
}
.lyu-archive__pagination .page-numbers.prev,
.lyu-archive__pagination .page-numbers.next {
  padding: 0 16px;
  gap: 6px;
}
.lyu-pag__hide { font-weight: 600; }

/* ── EMPTY state ── */
.lyu-archive__empty {
  padding: 80px 16px 60px;
  text-align: center;
}
.lyu-archive__empty-icon {
  font-size: 56px;
  margin-bottom: 12px;
  opacity: .8;
}
.lyu-archive__empty-title {
  font-family: var(--lyu-serif, serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--lyu-charcoal, #1c1c1c);
  margin: 0 0 8px;
}
.lyu-archive__empty-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lyu-muted, #6b7280);
  max-width: 460px;
  margin: 0 auto 20px;
}
.lyu-archive__empty-link {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  background: var(--lyu-grad, linear-gradient(135deg,#f2053c,#cb003d));
  color: #fff !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: var(--lyu-shadow-cta, 0 8px 24px rgba(242,5,60,.28));
}

/* ── BOTTOM CTA banner ── */
.lyu-archive__banner-wrap {
  background: var(--lyu-charcoal, #1c1c1c);
  margin-top: 32px;
}
.lyu-archive__banner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 36px 16px;
  color: #fff;
}
.lyu-archive__banner-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  background: var(--lyu-grad, linear-gradient(135deg,#f2053c,#cb003d));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.lyu-archive__banner-title {
  font-family: var(--lyu-serif, serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  letter-spacing: -0.4px;
  margin: 0 0 8px;
}
.lyu-archive__banner-sub {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
  margin: 0;
}
.lyu-archive__banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--lyu-grad, linear-gradient(135deg,#f2053c,#cb003d));
  color: #fff !important;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none !important;
  box-shadow: var(--lyu-shadow-cta, 0 8px 24px rgba(242,5,60,.28));
  align-self: flex-start;
  transition: transform var(--lyu-ease, .22s ease);
}
.lyu-archive__banner-btn:hover { transform: translateY(-1px); }

/* ============================================================
   Tablet (>= 600 px)
   ============================================================ */
@media (min-width: 600px) {
  .lyu-archive__hero { padding: 48px 0 52px; }
  .lyu-archive__featured { padding-top: 40px; }
  .lyu-archive__featured-card { grid-template-columns: 1.2fr 1fr; }
  .lyu-archive__featured-image { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .lyu-archive__featured-body { padding: 32px 32px 36px; }
  .lyu-archive__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .lyu-archive__grid-wrap { padding-top: 36px; padding-bottom: 40px; }
  .lyu-archive__banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 44px 24px;
    gap: 36px;
  }
  .lyu-archive__banner-btn { align-self: center; flex-shrink: 0; }
}

/* ============================================================
   Desktop (>= 993 px)
   ============================================================ */
@media (min-width: 993px) {
  .lyu-archive__hero { padding: 64px 0 60px; }
  .lyu-archive__hero::before { width: 460px; height: 460px; }
  .lyu-archive__grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .lyu-archive__grid-wrap { padding-top: 44px; padding-bottom: 52px; }
  .lyu-archive__featured-card { grid-template-columns: 1.3fr 1fr; }
  .lyu-archive__featured-image { min-height: 380px; }
  .lyu-archive__featured-body { padding: 40px 40px 44px; }
  .lyu-archive__featured-title { font-size: clamp(28px, 3.2vw, 38px); }
  .lyu-archive__banner { padding: 56px 32px; }
}

/* Large desktop */
@media (min-width: 1200px) {
  .lyu-archive__grid { gap: 28px; }
}

/* Mobile fine tune */
@media (max-width: 480px) {
  .lyu-archive__hero { padding: 28px 0 32px; }
  .lyu-archive__pagination .page-numbers .prev .lyu-pag__hide,
  .lyu-archive__pagination .page-numbers .next .lyu-pag__hide { display: none; }
  .lyu-archive__pagination a.page-numbers,
  .lyu-archive__pagination span.page-numbers { min-width: 36px; height: 36px; padding: 0 10px; font-size: 13px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .lyu-archive__card,
  .lyu-archive__featured-card,
  .lyu-archive__card-image img,
  .lyu-archive__featured-image img,
  .lyu-archive__banner-btn { transition: none; }
}

/* Print */
@media print {
  .lyu-archive__banner-wrap,
  .lyu-archive__pagination { display: none !important; }
}