/* ─────────────────────────────────────────────────────────────
   NOW·STUDIO — Section "Wedding Guide" trên Homepage
   Dùng lại component ArticleCard của guide/guide.js, nên chỉ cần
   style tối thiểu, scope trong #blog để không đụng section khác.
   ───────────────────────────────────────────────────────────── */
#blog{background:var(--bg)}
#blog .gd-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:64px;align-items:end;padding-bottom:24px;border-bottom:1px solid rgba(201,168,118,.28);margin-bottom:56px}
#blog .gd-kicker{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dark)}
#blog .gd-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.6vw,50px);line-height:1.06;letter-spacing:-.02em;margin-top:20px;text-wrap:balance}
#blog .gd-head h2 em{font-style:italic;color:var(--gold-dark)}
#blog .gd-head p{font-family:var(--serif);font-size:17px;font-weight:300;line-height:1.68;color:var(--mid);text-wrap:pretty}
#blog .gd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
#blog .gd-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
#blog .gd-media{position:relative;overflow:hidden;background:#e8ddd0;aspect-ratio:3/2;margin:0 0 20px}
#blog .gd-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
#blog .gd-card:hover .gd-media img{transform:scale(1.032)}
#blog .gd-media.is-missing{background:repeating-linear-gradient(135deg,#efe8de,#efe8de 12px,#e9e0d3 12px,#e9e0d3 24px)}
#blog .gd-media.is-missing img{opacity:0}
#blog .gd-media.is-missing::after{content:attr(data-slot);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;text-align:center;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
#blog .gd-eyebrow{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dark)}
#blog .gd-card h4{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.26;margin:12px 0 0;text-wrap:pretty;transition:color .2s}
#blog .gd-card:hover h4{color:var(--gold-dark)}
#blog .gd-card p{font-size:13.5px;line-height:1.72;color:var(--mid);margin-top:11px;flex:1}
#blog .gd-meta{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:18px}
#blog .gd-meta .dot{width:2px;height:2px;border-radius:50%;background:var(--gold)}
#blog .gd-foot-cta{display:flex;justify-content:center;margin-top:66px}
#blog .gd-link{display:inline-flex;align-items:center;gap:11px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dark);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:8px;transition:color .2s,border-color .2s}
#blog .gd-link svg{transition:transform .25s}
#blog .gd-link:hover{color:var(--gold-dark)}
#blog .gd-link:hover svg{transform:translateX(5px)}
#blog a:focus-visible{outline:1px solid var(--gold-dark);outline-offset:3px}
@media (max-width:1024px){
  #blog .gd-head{grid-template-columns:1fr;gap:22px;align-items:start;margin-bottom:44px}
  #blog .gd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
}
@media (max-width:768px){
  #blog .gd-head{margin-bottom:34px;padding-bottom:18px}
  #blog .gd-head h2{font-size:30px;margin-top:16px}
  #blog .gd-head p{font-size:16.5px}
  #blog .gd-grid{grid-template-columns:1fr;gap:44px}
  #blog .gd-media{aspect-ratio:4/3;margin-bottom:16px}
  #blog .gd-card h4{font-size:24px}
  #blog .gd-card p{font-size:15px;line-height:1.7}
  #blog .gd-foot-cta{margin-top:44px}
  #blog .gd-link{min-height:48px;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  #blog .gd-media img,#blog .gd-link svg{transition:none}
  #blog .gd-card:hover .gd-media img{transform:none}
}