/* ═══════════════════════════════════════════
   DewGas Blog Filter — v2.0
   Sparking18
═══════════════════════════════════════════ */
:root {
  --dg-red:       #E81F25;
  --dg-navy:      #1B2D4F;
  --dg-navy-dk:   #152340;
  --dg-gray-100:  #F7F8FA;
  --dg-gray-200:  #EAECF0;
  --dg-gray-400:  #9AA3B0;
  --dg-gray-600:  #555F6D;
  --dg-gray-800:  #222B38;
  --dg-white:     #ffffff;
  --dg-shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
  --dg-shadow-md: 0 4px 20px rgba(0,0,0,0.10);
  --dg-shadow-lg: 0 8px 32px rgba(0,0,0,0.13);
  --dg-radius:    12px;
  --dg-radius-sm: 6px;
  --dg-ease:      0.25s ease;
}

/* ══════════════════════════════════════════
   SHARED CARD STYLES (used by all 3 sections)
══════════════════════════════════════════ */
.dg-blog-card {
  background: var(--dg-white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--dg-shadow-sm);
  border: 1px solid #eaecf08c;
  display: flex;
  flex-direction: column;
  transition: transform var(--dg-ease), box-shadow var(--dg-ease);
  height: 100%;
}
.dg-blog-card:hover { transform: translateY(-4px); box-shadow: var(--dg-shadow-lg); }

.dg-card-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--dg-gray-100);
}
.dg-card-thumb a { display: block; width: 100%; height: 100%; }
.dg-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.dg-blog-card:hover .dg-card-thumb img { transform: scale(1.05); }
.dg-card-no-thumb { width: 100%; height: 100%; background: linear-gradient(135deg, var(--dg-navy), var(--dg-navy-dk)); }

.dg-card-cat {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--dg-navy); color: var(--dg-white);
  font-size: 12px; font-weight: 600; padding: 6px 10px;
  border-radius: 4px; letter-spacing: 0.02em; white-space: nowrap;
}

.dg-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }

.dg-card-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.dg-meta-date, .dg-meta-read { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #6B7280; }
.dg-meta-date svg, .dg-meta-read svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--dg-gray-400); }

.dg-card-title { font-size: 18px; font-weight: 800; color: var(--dg-navy); margin: 0 0 10px; line-height: 1.45; }
.dg-card-title a { color: inherit; text-decoration: none; transition: color var(--dg-ease); }
.dg-card-title a:hover { color: var(--dg-red); }

