/* ============================================
   WPE Enhanced Quote Block - Styles v2.0.0
   6 Style Variations + Author Image Support
   ============================================ */

/* ----------------------------------------
   Base Styles (shared across all variants)
   ---------------------------------------- */
.wpe-enhanced-quote-block {
    position: relative;
    margin: 2rem 0;
    max-width: 640px;
    /* Default typography for quote text (inheritable) */
    font-size: 42px;
    font-weight: bold;
    line-height: 1.3em;
    letter-spacing: 1px;
}

.wpe-enhanced-quote-block .quote-text {
    /* Inherits font-size, font-weight, line-height, letter-spacing from wrapper */
    margin: 0 0 1.5rem 0;
    position: relative;
    z-index: 1;
    color: #222222;
}

.wpe-enhanced-quote-block .quote-footer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wpe-enhanced-quote-block .quote-author {
    font-size: 20px;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.4;
}

.wpe-enhanced-quote-block .quote-subtitle {
    font-size: 0.875rem;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.4;
    color: #666;
}

.wpe-enhanced-quote-block .quote-annotation {
    font-size: 0.875rem;
    font-weight: normal;
    font-style: italic;
    letter-spacing: normal;
    line-height: 1.4;
    color: #777;
    padding: 0 0.75rem;
    border-left: 2px solid #000;
    margin-top: 1rem;
}

/* ----------------------------------------
   Author Image Styles
   ---------------------------------------- */
.wpe-enhanced-quote-block .quote-author-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wpe-enhanced-quote-block .quote-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wpe-enhanced-quote-block .quote-author-image {
    flex-shrink: 0;
    display: block;
}

/* ----------------------------------------
   Style 1: DEFAULT
   SVG quote mark, top/bottom borders
   ---------------------------------------- */
.wpe-enhanced-quote-block::before {
    display: none;
}

.wpe-enhanced-quote-block.is-style-default,
.wpe-enhanced-quote-block:not([class*="is-style-"]) {
    padding: 60px 0px 60px 100px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.wpe-enhanced-quote-block.is-style-default::before,
.wpe-enhanced-quote-block:not([class*="is-style-"])::before {
    display: block;
    position: absolute;
    content: "";
    width: 81px;
    height: 51px;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2281%22%20height%3D%2251%22%20viewBox%3D%220%200%2081%2051%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%2029.9648C0%2010.2848%2018.72%20-2.83519%2038.08%200.524812V13.8048C28%2012.0448%2020.32%2014.9248%2017.76%2022.6048C19.04%2022.2848%2020.32%2022.1248%2021.44%2022.1248C29.44%2022.1248%2035.36%2028.2048%2035.36%2035.7248C35.36%2044.3648%2028.8%2050.4448%2018.56%2050.4448C7.68%2050.4448%200%2043.0848%200%2029.9648ZM42.88%2029.9648C42.88%2010.2848%2061.6%20-2.83519%2080.96%200.524812V13.8048C70.88%2012.0448%2063.2%2014.9248%2060.64%2022.6048C61.92%2022.2848%2063.2%2022.1248%2064.32%2022.1248C72.32%2022.1248%2078.24%2028.2048%2078.24%2035.7248C78.24%2044.3648%2071.68%2050.4448%2061.44%2050.4448C50.56%2050.4448%2042.88%2043.0848%2042.88%2029.9648Z%22%20fill%3D%22%23222222%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 1rem;
    left: 0;
    top: 60px;
}

/* ----------------------------------------
   Style 2: MODERN
   Card with shadow, rounded corners, colored quote mark
   ---------------------------------------- */
.wpe-enhanced-quote-block.is-style-modern {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 48px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    border: none;
}

.wpe-enhanced-quote-block.is-style-modern::before {
    display: block;
    position: static;
    content: "\201C";
    font-size: 96px;
    font-family: Georgia, 'Times New Roman', serif;
    color: #dee2e6;
    line-height: 0.6;
    width: auto;
    height: auto;
    background-image: none;
    margin-bottom: 8px;
}

.wpe-enhanced-quote-block.is-style-modern .quote-text {
    color: #333;
}

.wpe-enhanced-quote-block.is-style-modern .quote-annotation {
    border-left-color: #adb5bd;
}

/* ----------------------------------------
   Style 3: CLASSIC
   Thick left border accent, clean traditional look
   ---------------------------------------- */
.wpe-enhanced-quote-block.is-style-classic {
    border: none;
    border-left: 4px solid #333;
    padding: 8px 0 8px 32px;
}

.wpe-enhanced-quote-block.is-style-classic .quote-text {
    color: #333;
}

.wpe-enhanced-quote-block.is-style-classic .quote-annotation {
    border-left-color: #999;
}

/* ----------------------------------------
   Style 4: BUBBLE
   Speech bubble with tail
   ---------------------------------------- */
.wpe-enhanced-quote-block.is-style-bubble {
    background: #f0f4f8;
    border: none;
    border-radius: 24px;
    padding: 36px 40px 36px 40px;
}

.wpe-enhanced-quote-block.is-style-bubble .quote-text {
    color: #2c3e50;
    margin-bottom: 0;
}

.wpe-enhanced-quote-block.is-style-bubble .quote-text::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 14px solid #f0f4f8;
    margin-top: 1.5rem;
    margin-left: 20px;
}

