/* ==========================================================================
   Aprotime Articles / Blog Page Styles
   - Matches Figma canvas specifications (1440px canvas, responsive to mobile)
   - Consistent typography: DM Sans, Outfit, Geist, Inter
   - Exact hex colors: #CE0000, #1F262D, #3F3F3F, #FAFAFA, #F3F4F6, #FFFFFF
   ========================================================================== */

/* Main Page Container */
.articles-page-wrapper {
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
  color: var(--color-text-main, #1F262D);
  font-family: var(--font-family-base, 'DM Sans', -apple-system, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.articles-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================================
   Section 1: Hero Header & Search Bar (293px Figma)
   ========================================================================== */
.articles-hero-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 1.5rem 3rem; /* 64px 24px 48px */
  box-sizing: border-box;
}

.articles-hero-container {
  width: 100%;
  max-width: 72rem; /* 1152px */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.articles-title {
  margin: 0;
  font-family: var(--font-family-base, 'DM Sans', sans-serif);
  font-weight: 500;
  font-size: 2.625rem; /* 42px */
  line-height: 3rem; /* 48px */
  letter-spacing: -0.075rem; /* -1.2px */
  color: #1F262D;
}

.articles-subtitle {
  margin: 1rem 0 0; /* 16px */
  max-width: 42rem; /* 672px */
  font-family: var(--font-family-base, 'DM Sans', sans-serif);
  font-weight: 400;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5rem; /* 24px */
  color: rgba(63, 63, 63, 0.65);
}

/* Search Bar Pill (576px x 48px, radius 33554400px, #FAFAFA, border #E5E7EB) */
.articles-search-wrapper {
  margin-top: 2rem; /* 32px */
  width: 100%;
  max-width: 36rem; /* 576px */
  position: relative;
}

.articles-search-box {
  width: 100%;
  height: 3rem; /* 48px */
  background: #FAFAFA;
  border: 1px solid #E5E7EB;
  border-radius: 9999px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 1.25rem; /* 20px */
  gap: 0.75rem; /* 12px */
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.articles-search-box:focus-within {
  background: #FFFFFF;
  border-color: #CE0000;
  box-shadow: 0 0 0 3px rgba(206, 0, 0, 0.1);
}

.articles-search-icon {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  flex-shrink: 0;
  color: rgba(63, 63, 63, 0.45);
}

.articles-search-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.articles-search-input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-family-base, 'DM Sans', sans-serif);
  font-size: 1rem; /* 16px */
  line-height: 1.3125rem; /* 21px */
  color: #1F262D;
}

.articles-search-input::placeholder {
  color: rgba(63, 63, 63, 0.4);
}

/* ==========================================================================
   Section 2: Featured Article & Latest Posts Sidebar (504px Figma)
   ========================================================================== */
.articles-featured-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.5rem 4rem; /* 0 24px 64px */
  box-sizing: border-box;
}

.articles-featured-container {
  width: 100%;
  max-width: 69rem; /* 1104px (1152px - 48px padding) */
  display: grid;
  grid-template-columns: minmax(0, 728.95px) minmax(0, 343.05px);
  gap: 2rem; /* 32px gap between featured card & sidebar */
  align-items: stretch;
}

/* Featured Large Card (728.95px x 440px) */
.featured-card {
  position: relative;
  height: 27.5rem; /* 440px */
  border-radius: 1.5rem; /* 24px */
  overflow: hidden;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
  background-color: #1F262D;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.featured-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.2);
}

.featured-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.featured-card:hover .featured-card-bg {
  transform: scale(1.03);
}

.featured-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.05) 100%);
}

