/** Shared foundation: V26 article-card rules moved without a second renderer.
 * Both page skins and canonical blocks depend on this same stylesheet.
 * Page-specific journal/news-desk overrides remain in topskin.css.
 */

/* ═══ mg-tps: 記事カード（単一DNA・トークン追従） ═══ */
.mg-tps{display:grid;gap:18px}
.mg-tps--card{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.mg-tps--card[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.mg-tps--row,.mg-tps--hero{grid-template-columns:1fr;gap:0}
.mg-tps__item{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;border-radius:14px;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.mg-tps__item:hover{transform:translateY(-4px)}
.mg-tps__media{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--tsk-line);background:var(--tsk-card-2)}
.mg-tps__media img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--tsk-thumb-filter);transition:transform .45s cubic-bezier(.2,.7,.3,1),filter .35s ease}
.mg-tps__item:hover .mg-tps__media img{transform:scale(1.045);filter:none}
.mg-tps__noimg{position:absolute;inset:0;isolation:isolate;background:
 linear-gradient(color-mix(in oklab,var(--tsk-text) 7%,transparent) 1px,transparent 1px) 50% 50%/24px 24px,
 linear-gradient(90deg,color-mix(in oklab,var(--tsk-text) 7%,transparent) 1px,transparent 1px) 50% 50%/24px 24px,
 radial-gradient(60% 90% at 20% 20%,rgba(255,214,10,.18),transparent 60%),
 radial-gradient(70% 90% at 85% 80%,rgba(47,95,224,.22),transparent 65%),
 var(--tsk-card-2)}
/* アイキャッチ未設定を「読込失敗の空箱」に見せない。カード寸法を変えず、
   全variantで同じ回路DNAとMG印を出す。装飾はaria-hiddenのspan内だけで完結する。 */
.mg-tps__noimg::before{content:"";position:absolute;left:50%;top:50%;width:min(34%,72px);aspect-ratio:1;border:1px solid color-mix(in oklab,var(--tsk-signal) 42%,transparent);border-radius:18%;transform:translate(-50%,-50%) rotate(45deg);box-shadow:
 0 0 0 8px color-mix(in oklab,var(--tsk-data) 7%,transparent),
 0 0 34px color-mix(in oklab,var(--tsk-data) 22%,transparent)}
.mg-tps__noimg::after{content:"MG";position:absolute;inset:0;display:grid;place-items:center;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;font-weight:900;letter-spacing:.12em;text-indent:.12em;font-size:clamp(11px,1.6vw,18px);color:color-mix(in oklab,var(--tsk-text) 72%,var(--tsk-signal));text-shadow:0 0 18px color-mix(in oklab,var(--tsk-data) 38%,transparent)}
.mg-tps__chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--tsk-text);border:1px solid color-mix(in oklab,var(--tsk-text) 28%,transparent);border-radius:999px;padding:1.5px 9px;background:color-mix(in oklab,var(--tsk-text) 6%,transparent)}
.mg-tps__body{display:flex;flex-direction:column;gap:6px;padding:0 2px}
.mg-tps__title{font-size:15px;font-weight:700;line-height:1.5;color:var(--tsk-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
 background-image:linear-gradient(var(--tsk-signal),var(--tsk-signal));background-repeat:no-repeat;background-size:0% 1.5px;background-position:0 100%;
 transition:color .2s ease,background-size .35s cubic-bezier(.2,.7,.3,1)}
.mg-tps__item:hover .mg-tps__title{color:var(--tsk-signal);background-size:100% 1.5px}
.mg-tps__meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tsk-text-2);font-variant-numeric:tabular-nums}
.mg-tps__more{margin-top:18px;text-align:right}
.mg-tps__more a{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--tsk-text-2);text-decoration:none;border:1px solid var(--tsk-line);border-radius:999px;padding:7px 18px;transition:color .2s ease,border-color .2s ease,gap .2s ease}
.mg-tps__more a:hover{color:var(--tsk-signal);border-color:var(--tsk-signal);gap:12px}

/* 0件はホストテーマの日本語CTAへ戻さず、現在言語で理由を短く示す。
   固定height/min-heightを持たせないため、翻訳ニュースが無い面でも下部に巨大な空白を作らない。 */
