/*
Theme Name: Atlas Tools — Astra Child
Template: astra
Version: 0.5.2
Description: Premium tool directory presentation for Astra and Tools Core.
Text Domain: atlas-tools
*/

/* ==========================================================================
   BLOG / ARTICLE 3-COLUMN GRID OVERRIDES
   ========================================================================== */

.article-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  width: 100% !important;
  margin-top: 24px !important;
  margin-bottom: 32px !important;
}

@media (max-width: 960px) {
  .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

@media (max-width: 600px) {
  .article-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

.article-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--surface, rgba(255, 255, 255, 0.82)) !important;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.85)) !important;
  border-radius: var(--radius-lg, 16px) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
  height: 100% !important;
}

.article-card__image-link {
  display: block !important;
  overflow: hidden !important;
}

.article-card__image {
  position: relative !important;
  width: 100% !important;
  height: 180px !important;
  max-height: 180px !important;
  overflow: hidden !important;
}

.article-card__image img {
  width: 100% !important;
  height: 100% !important;
  max-height: 180px !important;
  object-fit: cover !important;
  display: block !important;
}

.article-card__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 20px !important;
}

.article-card__title {
  font-size: 1.12rem !important;
  font-weight: 750 !important;
  line-height: 1.38 !important;
  margin: 0 0 10px 0 !important;
}

.article-card__title a {
  color: var(--ink, #0f172a) !important;
  text-decoration: none !important;
}

.article-card__excerpt {
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  color: var(--ink-soft, #334155) !important;
  margin: 0 0 16px 0 !important;
  flex: 1 !important;
}

/* ==========================================================================
   HIGH-CONTRAST DUAL THEME COLORING FIX (HERO & CORE CONTAINERS)
   ========================================================================== */

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #page,
html[data-theme="dark"] .site,
html[data-theme="dark"] #content,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .ast-container,
html[data-theme="dark"] .ast-separate-container,
html[data-theme="dark"] .ast-page-builder-template,
html[data-theme="dark"] main,
html[data-theme="dark"] #main-content {
  color: #f8fafc !important;
  background-color: #090d16 !important;
  background-image: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.22) 0px, transparent 55%),
                    radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.18) 0px, transparent 55%),
                    radial-gradient(at 50% 100%, rgba(139, 92, 246, 0.16) 0px, transparent 55%) !important;
}

html[data-theme="dark"] .hero {
  background-color: #090d16 !important;
  background-image: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.24) 0px, transparent 55%),
                    radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.20) 0px, transparent 55%),
                    radial-gradient(at 50% 100%, rgba(139, 92, 246, 0.18) 0px, transparent 55%) !important;
}

html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero__copy h1 {
  color: #f8fafc !important;
  text-shadow: 0 2px 25px rgba(0, 0, 0, 0.8) !important;
}

html[data-theme="dark"] .hero__copy > p {
  color: #cbd5e1 !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] .hero h1 em {
  background: linear-gradient(135deg, #818cf8 0%, #22d3ee 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="dark"] .eyebrow {
  color: #a5b4fc !important;
  background: rgba(99, 102, 241, 0.20) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] #page,
html[data-theme="light"] .site,
html[data-theme="light"] #content,
html[data-theme="light"] .site-content,
html[data-theme="light"] .ast-container,
html[data-theme="light"] .ast-separate-container,
html[data-theme="light"] .ast-page-builder-template,
html[data-theme="light"] main,
html[data-theme="light"] #main-content {
  color: #0f172a !important;
  background-color: #f8fafc !important;
  background-image: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.10) 0px, transparent 50%),
                    radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.08) 0px, transparent 50%),
                    radial-gradient(at 50% 100%, rgba(16, 185, 129, 0.06) 0px, transparent 50%) !important;
}

html[data-theme="light"] .hero {
  background-color: #f8fafc !important;
  background-image: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.08) 0px, transparent 50%),
                    radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.06) 0px, transparent 50%),
                    radial-gradient(at 50% 100%, rgba(16, 185, 129, 0.05) 0px, transparent 50%) !important;
}

html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero__copy h1 {
  color: #0f172a !important;
}

html[data-theme="light"] .hero__copy > p {
  color: #334155 !important;
}

html[data-theme="light"] .hero h1 em {
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="light"] .eyebrow {
  color: #4f46e5 !important;
  background: rgba(79, 70, 229, 0.08) !important;
  border-color: rgba(79, 70, 229, 0.18) !important;
}