/*
 * gazette-news.css
 * Standardizes all NestDaddy news search result pages to match
 * the Financial Hub (index_financial) design language.
 * Drop this after style.css — no HTML changes needed.
 *
 * Covers: results_news, results_financialnews, results_technews, results_localnews
 */

/* ── 1. Design tokens ── */
:root {
  --gz-ink:    #15181e;
  --gz-ink-2:  #4a515c;
  --gz-ink-3:  #78808c;
  --gz-paper:  #f4f5f7;
  --gz-card:   #ffffff;
  --gz-rule:   #d2d7de;
  --gz-band:   #e7eaef;
  --gz-press:  #0a7c4e;
  --gz-shadow: 0 1px 2px rgba(21,24,30,.05), 0 8px 24px -14px rgba(21,24,30,.18);
  --gz-serif:  "Newsreader", Georgia, "Times New Roman", serif;
  --gz-sans:   "Archivo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --gz-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── 2. Page body ── */
body.results-page {
  font-family: var(--gz-sans) !important;
  background: var(--gz-paper) !important;
  color: var(--gz-ink) !important;
}

/* ── 3. Results container background ── */
.results-container {
  background: var(--gz-paper) !important;
}

/* ── 4. News card grids — mobile-first ── */
.global-news-grid,
.financial-news-grid,
.tech-news-grid,
.local-news-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
  margin-top: 1.25rem !important;
}
@media (min-width: 540px) {
  .global-news-grid,
  .financial-news-grid,
  .tech-news-grid,
  .local-news-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.1rem !important;
  }
}
@media (min-width: 960px) {
  .global-news-grid,
  .financial-news-grid,
  .tech-news-grid,
  .local-news-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
  }
}

/* ── 5. Cards ── */
.global-news-card,
.financial-news-card,
.tech-news-card,
.local-news-card {
  background: var(--gz-card) !important;
  border: 1px solid var(--gz-rule) !important;
  border-radius: 0 !important;
  box-shadow: var(--gz-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease !important;
}

.global-news-card:hover,
.financial-news-card:hover,
.tech-news-card:hover,
.local-news-card:hover {
  box-shadow: 0 4px 24px -8px rgba(21,24,30,.22) !important;
}

/* ── 6. Image containers — 16:9 fixed aspect ── */
.global-news-image,
.financial-news-image,
.tech-news-image,
.local-news-image {
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: var(--gz-band) !important;
  flex-shrink: 0 !important;
}

.global-news-image img,
.financial-news-image img,
.tech-news-image img,
.local-news-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .4s ease !important;
}

.global-news-card:hover .global-news-image img,
.financial-news-card:hover .financial-news-image img,
.tech-news-card:hover .tech-news-image img,
.local-news-card:hover .local-news-image img {
  transform: scale(1.04) !important;
}

/* ── 7. Content padding ── */
.global-news-content,
.financial-news-content,
.tech-news-content,
.local-news-content {
  padding: 1rem 1.1rem 1.2rem !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: .5rem !important;
}

/* ── 8. Category badges — gazette tag style ── */
.global-news-badge,
.global-news-badge-header,
.financial-news-category-badge,
.financial-news-badge-header,
.tech-news-category-badge,
.tech-news-badge-header,
.local-news-badge,
.local-news-badge-header {
  font-family: var(--gz-mono) !important;
  font-size: .6rem !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: .22rem .55rem !important;
  display: inline-block !important;
  line-height: 1 !important;
  align-self: flex-start !important;
}

/* ── 9. Source — IBM Plex Mono, press green ── */
.global-news-source,
.financial-news-source,
.tech-news-source,
.local-news-source {
  font-family: var(--gz-mono) !important;
  font-size: .67rem !important;
  font-weight: 600 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--gz-press) !important;
}

/* ── 10. Date — muted mono ── */
.global-news-date,
.financial-news-date,
.tech-news-date,
.local-news-date {
  font-family: var(--gz-mono) !important;
  font-size: .64rem !important;
  color: var(--gz-ink-3) !important;
  letter-spacing: .04em !important;
}

/* ── 11. Meta row ── */
.global-news-meta,
.financial-news-meta,
.tech-news-meta,
.local-news-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .5rem !important;
}

.global-news-meta-left,
.financial-news-meta-left,
.tech-news-meta-left,
.local-news-meta-left {
  display: flex !important;
  align-items: center !important;
  gap: .4rem !important;
}