.featured-card-content {
  position: relative;
  z-index: 2;
  padding: 2.25rem; /* 36px */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.featured-tag {
  background: #FFFFFF;
  color: #CE0000;
  border-radius: 9999px;
  padding: 0.375rem 0.75rem; /* 6px 12px */
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
  font-weight: 500;
  margin-bottom: 1rem;
  display: inline-block;
}

.featured-title {
  margin: 0;
  font-family: var(--font-family-base, 'DM Sans', sans-serif);
  font-weight: 500;
  font-size: 1.875rem; /* 30px */
  line-height: 2.375rem; /* 38px */
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.featured-meta {
  margin-top: 1rem; /* 16px */
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.featured-meta-dot {
  color: rgba(255, 255, 255, 0.4);
}

/* Sidebar Latest Posts (343.05px x 440px) */
.sidebar-latest {
  display: flex;
  flex-direction: column;
  height: 27.5rem; /* 440px */
  justify-content: flex-start;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2rem; /* 32px */
  margin-bottom: 1.25rem; /* 20px */
}

.sidebar-title {
  margin: 0;
  font-family: var(--font-family-base, 'DM Sans', sans-serif);
  font-weight: 500;
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */
  color: #3F3F3F;
}

.sidebar-indicator {
  width: 2.25rem; /* 36px */
  height: 0.25rem; /* 4px */
  background: #CE0000;
  border-radius: 9999px;
}

.sidebar-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

/* Fewer than 3 latest posts: stack from the top instead of spreading to fill the card height */
.sidebar-list.is-sparse {
  justify-content: flex-start;
  gap: 1.5rem;
}

.sidebar-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem; /* 16px */
  padding: 0.75rem 0;
  text-decoration: none;
  border-bottom: 1px solid #F3F4F6;
  transition: opacity 0.2s ease;
}

.sidebar-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-item:first-child {
  padding-top: 0;
}

.sidebar-item:hover {
  opacity: 0.85;
}

.sidebar-item-thumb {
  width: 5rem; /* 80px */
  height: 5rem; /* 80px */
  border-radius: 0.75rem; /* 12px */
  object-fit: cover;
  flex-shrink: 0;
  background-color: #F3F4F6;
}

.sidebar-item-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.sidebar-item-category {
  font-size: 0.6875rem; /* 11px */
  line-height: 1rem; /* 16px */
  letter-spacing: 0.034rem; /* 0.55px */
  text-transform: uppercase;
  color: #CE0000;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.sidebar-item-title {
  margin: 0;
  font-family: var(--font-family-base, 'DM Sans', sans-serif);
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1.1875rem; /* 19px */
  color: #3F3F3F;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s ease;
}

.sidebar-item:hover .sidebar-item-title {
  color: #CE0000;
}

.sidebar-item-meta {
  margin-top: 0.5rem; /* 8px */
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
  color: rgba(63, 63, 63, 0.45);
}

/* ==========================================================================
   Section 3: Recent Articles Grid (Section #FAFAFA, border-top #F3F4F6)
   ========================================================================== */
.articles-recent-section {
  width: 100%;
  background: #FAFAFA;
  border-top: 1px solid #F3F4F6;
  padding: 4rem 1.5rem; /* 64px 24px */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.articles-recent-section[hidden] {
  display: none;
}

.articles-recent-container {
  width: 100%;
  max-width: 69rem; /* 1104px */
  display: flex;
  flex-direction: column;
}

.recent-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 2.25rem; /* 36px */
}

.recent-eyebrow {
  margin: 0;
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
  letter-spacing: 0.135rem; /* 2.16px */
  text-transform: uppercase;
  color: #CE0000;
  font-weight: 600;
}

.recent-title {
  margin: 0.5rem 0 0; /* 8px */
  font-family: var(--font-family-base, 'DM Sans', sans-serif);
  font-weight: 500;
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
  letter-spacing: -0.046rem; /* -0.75px */
  color: #3F3F3F;
}

/* Articles 3-column Grid (352px cards, 24px gap) */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; /* 24px gap = 352px + 24px + 352px + 24px + 352px = 1104px */
  width: 100%;
}

/* Article Card (352px x 453.25px in Figma) */
.article-card {
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  border-radius: 1rem; /* 16px */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.article-card:hover {
  transform: translateY(-3px);
  border-color: rgba(206, 0, 0, 0.2);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

.article-card-thumb-wrap {
  width: 100%;
  height: 12rem; /* 192px */
  overflow: hidden;
  background-color: #F3F4F6;
}

.article-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.article-card:hover .article-card-thumb {
  transform: scale(1.04);
}

.article-card-body {
  padding: 1.5rem; /* 24px */
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  box-sizing: border-box;
}

.article-card-content {
  display: flex;
  flex-direction: column;
}

.article-card-category {
  font-size: 0.6875rem; /* 11px */
  line-height: 1rem; /* 16px */
  letter-spacing: 0.034rem; /* 0.55px */
  text-transform: uppercase;
  color: #CE0000;
  font-weight: 600;
  margin-bottom: 0.75rem; /* 12px */
}

.article-card-title {
  margin: 0;
  font-family: var(--font-family-base, 'DM Sans', sans-serif);
  font-weight: 500;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5625rem; /* 25px */
  color: #3F3F3F;
  transition: color 0.15s ease;
}

.article-card:hover .article-card-title {
  color: #CE0000;
}

.article-card-desc {
  margin: 0.75rem 0 0; /* 12px */
  font-family: var(--font-family-base, 'DM Sans', sans-serif);
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 1.4375rem; /* 23px */
  color: rgba(63, 63, 63, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card-footer {
  margin-top: 1.25rem; /* 20px */
  padding-top: 1rem; /* 16px */
  border-top: 1px solid #F3F4F6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.article-card-meta {
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
  color: rgba(63, 63, 63, 0.45);
}

.article-card-arrow {
  width: 1rem; /* 16px */
  height: 1rem;
  color: #CE0000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.article-card:hover .article-card-arrow {
  transform: translateX(3px);
}

.article-card-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Empty search state */
.articles-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: rgba(63, 63, 63, 0.6);
  font-size: 1rem;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 1024px) {
  .articles-featured-container {
    grid-template-columns: 1fr;
  }

  .sidebar-latest {
    height: auto;
  }

  .sidebar-list {
    gap: 1rem;
  }

  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .articles-hero-section {
    padding: 2.5rem 1rem 1.75rem;
  }

  .articles-title {
    font-size: 2rem;
    line-height: 2.375rem;
  }

  .articles-subtitle {
    font-size: 0.875rem;
    line-height: 1.375rem;
    padding: 0 0.5rem;
  }

  .articles-search-wrapper {
    margin-top: 1.5rem;
  }

  .articles-featured-section {
    padding: 0 1rem 2.5rem;
  }

  .featured-card {
    height: auto;
    min-height: 22rem;
  }

  .featured-card-content {
    padding: 1.5rem 1.25rem;
  }

  .featured-title {
    font-size: 1.25rem;
    line-height: 1.625rem;
  }

  .sidebar-latest {
    margin-top: 1rem;
  }

  .articles-recent-section {
    padding: 2.5rem 1rem;
  }

  .articles-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .recent-title {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}