.wpe-enhanced-quote-block.is-style-bubble .quote-footer {
    padding-top: 12px;
}

.wpe-enhanced-quote-block.is-style-bubble .quote-annotation {
    border-left-color: #b0bec5;
}

/* ----------------------------------------
   Style 5: ELEGANT
   Centered, decorative top/bottom lines
   ---------------------------------------- */
.wpe-enhanced-quote-block.is-style-elegant {
    text-align: center;
    border: none;
    padding: 20px 20px;
}

.wpe-enhanced-quote-block.is-style-elegant::before {
    display: block;
    position: static;
    content: '';
    width: 60px;
    height: 2px;
    background: #333;
    background-image: none;
    margin: 0 auto 30px;
}

.wpe-enhanced-quote-block.is-style-elegant::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: #333;
    margin: 30px auto 0;
}

.wpe-enhanced-quote-block.is-style-elegant .quote-text {
    font-style: italic;
    color: #333;
}

.wpe-enhanced-quote-block.is-style-elegant .quote-footer {
    align-items: center;
}

.wpe-enhanced-quote-block.is-style-elegant .quote-author-wrapper {
    justify-content: center;
}

.wpe-enhanced-quote-block.is-style-elegant .quote-annotation {
    border-left: none;
    padding: 0;
    text-align: center;
}

/* ----------------------------------------
   Style 6: MINIMAL
   Ultra-clean, no decorations
   ---------------------------------------- */
.wpe-enhanced-quote-block.is-style-minimal {
    border: none;
    padding: 16px 0;
    max-width: none;
}

.wpe-enhanced-quote-block.is-style-minimal .quote-text {
    font-weight: normal;
    letter-spacing: normal;
    color: #444;
}

.wpe-enhanced-quote-block.is-style-minimal .quote-author::before {
    content: '\2014\00a0';
}

.wpe-enhanced-quote-block.is-style-minimal .quote-annotation {
    border-left: none;
    padding: 0;
    color: #999;
}

/* ----------------------------------------
   Responsive Design
   ---------------------------------------- */
@media (max-width: 768px) {
    .wpe-enhanced-quote-block {
        font-size: 1.5rem;
    }

    /* Default */
    .wpe-enhanced-quote-block.is-style-default,
    .wpe-enhanced-quote-block:not([class*="is-style-"]) {
        padding: 1.5rem;
        margin: 1.5rem 0;
    }

    .wpe-enhanced-quote-block.is-style-default::before,
    .wpe-enhanced-quote-block:not([class*="is-style-"])::before {
        width: 50px;
        height: 32px;
        position: static;
        margin-bottom: 0.75rem;
    }

    /* Modern */
    .wpe-enhanced-quote-block.is-style-modern {
        padding: 28px;
        border-radius: 12px;
    }

    .wpe-enhanced-quote-block.is-style-modern::before {
        font-size: 64px;
    }

    /* Classic */
    .wpe-enhanced-quote-block.is-style-classic {
        padding: 4px 0 4px 20px;
    }

    /* Bubble */
    .wpe-enhanced-quote-block.is-style-bubble {
        padding: 24px 28px;
        border-radius: 16px;
    }

    /* Elegant */
    .wpe-enhanced-quote-block.is-style-elegant {
        padding: 16px;
    }

    /* Author image responsive */
    .wpe-enhanced-quote-block .quote-author-wrapper {
        gap: 8px;
    }
}

/* ----------------------------------------
   Editor specific
   ---------------------------------------- */
.wp-block-wpe-enhanced-quote-quote-block {
    max-width: none;
}