/**========================================================================
 *  Saba Media Group — pages.css
 *  Scoped styles for shared static/utility pages: About Us, Contact Us,
 *  Search Results, 404. Requires base.css (design tokens + .section-label,
 *  .tag, .btn utilities are consumed from there).
 *
 *  Sections: page hero → stat strip → platform cards → value cards
 *            → milestone cards → leader spotlight → award cards
 *            → contact info panel → contact form → cta banner
 *            → search bar → filter chips → result cards
 *            → error page (404) → responsive
 *========================================================================**/

/*===================================================================
  Page content wrapper — vertical rhythm between sections
===================================================================*/

.page-content {
  padding-block: var(--sn-space-lg) var(--sn-space-2xl);
}

.page-content > * + * {
  margin-block-start: var(--sn-space-2xl);
}

/*===================================================================
  Page Hero
===================================================================*/

.page-hero {
  margin-block-start: 0;
}

.page-hero__eyebrow {
  margin-block-end: var(--sn-space-sm);
}

.page-hero__title {
  margin-block-end: var(--sn-space-sm);
}

.page-hero__lead {
  max-width: 42rem;
  font-size: var(--sn-fs-md);
  color: var(--sn-ink-soft);
}

.page-hero__points {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-block-start: var(--sn-space-md);
  list-style: none;
  padding: 0;
}

.page-hero__points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink-soft);
}

.page-hero__points i {
  color: var(--sn-editorial);
}

.page-hero__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--sn-radius-lg);
  overflow: hidden;
  box-shadow: var(--sn-shadow);
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*===================================================================
  Stat strip
===================================================================*/

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-lg);
  margin-block-start: var(--sn-space-lg);
  padding-block-start: var(--sn-space-lg);
  border-block-start: 1px solid var(--sn-hairline);
}

.stat-strip__value {
  display: block;
  font-size: var(--sn-fs-xl);
  font-weight: 700;
  color: var(--sn-editorial);
}

.stat-strip__label {
  font-size: var(--sn-fs-2xs);
  color: var(--sn-ink-muted);
}

/*===================================================================
  Platform card (ecosystem grid)
===================================================================*/

.platform-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--sn-space-xs);
  padding: var(--sn-space-md);
  background-color: var(--sn-surface);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-lg);
  transition: box-shadow var(--sn-transition-fast), border-color var(--sn-transition-fast),
    transform var(--sn-transition-fast);
}

.platform-card:hover {
  border-color: transparent;
  box-shadow: var(--sn-shadow-lift);
  transform: translateY(-2px);
}

.platform-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
  color: var(--sn-editorial);
  background-color: rgba(var(--primaryColorRGB), 0.08);
  border-radius: 50%;
}

.platform-card__title {
  font-size: var(--sn-fs-md);
}

.platform-card__desc {
  flex-grow: 1;
  color: var(--sn-ink-soft);
  font-size: var(--sn-fs-xs);
}

.platform-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--sn-fs-2xs);
  font-weight: 700;
  color: var(--sn-link);
}

.platform-card__link:hover {
  color: var(--sn-link-deep);
}

/*===================================================================
  Value card (mission / editorial principles grid)
===================================================================*/

.value-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--sn-space-2xs);
  padding: var(--sn-space-md);
  background-color: var(--sn-surface-sunken);
  border-radius: var(--sn-radius-lg);
}

.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-block-end: 0.25rem;
  font-size: 1.05rem;
  color: var(--sn-link);
  background-color: var(--sn-surface);
  border-radius: var(--sn-radius);
  box-shadow: var(--sn-shadow-sm);
}

.value-card__title {
  font-size: var(--sn-fs-sm);
}

.value-card__desc {
  color: var(--sn-ink-soft);
  font-size: var(--sn-fs-xs);
}

/*===================================================================
  Milestone card (history timeline)
===================================================================*/

.milestone-card {
  position: relative;
  height: 100%;
  padding: var(--sn-space-md);
  overflow: hidden;
  background-color: var(--sn-surface);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-lg);
}

.milestone-card__year {
  position: absolute;
  inset-inline-end: 0.5rem;
  inset-block-start: 0.5rem;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sn-watermark);
}

