/* =====================================================================
   lisas atelier ― トップ（#top）：プロフィール＋丸いハイライト（hero/style.css）
   HERO担当（ひな形から、このお客様に合わせて変えた所に【lisas】の印）。読み込む順：tokens.css → base.css → この style.css
   - 形は base.css のクラスを使う（.wrap・.logo-mark・.ring・.logo-heart・.ph・.ph--1x1・.ph--round・
     .ph--empty・.ph--4x5・.link・.sub-title・.fine・.phrase・.draft・.sr-only）。ここには並べ方だけを書く。
   - クラスの頭は hero-。値は tokens.css の変数だけ。説明は README.md、決まりは design.md「最初の画面」。
   - 大きな HERO の演出は置かない（決まり。このお客様の HERO は別の部品 atelier/）。動くのは、丸を押している間に少し縮むことだけ。
   ===================================================================== */

/* 上はナビの帯のすぐ下なので少しだけ。下は .sec と同じ（次のセクションとの間が --sec-space になる） */
.hero {
  padding-block: var(--space-5) calc(var(--sec-space) / 2);
}

/* ---------- 1. プロフィール（iPhone：左に丸いアイコン、右に名前。下にひとことと地域） ---------- */
.hero-profile {
  display: grid;
  grid-template-columns: var(--avatar) minmax(0, 1fr);
  grid-template-areas:
    "avatar id"
    "bio    bio";
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-4);
}
.hero-avatar { grid-area: avatar; }   /* .logo-mark .ring（輪は外に 5px 広がる。まわりの余白で切れない） */

.hero-id {
  grid-area: id;
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
/* 活動名（ページで1つの h1）：ロゴと同じ英字（--font-en：DM Serif Display） */
.hero-name {
  font-family: var(--font-en);
  font-weight: var(--fw-en);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  letter-spacing: .01em;
}
.hero-role {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.hero-person {
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

/* ひとこと（キャッチコピー）・地域・続きを読む：--fs-sm。ひとことと地域で3行まで（iPhone） */
.hero-bio {
  grid-area: bio;
  display: grid;
  justify-items: start;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.hero-catch .draft { margin-left: var(--space-1); }
.hero-place { color: var(--color-text-sub); }
/* iPhone：地域と撮影の形の2行（copy.md：せまいとき）。【lisas】地域の1つだけ（撮影の形の欄は使わない） */
.hero-place > span { display: block; }

/* 続きを読む（.link）。開いた中は本文の字（--fs-sm・--lh-snug） */
.hero-more { justify-self: stretch; }
.hero-more > summary { list-style: none; min-width: var(--tap); }   /* 「閉じる」（3文字）も押せる幅を 44px 以上に */
.hero-more > summary::-webkit-details-marker { display: none; }
.hero-more[open] .hero-more-open,
.hero-more:not([open]) .hero-more-close { display: none; }

.hero-about {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-2) var(--space-3);
}
.hero-about-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: start;
  gap: var(--space-4);
}
.hero-about-photo { border-radius: var(--radius-photo); }
.hero-about-intro > * + * { margin-top: var(--space-2); }
.hero-about-part {
  display: grid;
  gap: var(--space-2);
}
.hero-about-sub { font-size: var(--fs-base); }   /* h3（明朝）。h2「私について」より一段小さく */
.hero-about-list {
  display: grid;
  gap: var(--space-2);
}
.hero-about-list > li {
  position: relative;
  padding-left: var(--space-4);
}
/* 小さな輪の印（.sec-en の輪と同じ形） */
.hero-about-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--fs-sm) * var(--lh-snug) / 2 - 4px);
  width: 7px;
  height: 7px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
}

