/* HRus category template. Load after the shared styles.css.
   Header, newsletter and footer continue to use the homepage components. */

.category-hero {
  position: relative;
  min-height: 452px;
  color: #fff;
  background: #101a22;
}

.category-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.category-hero__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 66%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 44%;
  opacity: .88;
}

.category-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, #101a22 1%, #101a22 29%, rgba(16,26,34,.95) 40%, rgba(16,26,34,.28) 70%, rgba(16,26,34,.08) 100%),
    linear-gradient(180deg, rgba(7,14,20,.62), transparent 55%, rgba(10,23,27,.42));
}

.category-hero__glow {
  position: absolute;
  width: 520px;
  height: 520px;
  left: -220px;
  bottom: -330px;
  border-radius: 50%;
  background: rgba(116,183,46,.25);
  box-shadow: 0 0 120px 60px rgba(116,183,46,.1);
  filter: blur(20px);
  z-index: 1;
}

.category-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  z-index: 1;
  background: linear-gradient(90deg, transparent 3%, rgba(116,183,46,.2) 28%, var(--green) 72%, var(--green));
}

.category-hero__inner { position: relative; z-index: 1; padding-top: 140px; padding-bottom: 58px; }

.category-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #bdc9cc;
  margin-bottom: 30px;
}

.category-breadcrumbs a { color: inherit; }
.category-breadcrumbs a:hover { color: #fff; }
.category-breadcrumbs [aria-current] { color: #fff; }
.category-breadcrumbs i { font-size: 8px; color: #83918f; }

.category-hero__copy { max-width: 570px; }

.category-hero__title {
  color: #fff;
  font-size: clamp(40px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

.category-hero__title span { color: #9ad258; }

.category-hero__description {
  max-width: 485px;
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.8;
  color: #d4dede;
}

/* CMS: render this nav only for actual children of the current category.
   An absent nav consumes no space. Sibling categories do not go here. */
.category-subcategories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.category-subcategories a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 17px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: #eef3ec;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color .2s, background .2s;
}

.category-subcategories a:hover,
.category-subcategories a[aria-current="page"] {
  border-color: var(--green);
  background: rgba(116,183,46,.14);
  color: #fff;
}

.category-feed { padding: 50px 0 74px; }

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 25px;
}

.category-card { min-width: 0; }
.category-card .art-card__media { aspect-ratio: 16 / 10; background: var(--bg-soft-2); }
.category-card .art-card__media img { object-fit: cover; }
.category-card .art-card__body { padding: 20px 21px 22px; gap: 10px; }
.category-card__title { font-size: 20px; font-weight: 700; line-height: 1.38; }
.category-card__title a { display: block; }
.category-card__title a:hover { color: var(--green-700); }

.category-card .art-card__body p {
  font-size: 15.5px;
  line-height: 1.7;
  color: #4f5c65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Same reading-time treatment and read-more interaction as the homepage. */
.category-card .category-card__meta { margin: 2px 0 0; }
.category-card .category-card__meta .meta { font-size: 14px; }
.category-card .category-card__meta svg { flex: 0 0 15px; }
.category-card .read-more { align-self: flex-start; width: fit-content; margin-top: 0; padding-top: 0; font-size: 14.5px; }

.category-card--text .art-card__body { min-height: 255px; }
.category-grid--continuation { margin-top: 30px; }
.category-sentinel { height: 1px; pointer-events: none; }
.category-loader { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); padding: 28px 0 0; font-size: 14px; }
.category-loader__mark { width: 20px; height: 20px; border: 2px solid var(--green-soft); border-top-color: var(--green-600); border-radius: 50%; animation: category-spin .8s linear infinite; }
.category-state { margin-top: 25px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); text-align: center; background: var(--bg-soft); }
.category-state p { margin-bottom: 18px; }
.category-state button { margin-inline: auto; }
.category-empty { padding: 55px 20px; text-align: center; }
.category-empty h3 { margin-bottom: 12px; font-size: 24px; }
.category-empty p { color: var(--muted); }
.category-feed [hidden] { display: none !important; }

.category-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.page-category a:focus-visible,
.page-category button:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}

@keyframes category-spin { to { transform: rotate(360deg); } }

@media (min-width: 1024px) and (max-width: 1280px) {
  .category-hero__inner { padding-top: 119px; }
}

@media (max-width: 1023px) {
  .category-hero { min-height: 420px; }
  .category-hero__copy { max-width: 520px; }
  .category-hero__image { width: 80%; }
  .category-hero__visual::after {
    background: linear-gradient(270deg, #101a22 0%, rgba(16,26,34,.96) 32%, rgba(16,26,34,.65) 65%, rgba(16,26,34,.22)), linear-gradient(180deg, rgba(7,14,20,.4), transparent);
  }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .category-hero { min-height: 410px; }
  .category-hero__inner { padding-top: 110px; padding-bottom: 44px; }
  .category-breadcrumbs { margin-bottom: 27px; font-size: 12px; gap: 7px; }
  .category-hero__title { font-size: 40px; line-height: 1.2; }
  .category-hero__description { font-size: 16px; line-height: 1.8; margin-top: 17px; max-width: 370px; }
  .category-hero__image { width: 100%; opacity: .46; object-position: 44% 46%; }
  .category-hero__visual::after {
    background: linear-gradient(270deg, rgba(16,26,34,.91), rgba(16,26,34,.55)), linear-gradient(0deg, rgba(16,26,34,.55), transparent);
  }
  .category-hero__glow { width: 350px; height: 350px; bottom: -240px; left: -130px; }
  .category-subcategories { gap: 8px; margin-top: 23px; }
  .category-subcategories a { font-size: 13px; min-height: 40px; padding: 8px 13px; }
  .category-feed { padding: 33px 0 48px; }
  .category-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .category-grid--continuation { margin-top: 24px; }
  .category-card .art-card__body { padding: 19px 20px 22px; }
  .category-card__title { font-size: 20px; }
  .category-card .art-card__body p { font-size: 15.5px; }
}

@media (max-width: 360px) {
  .category-hero__title { font-size: 34px; }
  .category-hero__description { font-size: 15.5px; }
  .category-breadcrumbs { font-size: 11.5px; gap: 6px; }
}

@media (min-width: 561px) and (max-width: 640px) {
  .category-hero__inner { padding-top: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .category-card,
  .category-card img,
  .category-card .btn__arrow,
  .category-subcategories a { transition: none !important; }
  .category-loader__mark { animation: none; }
}