/* News archive page — Sansara */

body.news-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  overflow-x: clip;
}

body.news-page > .news-page-main {
  flex: 1 0 auto;
  position: relative;
  z-index: 1;
}

body.news-page > .site-footer {
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  body.news-page.has-sticky-cta {
    padding-bottom: 0;
  }
}

/* Hero */
.news-page-hero {
  position: relative;
  text-align: center;
  padding-block: calc(var(--header-h) + var(--space-10)) var(--space-8);
}

.news-page-hero .section-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

.news-page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.5vw, 2.85rem);
  font-weight: normal;
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.news-page-hero p {
  max-width: 42rem;
  margin-inline: auto;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

/* Section */
.news-page-section {
  position: relative;
  padding-bottom: var(--section-py);
}

.news-page-section > .container {
  width: min(100% - var(--space-8), 1240px);
}

/* Toolbar */
.news-page-toolbar {
  position: relative;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(233, 193, 86, 0.22);
  border-radius: var(--radius-lg);
  background: rgba(16, 15, 13, 0.72);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-panel);
}

.news-page-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.news-page-toolbar__summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* Filters */
.news-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(14px, 2vw, 18px);
  border: 1px solid rgba(233, 193, 86, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 162, 15, 0.08), transparent 48%),
    rgba(16, 15, 13, 0.58);
  backdrop-filter: blur(12px);
}

.news-filters__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

.news-filter-field {
  display: grid;
  gap: 8px;
  min-width: min(100%, 190px);
  flex: 1 1 190px;
}

.news-filter-field__label {
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.news-dropdown {
  position: relative;
  min-width: min(100%, 220px);
  z-index: 1;
}

.news-dropdown.is-open {
  z-index: 40;
}

.news-dropdown__button {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(233, 193, 86, 0.38);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 162, 15, 0.08), transparent 60%),
    rgba(12, 10, 8, 0.78);
  color: var(--color-text);
  padding: 0 16px 0 18px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition:
    border-color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    background 180ms var(--ease-out);
}

.news-dropdown__button:hover,
.news-dropdown__button:focus-visible,
.news-dropdown.is-open .news-dropdown__button {
  border-color: rgba(233, 193, 86, 0.72);
  box-shadow: 0 0 24px rgba(245, 162, 15, 0.16);
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 162, 15, 0.14), transparent 62%),
    rgba(20, 15, 10, 0.88);
}

.news-dropdown__button [data-news-dropdown-value] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.news-dropdown__chevron {
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: 1rem;
  line-height: 1;
  transition: transform 180ms var(--ease-out);
}

.news-dropdown.is-open .news-dropdown__chevron {
  transform: rotate(180deg);
}

.news-dropdown__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  display: grid;
  gap: 4px;
  padding: 8px;
  margin: 0;
  border: 1px solid rgba(233, 193, 86, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 162, 15, 0.1), transparent 58%),
    rgba(10, 8, 7, 0.96);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.52),
    0 0 30px rgba(245, 162, 15, 0.1);
  backdrop-filter: blur(14px);
}

.news-dropdown__menu[hidden] {
  display: none !important;
}

.news-dropdown__option {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--color-text-secondary);
  padding: 0 12px;
  text-align: left;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition:
    color 160ms var(--ease-out),
    background 160ms var(--ease-out);
}

.news-dropdown__option:hover,
.news-dropdown__option:focus-visible {
  color: var(--color-accent);
  background: rgba(245, 162, 15, 0.1);
}

.news-dropdown__option.is-active {
  color: var(--color-accent);
  background: rgba(245, 162, 15, 0.14);
}

.news-filters__reset {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid rgba(233, 193, 86, 0.28);
  background: rgba(12, 10, 8, 0.55);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.news-filters__reset:hover,
.news-filters__reset:focus-visible {
  color: var(--color-accent);
  border-color: rgba(233, 193, 86, 0.56);
  box-shadow: 0 0 18px rgba(245, 162, 15, 0.12);
}

.news-filters__reset:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

/* Empty state */
.news-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) var(--space-6);
  border-radius: 22px;
  border: 1px solid rgba(233, 193, 86, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 162, 15, 0.1), transparent 55%),
    rgba(16, 15, 13, 0.78);
  box-shadow:
    0 0 32px rgba(245, 162, 15, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.35);
}

