/**
 * Page Designer — Quote Block — frontend + canvas styles
 * v1.0.0 (introduced in PAGE_DESIGNER_VERSION 2.6.85)
 *
 * Dedicated SkyForj Quote block stylesheet. Every selector is
 * namespaced `.pd-blk-quote*` — no overlap with any other block,
 * tool, or panel. Variants, accent bar, quote-mark, rating, divider,
 * and avatar are all driven by CSS classes + CSS custom properties
 * that the Quote Settings Panel (pd_quote_panel.js) writes to the
 * root element.
 *
 * The panel NEVER writes border / border-radius / background / box-
 * shadow to this block — those are owned by the Design panel. Any
 * visual chrome that ships with a variant (e.g. Card variant's
 * background) is baked into this stylesheet as the block's baseline,
 * the same way the Hero block ships with its default gradient
 * background. Users can override via the Design panel at any time.
 */

/* ── Root container ────────────────────────────────────────────── */
.pd-blk-quote {
    position: relative;
    margin: 24px auto;
    padding: 28px 32px;
    max-width: var(--pd-blk-quote-max-width, 640px);
    /* v3.7.15 — colour inherits Global Theme > General Text (was bound to the
       admin-editor token --at-color-card-foreground, which doesn't exist on
       published pages and ignored General Text colour). */
    color: inherit;
    font-family: inherit;
    /* v3.7.14 — line-height removed from the root so quote text inherits
       Global Theme > General Text > Line Height (the root's 1.6 was capping
       inheritance before it reached the body). */
    box-sizing: border-box;
}

/* ── Body (the quote text itself) ──────────────────────────────── */
.pd-blk-quote-body {
    margin: 0 0 18px;
    padding: 0;
    /* v3.7.12 — wired to Global Theme > General Text: 20px = 1.25× the 16px
       General base, so quote text scales with the General Text size while
       keeping its body>name>role hierarchy. Fallback 16px for cold load. */
    font-size: calc(var(--pd-general-size, 16px) * 1.25);
    font-style: italic;
    /* v3.7.13 — line-height removed so the quote text inherits Global Theme >
       General Text > Line Height (the slider now drives it). */
    color: inherit;
    quotes: none;
}
.pd-blk-quote-body::before,
.pd-blk-quote-body::after { content: none; }

/* ── Decorative quote mark (separate DOM node, class-driven) ───── */
.pd-blk-quote-mark {
    font-family: Georgia, "Times New Roman", serif;
    font-size: var(--pd-blk-quote-mark-size, 64px);
    line-height: 0.8;
    color: inherit;
    user-select: none;
    pointer-events: none;
}
.pd-blk-quote-mark-none     { display: none; }
.pd-blk-quote-mark-curly    { display: block; }
.pd-blk-quote-mark-straight { display: block; font-family: -apple-system, sans-serif; }
.pd-blk-quote-mark-angled   { display: block; font-family: Arial, sans-serif; }
.pd-blk-quote-mark-icon     { display: block; font-family: "FontAwesome"; }

/* Position variants */
.pd-blk-quote[data-pd-quote-mark-pos="top-left"]   .pd-blk-quote-mark { text-align: left; margin-bottom: 6px; }
.pd-blk-quote[data-pd-quote-mark-pos="top-center"] .pd-blk-quote-mark { text-align: center; margin-bottom: 6px; }
.pd-blk-quote[data-pd-quote-mark-pos="behind"]     .pd-blk-quote-mark {
    position: absolute;
    top: 4px;
    left: 16px;
    opacity: 0.15;
    font-size: calc(var(--pd-blk-quote-mark-size, 64px) * 2);
    z-index: 0;
}
.pd-blk-quote[data-pd-quote-mark-pos="behind"] .pd-blk-quote-body,
.pd-blk-quote[data-pd-quote-mark-pos="behind"] .pd-blk-quote-footer { position: relative; z-index: 1; }

/* ── Accent bar (positional, colour + thickness via CSS vars) ───── *
 * Rendered via ::before so we never write `border:` inline — this
 * keeps the Design panel as the single source of truth for generic
 * border styling. The accent bar is a block-specific structural
 * decoration (equivalent to a pull-quote's vertical stripe).
 */
