/* ==========================================================================
   SVG Icon + Text Block — shared styles (frontend + editor)
   ========================================================================== */

.wp-block-svg-icon-text-icon-card {
    box-sizing: border-box;
}

.wp-block-svg-icon-text-icon-card.has-icon-card-animation {
    transition-property: opacity, transform;
    transition-duration: var(--icon-card-anim-duration, 450ms);
    transition-delay: var(--icon-card-anim-delay, 0ms);
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.wp-block-svg-icon-text-icon-card.has-icon-card-animation:not(.is-visible):not(.is-editor-preview) {
    opacity: 0;
}

.wp-block-svg-icon-text-icon-card.has-icon-card-animation.is-visible,
.wp-block-svg-icon-text-icon-card.has-icon-card-animation.is-editor-preview {
    opacity: 1;
}

.wp-block-svg-icon-text-icon-card.has-icon-card-animation.icon-card-anim-fade-up:not(.is-visible):not(.is-editor-preview) {
    transform: translateY(16px);
}

.wp-block-svg-icon-text-icon-card.has-icon-card-animation.icon-card-anim-fade-in:not(.is-visible):not(.is-editor-preview) {
    transform: none;
}

.wp-block-svg-icon-text-icon-card.has-icon-card-animation.icon-card-anim-zoom-in:not(.is-visible):not(.is-editor-preview) {
    transform: scale(0.96);
}

.wp-block-svg-icon-text-icon-card.has-icon-card-animation.icon-card-anim-fade-up.is-visible,
.wp-block-svg-icon-text-icon-card.has-icon-card-animation.icon-card-anim-zoom-in.is-visible,
.wp-block-svg-icon-text-icon-card.has-icon-card-animation.icon-card-anim-fade-up.is-editor-preview,
.wp-block-svg-icon-text-icon-card.has-icon-card-animation.icon-card-anim-zoom-in.is-editor-preview {
    transform: none;
}

/* Inner flex container — direction and gap come from inline styles set in JS */
.wp-block-svg-icon-text-icon-card .icon-card-inner {
    display: flex;
    align-items: center; /* safe default */
}

.wp-block-svg-icon-text-icon-card .icon-card-inner.icon-valign-top     { align-items: flex-start; }
.wp-block-svg-icon-text-icon-card .icon-card-inner.icon-valign-center  { align-items: center; }
.wp-block-svg-icon-text-icon-card .icon-card-inner.icon-valign-bottom  { align-items: flex-end; }
.wp-block-svg-icon-text-icon-card .icon-card-inner.icon-valign-stretch { align-items: stretch; }

/* ── Icon / media column ─────────────────────────────────────────────────── */

.wp-block-svg-icon-text-icon-card .icon-card-media {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Plain image icon */
.wp-block-svg-icon-text-icon-card .icon-card-image {
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

/* SVG rendered via CSS mask so a single fill colour can be applied.
   The URL and fill colour are supplied as CSS custom properties from inline style:
     --mask-url  : url(...svg...)
     --mask-fill : #colour                                                         */
.wp-block-svg-icon-text-icon-card .icon-svg-mask {
    display: block;
    flex-shrink: 0;
    background-color: var(--mask-fill, currentColor);
    -webkit-mask-image: var(--mask-url);
            mask-image: var(--mask-url);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
}

/* ── Text / content column ───────────────────────────────────────────────── */

.wp-block-svg-icon-text-icon-card .icon-card-content {
    min-width: 0; /* prevents flex blowout */
}

.wp-block-svg-icon-text-icon-card .icon-card-content > * {
    margin-top: 0;
    margin-bottom: 0;
}

.wp-block-svg-icon-text-icon-card .icon-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--icon-card-content-gap, 0.5em);
}

.icon-card-content .wp-block-heading {
  margin-bottom: 0;
}

/* ── Editor-only placeholder ─────────────────────────────────────────────── */

.wp-block-svg-icon-text-icon-card .icon-card-placeholder {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ccc;
    color: #aaa;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
}