.news-empty-state h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: normal;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.news-empty-state p {
  max-width: 28rem;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.news-empty-state [data-news-reset-filters] {
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(233, 193, 86, 0.45);
  background: linear-gradient(135deg, rgba(245, 162, 15, 0.18), rgba(16, 15, 13, 0.65));
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  transition:
    box-shadow var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.news-empty-state [data-news-reset-filters]:hover,
.news-empty-state [data-news-reset-filters]:focus-visible {
  border-color: rgba(233, 193, 86, 0.72);
  box-shadow: 0 0 24px rgba(245, 162, 15, 0.2);
}

.news-pagination.is-hidden {
  display: none;
}

.news-view-toggle {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid rgba(233, 193, 86, 0.28);
  background: rgba(11, 9, 8, 0.65);
}

.news-view-toggle button {
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  transition:
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.news-view-toggle button:hover,
.news-view-toggle button:focus-visible {
  color: var(--color-text);
}

.news-view-toggle button.is-active {
  color: var(--color-bg);
  background: linear-gradient(135deg, var(--color-cta-from), var(--color-cta-to));
  box-shadow: 0 0 18px rgba(245, 162, 15, 0.28);
}

/* Archive grid */
.news-archive {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
  transition: opacity 280ms var(--ease-out);
}

.news-archive[data-view="cards"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.news-archive.is-list-view,
.news-archive[data-view="list"] {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@keyframes newsArchiveEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.news-archive.is-rendering .news-archive-card,
.news-archive.is-rendering .news-archive-row {
  animation: newsArchiveEnter 0.52s var(--ease-out) backwards;
  animation-delay: calc(var(--item-index, 0) * 60ms);
}

/* Card */
.news-archive-card {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(233, 193, 86, 0.24);
  background: rgba(16, 15, 13, 0.82);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.38);
  transition:
    transform 280ms var(--ease-out),
    border-color 280ms var(--ease-out),
    box-shadow 280ms var(--ease-out);
}

.news-archive-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.news-archive-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 21px 21px 0 0;
  isolation: isolate;
}

.news-archive-card__image,
.news-archive-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease-out);
}

.news-archive-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(245, 162, 15, 0.1),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.1) 56%,
      rgba(0, 0, 0, 0.22) 100%
    );
}

.news-archive-card__shine {
  position: absolute;
  inset: -40%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    120deg,
    transparent 42%,
    rgba(245, 162, 15, 0.16) 50%,
    transparent 58%
  );
  transform: translateX(-70%) rotate(8deg);
  will-change: transform, opacity;
}

.news-archive-card__badges {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  z-index: 3;
}

.news-archive-card__badge {
  display: inline-flex;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}

.news-archive-card__badge--server {
  color: var(--color-text);
  background: rgba(245, 162, 15, 0.22);
  border: 1px solid rgba(233, 193, 86, 0.45);
}

.news-archive-card__badge--type {
  color: var(--color-accent-soft);
  background: rgba(16, 15, 13, 0.65);
  border: 1px solid var(--color-border);
}

.news-archive-card__body {
  position: relative;
  z-index: 4;
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: rgba(16, 15, 13, 0.96);
  border-top: 1px solid rgba(233, 193, 86, 0.14);
}

.news-archive-card__date {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

.news-archive-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: normal;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.news-archive-card:hover,
.news-archive-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(233, 193, 86, 0.55);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(245, 162, 15, 0.14);
}

.news-archive-card:hover .news-archive-card__image,
.news-archive-card:focus-within .news-archive-card__image {
  transform: scale(1.05);
}

.news-archive-card:hover .news-archive-card__shine,
.news-archive-card:focus-within .news-archive-card__shine {
  animation: newsArchiveCardShine 900ms ease both;
}

@keyframes newsArchiveCardShine {
  0% {
    opacity: 0;
    transform: translateX(-70%) rotate(8deg);
  }
  35% {
    opacity: 0.32;
  }
  100% {
    opacity: 0;
    transform: translateX(70%) rotate(8deg);
  }
}

/* List row */
.news-archive-row {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(233, 193, 86, 0.2);
  background: rgba(16, 15, 13, 0.72);
  backdrop-filter: blur(8px);
  transition:
    border-color 220ms var(--ease-out),
    background 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}

.news-archive-row__link {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
}

.news-archive-row__media {
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 76px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid rgba(233, 193, 86, 0.18);
  isolation: isolate;
}

.news-archive-row__image,
.news-archive-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--ease-out);
}