.pd-blk-quote[data-pd-quote-accent="left"]::before,
.pd-blk-quote[data-pd-quote-accent="right"]::before,
.pd-blk-quote[data-pd-quote-accent="top"]::before {
    content: "";
    position: absolute;
    background: var(--pd-blk-quote-accent-color, #89b4fa);
    border-radius: 2px;
}
.pd-blk-quote[data-pd-quote-accent="left"]::before {
    left: 0; top: 0; bottom: 0;
    width: var(--pd-blk-quote-accent-thick, 4px);
}
.pd-blk-quote[data-pd-quote-accent="right"]::before {
    right: 0; top: 0; bottom: 0;
    width: var(--pd-blk-quote-accent-thick, 4px);
}
.pd-blk-quote[data-pd-quote-accent="top"]::before {
    left: 0; right: 0; top: 0;
    height: var(--pd-blk-quote-accent-thick, 4px);
}
.pd-blk-quote[data-pd-quote-accent="none"]::before { content: none; }

/* ── Rating stars (hidden by default, shown via data-attr) ─────── */
.pd-blk-quote-rating {
    display: none;
    margin: 0 0 14px;
    /* Star size is picker-driven (Rating Stars → Size); the stars are text
       glyphs so font-size scales them. Falls back to 18px. */
    font-size: var(--pd-blk-quote-star-size, 18px);
    line-height: 1;
    letter-spacing: 2px;
    color: inherit;
}
.pd-blk-quote-rating[data-pd-quote-show-rating="1"] { display: block; }
.pd-blk-quote[data-pd-quote-align="center"] .pd-blk-quote-rating { text-align: center; }
.pd-blk-quote[data-pd-quote-align="right"]  .pd-blk-quote-rating { text-align: right; }
.pd-blk-quote-star {
    /* Empty star = faint version of the chosen Star Colour. Falls back to the
       inherited General Text colour when the picker var is unset. */
    color: color-mix(in srgb, var(--pd-blk-quote-star-color, currentColor) 30%, transparent);
    transition: color 0.15s;
}
.pd-blk-quote-rating[data-pd-quote-rating="1"] .pd-blk-quote-star:nth-child(-n+1),
.pd-blk-quote-rating[data-pd-quote-rating="2"] .pd-blk-quote-star:nth-child(-n+2),
.pd-blk-quote-rating[data-pd-quote-rating="3"] .pd-blk-quote-star:nth-child(-n+3),
.pd-blk-quote-rating[data-pd-quote-rating="4"] .pd-blk-quote-star:nth-child(-n+4),
.pd-blk-quote-rating[data-pd-quote-rating="5"] .pd-blk-quote-star:nth-child(-n+5) {
    /* Filled star = the chosen Star Colour (picker-driven), falling back to
       the inherited General Text colour when the var is unset. */
    color: var(--pd-blk-quote-star-color, currentColor);
}

/* ── Divider between body and author ───────────────────────────── */
.pd-blk-quote-divider {
    margin: 14px 0;
    min-height: 1px;
}
.pd-blk-quote-divider-none  { display: none; }
.pd-blk-quote-divider-line  {
    height: var(--pd-blk-quote-divider-thick, 1px);
    background: var(--pd-blk-quote-divider-color, #89b4fa);
    border: none;
}
.pd-blk-quote-divider-dot {
    height: auto;
    background: none;
    text-align: center;
    line-height: 0.5;
    /* Scale with thickness: 1px → 28px font, 12px → 72px font */
    font-size: calc(24px + (var(--pd-blk-quote-divider-thick, 1px)) * 4);
    /* v3.7.16 — match the line-divider's own colour var, not the admin token */
    color: var(--pd-blk-quote-divider-color, currentColor);
}
.pd-blk-quote-divider-dot::after { content: "\2022 \2022 \2022"; letter-spacing: 0.25em; }
.pd-blk-quote-divider-dash {
    height: 0;
    border-top: var(--pd-blk-quote-divider-thick, 2px) dashed var(--pd-blk-quote-divider-color, #89b4fa);
}

/* ── Footer (avatar + cite block) ──────────────────────────────── */
.pd-blk-quote-footer {
    display: flex;
    /* Column layout: the author name + role sit first, with the avatar
       stacked UNDERNEATH them (avatar gets order:1 below). The block's
       Alignment tool drives the horizontal placement via align-items on the
       align-class rules below, so the avatar follows left/center/right too. */
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-style: normal;
}
.pd-blk-quote-footer:empty { display: none; }

/* Two-class selectors (specificity 0,2,0) so they beat the
   img.gjs-plh-image{width:500px;height:500px} placeholder rule
   (specificity 0,1,1) injected by editor.js. Without this, an
   avatar with no src is locked at 500x500 and the Size slider
   appears to do nothing. */
.pd-blk-quote .pd-blk-quote-avatar {
    display: none;
    flex: 0 0 auto;
    order: 1; /* sit BELOW the name/role in the column footer */
    width: var(--pd-blk-quote-avatar-size, 70px);
    height: var(--pd-blk-quote-avatar-size, 70px);
    object-fit: cover;
    background: color-mix(in srgb, currentColor 12%, transparent); /* v3.7.16 — neutral placeholder, no admin token */
}
.pd-blk-quote .pd-blk-quote-avatar[data-pd-quote-show-avatar="1"] { display: block; }
.pd-blk-quote .pd-blk-quote-avatar-round  { border-radius: 9999px; }
.pd-blk-quote .pd-blk-quote-avatar-square { border-radius: 6px; }

.pd-blk-quote-cite-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.pd-blk-quote-name {
    font-size: calc(var(--pd-general-size, 16px) * 0.9375); /* 15px @ General 16 */
    font-weight: 600;
    font-style: normal;
    color: inherit;
    text-decoration: none;
}
.pd-blk-quote-name a { color: inherit; text-decoration: none; }
.pd-blk-quote-name a:hover { text-decoration: underline; }
.pd-blk-quote-role {
    font-size: calc(var(--pd-general-size, 16px) * 0.8125); /* 13px @ General 16 */
    /* v3.7.15 — muted General Text colour (70% of inherited) instead of the
       admin-editor token; follows General colour while staying subdued. */
    color: color-mix(in srgb, currentColor 70%, transparent);
}
.pd-blk-quote-role:empty { display: none; }

/* ── Alignment (global — set by the Quote panel's Alignment tool) ──
 *  The root pd-blk-quote-align-* class is the single source of truth
 *  for whole-block alignment. text-align cascades to the quote body,
 *  author name and role; the footer rules below carry the AVATAR +
 *  cite group with it; the rating row follows via data-pd-quote-align
 *  (above) and the dot divider follows here too. The explicit -left
 *  footer rule beats the Global-Theme --pd-general-justify default
 *  (specificity 0,0,2,0 > 0,0,1,0) so the tool stays authoritative.
 *  Per-element alignment (Typography / Text panel) still wins via a
 *  direct text-align on the child element. */
.pd-blk-quote-align-left   { text-align: left;   }
.pd-blk-quote-align-center { text-align: center; }
.pd-blk-quote-align-right  { text-align: right;  }
/* Footer is a column, so its horizontal placement (name, role AND the avatar
   stacked below) is the cross-axis → align-items, not justify-content. */
.pd-blk-quote-align-left   .pd-blk-quote-footer { align-items: flex-start; }
.pd-blk-quote-align-center .pd-blk-quote-footer { align-items: center;     }
.pd-blk-quote-align-right  .pd-blk-quote-footer { align-items: flex-end;   }
.pd-blk-quote-align-left   .pd-blk-quote-divider-dot { text-align: left;  }
.pd-blk-quote-align-right  .pd-blk-quote-divider-dot { text-align: right; }

/* ── Avatar position (Author Avatar → Position control) ────────────
 *  Where the avatar sits around the name/role. Default (no attr) =
 *  bottom (column footer, avatar order:1 below). Each position combines
 *  flex-direction (row vs column) with the avatar's flex order. */
.pd-blk-quote[data-pd-quote-avatar-pos="top"]    .pd-blk-quote-footer,
.pd-blk-quote[data-pd-quote-avatar-pos="bottom"] .pd-blk-quote-footer { flex-direction: column; }
.pd-blk-quote[data-pd-quote-avatar-pos="left"]   .pd-blk-quote-footer,
.pd-blk-quote[data-pd-quote-avatar-pos="right"]  .pd-blk-quote-footer { flex-direction: row; align-items: center; }
/* In row mode the cite block must NOT grow, or it eats the free space and
   justify-content (the block Alignment) can't shift the avatar + author
   group left/centre/right. */
.pd-blk-quote[data-pd-quote-avatar-pos="left"]   .pd-blk-quote-cite-wrap,
.pd-blk-quote[data-pd-quote-avatar-pos="right"]  .pd-blk-quote-cite-wrap { flex: 0 1 auto; }
.pd-blk-quote[data-pd-quote-avatar-pos="top"]    .pd-blk-quote-avatar,
.pd-blk-quote[data-pd-quote-avatar-pos="left"]   .pd-blk-quote-avatar { order: -1; }
.pd-blk-quote[data-pd-quote-avatar-pos="bottom"] .pd-blk-quote-avatar,
.pd-blk-quote[data-pd-quote-avatar-pos="right"]  .pd-blk-quote-avatar { order: 1; }

/* Row positions (left/right): horizontal alignment is the MAIN axis, so it
   follows the block Alignment via justify-content (align-items stays centre
   for vertical centring of the avatar against the name/role). */
.pd-blk-quote[data-pd-quote-avatar-pos="left"].pd-blk-quote-align-left   .pd-blk-quote-footer,
.pd-blk-quote[data-pd-quote-avatar-pos="right"].pd-blk-quote-align-left  .pd-blk-quote-footer { justify-content: flex-start; }
.pd-blk-quote[data-pd-quote-avatar-pos="left"].pd-blk-quote-align-center .pd-blk-quote-footer,
.pd-blk-quote[data-pd-quote-avatar-pos="right"].pd-blk-quote-align-center .pd-blk-quote-footer { justify-content: center; }
.pd-blk-quote[data-pd-quote-avatar-pos="left"].pd-blk-quote-align-right  .pd-blk-quote-footer,
.pd-blk-quote[data-pd-quote-avatar-pos="right"].pd-blk-quote-align-right .pd-blk-quote-footer { justify-content: flex-end; }

/* ── Variants ─────────────────────────────────────────────────── *
 * Baseline chrome shipped with the block. The Design panel can
 * override any of it (border, radius, background, box-shadow) on
 * any variant — these are the defaults, not hard locks.
 */

/* Plain — unstyled blockquote */
.pd-blk-quote-plain .pd-blk-quote-body { font-size: calc(var(--pd-general-size, 16px) * 1.25); } /* 20px @ General 16 */

/* Pull — large decorative pull-quote */
.pd-blk-quote-pull {
    padding: 36px 40px;
    text-align: center;
}
.pd-blk-quote-pull .pd-blk-quote-body {
    font-size: calc(var(--pd-general-size, 16px) * 1.625); /* 26px @ General 16 */
    font-weight: 500;
    color: inherit;
}

/* Card — lifted card with soft shadow */
.pd-blk-quote-card {
    background: color-mix(in srgb, currentColor 5%, transparent); /* v3.7.16 — subtle surface, no admin token */
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.pd-blk-quote-card .pd-blk-quote-body { font-size: calc(var(--pd-general-size, 16px) * 1.125); color: inherit; } /* 18px @ General 16; colour follows General */

/* Bordered — classic left-accent blockquote (accent bar provides the stripe) */
.pd-blk-quote-bordered {
    padding-left: 28px;
}
.pd-blk-quote-bordered[data-pd-quote-accent="none"] { padding-left: 28px; }

/* Minimal — stripped-down, small footprint */
.pd-blk-quote-minimal {
    padding: 12px 0;
    margin: 16px auto;
}
.pd-blk-quote-minimal .pd-blk-quote-body {
    font-size: calc(var(--pd-general-size, 16px) * 1); /* 16px @ General 16 */
    font-style: normal;
}

/* Testimonial — card + avatar emphasis */
.pd-blk-quote-testimonial {
    background: color-mix(in srgb, currentColor 5%, transparent); /* v3.7.16 — subtle surface, no admin token */
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}
.pd-blk-quote-testimonial .pd-blk-quote-body {
    font-size: calc(var(--pd-general-size, 16px) * 1.0625); /* 17px @ General 16 */
    color: inherit;
}
.pd-blk-quote-testimonial .pd-blk-quote-name { font-size: calc(var(--pd-general-size, 16px) * 0.875); } /* 14px @ General 16 */
.pd-blk-quote-testimonial .pd-blk-quote-role { font-size: calc(var(--pd-general-size, 16px) * 0.75); } /* 12px @ General 16 */

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pd-blk-quote { padding: 20px 18px; }
    .pd-blk-quote-body { font-size: calc(var(--pd-general-size, 16px) * 1.0625); }
    .pd-blk-quote-pull .pd-blk-quote-body { font-size: calc(var(--pd-general-size, 16px) * 1.25); }
}