.milestone-card__title {
  position: relative;
  font-size: var(--sn-fs-sm);
  margin-block-end: 0.35rem;
}

.milestone-card__desc {
  position: relative;
  color: var(--sn-ink-soft);
  font-size: var(--sn-fs-xs);
}

/*===================================================================
  Leader spotlight (managing editor profile — single, full-width band)
===================================================================*/

.leader-spotlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sn-space-lg);
  padding: var(--sn-space-lg);
  background-color: var(--sn-surface-sunken);
  border-radius: var(--sn-radius-lg);
}

.leader-spotlight__media {
  flex-shrink: 0;
  width: 11rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--sn-radius);
  overflow: hidden;
  box-shadow: var(--sn-shadow);
}

.leader-spotlight__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leader-spotlight__body {
  flex: 1 1 20rem;
  min-width: 0;
}

.leader-spotlight__name {
  font-size: var(--sn-fs-lg);
}

.leader-spotlight__role {
  margin-block-start: 0.2rem;
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink-muted);
}

.leader-spotlight__quote {
  position: relative;
  margin-block-start: var(--sn-space-sm);
  padding-inline-start: 1.5rem;
  font-size: var(--sn-fs-sm);
  color: var(--sn-ink-soft);
}

.leader-spotlight__quote i {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.2rem;
  color: var(--sn-editorial);
}

.leader-spotlight__note {
  margin-block-start: var(--sn-space-sm);
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink-soft);
}

/*===================================================================
  Award card
===================================================================*/

.award-card {
  display: flex;
  align-items: center;
  gap: var(--sn-space-sm);
  height: 100%;
  padding: var(--sn-space-md);
  background-color: var(--sn-surface);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-lg);
}

.award-card__media {
  flex-shrink: 0;
  width: 4.5rem;
  aspect-ratio: 1 / 1;
}

.award-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.award-card__title {
  font-size: var(--sn-fs-sm);
}

.award-card__desc {
  font-size: var(--sn-fs-2xs);
  color: var(--sn-ink-soft);
}

/*===================================================================
  Contact info panel (dark)
===================================================================*/

.contact-info {
  height: 100%;
  padding: var(--sn-space-lg);
  background-color: var(--sn-ink);
  color: rgba(255, 255, 255, 0.78);
  border-radius: var(--sn-radius-lg);
}

.contact-info__title {
  color: var(--lightTextColor);
  margin-block-end: var(--sn-space-md);
}

.contact-info__list {
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-md);
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.contact-info__icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--lightTextColor);
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.contact-info__label {
  display: block;
  font-size: var(--sn-fs-3xs);
  color: rgba(255, 255, 255, 0.5);
  margin-block-end: 0.15rem;
}

.contact-info__value {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--sn-fs-xs);
}

a.contact-info__value:hover {
  color: var(--lightTextColor);
}

.contact-info__socials {
  margin-block-start: var(--sn-space-lg);
  padding-block-start: var(--sn-space-md);
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-info__socials-label {
  display: block;
  margin-block-end: 0.6rem;
  font-size: var(--sn-fs-2xs);
  color: rgba(255, 255, 255, 0.6);
}

.contact-info__social-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contact-info__social-grid a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-size: var(--sn-fs-2xs);
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 2rem;
}

.contact-info__social-grid a:hover {
  color: var(--lightTextColor);
  background-color: rgba(255, 255, 255, 0.16);
}

/*===================================================================
  Contact form panel (light)
===================================================================*/

.contact-form {
  height: 100%;
  padding: var(--sn-space-lg);
  background-color: var(--sn-surface);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-lg);
}

.contact-form__title {
  margin-block-end: 0.35rem;
}

.contact-form__desc {
  margin-block-end: var(--sn-space-md);
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink-soft);
}

.field {
  margin-block-end: var(--sn-space-md);
}

.field__label {
  display: block;
  margin-block-end: 0.4rem;
  font-size: var(--sn-fs-2xs);
  font-weight: 700;
  color: var(--sn-ink-soft);
}

