/* =========================================================
   DATAMIND BLOG PAGE
========================================================= */

/* =========================================================
   HERO
========================================================= */

.dm-blog-hero {

  padding: var(--space-xxl) 0;

  background:
    linear-gradient(
      135deg,
      #f8fafc,
      #ecfdf5
    );

}

.dm-blog-hero-layout {

  display: grid;

  grid-template-columns:
    1.3fr .7fr;

  gap: 50px;

  align-items: center;

}

.dm-blog-hero-content {

  max-width: 760px;

}

.dm-blog-hero-content h1 {

  margin: 18px 0;

  max-width: 820px;

}

.dm-blog-hero-content p {

  max-width: 680px;

  color: var(--color-text-secondary);

}

.dm-blog-hero-actions {

  display: flex;

  gap: 15px;

  flex-wrap: wrap;

  margin-top: 32px;

}

.dm-blog-hero-panel {

  display: flex;

  justify-content: flex-end;

}

.dm-blog-panel-card {

  width: 100%;

  max-width: 360px;

  background: #ffffff;

  border:
    1px solid var(--color-border);

  border-radius:
    var(--radius-xl);

  padding: 32px;

  box-shadow:
    var(--shadow-md);

}

.dm-blog-panel-card span {

  display: inline-block;

  margin-bottom: 18px;

  color: var(--color-primary);

  font-weight: 700;

}

.dm-blog-panel-card ul {

  list-style: none;

  padding: 0;

  margin: 0;

}

.dm-blog-panel-card li {

  padding: 14px 0;

  border-bottom:
    1px solid var(--color-border);

  color:
    var(--color-text-secondary);

  font-weight: 500;

}

.dm-blog-panel-card li:last-child {

  border-bottom: none;

}

/* =========================================================
   SECTION HEADER
========================================================= */

.dm-section-header {

  max-width: 760px;

  margin-bottom: 40px;

}

.dm-section-header.text-center,
.text-center .dm-section-header {

  margin-left: auto;

  margin-right: auto;

  text-align: center;

}

.dm-section-header h2 {

  margin: 12px 0;

}

.dm-section-header p {

  color:
    var(--color-text-secondary);

}

/* =========================================================
   FEATURED POST
========================================================= */

.dm-featured-post {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 45px;

  align-items: center;

  background: #ffffff;

  border:
    1px solid var(--color-border);

  border-radius:
    var(--radius-xl);

  padding: 32px;

  box-shadow:
    var(--shadow-md);

}

.dm-featured-content h3 {

  margin: 18px 0;

  font-size: clamp(1.8rem, 3vw, 2.6rem);

  line-height: 1.15;

  color:
    var(--color-text-main);

}

.dm-featured-content p {

  color:
    var(--color-text-secondary);

  line-height: 1.8;

}

.dm-featured-image img {

  width: 100%;

  height: 360px;

  object-fit: cover;

  border-radius:
    var(--radius-lg);

}

.dm-blog-category {

  color:
    var(--color-primary);

  font-weight: 700;

  font-size: .95rem;

}

.dm-blog-meta {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

  margin: 20px 0 28px;

  color:
    var(--color-text-muted);

  font-size: .95rem;

}

/* =========================================================
   FILTER SECTION
========================================================= */

.dm-blog-filter-section {

  padding: 28px 0;

  border-top:
    1px solid var(--color-border);

  border-bottom:
    1px solid var(--color-border);

  background: #ffffff;

}

.dm-blog-filter-bar {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}

.dm-blog-filter {

  border:
    1px solid var(--color-border);

  background: #ffffff;

  color:
    var(--color-text-secondary);

  border-radius:
    999px;

  padding: 10px 16px;

  cursor: pointer;

  font-weight: 600;

  transition:
    .3s ease;

}

.dm-blog-filter:hover,
.dm-blog-filter.active {

  background:
    var(--color-primary);

  border-color:
    var(--color-primary);

  color: #ffffff;

}

/* =========================================================
   BLOG SECTION
========================================================= */

.dm-blog-section {

  background:
    var(--color-bg-section);

}

.dm-blog-tools {

  display: flex;

  justify-content: flex-end;

  margin-bottom: 20px;

}

.dm-blog-search {

  width: 100%;

  max-width: 420px;

}

.dm-blog-search input {

  width: 100%;

  padding: 14px 16px;

  border:
    1px solid var(--color-border);

  border-radius:
    var(--radius-md);

  background:
    #ffffff;

  font: inherit;

  transition:
    .3s ease;

}

.dm-blog-search input:focus {

  outline: none;

  border-color:
    var(--color-primary);

  box-shadow:
    0 0 0 4px rgba(22,163,74,.10);

}

