/* ═══════════════════════════════════════════════════════════════
   STUDIO BLOCK SEPARATOR CSS
   Loaded: EVERYWHERE (editor + user view)
   Contains: spacer (zona goala) + divider (linie separare)
   ═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════
   BASE
   ══════════════════════════════════════════ */

.studio-block-separator {
    width: 100%;
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
}

/* In editor, blocul non-editable nu trebuie sa aiba cursor text */
.se-block-content.se-block-non-editable {
    cursor: default;
    padding: 0;
}

.se-block-content.se-block-non-editable:focus {
    outline: none;
}


/* ══════════════════════════════════════════
   SUBTYPE: SPACER
   ══════════════════════════════════════════ */

.studio-separator-spacer {
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.studio-separator-spacer.studio-spacer-xs { height: 16px; }
.studio-separator-spacer.studio-spacer-s  { height: 32px; }
.studio-separator-spacer.studio-spacer-m  { height: 64px; }
.studio-separator-spacer.studio-spacer-l  { height: 120px; }

/* Label-ul "Spatiu" e ascuns in USER VIEW */
.studio-spacer-label {
    display: none;
}

/* ─── EDITOR-ONLY: pattern + border + label vizibil ─── */
body.studio-editor-active .studio-separator-spacer {
    background: repeating-linear-gradient(
        45deg,
        rgba(37, 99, 235, 0.06),
        rgba(37, 99, 235, 0.06) 6px,
        rgba(37, 99, 235, 0.18) 6px,
        rgba(37, 99, 235, 0.18) 12px
    );
    border: 1px dashed rgba(37, 99, 235, 0.45);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.studio-editor-active .studio-spacer-label {
    display: inline-block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2563eb;
    background: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.15);
    white-space: nowrap;
}

/* Pentru spacer XS, label-ul sta in dreapta pentru ca spatiul e prea mic */
body.studio-editor-active .studio-separator-spacer.studio-spacer-xs .studio-spacer-label {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    padding: 2px 6px;
}


/* ══════════════════════════════════════════
   SUBTYPE: DIVIDER
   ══════════════════════════════════════════ */

.studio-separator-divider {
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.studio-divider-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 100%;
}

/* ── Latime ── */
.studio-divider-width-small  .studio-divider-inner { width: 80px; }
.studio-divider-width-medium .studio-divider-inner { width: 280px; }
.studio-divider-width-full   .studio-divider-inner { width: 100%; }

/* ── Aliniere (left / center / right) ── */
.studio-separator-divider.studio-align-left   { justify-content: flex-start; }
.studio-separator-divider.studio-align-center { justify-content: center; }
.studio-separator-divider.studio-align-right  { justify-content: flex-end; }

/* ── Linia de baza ── */
.studio-divider-line {
    flex: 1;
    height: 0;
    border-top: 2px solid #334155;
    min-width: 12px;
}

/* ── Stil linie ── */
.studio-divider-style-solid  .studio-divider-line { border-top-style: solid; }
.studio-divider-style-dashed .studio-divider-line { border-top-style: dashed; }
.studio-divider-style-dotted .studio-divider-line { border-top-style: dotted; }
.studio-divider-style-double .studio-divider-line { border-top-style: double; }

.studio-divider-style-gradient .studio-divider-line {
    border: 0;
    height: 2px;
}
.studio-divider-style-gradient .studio-divider-line:first-child {
    background: linear-gradient(90deg, transparent 0%, #334155 100%);
}
.studio-divider-style-gradient .studio-divider-line:last-child {
    background: linear-gradient(90deg, #334155 0%, transparent 100%);
}
/* Pentru gradient fara iconita (doar o linie), facem un gradient complet */
.studio-divider-style-gradient.studio-divider-icon-none .studio-divider-line:first-child {
    background: linear-gradient(90deg, transparent 0%, #334155 50%, transparent 100%);
}

/* ── Grosime linie ── */
.studio-divider-thickness-thin   .studio-divider-line { border-top-width: 1px; }
.studio-divider-thickness-normal .studio-divider-line { border-top-width: 2px; }
.studio-divider-thickness-thick  .studio-divider-line { border-top-width: 4px; }

/* Grosime pentru gradient (height, nu border) */
.studio-divider-style-gradient.studio-divider-thickness-thin   .studio-divider-line { height: 1px; border: 0; }
.studio-divider-style-gradient.studio-divider-thickness-normal .studio-divider-line { height: 2px; border: 0; }
.studio-divider-style-gradient.studio-divider-thickness-thick  .studio-divider-line { height: 4px; border: 0; }

/* Grosime pentru double (are nevoie de valori mai mari ca sa se vada cele 2 linii) */
.studio-divider-style-double.studio-divider-thickness-thin   .studio-divider-line { border-top-width: 4px; }
.studio-divider-style-double.studio-divider-thickness-normal .studio-divider-line { border-top-width: 6px; }
.studio-divider-style-double.studio-divider-thickness-thick  .studio-divider-line { border-top-width: 9px; }

/* ── Spatiere verticala ── */
.studio-divider-spacing-compact { padding: 8px 0; }
.studio-divider-spacing-normal  { padding: 20px 0; }
.studio-divider-spacing-large   { padding: 40px 0; }

/* ── Iconita centrala ── */
.studio-divider-icon {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    flex: 0 0 auto;
}

/* Cand nu avem iconita, ascundem si span-ul, si a doua linie, ca sa avem o singura linie continua */
.studio-divider-icon-none .studio-divider-icon        { display: none; }
.studio-divider-icon-none .studio-divider-inner       { gap: 0; }
.studio-divider-icon-none .studio-divider-line:last-child  { display: none; }
.studio-divider-icon-none .studio-divider-line:first-child { flex: 1; }

/* ── Simboluri iconite (prin ::before) ── */
.studio-divider-icon-dot .studio-divider-icon::before {
    content: '';
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
}
.studio-divider-icon-diamond .studio-divider-icon::before {
    content: '';
    width: 8px;
    height: 8px;
    background: currentColor;
    transform: rotate(45deg);
}
.studio-divider-icon-asterisk .studio-divider-icon::before {
    content: '✱';
    font-size: 18px;
    line-height: 1;
}
.studio-divider-icon-tridots .studio-divider-icon::before {
    content: '•••';
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 1;
}


/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 480px) {
    .studio-separator-spacer.studio-spacer-l { height: 80px; }
    .studio-separator-spacer.studio-spacer-m { height: 48px; }
    .studio-divider-width-medium .studio-divider-inner { width: 85%; }
}