/* ═══════════════════════════════════════════
   SOLUTION ARCHIVE — Extracted from inline <style>
   Used by: archive-ideeda_solution.php
   Loads AFTER solutions.css to override the base
   .sol-grid (auto-fill, responsive) for the
   Industry + Material filter layout.
   ═══════════════════════════════════════════ */

.sol-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px) var(--space-5, 20px);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}
.sol-filter__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
}
.sol-filter__label {
  flex: 0 0 84px;
  font-size: var(--text-sm, 14px);
  font-weight: 700;
  color: var(--color-gray-700, #374151);
  padding-top: 6px;
}
.sol-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
}
.sol-chip {
  font-size: var(--text-sm, 14px);
  font-weight: 600;
  color: var(--color-gray-600, #4b5563);
  background: var(--color-gray-50, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.sol-chip:hover {
  border-color: var(--color-primary, #1a3a5c);
  color: var(--color-primary, #1a3a5c);
}
.sol-chip.is-active {
  background: var(--color-primary, #1a3a5c);
  border-color: var(--color-primary, #1a3a5c);
  color: #fff;
}

/* Archive grid (overrides the 4-col base in solutions.css) */
.sol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-6, 24px);
  margin-bottom: var(--space-10, 40px);
}
.sol-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-3, 12px) 0;
}
.sol-tag {
  font-size: var(--text-xs, 12px);
  font-weight: 600;
  color: var(--color-primary-700, #1a3a5c);
  background: var(--color-primary-50, #eef2ff);
  border-radius: 999px;
  padding: 3px 10px;
}
.sol-tag--mat {
  color: var(--color-accent-700, #b45309);
  background: #fff7ed;
}

@media (max-width: 640px) {
  .sol-filter__label { flex-basis: 100%; padding-top: 0; }
  .sol-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-4, 16px);
  }
}

/* ═══════════════════════════════════════════
   SOLUTION CATEGORY CARD GRID (8 categories)
   Visual cards with image/gradient + overlay text
   ═══════════════════════════════════════════ */

.sol-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5, 20px);
}

.sol-cat-card {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.sol-cat-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-xl, 0 20px 40px rgba(0,0,0,.15));
}

.sol-cat-card__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Decorative dot pattern for gradient-only fallback cards */
.sol-cat-card__pattern {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Dark gradient overlay for text readability */
.sol-cat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.45) 40%,
    transparent 70%
  );
}

/* Text content at bottom of card */
.sol-cat-card__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-5, 20px) var(--space-4, 16px);
  color: #fff;
  z-index: 1;
}

.sol-cat-card__title {
  font-size: var(--text-lg, 18px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-1, 4px);
  color: #fff;
}

.sol-cat-card__subtitle {
  font-size: var(--text-sm, 14px);
  line-height: 1.4;
  margin: 0 0 var(--space-2, 8px);
  color: rgba(255,255,255,.75);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sol-cat-card__count {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs, 12px);
  font-weight: 600;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 3px 10px;
  backdrop-filter: blur(4px);
}

/* Responsive: 4 → 2 → 1 columns */
@media (max-width: 1024px) {
  .sol-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sol-cat-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4, 16px);
  }
}

/* ═══════════════════════════════════════════
   SOLUTION CATEGORY PAGE (redesign)
   ═════════════════════════════════════════ */

/* Category header */
.sol-cat-intro {
  background: #fff;
  border-bottom: 1px solid var(--color-gray-100, #eceff3);
  padding: var(--space-10, 40px) 0 var(--space-8, 32px);
}
.sol-cat-intro__inner { display: flex; align-items: center; gap: var(--space-6, 24px); }
.sol-cat-intro__icon {
  flex: 0 0 auto; width: 72px; height: 72px;
  border-radius: var(--radius-lg, 12px);
  background: var(--color-primary-50, #eef2ff);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.sol-cat-intro__icon img { width: 100%; height: 100%; object-fit: contain; }
.sol-cat-intro__text { flex: 1 1 auto; }
.sol-cat-intro__text .section-tag { color: var(--color-primary-600, #1a4a7c); }
.sol-cat-intro__text p { color: var(--color-gray-600, #4b5563); max-width: 640px; line-height: 1.7; margin: var(--space-2, 8px) 0 0; }
.sol-cat-intro__count {
  flex: 0 0 auto; text-align: center;
  background: var(--color-primary-50, #eef2ff); border: 1px solid var(--color-primary-100, #dbe3ff);
  border-radius: var(--radius-lg, 12px); padding: var(--space-4, 16px) var(--space-6, 24px);
}
.sol-cat-intro__count .num { display: block; font-size: var(--text-3xl, 2rem); font-weight: 800; color: var(--color-primary-700, #0f2440); line-height: 1; }
.sol-cat-intro__count .label { font-size: var(--text-xs, 12px); color: var(--color-gray-500, #6b7280); text-transform: uppercase; letter-spacing: .05em; }

/* Filter bar + cards */
.sol-filterbar { padding: var(--space-6, 24px) 0 var(--space-2, 8px); }
.sol-cards-section { padding: var(--space-6, 24px) 0 var(--space-16, 64px); }
.sol-grid--cat { grid-template-columns: repeat(3, 1fr); }

/* Category card (extends .sol-card base from solutions.css) */
.sol-card--cat { display: flex; flex-direction: column; }
.sol-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--color-primary-700, #1a3a5c), var(--color-primary-500, #2a5a8c));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.sol-card--cat:hover .sol-card-media { transform: scale(1.05); }
.sol-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,36,64,.55), transparent 55%);
}
.sol-card-media__cat {
  position: absolute; left: var(--space-4, 16px); bottom: var(--space-4, 16px); z-index: 1;
  font-size: var(--text-xs, 12px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.25);
  padding: 4px 12px; border-radius: 999px; backdrop-filter: blur(4px);
}
.sol-card-title { font-size: var(--text-lg, 18px); font-weight: 700; color: var(--color-gray-900, #111); margin-bottom: var(--space-2, 8px); }
.sol-card-desc { font-size: var(--text-sm, 14px); color: var(--color-gray-500, #6b7280); line-height: 1.6; margin-bottom: var(--space-3, 12px); }

/* Empty state */
.sol-empty-section { padding: var(--space-16, 64px) 0; }
.sol-empty-card {
  text-align: center; max-width: 560px; margin: 0 auto; padding: var(--space-12, 48px) var(--space-6, 24px);
  background: var(--color-gray-50, #f9fafb); border-radius: var(--radius-lg, 12px);
}
.sol-empty-card h3 { font-size: var(--text-xl, 1.25rem); margin-bottom: var(--space-3, 12px); }
.sol-empty-card p { color: var(--color-gray-600, #4b5563); margin-bottom: var(--space-4, 16px); }

@media (max-width: 1024px) {
  .sol-grid--cat { grid-template-columns: repeat(2, 1fr); }
  .sol-cat-intro__inner { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .sol-grid--cat { grid-template-columns: 1fr; }
  .sol-cat-intro__count { width: 100%; }
}