/* ── 12. Title — Newsreader ── */
.global-news-title,
.financial-news-title,
.tech-news-title,
.local-news-title {
  font-family: var(--gz-serif) !important;
  font-weight: 700 !important;
  font-size: 1.12rem !important;
  line-height: 1.2 !important;
  color: var(--gz-ink) !important;
  letter-spacing: -.01em !important;
  margin: 0 !important;
  transition: color .14s !important;
}

.global-news-card-link:hover .global-news-title,
.financial-news-card-link:hover .financial-news-title,
.tech-news-card-link:hover .tech-news-title,
.local-news-card-link:hover .local-news-title {
  color: var(--gz-press) !important;
}

/* ── 13. Description — Archivo ── */
.global-news-description,
.financial-news-description,
.tech-news-description,
.local-news-description {
  font-family: var(--gz-sans) !important;
  font-size: .88rem !important;
  color: var(--gz-ink-2) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ── 14. Results info line ── */
.results-info {
  font-family: var(--gz-mono) !important;
  font-size: .72rem !important;
  letter-spacing: .04em !important;
  color: var(--gz-ink-3) !important;
  text-transform: uppercase !important;
  margin-bottom: .5rem !important;
  margin-top: 1rem !important;
}

.results-info strong {
  color: var(--gz-ink) !important;
  font-weight: 600 !important;
}

/* ── 15. Pagination ── */
.pagination {
  display: flex !important;
  align-items: center !important;
  gap: .4rem !important;
  margin-top: 2rem !important;
  font-family: var(--gz-mono) !important;
  font-size: .78rem !important;
}

.page-link,
.page-number {
  padding: .5rem .85rem !important;
  border: 1px solid var(--gz-rule) !important;
  background: var(--gz-card) !important;
  color: var(--gz-ink-2) !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  transition: background .15s, color .15s !important;
}

.page-link:hover,
.page-number:hover {
  background: var(--gz-ink) !important;
  color: #fff !important;
  border-color: var(--gz-ink) !important;
}

.page-number.active {
  background: var(--gz-press) !important;
  color: #fff !important;
  border-color: var(--gz-press) !important;
  font-weight: 700 !important;
}

/* ── 16. Related searches ── */
.related-searches {
  margin-top: 1.5rem !important;
  padding-top: 1.2rem !important;
  border-top: 1px solid var(--gz-rule) !important;
}

.related-title {
  font-family: var(--gz-mono) !important;
  font-size: .68rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--gz-ink-3) !important;
  margin-bottom: .6rem !important;
}

.related-item {
  font-family: var(--gz-sans) !important;
  font-size: .82rem !important;
  color: var(--gz-press) !important;
  border: 1px solid var(--gz-rule) !important;
  padding: .35rem .75rem !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin: .25rem !important;
  transition: background .15s, color .15s !important;
}

.related-item:hover {
  background: var(--gz-ink) !important;
  color: #fff !important;
  border-color: var(--gz-ink) !important;
}

/* ── 17. No results ── */
.no-results h2 {
  font-family: var(--gz-serif) !important;
  color: var(--gz-ink) !important;
}

.no-results p {
  font-family: var(--gz-sans) !important;
  color: var(--gz-ink-2) !important;
}

/* ── 18. Tab bar active state — green accent ── */
.search-tabs-row1 .tab.active {
  color: var(--gz-press) !important;
  border-bottom-color: var(--gz-press) !important;
}

/* ── 19. Financial filters bar ── */
.financial-news-filters {
  background: var(--gz-card) !important;
  border: 1px solid var(--gz-rule) !important;
  border-radius: 0 !important;
  padding: 1rem 1.2rem !important;
}

/* ── 20. Cards — full width on small phones ── */
@media (max-width: 400px) {
  .global-news-content,
  .financial-news-content,
  .tech-news-content,
  .local-news-content {
    padding: .8rem .85rem 1rem !important;
  }
  .global-news-title,
  .financial-news-title,
  .tech-news-title,
  .local-news-title {
    font-size: 1rem !important;
  }
}

/* ── 21. Tab bar — horizontal scroll on mobile ── */
.search-tabs-row1 {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
}
.search-tabs-row1::-webkit-scrollbar { display: none !important; }
.search-tabs-row1 .tab {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ── 22. Results container padding on mobile ── */
@media (max-width: 480px) {
  .results-container {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
}