.dg-card-excerpt { font-size: 14px; color: #6B7280; line-height: 1.6; margin: 0 0 12px; flex: 1; }
.dg-card-author { font-size: 12px; color: #6B7280; font-weight: 400; display: block; margin-bottom: 12px; }

.dg-card-footer { border-top: 1px solid #DBDCDE; padding-top: 12px; }
.dg-read-more { display: inline-flex; align-items: center; gap: 6px; color: #FC5050 !important; font-size: 18px; font-weight: 700; text-decoration: none; }
.dg-read-more svg { width: 18px; height: 18px; transition: transform var(--dg-ease); }
.dg-read-more:hover svg { transform: translateX(4px); }

/* ══════════════════════════════════════════
   SECTION 1 — GRID [dg_blog_grid]
══════════════════════════════════════════ */
.dg-blog-section { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0px; font-family: inherit; box-sizing: border-box; }

.dg-blog-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.dg-blog-title { font-size: 44px; font-weight: 800; color: #1C1C1C; margin: 0; }
.dg-blog-controls { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

.dg-select-wrap { position: relative; display: inline-flex; align-items: center; }
.dg-select-wrap select { appearance: none; -webkit-appearance: none; background: var(--dg-white); border: 1.5px solid var(--dg-gray-200); border-radius: var(--dg-radius-sm); padding: 10px 44px 10px 16px; font-size: 14px; color: var(--dg-gray-600); cursor: pointer; outline: none; transition: border-color #E7E7E7 !important; min-width: 160px; width: 180px; height: 53px;}
.dg-select-wrap select:focus { border: none !important; outline: none !important }
.dg-select-arrow { position: absolute; right: 12px; pointer-events: none; color: var(--dg-gray-400); display: flex; align-items: center; }
.dg-select-arrow svg { width: 16px; height: 16px; }

.dg-search-wrap { position: relative; display: inline-flex; align-items: center; }
.dg-search-icon { position: absolute; left: 13px; color: var(--dg-gray-400); display: flex; align-items: center; pointer-events: none; }
.dg-search-icon svg { width: 17px; height: 17px; }
.dg-search-wrap input { background: #F8F9FC !important; border: 1px solid #E7E7E7 !important; border-radius: 4px !important; padding: 10px 16px 10px 40px !important; font-size: 14px; color: var(--dg-gray-800); outline: none; transition: border-color var(--dg-ease); width: 220px; height: 53px; width: 372px !important;}
.dg-search-wrap input::placeholder { color: var(--dg-gray-400); }
.dg-search-wrap input:focus { border-color: var(--dg-navy); }

.dg-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; min-height: 300px; transition: opacity var(--dg-ease); }
.dg-blog-grid.is-loading { opacity: 0.4; pointer-events: none; }

.dg-blog-loading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; padding: 80px 0; }
.dg-spinner { width: 42px; height: 42px; border: 3px solid var(--dg-gray-200); border-top-color: var(--dg-red); border-radius: 50%; animation: dg-spin 0.7s linear infinite; }
@keyframes dg-spin { to { transform: rotate(360deg); } }

.dg-no-posts { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; }
.dg-no-posts svg { width: 48px; height: 48px; margin-bottom: 16px; opacity: 0.4; color: var(--dg-gray-400); }
.dg-no-posts p { font-size: 15px; margin: 0; color: var(--dg-gray-600); }

/* Pagination */
.dg-blog-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 48px; flex-wrap: wrap; transition: opacity var(--dg-ease); }
.dg-blog-pagination.is-loading { opacity: 0.4; pointer-events: none; }
.dg-page-btn { min-width: 38px; height: 38px; padding: 0 6px; border-radius: 6px; border: none; background: transparent; color: var(--dg-gray-600); font-size: 15px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color var(--dg-ease), background var(--dg-ease); }
.dg-page-btn:hover:not(:disabled):not(.active) { color: var(--dg-gray-800); background: var(--dg-gray-100); }
.dg-page-btn.active { color: var(--dg-red); font-weight: 700; }
.dg-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.dg-page-arrow { color: var(--dg-red); min-width: 32px; padding: 0; }
.dg-page-arrow svg { width: 20px; height: 20px; }
.dg-page-arrow:disabled { color: var(--dg-gray-400); }
.dg-page-dots { font-size: 15px; color: var(--dg-gray-400); padding: 0 4px; display: inline-flex; align-items: center; line-height: 38px; }

/* ══════════════════════════════════════════
   SECTION 2 — FEATURED [dg_featured_blog]
══════════════════════════════════════════ */
.dg-featured-section { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0px; box-sizing: border-box; }

.dg-featured-inner {
  display: grid;
  grid-template-columns: 62% 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--dg-white);
  overflow: hidden;
}

/* Image panel */
.dg-featured-img { position: relative; overflow: hidden; border-radius: 10px; }
.dg-featured-img a { display: block; width: 100%; height: 100%; overflow: hidden;}
.dg-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease;}
.dg-featured-inner:hover .dg-featured-img img { transform: scale(1.03); }
.dg-featured-img .dg-card-cat { background: var(--dg-white); color: #243A5E; font-size: 12px; font-weight: 600; }

/* Content panel */
.dg-featured-content {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.dg-featured-meta { display: flex; flex-direction: column; gap: 4px; }
.dg-featured-meta .dg-meta-date { font-size: 14px; color: var(--dg-gray-600); }
.dg-featured-author { font-size: 14px; color: var(--dg-red); font-weight: 600; }

.dg-featured-title { font-size: 44px; font-weight: 800; color: #2D4976; margin: 0; line-height: 1.25; }
.dg-featured-title:hover {color: #2D4976;}
.dg-featured-title a { text-decoration: none;color: #2D4976;}
.dg-featured-title a:hover {color: #2D4976;}


.dg-featured-excerpt { font-size: 18px; color: #6B7280; font-weight:500; line-height: 1.65; margin: 0; }

.dg-featured-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--dg-red); color: var(--dg-white);
  font-size: 16px; font-weight: 700; text-decoration: none;
  padding: 14px 20px; border-radius: 8px;
  align-self: flex-start;
  transition: background var(--dg-ease), transform var(--dg-ease);
  margin-top: 8px;
}
.dg-featured-btn svg { width: 16px; height: 16px; transition: transform var(--dg-ease); }
.dg-featured-btn:hover { background: ; color: #fff; }
.dg-featured-btn:hover svg { transform: translateX(4px); }

/* ══════════════════════════════════════════
   SECTION 3 — CAROUSEL [dg_blog_carousel]
══════════════════════════════════════════ */
.dg-carousel-section { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0px; box-sizing: border-box; overflow: hidden; }

.dg-carousel-header { text-align: center; margin-bottom: 56px; }
.dg-carousel-title { font-size: 44px; font-weight: 800; color: #1C1C1C; margin: 0 0 10px; }
.dg-carousel-subtitle { font-size: 20px; color: #6B7280; margin: 0;font-weight: 500 }

/* Track wrapper clips the overflow */
.dg-carousel-wrap { overflow: hidden; position: relative; }

.dg-carousel-track {
  display: flex;
  gap: 32px;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.dg-carousel-slide {
  flex: 0 0 calc((100% - 48px) / 3); /* 3 cards visible */
  min-width: 0;
}

/* Controls row */
.dg-carousel-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 56px;
}

.dg-carousel-nav { display: flex; align-items: center; gap: 32px; }

.dg-carousel-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #E81F25 !important;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(232,31,37,0.35);
  transition: background var(--dg-ease), transform var(--dg-ease);
  flex-shrink: 0;
}
.dg-carousel-btn:hover { background: #c71219; transform: scale(1.05); }
.dg-carousel-btn:disabled { background: var(--dg-gray-400); box-shadow: none; cursor: not-allowed; transform: none; }
.dg-carousel-btn svg { width: 22px; height: 22px; color: var(--dg-white); }

/* Dots */
.dg-carousel-dots { display: flex; align-items: center; gap: 8px; }
.dg-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--dg-gray-200);
  border: none; padding: 0; cursor: pointer;
  transition: background var(--dg-ease), transform var(--dg-ease);
  flex-shrink: 0;
}
.dg-dot.active { background: #E81F25 !important; transform: scale(1.2); }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
  .dg-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .dg-featured-inner { grid-template-columns: 55% 1fr; }
  .dg-featured-content { padding: 28px 32px; }
  .dg-carousel-slide { flex: 0 0 calc((100% - 24px) / 2); } /* 2 visible */
}

/* Mobile */
@media (max-width: 640px) {
  /* Grid */
  .dg-blog-header { flex-direction: column; align-items: flex-start;     margin-bottom: 32px;}
  .dg-blog-controls { width: 100%; gap: 12px; flex-direction: column; align-items: stretch;}
  .dg-select-wrap, .dg-search-wrap { flex: 1; }
  .dg-select-wrap select, .dg-search-wrap input { width: 100%; min-width: unset; }
  .dg-blog-grid { grid-template-columns: 1fr; gap: 16px; }
  .dg-blog-pagination { gap: 2px; margin-top: 32px; }
  .dg-page-btn { min-width: 32px; height: 32px; font-size: 14px; }

  /* Featured */
  .dg-featured-inner { grid-template-columns: 1fr; }
  .dg-featured-img { aspect-ratio: 16 / 9;    border-radius: 0px; }
  .dg-featured-content { padding: 32px 16px; gap: 10px; }
  .dg-featured-title { font-size: 16px; font-weight: 700; margin-top: 10px}
	.dg-featured-excerpt{ font-size: 12px; font-weight: 400; margin-bottom: 10px}
	.dg-featured-btn{font-size: 14px; padding: 8px 18px;}
	.dg-carousel-title {font-size: 18px;font-weight: 800;}
	.dg-carousel-subtitle {font-size: 12px;}
	.dg-carousel-header {margin-bottom: 24px;}
	.dg-card-title {font-size: 14px;font-weight: 800;line-height: 1.35;}
	.dg-card-excerpt {font-size: 12px;}
	.dg-carousel-track{gap: 16px}
	.dg-carousel-controls{margin-top: 24px;}
	.dg-carousel-nav{gap: 24px}
	.dg-carousel-controls{gap: 12px}
	.dg-dot {width: 8px;height: 8px;}
	.dg-read-more{font-size: 14px;}
	.dg-search-wrap input{width: 100% !important}
	.dg-blog-title {
    font-size: 18px;
    text-align: center;
		width: 100%;}

  /* Carousel — 1 card visible, peek next */
  .dg-carousel-slide { flex: 0 0 85%; }
  .dg-carousel-btn { width: 42px; height: 42px; }
  .dg-carousel-btn svg { width: 18px; height: 18px; }
}