.news-archive-row__content {
  min-width: 0;
}

.news-archive-row__date {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.news-archive-row__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: normal;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.news-archive-row__badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.news-archive-row__badge {
  display: inline-flex;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.news-archive-row__badge--server {
  color: var(--color-text);
  background: rgba(245, 162, 15, 0.18);
  border: 1px solid rgba(233, 193, 86, 0.35);
}

.news-archive-row__badge--type {
  color: var(--color-accent-soft);
  background: rgba(11, 9, 8, 0.55);
  border: 1px solid var(--color-border);
}

.news-archive-row__arrow {
  font-size: 1.35rem;
  color: var(--color-accent-soft);
  transition: transform 220ms var(--ease-out), color 220ms var(--ease-out);
}

.news-archive-row:hover,
.news-archive-row:focus-within {
  border-color: rgba(233, 193, 86, 0.48);
  background: rgba(22, 18, 14, 0.82);
  box-shadow: 0 0 24px rgba(245, 162, 15, 0.1);
}

.news-archive-row:hover .news-archive-row__image,
.news-archive-row:focus-within .news-archive-row__image,
.news-archive-row:hover .news-archive-row__media img,
.news-archive-row:focus-within .news-archive-row__media img {
  transform: scale(1.04);
}

.news-archive-row:hover .news-archive-row__arrow,
.news-archive-row:focus-within .news-archive-row__arrow {
  transform: translateX(4px);
  color: var(--color-accent);
}

/* Pagination */
.news-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
}

.news-pagination__nav,
.news-pagination__page {
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(233, 193, 86, 0.24);
  background: rgba(16, 15, 13, 0.65);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.news-pagination__nav:hover:not(:disabled),
.news-pagination__page:hover:not(.is-active) {
  color: var(--color-accent);
  border-color: rgba(233, 193, 86, 0.5);
}

.news-pagination__page.is-active {
  color: var(--color-bg);
  border-color: rgba(233, 193, 86, 0.65);
  background: linear-gradient(135deg, var(--color-cta-from), var(--color-cta-to));
  box-shadow: 0 0 16px rgba(245, 162, 15, 0.22);
}

.news-pagination__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.news-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.news-pagination__ellipsis {
  padding-inline: var(--space-2);
  color: var(--color-text-muted);
}

.news-pagination__compact {
  display: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-inline: var(--space-3);
}

/* Responsive */
@media (min-width: 768px) and (max-width: 1023px) {
  .news-filters {
    flex-wrap: wrap;
  }

  .news-filters__fields {
    flex: 1 1 100%;
  }
}

@media (max-width: 1023px) {
  .news-archive[data-view="cards"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .news-page-toolbar__row {
    flex-direction: column;
    align-items: stretch;
  }

  .news-view-toggle {
    width: 100%;
    justify-content: center;
  }

  .news-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: stretch;
  }

  .news-filters__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .news-filter-field,
  .news-filters__reset,
  .news-dropdown {
    width: 100%;
    min-width: 0;
  }

  .news-dropdown__menu {
    max-height: 280px;
    overflow: auto;
  }

  .news-archive[data-view="cards"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-archive-row__link {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas:
      "thumb content"
      "thumb badges"
      "thumb arrow";
    gap: var(--space-3) var(--space-4);
  }

  .news-archive-row__media {
    grid-area: thumb;
    width: 88px;
    height: 64px;
  }

  .news-archive-row__content {
    grid-area: content;
  }

  .news-archive-row__badges {
    grid-area: badges;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .news-archive-row__arrow {
    grid-area: arrow;
    justify-self: start;
  }

  .news-pagination__pages {
    display: none;
  }

  .news-pagination__compact {
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 420px) {
  .news-pagination__nav {
    min-width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-archive-card,
  .news-archive-row,
  .news-archive-card__image,
  .news-archive-row__image,
  .news-archive-card__shine,
  .news-dropdown__button,
  .news-dropdown__option,
  .news-dropdown__chevron {
    transition: none !important;
  }

  .news-archive-card:hover .news-archive-card__shine,
  .news-archive-card:focus-within .news-archive-card__shine {
    animation: none !important;
    opacity: 0 !important;
    transform: translateX(-70%) rotate(8deg) !important;
  }

  .news-archive.is-rendering .news-archive-card,
  .news-archive.is-rendering .news-archive-row {
    animation: none !important;
  }
}