/**
 * Block Pattern Helper Classes
 * These classes support WordPress block patterns without inline styles
 * to avoid "Block contains unexpected or invalid content" errors
 */

/* ===========================
   TYPOGRAPHY
   =========================== */

/* Font Sizes - Responsive */
.has-fluid-font-xs {
    font-size: clamp(0.875rem, 1vw, 1rem) !important;
}

.has-fluid-font-sm {
    font-size: clamp(1rem, 1.3vw, 1.15rem) !important;
}

.has-fluid-font-md {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem) !important;
}

.has-fluid-font-lg {
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
}

.has-fluid-font-xl {
    font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
}

.has-fluid-font-2xl {
    font-size: clamp(2rem, 4vw, 3rem) !important;
}

.has-fluid-font-3xl {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
}

/* Line Heights */
.has-line-height-tight {
    line-height: 1.1 !important;
}

.has-line-height-normal {
    line-height: 1.5 !important;
}

.has-line-height-relaxed {
    line-height: 1.7 !important;
}

.has-line-height-loose {
    line-height: 1.8 !important;
}

/* Font Weights */
.has-font-weight-light {
    font-weight: 300 !important;
}

.has-font-weight-normal {
    font-weight: 400 !important;
}

.has-font-weight-medium {
    font-weight: 500 !important;
}

.has-font-weight-semibold {
    font-weight: 600 !important;
}

/* Letter Spacing */
.has-letter-spacing-tight {
    letter-spacing: -0.02em !important;
}

.has-letter-spacing-normal {
    letter-spacing: 0 !important;
}

.has-letter-spacing-wide {
    letter-spacing: 0.1em !important;
}

/* Text Transform */
.has-text-uppercase {
    text-transform: uppercase !important;
}

/* ===========================
   OPACITY
   =========================== */

.has-opacity-95 {
    opacity: 0.95 !important;
}

.has-opacity-90 {
    opacity: 0.90 !important;
}

.has-opacity-85 {
    opacity: 0.85 !important;
}

.has-opacity-80 {
    opacity: 0.80 !important;
}

/* ===========================
   MAX WIDTH & CENTERING
   =========================== */

.has-max-width-600 {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.has-max-width-700 {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.has-max-width-800 {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.has-max-width-1100 {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===========================
   COLORS
   =========================== */

.has-primary-text-color {
    color: var(--color-primary, #254246) !important;
}

.has-white-text-color {
    color: #ffffff !important;
}

.has-gray-text-color {
    color: #666666 !important;
}

.has-light-gray-bg {
    background-color: #fafafa !important;
}

.has-primary-bg {
    background-color: var(--color-primary, #254246) !important;
}

.has-white-bg {
    background-color: #ffffff !important;
}

/* ===========================
   SPACING
   =========================== */

.has-margin-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===========================
   CARDS & CONTAINERS
   =========================== */

.pattern-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 2.5rem !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.pattern-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
    transition: all 0.3s ease !important;
}

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

.has-border-radius-sm {
    border-radius: 4px !important;
}

.has-border-radius-md {
    border-radius: 12px !important;
}

.has-border-radius-lg {
    border-radius: 24px !important;
}

.has-box-shadow-sm {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.has-box-shadow-md {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

.has-box-shadow-lg {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}