.field__control {
  width: 100%;
  min-height: 46px;
  padding-inline: 0.875rem;
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink);
  background-color: var(--sn-surface-sunken);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-sm);
  transition: border-color var(--sn-transition-fast);
}

.field__control:focus {
  outline: none;
  border-color: var(--sn-link);
}

textarea.field__control {
  min-height: 140px;
  padding-block: 0.75rem;
  resize: vertical;
}

select.field__control {
  cursor: pointer;
}

.contact-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-block: var(--sn-space-xl);
  text-align: center;
}

.contact-form__success i {
  font-size: 2.25rem;
  color: var(--sn-positive);
}

.contact-form__success p {
  max-width: 24rem;
  color: var(--sn-ink-soft);
  font-size: var(--sn-fs-sm);
}

/*===================================================================
  CTA banner
===================================================================*/

.cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sn-space-md);
  padding: var(--sn-space-lg);
  background-color: var(--sn-ink);
  color: rgba(255, 255, 255, 0.78);
  border-radius: var(--sn-radius-lg);
}

.cta-banner__title {
  color: var(--lightTextColor);
  margin-block-end: 0.25rem;
}

.cta-banner__desc {
  font-size: var(--sn-fs-xs);
}

/*===================================================================
  Search — input bar
===================================================================*/

.search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 58px;
  margin-block-start: var(--sn-space-lg);
  padding-inline: 1.25rem 0.5rem;
  background-color: var(--sn-surface-sunken);
  border: 1px solid var(--sn-hairline);
  border-radius: 3rem;
  transition: border-color var(--sn-transition-fast);
}

.search-bar:focus-within {
  border-color: var(--sn-link);
}

.search-bar__field {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  font-size: var(--sn-fs-md);
  color: var(--sn-ink);
}

.search-bar__field:focus {
  outline: none;
}

.search-bar__submit {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--lightTextColor);
  background-color: var(--sn-editorial);
  border-radius: 50%;
  transition: background-color var(--sn-transition-fast);
}

.search-bar__submit:hover {
  background-color: var(--sn-editorial-deep);
}

/*===================================================================
  Search — toolbar (platform filters + sort)
===================================================================*/

.search-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sn-space-sm);
  margin-block: var(--sn-space-lg);
}

.filter-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-chip {
  padding: 0.4rem 1rem;
  font-size: var(--sn-fs-2xs);
  font-weight: 500;
  color: var(--sn-ink-soft);
  background-color: var(--sn-surface-sunken);
  border-radius: 2rem;
  transition: background-color var(--sn-transition-fast), color var(--sn-transition-fast);
}

.filter-chip:hover {
  color: var(--sn-ink);
}

.filter-chip.is-active {
  color: var(--lightTextColor);
  background-color: var(--sn-editorial);
}

.search-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
  font-size: var(--sn-fs-2xs);
  color: var(--sn-ink-muted);
}

.search-sort__control {
  min-height: 38px;
  padding-inline: 0.75rem;
  font-size: var(--sn-fs-2xs);
  color: var(--sn-ink);
  background-color: var(--sn-surface);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-sm);
  cursor: pointer;
}

.search-meta {
  margin-block-end: var(--sn-space-md);
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink-muted);
}

/*===================================================================
  Search — result cards
===================================================================*/

.result-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--sn-surface);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-lg);
  transition: box-shadow var(--sn-transition-fast), transform var(--sn-transition-fast);
}

.result-card:hover {
  box-shadow: var(--sn-shadow-lift);
  transform: translateY(-2px);
}

.result-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--sn-surface-sunken);
}

.result-card--cover .result-card__media {
  aspect-ratio: 3 / 4;
}

.result-card__media img {
  width: 100%;
  aspect-ratio: 16/9;
  height: 100%;
  object-fit: cover;
}

.result-card__platform {
  position: absolute;
  inset-block-start: 0.6rem;
  inset-inline-start: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--lightTextColor);
  background-color: rgba(15, 23, 42, 0.72);
  border-radius: 2rem;
}

.result-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.4rem;
  padding: var(--sn-space-sm);
}

.result-card__title {
  font-size: var(--sn-fs-sm);
}

