/**
 * pages.css
 * Page-specific layout and overrides that don't belong in components.
 * Depends on: tokens.css, layout.css, components.css
 */

/* ══════════════════════════════════════════════
   HOME PAGE
══════════════════════════════════════════════ */
.home-content-section {
  padding-block: var(--space-8);
}
.home-content-section + .home-content-section {
  border-top: 1px solid var(--c-border);
}
.home-alt-bg {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--space-8);
  margin-block: var(--space-4);
}

/* ══════════════════════════════════════════════
   CATEGORY PAGE
══════════════════════════════════════════════ */
.category-page .page-hero {
  padding: var(--space-8) 0 var(--space-6);
  text-align: left;
}
.category-page .page-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* ══════════════════════════════════════════════
   ARTICLE PAGE
══════════════════════════════════════════════ */
.article-page {
  padding-block: var(--space-8);
}
/* Sticky article progress bar */
.article-progress {
    display: none !important;
}

/* ══════════════════════════════════════════════
   SEARCH PAGE
══════════════════════════════════════════════ */
.search-page .search-hero {
  padding: var(--space-10) 0 var(--space-8);
}
.search-results-header {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.search-results-header strong { color: var(--c-text-primary); }

/* ══════════════════════════════════════════════
   E-PAPER PAGE
══════════════════════════════════════════════ */
.epaper-viewer {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.epaper-viewer__masthead {
  background: var(--c-charcoal);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.epaper-viewer__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--c-white);
}
.epaper-viewer__title em { color: var(--c-red); font-style: normal; }
.epaper-viewer__date {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
}
.epaper-viewer__img {
  width: 100%;
  display: block;
}
.epaper-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-5);
}
.epaper-edition {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--duration-sm), transform var(--duration-sm);
}
.epaper-edition:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.epaper-edition__img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.epaper-edition__label {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  color: var(--c-text-primary);
  border-top: 1px solid var(--c-border);
}

/* ══════════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════════ */
.about-stats-strip {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.about-stats-grid .stat-item {
  border-right: 1px solid var(--c-border);
}
.about-stats-grid .stat-item:last-child { border-right: none; }
@media (max-width: 767px) {
  .about-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .about-stats-grid .stat-item:nth-child(2) { border-right: none; }
}
@media (max-width: 479px) {
  .about-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-12);
}
@media (max-width: 767px) {
  .about-content { grid-template-columns: 1fr; gap: var(--space-6); }
}
.about-img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}
.about-body p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--c-text-secondary);
  margin-bottom: var(--space-4);
}
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}
@media (max-width: 767px) {
  .about-values-grid { grid-template-columns: 1fr; }
}
.about-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1023px) { .about-team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { .about-team-grid { grid-template-columns: repeat(2, 1fr); } }

/* ══════════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════════ */
.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-12);
  padding-block: var(--space-12);
}
@media (max-width: 1023px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-8); }
}
.contact-form-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
@media (max-width: 479px) {
  .contact-form-card { padding: var(--space-5); }
}
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.contact-form-grid .form-group--full { grid-column: 1 / -1; }
@media (max-width: 639px) {
  .contact-form-grid { grid-template-columns: 1fr; }
}
.contact-info-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

/* ══════════════════════════════════════════════
   404 / ERROR PAGE
══════════════════════════════════════════════ */
.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8);
  background: var(--c-bg);
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-border-dark);
  position: relative;
  margin-bottom: var(--space-4);
}
.error-page__code span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-red);
  opacity: 0.08;
  font-size: inherit;
}
.error-page__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--c-text-primary);
  margin-bottom: var(--space-3);
}
.error-page__desc {
  font-size: var(--text-base);
  color: var(--c-text-muted);
  max-width: 480px;
  line-height: 1.7;
  margin-bottom: var(--space-8);
}
.error-page__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}
.error-page__logo {
  margin-bottom: var(--space-10);
}

/* ══════════════════════════════════════════════
   DARK MODE COMPONENT OVERRIDES
   (token overrides are in tokens.css; these are
    structural/visual tweaks not covered by tokens)
══════════════════════════════════════════════ */
[data-theme="dark"] .news-card {
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
[data-theme="dark"] .news-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
[data-theme="dark"] .hero-main__img,
[data-theme="dark"] .hero-stack__img {
  opacity: 0.7;
}
[data-theme="dark"] .site-header {
  border-bottom-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .topbar {
  border-bottom-color: var(--c-red);
}
[data-theme="dark"] .form-control {
  background: var(--c-surface);
  color: var(--c-text-primary);
  border-color: var(--c-border);
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    var(--c-border) 25%,
    rgba(255,255,255,0.04) 50%,
    var(--c-border) 75%
  );
  background-size: 200% 100%;
}
[data-theme="dark"] .tag-pill {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
}
[data-theme="dark"] .tag-pill:hover {
  background: var(--c-red);
  border-color: var(--c-red);
  color: #fff;
}
[data-theme="dark"] .cat-pill {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
}
[data-theme="dark"] .btn--secondary {
  color: var(--c-text-primary);
  border-color: var(--c-border);
}
[data-theme="dark"] .btn--secondary:hover {
  background: rgba(255,255,255,0.08);
  color: var(--c-text-primary);
}

/* ══════════════════════════════════════════════
   THEME TOGGLE BUTTON
══════════════════════════════════════════════ */
.theme-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 4px 10px;
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition:
    background var(--duration-xs),
    color var(--duration-xs),
    border-color var(--duration-xs);
  white-space: nowrap;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.1);
  color: var(--c-white);
  border-color: rgba(255,255,255,0.4);
}

/* ══════════════════════════════════════════════
   RESPONSIVE UTILITY OVERRIDES
══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}