/* =====================================================================
   STRYV4/~  ·  POSTCARD  ·  SHUANG'S KITCHEN
   File: card-shuangs-kitchen_STR.css   ·   v2 (glass wordmark)
   Place in: child theme /css/homepage-cards/
   Card CSS class: card-shuangs-kitchen
   Author: Stryv4/~
   ---------------------------------------------------------------------
   Split layout inside the 1536x512 frame:
     LEFT  ~54%  animated night skyline (canvas) + neon wordmark
     RIGHT ~46%  advert copy + TODAY'S LIVE BOARD + CTA

   NO preview shim in this file (handoff rule 10 / Issue J). Every rule is
   scoped under .card-shuangs-kitchen. Nothing global is touched.
   ===================================================================== */


/* =====  0. CONTENT-BOX FLUSH  =====
   Golden rule 12: core-canvas gives .hp-postcard-content
   position:relative; padding:2.5rem; overflow-y:auto — which would inset
   and clip this card's edge-to-edge skyline. Flush it, scoped to this card
   only. Never edit core-canvas (rule 6).                /* CodeNumber 0.0 */
.hp-postcard-canvas.card-shuangs-kitchen .hp-postcard-content{
  padding:0 !important;
  position:relative;
  height:100%;
  overflow:hidden;
}




/* =====  1. FRAME  =====                                /* CodeNumber 1.0 */
.card-shuangs-kitchen{
  /* brand tokens — scoped, cannot leak */
  --shk-sign:#ff5c8a;
  --shk-amber:#ffb24d;
  --shk-gold:#ffd27a;
  --shk-leaf:#77f0a0;
  --shk-ink:#f2ecff;
  --shk-muted:#b9abd4;
  --shk-dim:#8d7fae;
  --shk-panel:#12101c;
  --shk-fcn:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --shk-fbody:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

.card-shuangs-kitchen .shk-pc{
  display:grid;
  grid-template-columns:54% 46%;
  width:100%;
  height:100%;
  background:var(--shk-panel);
  font-family:var(--shk-fbody);
  color:var(--shk-ink);
  line-height:1.5;
}




/* =====  2. LEFT — SKYLINE  =====                       /* CodeNumber 2.0 */
.card-shuangs-kitchen .shk-sky{
  position:relative;
  overflow:hidden;
  background:#06040e;
}
.card-shuangs-kitchen .shk-sky canvas{
  display:block;
  width:100%;
  height:100%;
}

/* neon wordmark, centred over the skyline — on frosted glass
   (v2: glass panel added; the blur samples the live canvas
   beneath, so it only reads as frost once the city is painting) */
                                                      /* CodeNumber 2.1 */
.card-shuangs-kitchen .shk-wm{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  text-align:center;
  pointer-events:none;
  padding:1.1rem 1.8rem 1.2rem;
  background:rgba(12,7,24,.34);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow:0 10px 40px -18px rgba(0,0,0,.8),
             inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(7px) saturate(1.25);
          backdrop-filter:blur(7px) saturate(1.25);
}
.card-shuangs-kitchen .shk-wm .shk-cn{
  font-family:var(--shk-fcn);
  font-weight:700;
  font-size:clamp(2rem,3.4vw,3.2rem);
  line-height:1;
  letter-spacing:.05em;
  color:#fff;
  text-shadow:0 0 10px rgba(255,120,200,.85),
              0 0 30px rgba(255,60,200,.5),
              0 0 56px rgba(255,60,160,.3);
}
.card-shuangs-kitchen .shk-wm .shk-fl{ animation:shkFlicker 6s infinite steps(1); }
@keyframes shkFlicker{ 0%,42%,46%,100%{opacity:1} 43%,45%{opacity:.35} }

.card-shuangs-kitchen .shk-wm .shk-en{
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#ffdcec;
  margin-top:.5rem;
}

/* 素 · Vegan badge */                                 /* CodeNumber 2.2 */
.card-shuangs-kitchen .shk-veg{
  position:absolute;
  right:16px; top:14px;
  z-index:2;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--shk-leaf);
  border:1px solid rgba(119,240,160,.5);
  border-radius:999px;
  padding:.22rem .6rem;
  background:rgba(6,4,14,.45);
}
.card-shuangs-kitchen .shk-veg b{
  font-family:var(--shk-fcn);
  font-size:.86rem;
  letter-spacing:0;
}




/* =====  3. RIGHT — COPY, BOARD, CTA  =====            /* CodeNumber 3.0 */
.card-shuangs-kitchen .shk-body{
  display:flex;
  flex-direction:column;
  padding:2rem 2.2rem;
  min-width:0;
}

