/*
 * ui.css — Buttons, Cards / Surfaces, Utility Classes
 * CRCKC Child Theme
 * Covers: .wp-block-button variants, .crckc-card glassmorphism surface,
 *         and all reusable .crckc-* helper classes used site-wide.
 */

/* ============================================================
   BUTTONS
   ============================================================ */
.wp-block-button__link {
  border-radius: 999px;
  padding:       0.85rem 1.35rem;
  font-weight:   500;
  font-family:   "Noto Sans TC", "Noto Sans", sans-serif;
  transition:    all 0.24s ease;
  box-shadow:    none;
}

/* Filled (default) button */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--crckc-accent);
  color:      #ffffff;
  border:     1px solid var(--crckc-accent);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background:   var(--crckc-accent-dark);
  border-color: var(--crckc-accent-dark);
  transform:    translateY(-1px);
}

/* Outline / ghost button */
.wp-block-button.is-style-outline .wp-block-button__link {
  background:     rgba(255, 255, 255, 0.40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color:          var(--crckc-accent);
  border:         1px solid rgba(31, 107, 92, 0.24);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background:   var(--crckc-accent-soft);
  color:        var(--crckc-accent-dark);
  border-color: var(--crckc-accent-dark);
  transform:    translateY(-1px);
}

/* ============================================================
   CARDS / SURFACES
   ============================================================ */
.wp-block-group.has-contrast-5-background-color,
.crckc-card,
.home .wp-block-post-content .has-contrast-5-background-color {
  background:     rgba(220, 235, 230, 0.30) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:     1px solid rgba(31, 107, 92, 0.14);
  box-shadow: var(--crckc-shadow);
}
.wp-block-group.has-contrast-5-background-color:hover,
.crckc-card:hover { box-shadow: var(--crckc-shadow-hover); }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Signature / proper-noun highlight — three weight variants */
.crckc-signature {
  display:        inline-block;
  font-family:    "Iansui", "Noto Sans TC", sans-serif;
  font-weight:    400;
  color:          var(--crckc-accent);
  letter-spacing: 0.03em;
}
.crckc-signature--body   { font-size: 1.02em; }
.crckc-signature--strong {
  font-size:     1.08em;
  padding:       0.04em 0.4em;
  border-radius: 999px;
  background:    var(--crckc-highlight);
  border:        1px solid rgba(31, 107, 92, 0.12);
}
.crckc-signature--hero {
  font-size:        1.12em;
  color:            var(--crckc-accent-dark);
  background-image: linear-gradient(to top, rgba(31, 107, 92, 0.10) 0 36%, transparent 36% 100%);
  padding:          0 0.12em;
}

/* Prevent a heading from wrapping (reset to normal on mobile in typography.css) */
.crckc-nowrap-heading { white-space: nowrap; }

/* Small all-caps label above a section heading */
.crckc-eyebrow {
  display:        inline-block;
  font-size:      0.92rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--crckc-accent);
}

/* Text helpers */
.crckc-muted        { color: var(--crckc-text-muted); }
.crckc-lead         { font-size: clamp(1.05rem, 0.98rem + 0.28vw, 1.18rem); line-height: 1.9; }
.crckc-section-title { font-family: "Iansui", "Noto Sans TC", sans-serif; color: var(--crckc-text); }

/* Soft frosted surface (lighter than a card) */
.crckc-surface-soft {
  background:    var(--crckc-surface-soft);
  border:        1px solid var(--crckc-border);
  border-radius: var(--crckc-radius);
}

/* 2×2 ministry grid (collapses to 1-col on mobile via typography.css) */
.crckc-ministry-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1.5rem;
}

/* Placeholder shown when an image block is empty in the editor */
.crckc-image-placeholder,
.wp-block-post-content .has-contrast-5-background-color p.has-text-align-center {
  color: var(--crckc-text-muted);
}