/*
 * Page Designer — Counter Block
 * Namespace: pd-blk-cpe-*  |  data-pd-block="counter_pe"
 *
 * Self-contained animated counter block. Every byte of authored content
 * (label text, styled spans, inserted icons, numeric target / prefix /
 * suffix) is owned by the dedicated settings panel — there are no A
 * Text containers on the canvas. The block renders the output; the
 * panel owns every keystroke and every range-styling tool.
 *
 * Layout: responsive CSS grid driven by data-pd-cpe-cols /
 * cols-tablet / cols-mobile / gap on the wrapper.
 *
 * Animation: count-up reads data-target / data-prefix / data-suffix /
 * data-start / data-duration off each .pd-blk-cpe-num node.
 */

[data-pd-block="counter_pe"] {
    display: grid;
    gap: 32px;
    padding: 40px 20px;
    text-align: center; /* default centred; align tool overrides per stat/block */
}

[data-pd-block="counter_pe"] .pd-blk-cpe-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}
/* v1.3.0: alignment is now per-stat — written as inline style
   (align-items on the item, text-align on the lbl/num children) by
   the panel's rebuildCanvas. No block-wide attribute selector. */

/* Order is fixed in DOM (icon → number → label). Top/bottom is a
   per-stat setting (v1.11.0) controlled via data-pd-cpe-icon-pos on
   each .pd-blk-cpe-item (was on the wrapper pre-v1.11). */
[data-pd-block="counter_pe"] .pd-blk-cpe-item > .pd-blk-cpe-icon { order: 0; }
[data-pd-block="counter_pe"] .pd-blk-cpe-item > .pd-blk-cpe-num  { order: 1; }
[data-pd-block="counter_pe"] .pd-blk-cpe-item > .pd-blk-cpe-lbl  { order: 2; }
[data-pd-block="counter_pe"] .pd-blk-cpe-item[data-pd-cpe-icon-pos="bottom"] > .pd-blk-cpe-icon {
    order: 99;
}

[data-pd-block="counter_pe"] .pd-blk-cpe-icon {
    line-height: 1;
    margin-bottom: 8px;
    font-size: 24px;
    color: var(--pd-link-color, inherit); /* v3.7.19 — accent number/icon follows Global Links colour, not admin token */
}
[data-pd-block="counter_pe"] .pd-blk-cpe-item[data-pd-cpe-icon-pos="bottom"] > .pd-blk-cpe-icon {
    margin-bottom: 0;
    margin-top: 8px;
}
[data-pd-block="counter_pe"] .pd-blk-cpe-icon:empty {
    min-height: 0;
}

[data-pd-block="counter_pe"] .pd-blk-cpe-num {
    font-size: calc(var(--pd-general-size, 16px) * 2.625); /* v3.7.26 — 42px @ General 16; scales with General Text, per-stat Number Size overrides */
    font-weight: 700;
    line-height: 1.1;
    color: var(--pd-link-color, inherit); /* v3.7.19 — accent number/icon follows Global Links colour, not admin token */
    /* v1.3.1: never let a large per-stat number size punch outside its
       grid cell. min-width:0 lets the grid track shrink the cell to
       its 1fr share; max-width:100% + overflow-wrap force long values
       (e.g. "₩1,500/day" at 72px) to wrap rather than overflow the
       wrapper and overlap neighbouring stats. */
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
[data-pd-block="counter_pe"] .pd-blk-cpe-lbl {
    max-width: 100%;
    overflow-wrap: anywhere;
}

[data-pd-block="counter_pe"] .pd-blk-cpe-lbl {
    font-size: calc(var(--pd-general-size, 16px) * 0.875); /* v3.7.26 — 14px @ General 16; scales with General Text */
    color: inherit; /* v3.7.19 — label follows General Text colour */
    margin-top: 6px;
}

/* v3.7.243 — per-selection Title Size seam. The Counter panel's "Selected
   title size" tool tags the wrapping span with .pd-cpe-tsz + a --pd-cpe-tsz
   custom property instead of an inline font-size (mirrors the rich-text
   --pd-rt-fs seam). This rule applies the authored size on the CANVAS only;
   the panel's small preview editor has no equivalent rule, so dragging the
   slider grows the canvas title while the preview box stays a fixed size. */
[data-pd-block="counter_pe"] .pd-blk-cpe-lbl .pd-cpe-tsz {
    font-size: var(--pd-cpe-tsz);
}