/* advert copy */                                      /* CodeNumber 3.1 */
.card-shuangs-kitchen .shk-ad{
  font-size:clamp(1.15rem,1.6vw,1.6rem);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
  margin:0 0 .3rem;
  background:linear-gradient(100deg,var(--shk-amber),var(--shk-sign) 65%,#fff);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
}
.card-shuangs-kitchen .shk-ad2{
  color:var(--shk-muted);
  font-size:.88rem;
  margin:0 0 1.1rem;
}
.card-shuangs-kitchen .shk-ad2 .shk-zh{
  display:block;
  font-family:var(--shk-fcn);
  color:var(--shk-dim);
  font-size:.8rem;
  margin-top:.15rem;
}

/* board head */                                       /* CodeNumber 3.2 */
.card-shuangs-kitchen .shk-bhead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.8rem;
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--shk-dim);
  border-bottom:1px solid rgba(255,255,255,.09);
  padding-bottom:.4rem;
}
.card-shuangs-kitchen .shk-live{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:var(--shk-leaf);
}
.card-shuangs-kitchen .shk-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--shk-leaf);
  box-shadow:0 0 8px var(--shk-leaf);
  animation:shkPulse 2s ease-in-out infinite;
}
@keyframes shkPulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.card-shuangs-kitchen .shk-win{
  color:var(--shk-gold);
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* dish rows */                                        /* CodeNumber 3.3 */
.card-shuangs-kitchen .shk-rows{
  flex:1;
  min-height:0;
  overflow:hidden;
}
.card-shuangs-kitchen .shk-row{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  padding:.44rem 0;
  border-bottom:1px dashed rgba(255,255,255,.07);
}
.card-shuangs-kitchen .shk-row:last-child{ border-bottom:0; }
.card-shuangs-kitchen .shk-nm{ flex:1; font-size:.9rem; min-width:0; }
.card-shuangs-kitchen .shk-nm .shk-zh{
  font-family:var(--shk-fcn);
  color:var(--shk-dim);
  font-size:.78rem;
  margin-left:.35rem;
}
.card-shuangs-kitchen .shk-pr{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:.88rem;
  color:var(--shk-gold);
  white-space:nowrap;
}
.card-shuangs-kitchen .shk-row.shk-out{ opacity:.42; }
.card-shuangs-kitchen .shk-row.shk-out .shk-pr{
  text-decoration:line-through;
  color:var(--shk-dim);
}
.card-shuangs-kitchen .shk-tag{
  display:inline-block;
  font-size:.54rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid currentColor;
  border-radius:3px;
  padding:.04rem .3rem;
  margin-left:.35rem;
  color:var(--shk-sign);
  vertical-align:middle;
}
.card-shuangs-kitchen .shk-tag.shk-tag-out{ color:var(--shk-dim); }

/* loading skeleton — shown before the board resolves */  /* CodeNumber 3.4 */
.card-shuangs-kitchen .shk-skel{
  height:13px;
  border-radius:3px;
  margin:.65rem 0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05));
  background-size:200% 100%;
  animation:shkShimmer 1.4s linear infinite;
}
@keyframes shkShimmer{ to{ background-position:-200% 0; } }

/* closed state */                                     /* CodeNumber 3.5 */
.card-shuangs-kitchen .shk-closed{
  padding:.9rem 0;
  color:var(--shk-muted);
  font-size:.86rem;
}
.card-shuangs-kitchen .shk-closed .shk-bell{
  display:block;
  font-size:1.5rem;
  margin-bottom:.25rem;
}

/* CTA */                                              /* CodeNumber 3.6 */
.card-shuangs-kitchen .shk-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin-top:1rem;
  padding:.8rem 1rem;
  border:0;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  color:#180818;
  background:linear-gradient(100deg,var(--shk-sign),var(--shk-amber));
  box-shadow:0 8px 24px -8px rgba(255,92,138,.55);
  transition:transform .15s ease, box-shadow .2s ease;
}
.card-shuangs-kitchen .shk-cta:hover,
.card-shuangs-kitchen .shk-cta:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 12px 30px -8px rgba(255,92,138,.65);
  color:#180818;
}
.card-shuangs-kitchen .shk-cta .shk-zh{
  font-family:var(--shk-fcn);
  font-weight:400;
  opacity:.72;
  font-size:.78rem;
}
.card-shuangs-kitchen .shk-foot{
  text-align:center;
  margin-top:.6rem;
  font-size:.68rem;
  color:var(--shk-dim);
}




/* =====  4. RESPONSIVE  =====                          /* CodeNumber 4.0 */
@media (max-width:900px){
  .card-shuangs-kitchen .shk-pc{ grid-template-columns:1fr; grid-template-rows:40% 60%; }
  .card-shuangs-kitchen .shk-body{ padding:1.2rem 1.4rem; }
  .card-shuangs-kitchen .shk-ad{ font-size:1.1rem; }
  .card-shuangs-kitchen .shk-rows .shk-row:nth-child(n+4){ display:none; }
}
@media (max-width:600px){
  .card-shuangs-kitchen .shk-pc{ grid-template-rows:34% 66%; }
  .card-shuangs-kitchen .shk-ad2 .shk-zh{ display:none; }
  .card-shuangs-kitchen .shk-rows .shk-row:nth-child(n+3){ display:none; }
}




/* =====  5. ACCESSIBILITY  =====                       /* CodeNumber 5.0 */
@media (prefers-reduced-motion:reduce){
  .card-shuangs-kitchen .shk-fl,
  .card-shuangs-kitchen .shk-dot,
  .card-shuangs-kitchen .shk-skel{ animation:none !important; }
  .card-shuangs-kitchen .shk-cta{ transition:none !important; }
}