/* ============================================================
   collections.css — 産地で探す（サムネイル付きカード＋絞り込み＋地域ジャンプ）
   テキスト一覧 → 視覚カタログ。土地ごとの文様・色を一目で。
   ============================================================ */

/* —— 絞り込みバー（sticky） —— */
.ocol-filter {
  position: sticky; inset-block-start: 0; z-index: 20;
  display: flex; gap: var(--s-md); align-items: center; flex-wrap: wrap;
  padding-block: var(--s-sm); margin-block-end: var(--s-lg);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px); border-block-end: var(--hair);
}
.ocol-search { position: relative; flex: 1 1 16em; max-inline-size: 24em; }
.ocol-search svg { position: absolute; inset-block-start: 50%; inset-inline-start: .7em; transform: translateY(-50%);
  inline-size: 17px; block-size: 17px; stroke: var(--ink-3); fill: none; stroke-width: 1.6; pointer-events: none; }
.ocol-search input {
  inline-size: 100%; padding: .55em .8em .55em 2.3em; border: var(--hair-2); background: var(--paper);
  font-family: var(--sans); font-size: var(--t-sm); color: var(--ink); border-radius: 0;
}
.ocol-search input:focus { outline: none; border-color: var(--red); }
.ocol-jump { display: flex; gap: var(--s-2xs); flex-wrap: wrap; }
.ocol-jump a {
  font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; padding: .35em .7em; border: var(--hair);
  transition: color var(--d1) var(--ease), border-color var(--d1) var(--ease), background var(--d1) var(--ease);
}
.ocol-jump a:hover { color: var(--paper); background: var(--red); border-color: var(--red); }

/* —— 地域セクション見出し —— */
.ocol-region { scroll-margin-block-start: 5rem; padding-block: var(--s-md) var(--s-lg); }
.ocol-region__head { display: flex; align-items: baseline; gap: var(--s-sm); flex-wrap: wrap; margin-block-end: var(--s-md);
  border-block-end: var(--rule); padding-block-end: var(--s-xs); }
.ocol-region__head h2 { font-family: var(--serif); font-weight: 600; font-size: var(--t-lg); margin: 0; color: var(--ink); }
.ocol-region__en { font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--red); }
.ocol-region__ct { margin-inline-start: auto; font-family: var(--grotesk); font-size: var(--t-2xs); color: var(--ink-3); }
.ocol-region__note { flex-basis: 100%; font-size: var(--t-sm); color: var(--ink-2); line-height: var(--lh-snug); margin: 0; }

/* —— 産地カード・グリッド —— */
.ocol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s-md); }
.ocard {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  border: var(--hair); background: var(--paper);
  transition: border-color var(--d1) var(--ease), box-shadow var(--d2) var(--ease), transform var(--d2) var(--ease);
}
.ocard:hover { border-color: var(--red); box-shadow: var(--shadow); transform: translateY(-3px); }
.ocard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.ocard__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease); }
.ocard:hover .ocard__media img { transform: scale(1.07); }
.ocard__count {
  position: absolute; inset-block-end: .4rem; inset-inline-end: .4rem;
  background: var(--ink); color: #fff; font-family: var(--grotesk); font-size: var(--t-2xs);
  letter-spacing: .04em; padding: .2em .55em;
}
.ocard__body { padding: var(--s-xs) var(--s-sm) var(--s-sm); display: flex; flex-direction: column; gap: 2px; }
.ocard__nm { font-family: var(--serif); font-size: var(--t-md); line-height: 1.2; }
.ocard__en { font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--ink-3); }
/* 在庫なし産地は控えめに */
.ocard.is-empty { opacity: .6; }
.ocard.is-empty .ocard__count { background: var(--ink-3); }
.ocard:hover.is-empty { opacity: 1; }
/* サムネ無し（在庫なし）の織りモチーフ代替 */
.ocard__media--motif { display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 8px, var(--paper-3) 8px, var(--paper-3) 16px); }
.ocard__media--motif svg { inline-size: 46%; block-size: auto; color: var(--line-2); opacity: .85; }

.ocol-empty { text-align: center; color: var(--ink-2); padding-block: var(--s-2xl); }

@media (max-width: 520px) {
  .ocol-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-sm); }
  .ocol-filter { position: static; }
}