/* sourcing-resources.css — 貨源資源區塊
   所有規則僅作用於 .sourcing-section 內部或 sourcing-* 前綴，不影響外部元件。
   品牌色沿用現有站點變數（--brand / --brand-soft / --ink / --muted / --line），
   並以站點實際色值作為 fallback。
   區塊底色與 SELLER TOOLBOX 同款：background: var(--brand)（品牌 #2563EB），
   區塊內文字改白／淡白以維持對比；卡片內部仍為白底深色字。 */

.sourcing-section {
  --sourcing-brand: var(--brand, #2563EB);
  --sourcing-brand-soft: var(--brand-soft, #EFF6FF);
  --sourcing-ink: var(--ink, #172033);
  --sourcing-muted: var(--muted, #64748B);
  --sourcing-line: var(--line, #DCE5F0);
  --sourcing-surface: #FFFFFF;
  --sourcing-on-brand: #FFFFFF;
  --sourcing-on-brand-soft: var(--brand-soft, #EFF6FF);
  --sourcing-gap: 16px;

  box-sizing: border-box;
  /* 寬度／留白沿現站：內容最大 1180px，兩側至少 20px */
  padding: 80px max(20px, calc((100vw - 1180px) / 2));
  color: var(--sourcing-on-brand);
  background: var(--sourcing-brand);
}

.sourcing-section *,
.sourcing-section *::before,
.sourcing-section *::after {
  box-sizing: border-box;
}

/* ── 區塊標題：沿用現站 section-heading 結構與字級 ── */
.sourcing-section .section-heading {
  margin: 0 0 16px;
  max-width: 1180px;
}

.sourcing-section .section-heading .eyebrow {
  margin: 0 0 12px;
  color: var(--sourcing-on-brand);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sourcing-section .section-heading h2 {
  margin: 0;
  font-size: clamp(2.35rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--sourcing-on-brand);
}

.sourcing-intro {
  margin: 0 0 8px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--sourcing-on-brand-soft);
}

/* ── 分類群組 ── */
.sourcing-groups {
  margin-top: 16px;
}

.sourcing-group {
  margin-top: 32px;
}

.sourcing-group:first-child {
  margin-top: 0;
}

.sourcing-group-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--sourcing-on-brand);
}

.sourcing-count {
  font-size: 15px;
  font-weight: 500;
  color: var(--sourcing-on-brand-soft);
}

/* ── 卡片網格：桌機 4 欄，≤1024px 2 欄（390px 仍 2 欄） ── */
.sourcing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sourcing-gap);
}

.sourcing-grid > * {
  min-width: 0;
}

/* ── 單張貨源卡片：仍白底、深色名稱、Logo 原色 ── */
.sourcing-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 16px;
  background: var(--sourcing-surface);
  border: 1px solid var(--sourcing-line);
  border-radius: 14px;
  color: var(--sourcing-ink);
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.sourcing-card:hover,
.sourcing-card:active {
  border-color: var(--sourcing-brand);
  background: var(--sourcing-brand-soft);
}

.sourcing-card:hover {
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.1);
}

/* 藍底上焦點外框用白色，確保清楚可見 */
.sourcing-card:focus-visible {
  outline: 3px solid var(--sourcing-on-brand);
  outline-offset: 3px;
  border-color: var(--sourcing-brand);
  background: var(--sourcing-brand-soft);
}

/* Logo 保持原色：不做 filter / opacity / mask 等調色 */
.sourcing-logo {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}

.sourcing-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: inherit;
  overflow-wrap: anywhere;
}

.sourcing-arrow {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
  color: var(--sourcing-muted);
}

.sourcing-card:hover .sourcing-arrow,
.sourcing-card:focus-visible .sourcing-arrow {
  color: var(--sourcing-brand);
}

/* ── 響應式 ── */
@media (max-width: 1024px) {
  .sourcing-section {
    padding: 60px max(20px, calc((100vw - 1180px) / 2));
  }

  .sourcing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .sourcing-card {
    padding: 12px;
    gap: 10px;
  }

  .sourcing-name {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sourcing-card {
    transition: none;
  }
}