/* 案C 第3版「表紙カード3冊」。正本 = lp_link_tiles_2026-10-07/案C_第3版/カード部品.html
   このファイルは apply_hero2026.py --cards が正本から書き出す。手で直さない */
/* 案C 第3版 表紙カード3冊。ヒーロー内の行が増える分、この行の上余白を詰める(本番は clamp(42px, 8vw, 110px)、760px以下は 44px) */
.hero-cta{margin-top:clamp(28px,4vw,64px)}

.hero-cta{container-type:inline-size;align-items:flex-start;gap:0}
.hero-shelf{--u:min(1px,calc(100cqw / 550));position:relative;display:flex;align-items:flex-end;padding:calc(16*var(--u)) 0 calc(28*var(--u)) calc(27*var(--u))}
.hero-shelf::after{content:"";position:absolute;left:calc(14*var(--u));right:calc(14*var(--u));bottom:calc(10*var(--u));height:12px;border-radius:50%;background:rgba(0,40,80,.28);filter:blur(8px)}
.cover{--band:var(--blue-deep);position:relative;z-index:1;display:flex;flex-direction:column;flex:none;width:calc(182*var(--u));aspect-ratio:3/4;background:#fff;color:var(--ink);
  border-radius:4px 12px 12px 4px;box-shadow:var(--shadow-lg),inset 2px 0 0 rgba(0,0,0,.06);
  transform:rotate(-6deg) translateY(4px);transform-origin:bottom center;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cover + .cover{margin-left:calc(-22*var(--u))}
.cover.is-mid{z-index:2;transform:rotate(0) translateY(-8px)}
.cover.is-last{transform:rotate(5deg) translateY(6px)}
.cover.is-ink{--band:var(--blue-ink)}
.cover.is-pop{--band:var(--magenta)}
.cover:hover{transform:rotate(0) translateY(-12px) scale(1.04);z-index:3;box-shadow:0 34px 70px rgba(20,40,70,.3)}
.cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(9*var(--u));border-radius:4px 0 0 4px;background:linear-gradient(90deg,color-mix(in srgb,var(--band) 70%,#000),color-mix(in srgb,var(--band) 85%,#fff));opacity:.9}
.cv-ext{position:absolute;top:calc(7*var(--u));right:calc(7*var(--u));z-index:1;display:grid;place-items:center;width:calc(22*var(--u));height:calc(22*var(--u));border-radius:50%;background:var(--band);color:#fff}
.cv-ext svg{width:calc(14*var(--u));height:calc(14*var(--u))}
.cv-body{flex:1;display:flex;flex-direction:column;padding:calc(18*var(--u)) calc(12*var(--u)) calc(12*var(--u)) calc(21*var(--u))}
.cv-text{display:flex;flex-direction:column}
.cv-title{font-family:var(--font-round);font-weight:900;font-size:calc(32*var(--u));line-height:1.2}
.cover.is-mid .cv-title{font-size:calc(26*var(--u))}
.cv-title .nw{white-space:nowrap}
.cv-lead{font-family:var(--font-round);font-weight:700;font-size:max(12px,calc(14*var(--u)));color:var(--magenta-deep);margin-top:calc(6*var(--u))}
.cv-stickers{margin-top:auto;display:flex;justify-content:flex-end;align-items:flex-end;gap:calc(4*var(--u));padding-top:calc(8*var(--u))}
.cv-sticker{display:grid;place-items:center;align-content:center;width:calc(64*var(--u));height:calc(64*var(--u));border-radius:50%;background:var(--yellow);color:var(--ink);flex:none;
  text-align:center;font-family:var(--font-round);font-weight:900;font-size:max(8.5px,calc(9.3*var(--u)));line-height:1.25;transform:rotate(-8deg);box-shadow:0 6px 14px rgba(0,0,0,.14)}
.cv-sticker + .cv-sticker{transform:rotate(5deg) translateY(calc(-6*var(--u)))}
.cv-sticker b{display:block;font-family:var(--font-en);font-weight:900;font-size:calc(18*var(--u));line-height:1;margin-top:calc(2*var(--u));letter-spacing:-.01em}
.cv-sticker b i{font-style:normal;font-size:.6em;margin-left:1px}
.cv-sticker.is-arrow b{font-size:calc(21*var(--u))}
.shelf-hint{position:absolute;left:calc(27*var(--u));bottom:-4px;font-size:.74rem;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:4px}
@media (max-width:560px){
  .hero-shelf{--u:1px;display:grid;gap:12px;width:100%;padding:0 0 26px}
  .hero-shelf::after{display:none}
  .cover,.cover + .cover,.cover.is-mid,.cover.is-last{margin:0;transform:none;width:100%;aspect-ratio:auto;flex-direction:row;align-items:stretch;z-index:1}
  .cv-body{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:14px 12px 14px 21px;min-height:92px}
  .cv-title{font-size:1.6rem}
  /* 公約: 「市長選挙公約の」(7字)が丸2つの左に1行で入る大きさ。カード幅から逆算(375px幅で約21px)。入らない狭い機種では語句の境目で4行になる */
  .cover.is-mid .cv-title{font-size:clamp(1.1rem,calc(100cqw / 7 - 27px),1.5rem)}
  .cv-stickers{margin:0;padding:0;gap:5px;margin-right:12px}
  .cv-sticker{width:60px;height:60px}
  .cv-ext{top:7px;right:7px;width:20px;height:20px}
  .cv-ext svg{width:13px;height:13px}
  .cv-sticker + .cv-sticker{transform:rotate(5deg) translateY(0)}
  .shelf-hint{left:2px;bottom:0}
}

/* 1段組みになる幅(1000px以下)では、写真をカードより上に出す(2026-10-08 本人指示)。
   カードは .hero-copy の中、写真は .hero-copy の外にあるので、order だけでは入れ替えられない。
   .hero-copy を display:contents にして中身を .hero-inner の直接の子にし、順番を order で決める。
   ・.hero-copy の箱が無くなるので、箱が持っていた position/z-index を中身に移す(アーチの上に出すため)
   ・.hero-inner の gap(32px)が文字の各行の間にも入ってしまうので gap を0にし、
     同じ32pxを写真の上余白として戻す(見た目の間隔は変えない) */
@media (max-width:1000px){
  .hero-inner{gap:0}
  .hero-copy{display:contents}
  .hero-lead2026,.hero-title,.hero-sub,.hero-cta{position:relative;z-index:3}
  .hero-lead2026{order:1}
  .hero-title{order:2}
  .hero-sub{order:3}
  .hero-visual{order:4;margin-top:32px}
  .hero-cta{order:5}
}

/* Desktop: align the card covers with the blue nameplate. */
@media (min-width:1001px){
  .hero-cta{transform:translateY(var(--card-align-offset,0px))}
}