.dm-blog-card {

  background: #ffffff;

  border:
    1px solid var(--color-border);

  border-radius:
    var(--radius-xl);

  overflow: hidden;

  box-shadow:
    var(--shadow-sm);

  transition:
    .3s ease;

}

.dm-blog-card:hover {

  transform:
    translateY(-6px);

  box-shadow:
    var(--shadow-md);

}

.dm-blog-card img {

  width: 100%;

  height: 220px;

  object-fit: cover;

}

.dm-blog-content {

  padding: 26px;

}

.dm-blog-content span {

  color:
    var(--color-primary);

  font-weight: 700;

  font-size: .92rem;

}

.dm-blog-content h3 {

  margin: 14px 0;

  color:
    var(--color-text-main);

  line-height: 1.3;

}

.dm-blog-content p {

  color:
    var(--color-text-secondary);

  line-height: 1.7;

}

.dm-blog-link {

  display: inline-block;

  margin-top: 18px;

  color:
    var(--color-primary);

  font-weight: 700;

  text-decoration: none;

}

.dm-blog-link:hover {

  color:
    var(--color-primary-hover);

}

.dm-blog-empty {

  margin-top: 40px;

  text-align: center;

  background: #ffffff;

  border:
    1px solid var(--color-border);

  border-radius:
    var(--radius-xl);

  padding: 50px 20px;

  color:
    var(--color-text-secondary);

}

/* =========================================================
   BLOG CTA
========================================================= */

.dm-blog-cta-section {

  background: #ffffff;

}

.dm-blog-cta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  padding: 42px;

  background:
    linear-gradient(
      135deg,
      #064e3b,
      #16a34a
    );

  border-radius:
    var(--radius-xl);

  color: #ffffff;

}

.dm-blog-cta h2 {

  color: #ffffff;

  margin: 12px 0;

}

.dm-blog-cta p {

  max-width: 720px;

  color:
    rgba(255,255,255,.86);

}

.dm-blog-cta .dm-section-label {

  color:
    rgba(255,255,255,.78);

}

.dm-blog-cta .dm-btn {

  background: #ffffff;

  color:
    var(--color-primary);

  white-space: nowrap;

}

/* =========================================================
   NEWSLETTER
========================================================= */

.dm-blog-newsletter {

  padding: var(--space-xxl) 0;

  background:
    var(--color-bg-section);

}

.dm-newsletter-card {

  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 35px;

  align-items: center;

  background: #ffffff;

  border:
    1px solid var(--color-border);

  border-radius:
    var(--radius-xl);

  padding: 42px;

  box-shadow:
    var(--shadow-sm);

}

.dm-newsletter-card h2 {

  margin: 12px 0;

}

.dm-newsletter-card p {

  color:
    var(--color-text-secondary);

}

.dm-newsletter-form {

  display: flex;

  gap: 15px;

  margin: 0;

}

.dm-newsletter-form input {

  width: 320px;

  padding: 14px 16px;

  border:
    1px solid var(--color-border);

  border-radius:
    var(--radius-md);

  font: inherit;

}

.dm-newsletter-form input:focus {

  outline: none;

  border-color:
    var(--color-primary);

  box-shadow:
    0 0 0 4px rgba(22,163,74,.10);

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

  .dm-blog-hero-layout,
  .dm-featured-post,
  .dm-newsletter-card {

    grid-template-columns: 1fr;

  }

  .dm-blog-hero-panel {

    justify-content: flex-start;

  }

  .dm-featured-image img {

    height: 300px;

  }

  .dm-blog-cta {

    flex-direction: column;

    align-items: flex-start;

  }

}

@media (max-width: 768px) {

  .dm-blog-hero {

    padding: 70px 0;

  }

  .dm-blog-hero-actions,
  .dm-newsletter-form {

    flex-direction: column;

    align-items: stretch;

  }

  .dm-blog-hero-actions .dm-btn,
  .dm-newsletter-form .dm-btn,
  .dm-blog-cta .dm-btn {

    width: 100%;

    text-align: center;

  }

  .dm-blog-tools {

    justify-content: stretch;

  }

  .dm-blog-search {

    max-width: 100%;

  }

  .dm-featured-post,
  .dm-newsletter-card,
  .dm-blog-cta {

    padding: 26px;

  }

  .dm-newsletter-form input {

    width: 100%;

  }

  .dm-blog-filter-bar {

    overflow-x: auto;

    flex-wrap: nowrap;

    padding-bottom: 8px;

  }

  .dm-blog-filter {

    white-space: nowrap;

  }

}

@media (max-width: 480px) {

  .dm-blog-panel-card,
  .dm-featured-post,
  .dm-newsletter-card,
  .dm-blog-cta {

    border-radius: var(--radius-lg);

  }

  .dm-featured-image img,
  .dm-blog-card img {

    height: 210px;

  }

}