/*
 * BRAINSCIENTIST - Article/Text Cards
 * Modern card grid with proper mobile display
 * FIXES: Cards now visible in portrait/mobile view
 */
/* Article section container */
section.article-section {
  padding: var(--space-lg) 1rem;
  max-width: 1100px;
  margin: 0 auto;
}
/* Row/grid container */
section.article-section .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}
/* Individual article cards */
.article-container {
  flex: 1 1 300px;
  max-width: 500px;
  min-width: 280px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  margin: 0;
  /* Remove old margins, use gap instead */
  /* Modern subtle shadow instead of heavy drop-shadow */
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  /* Smooth hover transition */
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  /* CRITICAL: Ensure visibility - override any inline styles from GSAP */
  opacity: 1 !important;
  transform: none !important;
}
/* Make sure GSAP animated cards are visible once animation completes */
.article-container[style*="opacity"] {
  opacity: 1 !important;
}
/* Hover state */
.article-container:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}
/* Card inner wrapper */
.article-container .inner {
  height: 100%;
}
/* Card title */
.article-container .article-title {
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  font-size: 1.375rem;
  font-weight: 600;
}
/* Card body text */
.article-container .article-body {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 0;
}
.article-container .article-body br {
  display: block;
  content: "";
  margin-bottom: 0.5em;
}
/* Emphasis in cards */
.article-container .article-body em {
  color: var(--color-primary);
  font-style: italic;
}
/* === MOBILE / PORTRAIT VIEW FIX === */
@media screen and (max-width: 768px) {
  section.article-section {
    padding: var(--space-md) 1rem;
  }
  section.article-section .row {
    flex-direction: column;
    gap: var(--space-sm);
  }
  .article-container {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: unset;
    padding: var(--space-md);
    /* FORCE VISIBILITY on mobile */
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
  }
  .article-container .article-title {
    font-size: 1.25rem;
  }
}
/* Tablet */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  section.article-section {
    padding: var(--space-lg) 1.5rem;
  }
  .article-container {
    flex: 1 1 calc(50% - var(--space-md));
    max-width: calc(50% - var(--space-md));
  }
}
/* Desktop */
@media screen and (min-width: 1025px) {
  section.article-section {
    padding: var(--space-xl) 2rem;
  }
  section.article-section .row {
    gap: var(--space-lg);
  }
  .article-container {
    padding: var(--space-xl) var(--space-lg);
  }
}
/* Legacy section.article support */
section.article {
  background: var(--color-background-alt);
  padding: var(--space-xl) 0;
}
section.article .article-container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-lg);
}
section.article .article-body {
  color: var(--color-text);
}

/*******************************************************************/
/* ftrtch dino */
/* [type: CSS] [file:home-text] [58.383] DESIGN*/
/*******************************************************************/
/* 0.2 P>P */
/* db 114 */