/**
 * D-Dealer: Component Styles (Hero, Buttons, News/Post Row List, Cards Grid, Solutions)
 */

/* Hero Banner & Buttons */
.d-hero-section {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  padding: 50px 0;
  text-align: center;
}
body.is-dark .d-hero-section { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }
.d-hero-title { font-size: 2.2rem; font-weight: 800; margin: 0 0 10px 0; color: #ffffff; }
.d-hero-subtitle { font-size: 1.05rem; opacity: 0.9; max-width: 650px; margin: 0 auto; color: #ffffff; }
.d-btn {
  display: inline-block; font-weight: 700; padding: 10px 28px; border-radius: 999px;
  background-color: var(--wp--preset--color--accent); color: #ffffff !important;
  border: none; cursor: pointer; transition: background-color 0.2s ease;
}
.d-btn:hover { background-color: #0284c7 !important; }
.d-no-select { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

/* News & Post Row List Bar (Matches React Preview) */
.d-news-bar {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  padding: 30px 0 !important; color: #ffffff !important;
}
.d-news-bar .wp-block-heading, .d-news-bar h2 {
  font-size: 1.35rem !important; font-weight: 700 !important; color: #ffffff !important;
  margin: 0 0 16px 0 !important; padding: 0 !important; line-height: 1.3 !important;
}
.d-news-bar p { color: #ffffff !important; }
body.is-dark .d-news-bar { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; }

.d-news-list-container,
.wp-block-post-template.d-news-list-container {
  display: flex !important; flex-direction: column !important; gap: 8px !important;
  list-style: none !important; padding: 0 !important; margin: 0 !important;
}
.d-news-list-container > li,
.wp-block-post-template.d-news-list-container > li,
.wp-block-post-template.d-news-list-container > li + li {
  list-style: none !important; margin: 0 !important; margin-top: 0 !important;
  margin-bottom: 0 !important; padding: 0 !important;
}
.d-news-item {
  display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important;
  padding: 10px 16px !important; background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important; font-size: 0.92rem !important; margin: 0 !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}
.d-news-item:hover { background: rgba(255, 255, 255, 0.2) !important; transform: translateX(3px) !important; }
.d-news-item .d-category-badge,
.d-news-item .wp-block-post-terms,
.d-category-badge {
  display: inline-flex !important; align-items: center !important;
  padding: 3px 12px !important; border-radius: 999px !important;
  font-size: 0.72rem !important; font-weight: 700 !important;
  background: #ffffff !important; color: #0284c7 !important;
  white-space: nowrap !important; line-height: 1.3 !important; margin: 0 !important; flex-shrink: 0 !important;
}
.d-news-item .d-category-badge a,
.d-news-item .wp-block-post-terms a {
  color: #0284c7 !important; text-decoration: none !important; font-weight: 700 !important;
}
.d-news-item .wp-block-post-terms__separator { color: #94a3b8 !important; margin: 0 3px !important; }
.d-news-item .wp-block-post-date,
.d-news-item time {
  flex-shrink: 0 !important; color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.88rem !important; font-weight: 500 !important; white-space: nowrap !important;
  margin: 0 !important; padding: 0 !important; line-height: 1 !important;
}
.d-news-item .d-news-text { flex: 1 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
.d-news-item .wp-block-post-title,
.d-news-item h2,
.d-news-item h3 {
  margin: 0 !important; padding: 0 !important; font-size: 0.95rem !important; line-height: 1.4 !important;
  font-weight: 500 !important; color: #ffffff !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
}
.d-news-item .wp-block-post-title a,
.d-news-item .d-news-text a { color: #ffffff !important; text-decoration: none !important; }
.d-news-item .wp-block-post-title a:hover,
.d-news-item .d-news-text a:hover { text-decoration: underline !important; }

/* Latest Articles: Top-Aligned Square Cards Horizontal Grid */
.d-article-section { padding-top: 36px !important; padding-bottom: 36px !important; width: 100% !important; }
.d-article-section .wp-block-heading, .d-article-section h2 {
  font-size: 1.5rem !important; font-weight: 700 !important; margin: 0 0 20px 0 !important;
}
.d-article-query-wrap { width: 100% !important; display: block !important; }
.d-article-card-grid,
.d-column-card-grid,
.d-article-list-compact,
.wp-block-post-template.d-article-card-grid,
.wp-block-post-template.d-column-card-grid,
.editor-styles-wrapper .wp-block-post-template.d-article-card-grid,
.editor-styles-wrapper .wp-block-post-template.d-column-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  align-items: start !important;
}
@media (max-width: 1024px) {
  .d-article-card-grid,
  .d-column-card-grid,
  .wp-block-post-template.d-article-card-grid,
  .wp-block-post-template.d-column-card-grid,
  .editor-styles-wrapper .wp-block-post-template.d-article-card-grid,
  .editor-styles-wrapper .wp-block-post-template.d-column-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .d-article-card-grid,
  .d-column-card-grid,
  .wp-block-post-template.d-article-card-grid,
  .wp-block-post-template.d-column-card-grid,
  .editor-styles-wrapper .wp-block-post-template.d-article-card-grid,
  .editor-styles-wrapper .wp-block-post-template.d-column-card-grid {
    grid-template-columns: 1fr !important;
  }
}
.d-article-card-grid > li,
.d-column-card-grid > li,
.wp-block-post-template.d-article-card-grid > li,
.wp-block-post-template.d-column-card-grid > li,
.wp-block-post-template.d-article-card-grid > li + li,
.wp-block-post-template.d-column-card-grid > li + li,
.editor-styles-wrapper .wp-block-post-template.d-article-card-grid > li,
.editor-styles-wrapper .wp-block-post-template.d-column-card-grid > li {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Square Card Component */
.d-card-square {
  background-color: var(--card-bg) !important; border: 1px solid var(--card-border) !important;
  border-radius: 12px !important; overflow: hidden !important; display: flex !important;
  flex-direction: column !important; width: 100% !important; min-width: 0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin: 0 !important;
}
.d-card-square:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1); }
.d-card-square img, .d-card-square .wp-block-post-featured-image img,
.d-card-square .wp-block-post-featured-image a img {
  width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important;
  object-fit: cover !important; display: block !important; margin: 0 !important;
  border-top-left-radius: 12px !important; border-top-right-radius: 12px !important;
}
.d-card-square .wp-block-post-featured-image { margin: 0 !important; padding: 0 !important; }
.d-card-square .d-card-body {
  padding: 14px 16px 16px 16px !important; display: flex !important;
  flex-direction: column !important; flex: 1 !important; gap: 8px !important;
}
.d-card-meta { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin: 0 !important; }
.d-card-square .wp-block-post-title, .d-card-square h3, .d-card-square h2 {
  font-size: 1.02rem !important; line-height: 1.45 !important; font-weight: 700 !important;
  margin: 0 !important; color: var(--text-main) !important; display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; word-break: break-word !important;
}
.d-card-square .wp-block-post-title a { color: var(--text-main) !important; text-decoration: none !important; }
.d-card-square .wp-block-post-title a:hover { color: var(--wp--preset--color--accent) !important; }
.d-card-square .wp-block-post-date, .d-card-square time { font-size: 0.78rem !important; color: var(--text-sub) !important; margin: 0 !important; }

/* Bottom-right "すべての記事" Link */
.d-articles-more-wrap {
  margin-top: 18px !important; display: flex !important;
  justify-content: flex-end !important; text-align: right !important; width: 100% !important;
}
.d-more-link {
  font-size: 0.92rem !important; font-weight: 700 !important;
  color: var(--wp--preset--color--accent) !important; display: inline-flex !important;
  align-items: center !important; gap: 6px !important; text-decoration: none !important;
}
.d-more-link:hover { text-decoration: underline !important; }

/* Solution Cards Grid */
.d-solution-section { padding-top: 40px !important; padding-bottom: 40px !important; }
.d-solution-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.d-solution-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px;
  padding: 24px; display: flex; flex-direction: column;
}
.d-solution-icon-wrap {
  width: 48px; height: 48px; border-radius: 10px; background: rgba(2, 132, 199, 0.1);
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--wp--preset--color--accent); margin-bottom: 14px;
}
.d-solution-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--wp--preset--color--accent);
  background: rgba(2, 132, 199, 0.08); padding: 2px 8px; border-radius: 4px; align-self: flex-start; margin-bottom: 8px;
}
.d-solution-card h3 { margin: 0 0 8px 0; font-size: 1.15rem; }
.d-solution-card p { margin: 0 0 12px 0; font-size: 0.88rem; color: var(--text-sub); }

/* Hero Slider (Image 1 Full Fidelity) */
.d-hero-slider-wrap {
  position: relative !important; width: 100% !important; min-height: 440px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  justify-content: center !important; background-size: cover !important; background-position: center !important;
  color: #ffffff !important; text-align: center !important; padding: 60px 20px 40px 20px !important;
  box-sizing: border-box !important; overflow: hidden !important;
}
.d-hero-slider-wrap::before {
  content: "" !important; position: absolute !important; inset: 0 !important;
  background: rgba(15, 23, 42, 0.45) !important; z-index: 1 !important;
}
.d-hero-slider-content {
  position: relative !important; z-index: 2 !important; max-width: 800px !important;
  margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important;
}
.d-hero-badge {
  font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: 0.05em !important;
  margin-bottom: 12px !important; color: #ffffff !important; text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.d-hero-sub {
  font-size: 1.4rem !important; font-weight: 700 !important; line-height: 1.4 !important;
  margin-bottom: 6px !important; color: #ffffff !important; text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.d-hero-main {
  font-size: 2.1rem !important; font-weight: 800 !important; line-height: 1.3 !important;
  margin: 0 0 22px 0 !important; color: #ffffff !important; text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}
.d-hero-slider-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 10px 36px !important; border-radius: 999px !important; background: #ffffff !important;
  color: #0284c7 !important; font-size: 1rem !important; font-weight: 700 !important;
  text-decoration: none !important; box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.d-hero-slider-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important; }
.d-hero-dots { display: flex !important; gap: 8px !important; margin-top: 28px !important; position: relative !important; z-index: 2 !important; }
.d-hero-dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: rgba(255,255,255,0.4) !important; }
.d-hero-dot.is-active { background: #ffffff !important; }
.d-featured-bar { background: #111827 !important; color: #ffffff !important; padding: 12px 0 !important; font-weight: 700 !important; }
.d-featured-bar-inner { border-left: 4px solid #0284c7 !important; padding-left: 12px !important; font-size: 1.05rem !important; }

/* SWT Solution Cards Section (Image 2 Full Fidelity) */
.d-swt-wrapper {
  background: linear-gradient(135deg, #4f8bc9 0%, #3a75b2 100%) !important;
  border-radius: 20px !important; padding: 32px 28px !important; margin: 36px auto !important;
  box-sizing: border-box !important; color: #ffffff !important;
}
body.is-dark .d-swt-wrapper { background: linear-gradient(135deg, #1e3a5f 0%, #0f243e 100%) !important; }
.d-swt-header { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 16px !important; }
.d-swt-header-title { font-size: 1.6rem !important; font-weight: 800 !important; color: #ffffff !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; }
.d-swt-notice-box {
  background: rgba(15, 23, 42, 0.4) !important; border-radius: 12px !important; padding: 16px 20px !important;
  margin-bottom: 24px !important; font-size: 0.85rem !important; line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
.d-swt-notice-box p { margin: 0 !important; }
.d-swt-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; width: 100% !important; align-items: stretch !important; }
@media (max-width: 1024px) { .d-swt-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) { .d-swt-grid { grid-template-columns: 1fr !important; } }

.d-swt-card {
  background: #ffffff !important; border-radius: 16px !important; padding: 20px !important;
  display: flex !important; flex-direction: column !important; justify-content: space-between !important;
  color: #0f172a !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important; min-height: 380px !important; box-sizing: border-box !important;
}
.d-swt-card:hover { transform: translateY(-4px) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15) !important; }
.d-swt-card-top { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 12px !important; }
.d-swt-card-icon {
  width: 36px !important; height: 36px !important; border-radius: 8px !important; background: #0284c7 !important;
  color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; flex-shrink: 0 !important;
}
.d-swt-card-title { font-size: 1.05rem !important; font-weight: 700 !important; line-height: 1.35 !important; margin: 0 !important; color: #0f172a !important; flex: 1 !important; }
.d-swt-card-thumb { width: 100% !important; aspect-ratio: 16 / 9 !important; border-radius: 8px !important; overflow: hidden !important; margin-bottom: 12px !important; background: #f1f5f9 !important; }
.d-swt-card-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.d-swt-card-desc { font-size: 0.82rem !important; line-height: 1.5 !important; color: #475569 !important; margin-bottom: 16px !important; flex-grow: 1 !important; }
.d-swt-card-badges { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; margin-bottom: 14px !important; }
.d-swt-badge { font-size: 0.68rem !important; padding: 2px 8px !important; border-radius: 4px !important; background: #e0f2fe !important; color: #0369a1 !important; font-weight: 600 !important; }
.d-swt-card-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  width: 100% !important; padding: 10px 14px !important; border-radius: 8px !important; background: #0284c7 !important;
  color: #ffffff !important; font-size: 0.88rem !important; font-weight: 700 !important; text-decoration: none !important;
  transition: background 0.2s ease !important; box-sizing: border-box !important;
}
.d-swt-card-btn:hover { background: #0369a1 !important; }

.d-swt-card-coming-soon {
  background: rgba(255, 255, 255, 0.45) !important; border: 2px dashed rgba(255, 255, 255, 0.7) !important;
  border-radius: 16px !important; display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; min-height: 380px !important;
  color: #ffffff !important; text-align: center !important; box-sizing: border-box !important; padding: 20px !important;
}
.d-swt-coming-soon-icon { font-size: 32px !important; margin-bottom: 8px !important; opacity: 0.8 !important; }
.d-swt-coming-soon-text { font-size: 0.95rem !important; font-weight: 600 !important; opacity: 0.9 !important; }

/* Column Section (Tag: column Dedicated Block Pattern & Component) */
.d-column-section {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
  width: 100% !important;
}
.d-section-header {
  margin-bottom: 20px !important;
}
.d-section-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.d-title-tag {
  display: inline-block !important;
  padding: 3px 10px !important;
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  letter-spacing: 0.05em !important;
}
.d-section-desc {
  font-size: 0.88rem !important;
  color: var(--text-sub) !important;
  margin: 6px 0 0 0 !important;
}
.d-column-query-wrap {
  width: 100% !important;
  display: block !important;
}
.d-column-card-grid,
.wp-block-post-template.d-column-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  align-items: start !important; /* 投稿一覧と同様に上辺揃え */
}
@media (max-width: 1024px) {
  .d-column-card-grid,
  .wp-block-post-template.d-column-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .d-column-card-grid,
  .wp-block-post-template.d-column-card-grid {
    grid-template-columns: 1fr !important;
  }
}
.d-column-card-grid > li,
.wp-block-post-template.d-column-card-grid > li,
.wp-block-post-template.d-column-card-grid > li + li {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  align-self: start !important; /* 投稿一覧と同様に上辺揃え */
  display: flex !important;
  flex-direction: column !important;
}
.d-column-card {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.d-column-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1) !important;
}
.d-column-card .wp-block-post-featured-image {
  margin: 0 !important;
  padding: 0 !important;
}
.d-column-card .wp-block-post-featured-image img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  display: block !important;
}
.d-column-card-body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 10px !important;
}
.d-column-card-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
}
.d-tag-badge,
.wp-block-post-terms.d-tag-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.d-tag-badge a,
.wp-block-post-terms.d-tag-badge a {
  color: #0284c7 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
.d-tag-badge a::before,
.wp-block-post-terms.d-tag-badge a::before {
  content: "#" !important;
}
body.is-dark .d-tag-badge,
body.is-dark .wp-block-post-terms.d-tag-badge {
  background: rgba(2, 132, 199, 0.2) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}
body.is-dark .d-tag-badge a,
body.is-dark .wp-block-post-terms.d-tag-badge a {
  color: #38bdf8 !important;
}
.d-column-card .wp-block-post-title, .d-column-card h3 {
  font-size: 1.05rem !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.d-column-card .wp-block-post-title a {
  color: var(--text-main) !important;
  text-decoration: none !important;
}
.d-column-card .wp-block-post-title a:hover {
  color: var(--wp--preset--color--accent) !important;
}
.d-column-card .wp-block-post-date, .d-column-card time {
  font-size: 0.78rem !important;
  color: var(--text-sub) !important;
  margin: 0 !important;
}
.d-column-card .wp-block-post-excerpt p {
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  color: var(--text-sub) !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}