/*
 * Ostoja — shared widget primitives.
 * Section spacing, headings, buttons, cards, icons. Each widget then loads its
 * own stylesheet (assets/css/widgets/{slug}.css) for section-specific layout.
 * Edited only by the foundation; per-widget files are owned by each widget.
 */

/* Section rhythm — matches the preview's py-28 / lg:py-36 */
.ost-section { padding-block: 7rem; position: relative; }
@media (min-width: 1024px) { .ost-section { padding-block: 9rem; } }
.ost-section--tight { padding-block: 4rem; }

.ost-container { max-width: var(--ost-container); margin-inline: auto; padding-inline: 1.5rem; }

/* Headings / eyebrow */
.ost-eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: 0.18em; color: color-mix(in oklab, var(--ost-primary) 80%, transparent); margin: 0 0 1rem; }
.ost-h2 { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; margin: 0; }
.ost-lead { margin: 1.25rem 0 0; color: var(--ost-muted-foreground); line-height: 1.7; max-width: 38rem; }
.ost-section-head { max-width: 42rem; }
.ost-accent-italic { font-style: italic; font-weight: 400; color: var(--ost-primary); }
.ost-text-balance { text-wrap: balance; }

/* Buttons (mirror of the theme so widgets work on any theme) */
.ost-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 500; font-size: .875rem; line-height: 1; cursor: pointer;
  border-radius: 9999px; border: 1px solid transparent; padding: 0 1.5rem; height: 3rem;
  white-space: nowrap; text-decoration: none;
  transition: background-color .15s var(--ost-ease), color .15s var(--ost-ease), transform .1s var(--ost-ease);
}
.ost-btn:active { transform: scale(.985); }
.ost-btn--primary { background: var(--ost-primary); color: var(--ost-primary-foreground); box-shadow: var(--ost-shadow-soft); }
.ost-btn--primary:hover { background: var(--ost-forest); color: var(--ost-primary-foreground); }
.ost-btn--ghost { background: var(--ost-card); color: var(--ost-foreground); border-color: rgba(36,53,45,.15); box-shadow: var(--ost-shadow-soft); }
.ost-btn--ghost:hover { background: var(--ost-secondary); }
.ost-btn--cream { background: var(--ost-cream); color: var(--ost-foreground); }
.ost-btn--cream:hover { background: color-mix(in oklab, var(--ost-cream) 90%, #000); color: var(--ost-foreground); }
.ost-btn--outline-cream { background: transparent; color: var(--ost-cream); border-color: rgba(243,240,233,.3); }
.ost-btn--outline-cream:hover { background: rgba(243,240,233,.1); color: var(--ost-cream); }

/* Icons */
.ost-icon { width: 1.25rem; height: 1.25rem; }
.ost-icon-box {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3rem; width: 3rem; border-radius: 1rem; background: var(--ost-sage); color: var(--ost-primary);
}
.ost-icon-box--sm { height: 2.5rem; width: 2.5rem; border-radius: .75rem; background: var(--ost-secondary); }

/* Card primitive */
.ost-card {
  background: var(--ost-card); border-radius: 1.5rem; padding: 2rem;
  box-shadow: var(--ost-shadow-soft); transition: box-shadow .2s var(--ost-ease);
}
.ost-card:hover { box-shadow: var(--ost-shadow-card); }
.ost-card--ring { box-shadow: var(--ost-shadow-card); }

/* Decorative helpers */
.ost-grain { position: relative; }
.ost-grain::before { content: ""; position: absolute; inset: 0; background-image: var(--ost-grain); background-size: 24px 24px; opacity: .6; pointer-events: none; }

/* Forest panel (shared by bento + CTA) */
.ost-forest { background: var(--ost-gradient-forest); color: var(--ost-cream); }

/* Scroll-reveal (progressive enhancement; see widgets.js) */
.ost-reveal { opacity: 0; transform: translateY(16px); }
.ost-reveal.is-in { animation: ost-fade-up .7s var(--ost-ease) both; }
@media (prefers-reduced-motion: reduce) { .ost-reveal { opacity: 1; transform: none; } .ost-reveal.is-in { animation: none; } }