/**
 * Resource Center Custom Styles
 *
 * Custom CSS for resource center elements including drop shadows
 * and responsive adjustments not available in Gutenberg editor
 */

/* ============================================
   DROP SHADOW STYLES
   ============================================ */

/**
 * Drop shadow with blur for softer effect
 * Settings: X: 0, Y: 4px, Blur: 8px, Spread: 2px, Color: #000000, Opacity: 25%
 */
.rc-card-drop-shadow-soft {
    box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.25) !important;
}

/* ============================================
   CARD LAYOUT STYLES
   ============================================ */

/**
 * Lock maximum width of resource center cards
 * Prevents cards from expanding beyond 291px on tablet/mobile
 * Min-width prevents awkward text wrapping at certain breakpoints
 */
.rc-card-max-width {
    max-width: 291px !important;
    min-width: 250px !important;
    flex-basis: 291px !important;
}

/**
 * Center-align cards in columns container
 * Apply this class to the wp-block-columns element
 */
.rc-cards-center {
    justify-content: center !important;
    gap: 16px;
}

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

/**
 * Responsive horizontal padding for pullquotes and similar elements
 * Starts at 60px on large screens and decreases to 10px on mobile
 */
.rc-pullquote-padding {
    padding-left: 60px;
    padding-right: 60px;
}

@media screen and (max-width: 1023px) {
    .rc-pullquote-padding {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

@media screen and (max-width: 767px) {
    .rc-pullquote-padding {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media screen and (max-width: 479px) {
    .rc-pullquote-padding {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY STYLES
   ============================================ */

/**
 * Responsive heading for large text like "Download the full report"
 * Font size scales down based on screen size
 */
.rc-heading-large {
    font-size: 52px !important;
}

@media screen and (max-width: 1279px) {
    .rc-heading-large {
        font-size: 44px !important;
    }
}

@media screen and (max-width: 1023px) {
    .rc-heading-large {
        font-size: 38px !important;
    }
}

@media screen and (max-width: 767px) {
    .rc-heading-large {
        font-size: 32px !important;
    }
}

@media screen and (max-width: 479px) {
    .rc-heading-large {
        font-size: 28px !important;
    }
}

/**
 * Responsive mid-size heading
 * Font size scales from 34px on desktop to smaller on mobile
 * Includes optimized line-height and spacing for readability
 */
.rc-heading-mid {
    font-size: 34px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.5em !important;
}

@media screen and (max-width: 767px) {
    .rc-heading-mid {
        font-size: 28px !important;
        line-height: 1.35 !important;
    }
}

@media screen and (max-width: 479px) {
    .rc-heading-mid {
        font-size: 24px !important;
        line-height: 1.4 !important;
    }
}

/**
 * Responsive medium text size
 * Starts at 20px on desktop and scales down on smaller screens
 */
.rc-text-medium {
    font-size: 20px !important;
    line-height: 1.5 !important;
}

@media screen and (max-width: 767px) {
    .rc-text-medium {
        font-size: 18px !important;
    }
}

@media screen and (max-width: 479px) {
    .rc-text-medium {
        font-size: 16px !important;
    }
}

/* ============================================
   TEXT WRAPPING UTILITIES
   ============================================ */

/**
 * Prevent text from wrapping to a new line
 * Useful for labels and short text that should stay on one line
 */
.rc-text-nowrap {
    white-space: nowrap !important;
}

/**
 * Balance text wrapping for better readability
 * Prevents orphaned words (single words on last line)
 */
.rc-text-balance {
    text-wrap: balance !important;
}

/**
 * Wrap text between words only, never break words in the middle
 * Example: "Documentation Hub" can become "Documentation" + "Hub" on separate lines
 * but never "Documenta" + "tion Hub"
 */
.rc-text-word-wrap {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

/* ============================================
   TEXT TRUNCATION STYLES
   ============================================ */

/**
 * Limit text to 2 lines with ellipsis
 * Apply this class to headings or paragraphs that should truncate
 * On hover, shows the full text
 */
.rc-text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
}

.rc-text-clamp-2:hover {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}