.result-card__excerpt {
  flex-grow: 1;
  color: var(--sn-ink-soft);
  font-size: var(--sn-fs-2xs);
}

.result-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--sn-fs-3xs);
  color: var(--sn-ink-muted);
}

.search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-block: var(--sn-space-2xl);
  text-align: center;
  color: var(--sn-ink-muted);
}

.search-empty i {
  font-size: 2.25rem;
  color: var(--sn-hairline-strong);
}

.search-more {
  display: flex;
  justify-content: center;
  margin-block-start: var(--sn-space-lg);
}

/*===================================================================
  Error page (404) — breaking-ticker + glitching status code
===================================================================*/

.error-hero {
  padding-block: var(--sn-space-lg) var(--sn-space-xl);
}

.error-ticker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.4rem 1rem;
  margin-block-end: var(--sn-space-lg);
  font-size: var(--sn-fs-2xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background-color: var(--sn-ink);
  border-radius: 2rem;
}

.error-ticker__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  color: var(--sn-editorial-bright);
}

.error-ticker__label i {
  animation: errorTickerBlink 1.4s infinite;
}

.error-ticker__list {
  max-width: 22rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@keyframes errorTickerBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.error-code {
  position: relative;
  display: inline-block;
  margin-block: var(--sn-space-md);
  font-size: clamp(5rem, 3rem + 10vw, 11rem);
  font-weight: 700;
  line-height: 1;
  color: var(--sn-ink);
}

.error-code::before,
.error-code::after {
  content: attr(data-text);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 100%;
}

.error-code::before {
  color: var(--sn-editorial-bright);
  clip-path: inset(0 0 100% 0);
  animation: errorGlitchTop 3.4s infinite linear;
}

.error-code::after {
  color: var(--sn-link);
  clip-path: inset(100% 0 0 0);
  animation: errorGlitchBottom 3.8s infinite linear;
}

@keyframes errorGlitchTop {
  0%,
  92%,
  100% {
    clip-path: inset(0 0 100% 0);
    transform: translate(0, 0);
    opacity: 0;
  }
  93% {
    clip-path: inset(0 0 60% 0);
    transform: translate(-3px, -1px);
    opacity: 0.8;
  }
  95% {
    clip-path: inset(20% 0 40% 0);
    transform: translate(3px, 1px);
    opacity: 0.8;
  }
  97% {
    clip-path: inset(60% 0 0 0);
    transform: translate(-2px, 0);
    opacity: 0.6;
  }
}

@keyframes errorGlitchBottom {
  0%,
  90%,
  100% {
    clip-path: inset(100% 0 0 0);
    transform: translate(0, 0);
    opacity: 0;
  }
  91% {
    clip-path: inset(50% 0 10% 0);
    transform: translate(2px, 1px);
    opacity: 0.7;
  }
  94% {
    clip-path: inset(10% 0 70% 0);
    transform: translate(-3px, -1px);
    opacity: 0.7;
  }
  96% {
    clip-path: inset(0 0 90% 0);
    transform: translate(2px, 0);
    opacity: 0.5;
  }
}

.error-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sn-space-md);
  max-width: 32rem;
  margin-inline: auto;
  margin-block-start: var(--sn-space-lg);
}

.error-hero__actions .search-bar {
  width: 100%;
  margin-block-start: 0;
}

/*===================================================================
  Responsive
===================================================================*/

@media (max-width: 992px) {
  .page-hero__media {
    aspect-ratio: 16 / 9;
    margin-block-start: var(--sn-space-lg);
  }
}

@media (max-width: 576px) {
  .stat-strip {
    gap: var(--sn-space-md);
  }

  .leader-spotlight {
    flex-direction: column;
    text-align: center;
  }

  .leader-spotlight__media {
    width: 8rem;
  }

  .leader-spotlight__quote {
    text-align: start;
  }

  .cta-banner {
    text-align: center;
    justify-content: center;
  }

  .search-sort {
    margin-inline-start: 0;
    width: 100%;
  }

  .search-sort__control {
    flex: 1;
  }

  .error-ticker__list {
    max-width: 12rem;
  }

  .error-code {
    font-size: clamp(4rem, 3rem + 12vw, 7rem);
  }
}