/* ==========================================================================
   DRIVERGUARDS — BERITA & ARTIKEL STYLESHEET
   Page-specific styles for news.html based on Figma Node 184:5934.
   Built strictly upon Driverguards 12-Column Desktop Grid, Styleguide & SKILL.md.
   ========================================================================== */

/* Universal Box-Sizing & Margin Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background-color: var(--dg-color-white, #FFFFFF);
  color: var(--dg-color-black-900, #000000);
  font-family: var(--dg-font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page Wrapper */
.dg-page-wrapper {
  width: 100%;
  overflow-x: hidden;
  background-color: var(--dg-color-white, #FFFFFF);
  color: var(--dg-color-black-900, #000000);
}

/* 12-Column Grid Utility Classes (SKILL.md Section 4E) */
.dg-container {
  max-width: 1440px;
  padding: 0 80px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.dg-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 36px;
  width: 100%;
  box-sizing: border-box;
}

.dg-col-1  { grid-column: span 1; }
.dg-col-2  { grid-column: span 2; }
.dg-col-3  { grid-column: span 3; }
.dg-col-4  { grid-column: span 4; }
.dg-col-5  { grid-column: span 5; }
.dg-col-6  { grid-column: span 6; }
.dg-col-7  { grid-column: span 7; }
.dg-col-8  { grid-column: span 8; }
.dg-col-9  { grid-column: span 9; }
.dg-col-10 { grid-column: span 10; }
.dg-col-11 { grid-column: span 11; }
.dg-col-12 { grid-column: span 12; }

/* Generic Section Layouts */
.dg-section {
  width: 100%;
  box-sizing: border-box;
  padding: 120px 80px;
  position: relative;
}

.dg-section-dark {
  background-color: var(--dg-color-black-900, #000000);
  color: var(--dg-color-white, #FFFFFF);
}

.dg-section-light {
  background-color: var(--dg-color-white, #FFFFFF);
  color: var(--dg-color-black-900, #000000);
}

/* Typography Standards */
.dg-section-title {
  font-family: 'Bebas Neue', var(--dg-font-display, sans-serif) !important;
  font-weight: 400 !important;
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.dg-section-title-dark {
  color: var(--dg-color-white, #FFFFFF);
}

.dg-section-title-light {
  color: var(--dg-color-black-900, #000000);
}

.dg-section-badge {
  font-family: var(--dg-font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dg-color-brand-900, #B31215);
  margin: 0;
  padding: 0;
}

.dg-section-desc {
  font-family: var(--dg-font-body, 'Inter', sans-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: var(--dg-color-black-600, #555555);
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   1. HERO & ARTIKEL GRID SECTION (FIGMA NODE 187:6250)
   ========================================================================== */
.dg-news-hero-section {
  background-color: var(--dg-color-white, #FFFFFF);
  padding: 160px 80px 120px;
  width: 100%;
  box-sizing: border-box;
}

.dg-news-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
}

/* Section Header (Split Layout: 730px Left / 514px Right with 36px Gap) */
.dg-news-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 36px;
  width: 100%;
}

.dg-news-header-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dg-news-header-right {
  width: 514px;
  max-width: 100%;
  flex-shrink: 0;
}

/* Category & Tag Filter Section (Figma Node 187:6250, 346:7464, 346:7465) */
.dg-news-filter-section {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
}

.dg-news-filter-group {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
}

.dg-news-section-title {
  font-family: 'Bebas Neue', var(--dg-font-display, sans-serif) !important;
  font-weight: 400 !important;
  font-size: 40px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--dg-color-black-900, #000000);
  text-transform: uppercase;
  margin: 0;
}

/* Category & Tag Filter Chips */
.dg-news-chips {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  flex-wrap: wrap;
}

.dg-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border: 1px solid var(--dg-color-black-300, #C4C4C4);
  background-color: transparent;
  color: var(--dg-color-black-900, #000000);
  font-family: var(--dg-font-body, 'Inter', sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.2s ease;
  user-select: none;
}

.dg-chip:hover {
  border-color: var(--dg-color-brand-900, #B31215);
  color: var(--dg-color-brand-900, #B31215);
}

.dg-chip.active {
  background-color: rgba(179, 18, 21, 0.24);
  border-color: var(--dg-color-brand-900, #B31215);
  color: var(--dg-color-brand-900, #B31215);
  font-weight: 400;
}

/* Empty State When Filter Yields 0 Results */
.dg-news-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  width: 100%;
  background-color: var(--dg-color-black-50, #F5F5F5);
  border: 1px dashed var(--dg-color-black-300, #C4C4C4);
}

.dg-news-empty-text {
  font-family: var(--dg-font-body, 'Inter', sans-serif);
  font-size: 18px;
  line-height: 28px;
  color: var(--dg-color-black-600, #555555);
  margin: 0;
}

/* Article Cards 3-Column Grid (Figma Node 187:6258) */
.dg-news-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 36px;
  row-gap: 36px;
  width: 100%;
}

.dg-news-grid .dg-card-article {
  grid-column: span 4;
  width: 100%;
}

/* Article Card Internal Styling (Styleguide Component) */
.dg-card-article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  background-color: transparent;
  padding: 0;
  border: none;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

.dg-article-thumb {
  width: 100%;
  aspect-ratio: 300 / 200;
  position: relative;
  overflow: hidden;
  background-color: var(--dg-color-black-100, #E9E9E9);
  border-radius: 0;
}

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

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

.dg-article-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.dg-article-title {
  font-family: var(--dg-font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--dg-color-black-900, #000000);
  transition: color 0.2s ease;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dg-card-article:hover .dg-article-title {
  color: var(--dg-color-brand-900, #B31215);
}

.dg-article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dg-font-body, 'Inter', sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: var(--dg-color-black-600, #555555);
}

.dg-article-meta .dg-meta-dot {
  display: inline-block;
  user-select: none;
}

.dg-article-meta .dg-meta-tag {
  color: var(--dg-color-black-600, #555555);
}

/* Pagination Controls (Figma Node 187:6372 / 187:6358) */
.dg-news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 24px;
}

.dg-pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 293px;
}

.dg-pagination-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--dg-font-body, 'Inter', sans-serif);
  font-size: 20px;
  line-height: 32px;
  letter-spacing: -0.02em;
  user-select: none;
}

.dg-page-current {
  font-weight: 600;
  color: var(--dg-color-black-900, #000000);
}

.dg-page-total {
  font-weight: 400;
  color: var(--dg-color-black-500, #7B7B7B);
}

.dg-icon-btn.disabled,
.dg-icon-btn:disabled {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}

/* ==========================================================================
   2. FINAL CTA: WE DRIVE, YOU FOCUS (#000000 — FIGMA NODE 246:6547 — SHARED)
   ========================================================================== */
.dg-cta-section {
  background-color: var(--dg-color-black-900, #000000);
  padding: 0;
  width: 100%;
}

.dg-cta-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: 0;
}

.dg-cta-left {
  grid-column: span 6;
  padding: 60px 80px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  box-sizing: border-box;
}

.dg-cta-text-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.dg-cta-title {
  font-family: 'Bebas Neue', var(--dg-font-display, sans-serif) !important;
  font-weight: 400 !important;
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--dg-color-white, #FFFFFF);
  margin: 0;
  text-transform: uppercase;
}

.dg-cta-desc {
  font-family: var(--dg-font-body, 'Inter', sans-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: var(--dg-color-black-300, #C4C4C4);
  margin: 0;
}

.dg-cta-right {
  grid-column: span 6;
  width: 100%;
  height: 100%;
  min-height: 480px;
  position: relative;
  display: flex;
  overflow: hidden;
}

.dg-cta-img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (TABLET VIEWPORT 481px - 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .dg-news-hero-section {
    padding: 120px 24px 80px;
  }

  .dg-news-inner {
    max-width: 600px;
    margin: 0 auto;
    gap: 40px;
  }

  .dg-news-header {
    flex-direction: column;
    gap: 16px;
  }

  .dg-news-header-right {
    width: 100%;
  }

  .dg-news-header .dg-section-title {
    font-size: 48px;
  }

  .dg-news-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .dg-news-grid .dg-card-article {
    grid-column: span 1;
    max-width: 100%;
  }

  .dg-article-title {
    font-size: 20px;
    line-height: 24px;
  }

  .dg-news-filter-section {
    gap: 40px;
  }

  .dg-news-filter-group {
    gap: 24px;
  }

  .dg-news-section-title {
    font-size: 36px;
  }

  .dg-cta-wrapper {
    max-width: 600px;
    margin: 0 auto;
    gap: 0;
    grid-template-columns: 1fr;
  }

  .dg-cta-title {
    font-size: 48px;
  }

  .dg-cta-left {
    grid-column: span 1;
    padding: 60px 24px;
    gap: 36px;
  }

  .dg-cta-right {
    grid-column: span 1;
    min-height: 320px;
    aspect-ratio: 16 / 9;
  }

  .dg-cta-img {
    min-height: 320px;
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
   MOBILE PHONES (VIEWPORT <= 480px / M16 — FIGMA NODE 191:6774)
   ========================================================================== */
@media (max-width: 480px) {
  .dg-news-hero-section {
    padding: 116px 16px 60px;
  }

  .dg-news-inner {
    gap: 32px;
    max-width: 358px;
    margin: 0 auto;
  }

  .dg-news-header {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .dg-news-header-left {
    gap: 16px;
    width: 100%;
  }

  .dg-section-badge {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.04em;
  }

  .dg-news-header .dg-section-title {
    font-size: 48px;
    line-height: 1.0;
    letter-spacing: -0.02em;
  }

  .dg-section-desc {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.02em;
  }

  /* Filter Section (Figma Node 191:6968) */
  .dg-news-filter-section {
    gap: 32px;
  }

  .dg-news-filter-group {
    gap: 20px;
  }

  .dg-news-section-title {
    font-size: 32px;
  }

  /* Tag List / Chips (Figma Node 191:6968) */
  .dg-news-chips {
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
  }

  .dg-chip {
    padding: 14px 20px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }

  /* Article Cards (Figma Node 191:6973) */
  .dg-news-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  .dg-news-grid .dg-card-article {
    width: 100%;
    max-width: 358px;
    margin: 0 auto;
    gap: 24px;
  }

  .dg-article-thumb {
    aspect-ratio: 300 / 200;
    width: 100%;
  }

  .dg-article-content {
    gap: 16px;
    width: 100%;
  }

  .dg-article-title {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.02em;
  }

  .dg-article-meta {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.02em;
    gap: 8px;
  }

  /* Pagination (Figma Node 191:6980) */
  .dg-news-pagination {
    margin-top: 8px;
    width: 100%;
  }

  .dg-pagination-container {
    width: 100%;
    max-width: 358px;
    margin: 0 auto;
  }

  .dg-pagination-indicator {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.02em;
  }

  .dg-page-current,
  .dg-page-total {
    font-size: 16px;
    line-height: 24px;
  }

  /* Split CTA Banner (Figma Node 246:6571) */
  .dg-cta-left {
    padding: 60px 16px;
    gap: 32px;
    align-items: stretch !important;
  }

  .dg-cta-left > div,
  .dg-cta-action {
    width: 100% !important;
  }

  .dg-cta-text-group {
    gap: 12px;
  }

  .dg-cta-title {
    font-size: 48px;
    line-height: 1.0;
    letter-spacing: -0.02em;
  }

  .dg-cta-desc {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.02em;
  }

  .dg-cta-left .dg-btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 24px;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.02em;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .dg-cta-right,
  .dg-cta-img {
    aspect-ratio: 300 / 200;
    min-height: auto;
    width: 100%;
  }
}