/* Chows — Culinary Experiences Section
   Every rule is scoped to .cx-section. Nothing leaks into the theme. */

.cx-section{
  /* --cx-bg paints the section background only when .has-bg is applied. */
  --cx-bg:#100D0B;
  --cx-cream:#F4EDE1;
  --cx-gold:#C9A25C;
  --cx-gold-soft:#E4C88E;
  --cx-pad-top:80px;
  --cx-pad-bottom:80px;
  --cx-serif:'Cormorant Garamond', Georgia, serif;
  --cx-sans:'Jost', system-ui, -apple-system, sans-serif;
  position:relative;
  background:transparent;
  color:var(--cx-cream);
  font-family:var(--cx-sans);
  padding:var(--cx-pad-top) clamp(20px,6vw,120px) var(--cx-pad-bottom);
  overflow:hidden;
  box-sizing:border-box;
}
/* Opt in from the settings screen if you ever want the plugin to paint
   its own background instead of inheriting the one behind it. */
.cx-section.has-bg{background:var(--cx-bg)}
.cx-section *,
.cx-section *::before,
.cx-section *::after{box-sizing:border-box}

.cx-inner{position:relative;width:100%;max-width:1560px;margin:0 auto}

.cx-glow{
  position:absolute;top:-220px;left:50%;transform:translateX(-50%);
  width:min(1400px,120vw);height:760px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(201,162,92,.10), rgba(201,162,92,0));
}
.cx-section.no-glow .cx-glow{display:none}

/* ---------- Header ---------- */
.cx-head{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,7vw,120px);align-items:end;
  padding-bottom:clamp(32px,3.6vw,52px);
  border-bottom:1px solid rgba(201,162,92,.22);
}
.cx-eyebrow{display:flex;align-items:center;gap:18px;margin-bottom:clamp(18px,2.4vw,34px)}
.cx-eyebrow i{display:block;width:56px;height:1px;background:var(--cx-gold);flex:none}
.cx-eyebrow span{font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--cx-gold)}

.cx-section .cx-title{
  margin:0;font-family:var(--cx-serif);font-weight:300;
  font-size:clamp(42px,6.2vw,104px);line-height:.98;letter-spacing:-.01em;
  color:var(--cx-cream);text-wrap:pretty;
}
.cx-section .cx-title em{font-style:italic;color:var(--cx-gold)}

.cx-intro{
  margin:0 0 14px;max-width:520px;font-size:clamp(16px,1.15vw,20px);
  line-height:1.75;font-weight:400;color:rgba(244,237,225,.76);
}

/* ---------- Cards ---------- */
.cx-grid{
  position:relative;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(28px,3vw,56px);margin-top:clamp(40px,4.6vw,68px);
}
.cx-section .cx-card{
  display:flex;flex-direction:column;align-self:start;min-width:0;
  text-decoration:none;color:inherit;box-shadow:none;
}
.cx-card:nth-child(even){margin-top:clamp(0px,3.4vw,64px)}
.cx-card:focus-visible{outline:2px solid var(--cx-gold);outline-offset:10px}

.cx-frame{
  --cx-brd:rgba(244,237,225,.10);
  --cx-num-gap:46px;
  position:relative;display:block;aspect-ratio:4/5;padding:10px;
  margin-top:26px;
  border:1px solid var(--cx-brd);
  border-top:0;
  transition:border-color .45s ease;
}
/* The top border is drawn separately so it can start after the number,
   leaving a genuine gap rather than a coloured patch over the line. */
.cx-frame::before{
  content:'';position:absolute;top:0;left:var(--cx-num-gap);right:0;height:1px;
  background:var(--cx-brd);transition:background .45s ease;
}
.cx-shot{display:block;width:100%;height:100%;overflow:hidden}
.cx-section .cx-frame img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:0;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.cx-noimg{display:block;width:100%;height:100%;background:rgba(244,237,225,.05)}

.cx-num{
  position:absolute;top:-11px;left:0;
  font-family:var(--cx-serif);font-size:22px;letter-spacing:.18em;
  color:var(--cx-gold);line-height:1;
}

.cx-section .cx-card h3{
  margin:clamp(24px,2.5vw,40px) 0 0;font-family:var(--cx-serif);font-weight:400;
  font-size:clamp(26px,2.3vw,38px);line-height:1.15;color:var(--cx-cream);
  transition:color .4s ease;
}
.cx-rule{
  display:block;width:44px;height:1px;margin:clamp(14px,1.4vw,22px) 0;
  background:rgba(201,162,92,.7);transition:width .45s ease;
}
.cx-section .cx-card p{
  margin:0 0 clamp(14px,1.2vw,18px);font-size:clamp(15px,1.05vw,18px);
  line-height:1.7;font-weight:400;color:rgba(244,237,225,.74);
}
.cx-more{
  margin-top:0;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cx-gold);
}
.cx-more em{font-style:normal;display:inline-block;transition:transform .35s ease}

@media (hover:hover) and (pointer:fine){
  .cx-card:hover .cx-frame{--cx-brd:rgba(201,162,92,.55)}
  .cx-card:hover .cx-frame img{transform:scale(1.04)}
  .cx-card:hover .cx-rule{width:84px}
  .cx-section .cx-card:hover h3{color:var(--cx-gold-soft)}
  .cx-card:hover .cx-more em{transform:translateX(6px)}
}

/* ---------- CTA ---------- */
.cx-cta{position:relative;display:flex;justify-content:center;margin-top:clamp(48px,5.4vw,84px)}
.cx-section .cx-cta a{
  display:inline-flex;align-items:center;gap:16px;padding:20px 42px;
  border:1px solid rgba(201,162,92,.5);font-size:14px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--cx-gold-soft);text-decoration:none;background:none;
  transition:background .4s ease,border-color .4s ease,color .4s ease;
}
.cx-section .cx-cta a:hover,
.cx-section .cx-cta a:focus{background:rgba(201,162,92,.10);border-color:var(--cx-gold);color:#fff}
.cx-cta a span{font-size:18px;letter-spacing:0}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .cx-head{grid-template-columns:minmax(0,1fr);align-items:start}
  .cx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-card:nth-child(even){margin-top:0}
  .cx-card:nth-child(2),
  .cx-card:nth-child(4){margin-top:clamp(0px,4vw,48px)}
}
@media (max-width:640px){
  .cx-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .cx-card:nth-child(n){margin-top:0}
  .cx-frame{aspect-ratio:3/2}
}
@media (prefers-reduced-motion:reduce){
  .cx-section *{transition:none !important}
}