/* ==========================================================================
   World Of Orient — Blog section block (acf/wof-blog-section).
   Layout follows the Webflow "cms-grid-5" section (centered intro, 3-column
   grid of article cards), restyled to the WOF brand. Classes are wof-bgrid- /
   wof-bcard- prefixed; the home blog slider owns .wof-blog-*. The grid + cards
   are also used by the single post "more articles" section, so the grid
   carries its own tokens.
   ========================================================================== */
.wof-bgrid,
.wof-bgrid-grid{
  --wof-gold:#C9A964; --wof-gold-dark:#b0903f; --wof-gold-soft:#efe5cf; --wof-dark:#101010; --wof-cream:#f8f6f1;
  --wof-line:rgba(16,16,16,.10); --wof-muted:rgba(16,16,16,.58); --wof-ease:cubic-bezier(.625,.05,0,1);
  font-family:"Nunito",Arial,sans-serif;
}
.wof-bgrid{
  background:#fff; padding:clamp(56px,7vw,96px) 0 clamp(72px,10vw,140px);
  font-family:"Nunito",Arial,sans-serif; color:var(--wof-dark);
}
.wof-bgrid *,
.wof-bgrid-grid *{box-sizing:border-box}
.wof-bgrid-inner{max-width:1200px;margin:0 auto;padding:0 clamp(16px,3vw,32px)}

/* optional intro */
.wof-bgrid-head{max-width:680px;margin:0 auto clamp(40px,5vw,64px);display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.wof-bgrid-title{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:clamp(34px,4vw,52px);
  line-height:1.05;letter-spacing:-.5px;color:var(--wof-dark);margin:0}
.wof-bgrid-intro{max-width:448px;margin:0;font-size:18px;line-height:1.65;color:var(--wof-muted)}

.wof-bgrid-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}

/* card: the whole card is one link */
.wof-bcard{margin:0}
.wof-bcard-link,
.wof-bcard-link:hover,
.wof-bcard-link:focus{display:flex;flex-direction:column;gap:24px;height:100%;color:var(--wof-dark);text-decoration:none}
.wof-bcard-img{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--wof-cream)}
.wof-bcard-img .wof-bcard-photo{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .7s var(--wof-ease)}
.wof-bcard-link:hover .wof-bcard-photo{transform:scale(1.04)}

.wof-bcard-body{flex:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:24px}
.wof-bcard-text{display:flex;flex-direction:column;gap:14px}
.wof-bcard-info{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.wof-bcard-tag{padding:5px 10px;border-radius:7px;background:var(--wof-gold-soft);
  font-size:11.5px;font-weight:800;line-height:1.2;letter-spacing:1px;text-transform:uppercase;color:var(--wof-dark)}
.wof-bcard-date{font-size:14px;color:var(--wof-muted)}
.wof-bcard-title{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:clamp(24px,2.1vw,28px);
  line-height:1.15;letter-spacing:-.2px;color:var(--wof-dark);margin:0;transition:color .25s ease}
.wof-bcard-link:hover .wof-bcard-title{color:var(--wof-gold-dark)}
.wof-bcard-more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--wof-dark)}
.wof-bcard-more svg{flex:none;transition:transform .25s ease}
.wof-bcard-link:hover .wof-bcard-more svg{transform:translateX(4px)}

/* pagination */
.wof-bgrid-pager{margin-top:clamp(48px,6vw,72px)}
.wof-bgrid-pager ul.page-numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0;padding:0}
.wof-bgrid-pager ul.page-numbers li{margin:0;padding:0;list-style:none}
.wof-bgrid-pager .page-numbers:not(ul){display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--wof-line);border-radius:7px;background:#fff;font-size:15px;font-weight:700;line-height:1;color:var(--wof-dark);text-decoration:none;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.wof-bgrid-pager a.page-numbers:hover{border-color:var(--wof-gold);color:var(--wof-gold-dark)}
.wof-bgrid-pager .page-numbers.current{background:var(--wof-gold);border-color:var(--wof-gold);color:var(--wof-dark)}
.wof-bgrid-pager .page-numbers.dots{border-color:transparent;background:none;padding:0 4px}

@media (max-width:991px){
  .wof-bgrid-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .wof-bgrid-grid{grid-template-columns:1fr;gap:40px}
}