.mg-tps-empty{margin:0;padding:15px 17px;border:1px solid var(--tsk-line);border-radius:12px;background:color-mix(in oklab,var(--tsk-text) 3%,transparent)}
.mg-tps-empty__title{margin:0;color:var(--tsk-text);font-size:13.5px;font-weight:800;line-height:1.55}
.mg-tps-empty__text{margin:4px 0 0;color:var(--tsk-text-2);font-size:12px;line-height:1.65}
.mg-tps-empty--error{border-color:color-mix(in oklab,#ef4444 48%,var(--tsk-line));background:color-mix(in oklab,#ef4444 7%,transparent)}

/* hero（特集）— 23.3.0: サムネは文字入りスライド画像が多く、題を画像に重ねると
   「画像内文字×重ね題」で共倒れになる(本番実測・運用者指摘)。題は画像下のソリッド帯へ。 */
.mg-tps--hero .mg-tps__item{position:relative;display:block;gap:0;border:1px solid var(--tsk-line);border-radius:18px;background:var(--tsk-card);overflow:hidden}
.mg-tps--hero .mg-tps__media{aspect-ratio:16/8.4;border-radius:0;border:0}
.mg-tps--hero .mg-tps__body{padding:16px 20px 18px}
.mg-tps--hero .mg-tps__title{font-family:var(--tsk-serif);font-size:clamp(19px,2.4vw,27px);font-weight:700;line-height:1.5;-webkit-line-clamp:3;color:var(--tsk-text)}
.mg-tps--hero .mg-tps__item:hover .mg-tps__title{color:var(--tsk-signal)}
/* アイキャッチ無し記事がヒーローに来た時の空箱回避: ゴーストワードマークを中央に */
.mg-tps--hero .mg-tps__noimg::before{width:min(24%,104px);opacity:.72}
.mg-tps--hero .mg-tps__noimg::after{content:"MISTERGADGET";font-weight:800;letter-spacing:.42em;text-indent:.42em;font-size:clamp(13px,1.7vw,19px);color:color-mix(in oklab,var(--tsk-text) 58%,var(--tsk-data))}

/* row（順位リスト） */
.mg-tps--row .mg-tps__item{flex-direction:row;align-items:center;gap:14px;padding:11px 8px;border-radius:12px;border-bottom:1px solid var(--tsk-line)}
.mg-tps--row .mg-tps__item:hover{transform:none;background:color-mix(in oklab,var(--tsk-signal) 7%,transparent)}
.mg-tps--row .mg-tps__media{flex:0 0 106px;aspect-ratio:16/10;border-radius:10px}
.mg-tps--row .mg-tps__title{font-size:14px;-webkit-line-clamp:2}
.mg-tps__rank{flex:0 0 auto;min-width:1.4em;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;text-align:center;background:linear-gradient(150deg,var(--tsk-signal),var(--tsk-data));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

@media(max-width:959px){
  .mg-tps--card{grid-template-columns:repeat(2,1fr);gap:12px}
  .mg-tps--row .mg-tps__media{flex-basis:92px}
  .mg-tps--hero .mg-tps__media{aspect-ratio:16/10}
  .mg-tps--hero .mg-tps__body{padding:14px 16px}
  .mg-tps__more a{display:flex;justify-content:center}
}

.mg-tsk-off-filter .mg-tps__media img{filter:none}

/* カードのstagger（グリッド内で波打つ出現） */
@supports (animation-timeline: view()) {
  .mg-tps--card .mg-tps__item:nth-child(2){animation-range:entry 4% entry 42%}
  .mg-tps--card .mg-tps__item:nth-child(3){animation-range:entry 8% entry 46%}
}

.mg-tps__item:focus-visible,.mg-tps__more a:focus-visible{outline:2px solid var(--tsk-data);outline-offset:3px;border-radius:14px}

/* Local surfaces never carry the page-wide mg-topskin-on marker. */
.mg-post-list-skin{box-sizing:border-box;max-width:100%;padding:clamp(12px,2vw,20px);border-radius:14px;margin-block:1.25rem}
.mg-post-list-skin .mg-tps__body{min-width:0}
.mg-post-list-skin .mg-tps__title{overflow-wrap:anywhere}

/* Motion preferences apply to card hover effects as well as page entrances. */
.mg-tsk-off-motion :is(.mg-tps__item,.mg-tps__media img,.mg-tps__title,.mg-tps__more a){transition:none}
.mg-tsk-off-motion .mg-tps__item:hover,.mg-tsk-off-motion .mg-tps__item:hover .mg-tps__media img{transform:none}
@media(prefers-reduced-motion:reduce){
  .mg-tps__item,.mg-tps__media img,.mg-tps__title,.mg-tps__more a{transition:none}
  .mg-tps__item:hover,.mg-tps__item:hover .mg-tps__media img{transform:none}
}