/* ==========================================================================
   投票所の案内（polling/。2026-10-15）
   - 地図の枠・凡例・ピン・吹き出しは style.css のセンキョ割の部品（.p-swMap__* など）をそのまま使う
   - ネット投票とセンキョ割の案内は election.css のトップの「投票のしかた」の部品（.s-vote__*）を使う
   ========================================================================== */

.p-poll {
  /* センキョ割の地図の部品が使う色と影（.p-sw の中で決めている値と同じ） */
  --sw-ink:    var(--color-base-dark);
  --sw-shadow: 6px 6px 0 var(--color-primary);
}

/* 中身の幅。共通の .l-inner は 1024px 以上で左右の余白が 0 になるため使わない */
.p-poll__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding-inline: var(--container-px-sp);
}
@media (min-width: 1024px) {
  .p-poll__inner { padding-inline: var(--container-px-desktop); }
}

/* ---- 見出し・日時 ---- */
.p-pollHero {
  padding-block: var(--sp-48) 0;
}
.p-pollHero__lead {
  max-width: 40em;
  margin: var(--sp-32) auto 0;
  line-height: 1.9;
}
.p-pollHero__when {
  display: grid;
  gap: var(--sp-12);
  max-width: 640px;
  margin: var(--sp-24) auto 0;
  padding: var(--sp-20);
  background-color: #fff;
  border: 2px solid var(--color-base-dark);
  border-radius: 16px;
}
.p-pollHero__when .s-vote__time { margin-top: 0; }
.p-pollHero__text {
  margin: 0;
  line-height: 1.8;
}
.p-pollHero__net {
  margin: var(--sp-20) 0 0;
  text-align: center;
  font-weight: var(--fw-bold);
}
.p-pollHero__net a {
  color: var(--color-accent2);
  line-height: 1.7;
}
.p-pollHero__net a i {
  margin-left: 0.4em;
  font-size: 0.9em;
}

@media (min-width: 768px) {
  .p-pollHero { padding-block: var(--sp-64) 0; }
  .p-pollHero__lead { text-align: center; }
  .p-pollHero__when {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--sp-24);
    padding: var(--sp-24) var(--sp-32);
  }
}

/* ---- 地図 ---- */
.p-pollMap {
  padding-block: var(--sp-64) 0;
}
.p-pollMap__lead {
  margin: var(--sp-24) 0 0;
  line-height: 1.8;
  text-align: center;
}
@media (min-width: 768px) {
  .p-pollMap { padding-block: var(--sp-80) 0; }
}

/* センキョ割の案内（地図のすぐ下。投票所でもネットでも使える特典なので、この位置。2026-10-15 市川さん指示）。
   カードの見た目は election.css の .s-vote__sw。地図の枠の黄色い影の分だけ上をあける */
.p-pollSw { margin-top: var(--sp-40); }

/* ---- 投票所の一覧 ---- */
.p-pollList {
  padding-block: var(--sp-64);
}
.p-pollList__items {
  display: grid;
  gap: var(--sp-24);
  margin: var(--sp-32) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .p-pollList { padding-block: var(--sp-80) var(--sp-96); }
  .p-pollList__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-32) var(--sp-24);
  }
}

/* カード */
.p-pollCard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #fff;
  border: 2px solid var(--color-base-dark);
  border-radius: 16px;
  scroll-margin-top: calc(var(--header-height-sp, 64px) + 24px);   /* JS が動かないときのページ内リンク用 */
}
@media (min-width: 1200px) {
  .p-pollCard { scroll-margin-top: calc(var(--header-height, 72px) + 24px); }
}
.p-pollCard:focus { outline: none; }
.p-pollCard:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}
/* 地図の「詳しく見る」で移ってきたカードを少しのあいだ目立たせる（センキョ割と同じ） */
.p-pollCard.is-highlight {
  box-shadow: 0 0 0 4px var(--color-primary);
  transition: box-shadow 0.3s ease;
}

.p-pollCard__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 2px solid var(--color-base-dark);
  background-color: var(--color-neutral);
}
.p-pollCard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 写真が無い投票所：投票箱のアイコン */
.p-pollCard__media--none {
  display: grid;
  place-items: center;
  background-color: #FFF6D6;
  background-image:
    linear-gradient(rgba(26, 26, 26, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 26, 26, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--color-accent2);
  font-size: 56px;
}

.p-pollCard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-16);
  padding: var(--sp-20);
}
.p-pollCard__head {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}
.p-pollCard__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 72px;
  height: 72px;
  padding: 6px;
  background-color: #fff;
  border: 1px solid rgba(26, 26, 26, 0.15);
  border-radius: 12px;
}
.p-pollCard__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.p-pollCard__name {
  margin: 0;
  font-size: 19px;
  font-weight: var(--fw-black);
  line-height: 1.5;
  /* 名前と住所は、区切り（空白と <wbr>。includes/senkyowari.php の senkyowari_wbr）でだけ折り返す。
     区切りの間が 1 行に収まらないときだけ、途中で折り返す */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.p-pollCard__info {
  display: grid;
  gap: var(--sp-8);
  margin: 0;
}
.p-pollCard__row {
  display: grid;
  grid-template-columns: 3.5em minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-12);
}
.p-pollCard__row dt {
  justify-self: start;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: var(--color-neutral);
  font-size: 13px;
  font-weight: var(--fw-bold);
  line-height: 1.6;
  white-space: nowrap;
}
.p-pollCard__row dd {
  margin: 0;
  line-height: 1.7;
  word-break: keep-all;   /* 名前と同じく、区切りの位置で折り返す */
  overflow-wrap: anywhere;
}
.p-pollCard__time {
  color: var(--color-accent2);
  font-weight: var(--fw-black);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
/* ふりがな ON：ラベルの中のふりがなの分だけ、行の幅をそろえる */
body.is-furigana-on .p-pollCard__row { grid-template-columns: 4.2em minmax(0, 1fr); }

.p-pollCard__note {
  font-size: 15px;
  line-height: 1.9;
}
.p-pollCard__note p { margin: 0; }
.p-pollCard__note p + p { margin-top: 0.8em; }

.p-pollCard__map {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 18px;
  border: 2px solid var(--color-accent2);
  border-radius: 999px;
  color: var(--color-accent2);
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  text-decoration: none;
  transition: background-color var(--ease-fast), color var(--ease-fast);
}
.p-pollCard__map:hover {
  background-color: var(--color-accent2);
  color: #fff;
  text-decoration: none;
}
.p-pollCard__map:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}
.p-pollCard__map i { font-size: 0.85em; }

@media (min-width: 768px) {
  .p-pollCard__body { padding: var(--sp-24); }
  .p-pollCard__name { font-size: 20px; }
}
/* 幅 399px 以下: ロゴを小さくして、名前の列の幅を確保する */
@media (max-width: 399px) {
  .p-pollCard__body { padding: var(--sp-16); }
  .p-pollCard__head { gap: 10px; }
  .p-pollCard__logo { width: 52px; height: 52px; padding: 4px; border-radius: 10px; }
  .p-pollCard__name { font-size: 17px; }
}

/* ---- ネットでも投票OK！（トップの「投票のしかた」の部品。カードは 1 枚なので中央に置く） ---- */
.p-pollNet__card {
  max-width: 560px;
  margin: var(--sp-32) auto 0;
}
.p-pollNet__card .s-vote__time { margin-top: 0; }
@media (min-width: 768px) {
  .p-pollNet__card .s-vote__btn { margin-top: var(--sp-24); }
}

/* 次に見るページの上の余白（波のすぐ下） */
.p-pollNext { padding-top: var(--sp-16); }

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