/**
 * Default WordPress Blockquote Block Styles
 * Figma Node: 6002:21187 — Quote & Writer Note (default blockquote variant)
 *
 * Replaces only the default WordPress core blockquote block.
 * Does NOT affect .review-quote-note (the custom Quote & Writer Note component).
 *
 * Design tokens:
 *   bg:            #25272D  (Neutral/08 - Frame, Dark Button)
 *   border:        #30343B  (Neutral/07 - Border, Dark Hover)
 *   text:          #FFFFFF  (Primary/01)
 *   accent:        #1081DF  (Primary)
 *   font-family: Vazir, sans-serif
 *   font-size:     16px
 *   line-height:   1.5
 *
 * @package Strategic_Club
 * @since   1.0.0
 */

/* ==========================================================================
   Default WordPress Blockquote — Figma Node 6002:21187
   Scoped to .wp-block-quote to avoid touching .review-quote-note
   ========================================================================== */

.wp-block-quote {
    /* Layout */
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;

    /* Sizing — shrink-to-fit, centred in the content column */
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;

    /* Visual */
    background: #25272D;
    border: 1px solid #30343B;
    border-radius: 4px;
    padding: 24px;

    /* Typography */
    font-family: 'Vazir', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    font-style: normal;
    color: #FFFFFF;
    text-align: center;

    /* RTL direction */
    direction: rtl;

    /* Positioning context for the icon strip */
    position: relative;
}

/* Quote icon strip — sits on the top border, breaking it visually
   Figma: absolute, top -1px, right 11px, h-px, bg #25272D, px 4px */
.wp-block-quote::before {
    content: '';
    position: absolute;
    top: -1px;
    right: 11px;
    width: 48px;   /* 40px icon + 4px padding each side */
    height: 1px;
    background: #25272D;
    pointer-events: none;
}

/* Quote icon injected via PHP filter — .wp-blockquote-icon wrapper */
.wp-blockquote-icon {
    position: absolute;
    top: -20px;   /* half of 40px icon height, so it straddles the border */
    right: 11px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    flex-shrink: 0;
}

.wp-blockquote-icon svg,
.wp-blockquote-icon img {
    width: 40px;
    height: 40px;
    display: block;
}

/* Body wrapper — holds the quote text and optional citation */
.wp-blockquote-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 1px;
    flex: 1 0 0;
}

/* Paragraph inside blockquote — override any parent content rules */
.wp-block-quote p,
.wp-blockquote-body p,
.review-post-content .wp-block-quote p,
.entry-content .wp-block-quote p {
    margin: 0 0 4px;
    color: #FFFFFF;
    font-family: 'Vazir', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    font-style: normal;
    text-align: center;
    white-space: pre-wrap;
}

.wp-block-quote p:last-child,
.wp-blockquote-body p:last-child,
.review-post-content .wp-block-quote p:last-child,
.entry-content .wp-block-quote p:last-child {
    margin-bottom: 0;
}

/* Citation / author name — rendered as <cite> inside <footer> or directly */
.wp-block-quote cite,
.wp-block-quote footer,
.wp-blockquote-body cite,
.wp-blockquote-body footer {
    display: block;
    font-family: 'Vazir', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    font-style: normal;
    color: #FFFFFF;
    text-align: right;
    margin-top: 4px;
    list-style: disc inside;
}

/* WordPress core adds a <cite> directly inside blockquote for the attribution */
.wp-block-quote cite::before {
    content: '• ';
}

/* Name field — displayed below the quote body, injected via PHP 'name' attribute */
.wp-blockquote-name {
    display: block;
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    font-style: normal;
    color: #1081DF;
    text-align: center;
    direction: rtl;
}

/* ==========================================================================
   Wrapper to centre the block inside the article content column
   ========================================================================== */

/* The block editor wraps .wp-block-quote in a figure; ensure it centres */
.review-post-content .wp-block-quote,
.entry-content .wp-block-quote {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

/* Ensure the parent allows centering */
.review-post-content figure.wp-block-quote,
.entry-content figure.wp-block-quote {
    text-align: center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .wp-block-quote {
        padding: 16px;
        width: 100%;
    }

    .wp-blockquote-icon {
        top: -20px;
        right: 8px;
    }

    .wp-block-quote::before {
        right: 8px;
    }
}

@media (max-width: 480px) {
    .wp-block-quote {
        padding: 12px;
    }
}