/* layout.css — StoreMints layout system */
/* Override WP is-layout-flow on our custom grid/flex containers */
[class*="sm-"][class*="-grid"].is-layout-flow,
.sm-stats-bar.is-layout-flow,
.sm-community-stats.is-layout-flow,
.sm-niches-stack.is-layout-flow,
.sm-member-wins-grid.is-layout-flow{display:grid!important}

/* Reset WP block-gap margins inside our grids — WP adds margin-top to 2nd+ children */
.sm-posts-grid .wp-block-post-template>*,
.sm-testimonial-grid>*,
.sm-pillars-grid>*,
.sm-stats-bar>*,
.sm-apps-grid>*,
.sm-member-wins-grid>*,
.sm-community-stats>*,
.sm-toolkit-grid>*,
.sm-values-grid>*,
.sm-niches-stack>*{margin-block-start:0!important;margin-block-end:0!important}
.sm-container{max-width:var(--sm-max-width);margin:0 auto;padding:0 var(--sm-container-pad);width:100%}
.sm-section{padding:var(--sm-section-pad) 0}
.sm-section--sm{padding:var(--sm-section-pad-sm) 0}
.sm-section--flush{padding:0}
.sm-divider{height:1px;background-color:var(--sm-border);border:none;margin:0}
.sm-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sm-gap-lg)}
.sm-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sm-gap-lg)}
.sm-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sm-gap)}
.sm-flex{display:flex;align-items:center}
.sm-flex--between{display:flex;align-items:center;justify-content:space-between}
.sm-flex--center{display:flex;align-items:center;justify-content:center}
@media(max-width:1024px){.sm-grid-4,.sm-grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .sm-grid-2,.sm-grid-3,.sm-grid-4{grid-template-columns:1fr}
}

/* Section background variants — add visual rhythm to alternating sections */
.sm-section--paper-2{background:var(--sm-paper-2)}
.sm-section--mint-tint{background:var(--sm-mint-tint)}
.sm-section--forest{background:var(--sm-forest);color:var(--sm-paper)}
.sm-section--forest .sm-section-title,.sm-section--forest h2,.sm-section--forest h3{color:var(--sm-paper)!important}
.sm-section--forest .sm-section-title em{color:var(--sm-mint)!important}
.sm-section--forest p,.sm-section--forest .sm-section-sub{color:rgba(255,255,255,.7)!important}
.sm-section--forest .sm-tag-label{color:var(--sm-mint)!important}

/* Gradient/decorative section — subtle radial glow */
.sm-section--glow{position:relative;overflow:hidden;background:var(--sm-paper)}
.sm-section--glow::before{content:"";position:absolute;top:-20%;right:-10%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(159,225,203,.4) 0%,rgba(255,255,255,0) 70%);
  pointer-events:none;z-index:0}
.sm-section--glow::after{content:"";position:absolute;bottom:-30%;left:-10%;width:400px;height:400px;
  background:radial-gradient(circle,rgba(29,158,117,.08) 0%,rgba(255,255,255,0) 70%);
  pointer-events:none;z-index:0}
.sm-section--glow>*{position:relative;z-index:1}

/* Dotted pattern variant */
.sm-section--dotted{background:var(--sm-paper-2);background-image:radial-gradient(var(--sm-border-strong) 1px,transparent 1px);background-size:24px 24px}

/* Scroll-triggered fade-in animations */
.sm-animate{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.sm-animate.is-visible{opacity:1;transform:translateY(0)}
.sm-animate--delay-1{transition-delay:.1s}
.sm-animate--delay-2{transition-delay:.2s}
.sm-animate--delay-3{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){.sm-animate{opacity:1!important;transform:none!important;transition:none!important}}