/* =========================================================================
   ミリタリーNOW — premium article shell v1 (2026-08-25)

   Extends the 2026-08-24 homepage cinematic/glass visual language
   (assets/css/hero-fix.css "v6 premium cinematic teaser", assets/css/
   affiliate.css "v3 premium commerce") to individual article pages.

   Scope: chrome only. This file never changes which hero image is shown
   (real media selected per MILITARY_MEDIA_POLICY.md / data/media-
   provenance.json) and never changes which commerce offers are shown
   (real, verified data from data/generated/affiliate_links.json via
   render_affiliate_blocks.py). It only adds the glass-panel framing,
   kicker labels and refined spacing already used on the homepage.

   Markup this file depends on:
   - <div class="article-hero-frame"> wrapping <img class="article-hero">,
     added by scripts/inject_premium_article_shell.py.
   - <div class="affiliate-box__kicker"> inside the existing
     <section class="affiliate-box"> end-of-article commerce block,
     added by scripts/render_affiliate_blocks.py (build_end_block).
   Both degrade safely: if the wrapping markup is absent, only the
   unaffected legacy styles from article-enhancements.css / affiliate.css
   apply.
   ========================================================================= */

/* --- Hero: glass-framed cinematic treatment, same real photo/video ----- */
.article-hero-frame{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  width:calc(100% + 136px);margin:32px 0 10px -68px;
  box-shadow:0 26px 70px rgba(0,0,0,.34);
  background:#0c1725;
}
.article-hero-frame .article-hero{
  width:100%!important;margin:0!important;box-shadow:none!important;display:block;
}
.article-hero-frame::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,10,19,0) 58%,rgba(3,10,19,.7) 100%);
}
.article-hero-frame::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.13;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(170,220,255,.09) 4px);
}
.article-hero-frame__badge{
  position:absolute;left:20px;bottom:16px;z-index:2;
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 13px;border:1px solid rgba(178,220,255,.26);
  background:rgba(3,12,22,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#d8ecfb;font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.14em;text-transform:uppercase;
}
.article-hero-frame__badge-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:#56bcff;box-shadow:0 0 0 4px rgba(86,188,255,.16),0 0 12px #56bcff;
  animation:premiumArticleLivePulse 2.2s ease-in-out infinite;
}
.article-hero-frame__badge b{font:inherit;font-weight:800;color:#fff}
.article-hero-frame__badge span:last-child{opacity:.86}
@keyframes premiumArticleLivePulse{50%{opacity:.45;transform:scale(.82)}}

@media(max-width:760px){
  .article-hero-frame{width:calc(100% + 40px);margin:0 0 10px -20px}
  .article-hero-frame__badge{left:12px;bottom:12px;padding:7px 10px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .article-hero-frame__badge-dot{animation:none}
}

/* --- Commerce: article-page equivalent of the homepage #field-library -- */
.affiliate-box{
  position:relative;overflow:hidden;
  padding:28px 30px 32px;border:1px solid rgba(158,205,237,.22);
  background:
    radial-gradient(circle at 92% 0%,rgba(42,143,214,.22),transparent 40%),
    linear-gradient(150deg,#071522,#0b2133 76%,#0a1825);
  box-shadow:0 26px 60px rgba(0,0,0,.3);
  color:#e9f4fc;
}
.affiliate-box>*{position:relative;z-index:1}
.affiliate-box__kicker{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;padding-bottom:11px;border-bottom:1px solid rgba(151,204,240,.2);
  color:#78c5f8;font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.2em;
}
.affiliate-box__kicker span{padding:5px 8px;border:1px solid rgba(151,204,240,.24);color:#b9d9ee;font-size:8px}
.article .affiliate-box__heading>span{color:#64bcf5}
.article .affiliate-box__heading h2{color:#fff}
.article .affiliate-box__theme{color:#a9c2d5}
.article .affiliate-disclosure{background:rgba(109,178,225,.1);color:#afc8da}
.affiliate-item{border-color:rgba(158,205,237,.2);background:rgba(235,247,255,.07);box-shadow:0 14px 30px rgba(0,0,0,.2)}
.affiliate-item:hover{transform:translateY(-4px);border-color:rgba(91,186,248,.6);background:rgba(235,247,255,.11)}
.affiliate-item__image{background:#10273a;border-right-color:rgba(158,205,237,.16)}
.affiliate-item__provider{color:#72c2f6}
.affiliate-item strong{color:#fff}
.affiliate-item__author,.affiliate-item small{color:#a9bdcc}
.affiliate-item em{color:#7bcbff}
.affiliate-credit a{color:#9ab8cc}
.article .affiliate-freshness{color:#829caf}

@media(max-width:720px){
  .affiliate-box{padding:20px}
  .affiliate-box__kicker{margin-bottom:14px}
}