/* ---------- 2. 丸いハイライト（Instagram と同じく、横にスクロール） ---------- */
/* 【lisas】丸のすぐ上の一行（本人の自己紹介の3行目「七五三・記念日・特別な日の装いを」）。プロフィールの最後の行で、丸の見出しの役も兼ねる */
.hero-hl-lead {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
/* 列は画面の端まで（iPhone）。左の余白は --gutter。丸と丸の間は下の計算（右の端の丸が半分ほど見えて、続きがあると分かるように）。 */
.hero-hl {
  container-type: inline-size;
  margin-top: var(--space-3);
}
.hero-hl-list {
  --hero-hl-gap: var(--space-4);
  position: relative;              /* 中の読み上げ用の文字（.sr-only）を列の中に収める（ページが横に広がらない） */
  display: flex;
  /* script が入れる前も、入れた後も同じ高さ（丸＋名前2行＋上下の余白）。下の文が動かない */
  min-height: calc(var(--hl-size) + var(--space-2) + var(--ring-gap) + var(--ring-w) + var(--fs-xs) * var(--lh-tight) * 2 + var(--space-2) * 2);
  padding: var(--space-2) calc(var(--gutter) - var(--hero-hl-gap) / 2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* マウスでは横に流しにくいので、入りきらない幅では細いスクロールバーを出す（指で触る画面では出さない） */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
@media (hover: none), (pointer: coarse) {
  .hero-hl-list { scrollbar-width: none; }
  .hero-hl-list::-webkit-scrollbar { display: none; }
}
@supports (width: 1cqi) {
  .hero-hl-list {
    /* 【lisas】CEO の指定（2026-10-31 続き）：375〜430px のどの幅でも、右の端の丸の中心が画面の右の端に来るように（丸が半分見える）。
       ひな形は「5つ目の中心が右の端（16〜24px の中で）」だったので、375px では5つ目が約3px しか見えなかった。
       丸と丸の間は 16px（--space-4）より狭くしない（輪どうしが近づきすぎない）。そのため、見える丸の数 n＋半分を、幅で決める：
         A＝列の幅 − 左の余白 − 丸の半分、U＝丸＋16px として、A が 4U より小さいとき n＝3（375・390px：3つ半）、
         4U〜5U は n＝4（414〜440px：4つ半）、5U〜6U は n＝5、6U から n＝6。間＝A÷n − 丸。
       n の切りかえは clamp（0 か、差の分）を足し引きして書いた（CSS だけ。画面の幅の区切り〈ブレークポイント〉は足さない）。
       375px：間 34.3px・4つ目（カラフルドレス）が半分／390px：39.3px・4つ目が半分／430px：21.5px・5つ目（フリルドレス）が半分。
       間が左の余白の2倍（40px）を超えるとき（393〜407px）は、列の左右の内側の余白が 0 になり、1つ目の丸が 1〜3px 右へずれる */
    --hero-hl-a: calc(100cqi - var(--gutter) - var(--hl-size) / 2);
    --hero-hl-u: calc(var(--hl-size) + var(--space-4));
    --hero-hl-gap: max(var(--space-4), calc(
      var(--hero-hl-a) / 3 - var(--hl-size)
      - clamp(0px, (var(--hero-hl-a) - 4 * var(--hero-hl-u)) * 1000, var(--hero-hl-a) / 12)
      - clamp(0px, (var(--hero-hl-a) - 5 * var(--hero-hl-u)) * 1000, var(--hero-hl-a) / 20)
      - clamp(0px, (var(--hero-hl-a) - 6 * var(--hero-hl-u)) * 1000, var(--hero-hl-a) / 30)
    ));
  }
}
.hero-hl-item {
  flex: none;
  width: calc(var(--hl-size) + var(--hero-hl-gap));
}
/* 入りきるとき（PC）は中央に。入りきらないときは左から（左右の auto の余白は 0 になる） */
.hero-hl-item:first-child { margin-left: auto; }
.hero-hl-item:last-child { margin-right: auto; }

.hero-hl-btn {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: calc(var(--space-2) + var(--ring-gap) + var(--ring-w));   /* 名前と丸の間：--space-2＋輪の幅 */
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  text-align: center;
  cursor: pointer;
}
.hero-hl-ph {
  width: var(--hl-size);
  transition: transform var(--dur-fast) var(--ease-out);
}
/* 【lisas】CEO の指定（2026-10-31 続き）：丸の写真を photos.json の circleSize の直径で丸く切る。
   script が --hero-hl-zoom（100 ÷ circleSize）を入れ、--pos（circlePos）を拡大の中心にする。
   正方形の写真では、写真の中の「直径 circleSize の窓」を、残りの範囲の circlePos の位置に置いたのと同じ切れ方になる
   （例：circlePos 92.5% 40%・circleSize 60 → 窓の左はし 37%・上はし 16%、中心は横67%・縦46%）。写真そのものは加工しない */
.hero-hl-ph > img {
  transform-origin: var(--pos, 50% 50%);
  transform: scale(var(--hero-hl-zoom, 1));
}
.hero-hl-btn:active .hero-hl-ph { transform: scale(.96); }   /* 押している間は 0.96 倍 */
@media (prefers-reduced-motion: reduce) {
  .hero-hl-btn:active .hero-hl-ph { transform: none; }        /* base.css の .btn と同じく、縮めない */
}
.hero-hl-name { max-width: 100%; }

.hero-hl-note { margin-top: var(--space-1); }

/* ---------- 3. PC・タブレット（768px〜）：丸いアイコン（128px）を左、文を右（Instagram のパソコン表示の形） ---------- */
@media (min-width: 768px) {
  .hero-profile {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-areas:
      "avatar id"
      "avatar bio";
    align-items: start;
    column-gap: var(--space-6);
    row-gap: var(--space-3);
  }
  .hero-avatar {
    justify-self: center;
    margin-top: var(--space-2);
  }
  .hero-id { align-self: end; }
  /* 1行：地域｜撮影の形（入らないときは「｜」のあとで折り返す）。【lisas】1つだけのときは「｜」を付けない */
  .hero-place > span { display: inline-block; }
  .hero-place > span:first-child:not(:last-child)::after {
    content: "｜";
    content: "｜" / "";
  }
  .hero-about-top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .hero-hl-lead { margin-top: var(--space-5); text-align: center; }
  .hero-hl { margin-top: var(--space-4); }
  .hero-hl-list { --hero-hl-gap: var(--space-4); }
  .hero-hl-note { text-align: center; }
}