/* ==================================================================
 * 店舗を探す  ( /shop/  … archive-shop.php )
 *
 * このファイルが持つのは「キーワードで探す」の部分だけ。
 * 下にある「エリアから探す」(地図)の見た目は page-brand.css の .area-* が
 * 持っていて、このページでも page-brand.css を読み込んでいる
 * (理由は functions.php の読み込み部分に書いてある)。
 * ================================================================== */

/* ---------- キーワードで探す ---------- */

.shop-find {
  /* フッターの「キーワード検索」から飛んでくる。ヘッダーの高さぶん手前で止める */
  scroll-margin-top: var(--header-height);
  padding-top: var(--rule-section);
  /*
   * 下だけ大きく取る。
   *
   * 全ページ共通の区切りは前後24pxずつ(合わせて48px)。
   * ただしここは「キーワードで探す」と「エリアから探す」という
   * 別々の探し方が入れ替わる場所で、区切りというより章の変わり目。
   *
   * さらに、上の段は写真16枚の一覧で、中の空きが32px、
   * 締めくくりに「もっと見る」の大きなボタンが立っている。
   * その隣に48pxや72pxを置いても、一覧の中の空きと大差がなく、
   * ボタンが下の見出しに引きずられてひとつのまとまりに見える。
   *
   * こちらが72pxを持ち、下のセクションの24pxと合わせて96pxにする。
   * ページの中でいちばん広い境目になる。
   */
  padding-bottom: calc(var(--rule-section) * 3);
}

/*
 * 入力欄。
 *
 * 枠で囲まず、下線1本にしている。
 * このページで押せるもの・選べるものはブランドのボタンと店舗カードで、
 * そこに枠付きの箱を足すと、四角が3種類並んで焦点がぼける。
 * 下線だけにすると「ここに書く」ことだけが伝わる。
 */
/* 虫めがねを重ねるので、位置の基準にする */
.shop-find__box {
  position: relative;
}

.shop-find__icon {
  position: absolute;
  left: 0;
  /* 入力欄の下線ぶんを除いた中心に置く */
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-sub);
  /* 絵の上を押しても入力欄に届くようにする */
  pointer-events: none;
}

.shop-find__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.shop-find__input {
  display: block;
  width: 100%;
  /* 左は虫めがね(18px)＋間隔(10px) */
  padding: var(--space-sm) 0 var(--space-sm) 28px;
  border: 0;
  border-bottom: 1px solid var(--color-ink);
  border-radius: 0;
  background-color: transparent;
  /*
   * 文字は本文と同じ大きさ。
   * 以前は Lead(18px)にしていたが、すぐ上のリード文(15px)より大きくなり、
   * 入力欄のほうが見出しに見えていた。
   * ここは打ち込む場所であって、読ませる場所ではない。
   */
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
  /* iOSが勝手に付ける内側の影と角丸を消す */
  -webkit-appearance: none;
  appearance: none;
}

.shop-find__input::placeholder {
  color: var(--color-text-sub);
}

.shop-find__input:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}

/* 入力欄に入ったら、下線と一緒に虫めがねも色を変える */
.shop-find__input:focus ~ .shop-find__icon,
.shop-find__box:focus-within .shop-find__icon {
  color: var(--color-accent);
}

/* 入力欄の右端に出る「×」。ブラウザ既定のものは形がまちまちなので消す */
.shop-find__input::-webkit-search-decoration,
.shop-find__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/*
 * ブランドの絞り込み。選べるのは1つだけ。
 * いまは4つだが、まとまりが増える可能性があるので折り返す並びにしてある。
 */
.shop-find__brands {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

/*
 * 見た目はエリアの子ボタン(.area-subs__btn)に合わせている。
 * 同じ「条件で絞る」操作が1ページに2か所あるので、形が違うと
 * 別の機能に見えてしまう。
 */
.shop-find__brand {
  padding: 6px 14px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background-color: transparent;
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

@media (hover: hover) {
  .shop-find__brand:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

/* 選んでいるものは青で塗りつぶす。エリアの絞り込みと同じ扱い */
.shop-find__brand[aria-pressed="true"] {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-white);
}

/*
 * 件数。
 * 打つたびに変わる唯一の文字なので、結果の真上に置く。
 * ここが変われば「絞り込みが効いている」と分かる。
 */
.shop-find__count {
  margin-top: var(--space-lg);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}

.shop-find__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /*
   * 段と段の空き / 列と列の空き。
   *
   * 段のほうは --rule-block(48px)にしていたが、店名が2行になる店舗があり、
   * その行だけ下が大きく空いて、並びが途切れて見えた。
   * 32pxにすると、写真の帯が上から下へ続いて読める。
   * それでも列の空き(24px)より広いので、
   * 「横に4つ、それが縦に続く」という読み方は保てる。
   */
  gap: var(--space-lg) var(--space-md);
  margin-top: var(--rule-caption);
}

.shop-find__card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.shop-find__thumb {
  display: block;
  overflow: hidden;
  /* 一覧なので横長。1枚あたりを小さく、数を見せる */
  aspect-ratio: 3 / 2;
  background-color: var(--color-grayge);
}

.shop-find__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

@media (hover: hover) {
  .shop-find__card:hover img {
    transform: scale(1.04);
  }
}

/* 写真が入っていない店舗の仮枠 */
.shop-find__thumb .placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--space-sm);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
  text-align: center;
}

/* 写真 → その説明。全ページ共通の12px */
.shop-find__name {
  display: block;
  padding-top: var(--rule-caption);
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.shop-find__area {
  display: block;
  margin-top: var(--space-2xs);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}

/* 残りを出すボタン。一覧の下に、中央に置く */
.shop-find__more {
  margin-top: var(--rule-block);
  text-align: center;
}

/*
 * 1件も当てはまらなかったとき。
 * 一覧が消えて何も無くなると壊れたように見えるので、必ず何か出す。
 */
.shop-find__empty {
  margin-top: var(--rule-block);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text-sub);
  text-align: center;
}


/* ---------- タブレット ---------- */

@media (max-width: 1100px) {
  .shop-find__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ---------- スマートフォン ---------- */

@media (max-width: 768px) {
  /*
   * 2列。1列に積むと84件で画面が延々と続く。
   * 2列なら1画面に4件入り、指で流して探せる長さに収まる。
   */
  .shop-find__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-sm);
  }

  /*
   * 入力欄の文字は16px以上にする。
   * これを下回るとiOSが自動で画面を拡大してしまい、
   * 打ち終わったあとページが拡大されたままになる。
   */
  .shop-find__input {
    font-size: 16px;
  }

  /*
   * ただし、置いてある案内の文字だけは本文と同じ15pxにする。
   *
   * ふだん目に入るのはこの案内のほうで、16pxのままだと
   * すぐ上のリード文(15px)より大きく、入力欄が見出しのように見える。
   *
   * iOSが拡大するかどうかは入力欄そのものの大きさで決まるので、
   * ここを小さくしても拡大は起きない。
   * 打っている最中の文字は16pxのままになるが、
   * そのときこの案内は消えているので、大きさの違いは見えない。
   */
  .shop-find__input::placeholder {
    font-size: var(--fs-body);
  }
}