/* ═══════════════════════════════════════════════════════════════
   STUDIO BLOCK TEXT CSS — Stiluri pentru toate blocurile de tip text
   Loaded: EVERYWHERE (editor + user view)
   Contains: title, paragraph, unified text (titlu, paragraf, lista, special)
   ═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════
   CONTAINER — LATIME CONTINUT (lista de blocuri)
   Aplica un max-width pe lista de blocuri din interiorul containerului.
   Default: 720px (optim pentru citit, ~65 caractere pe rand).
   Alternativ: 1000px (pentru pagini cu continut mai vizual).
   Este independent de latimea containerului in sine (width-normal/maxima).
   ══════════════════════════════════════════ */

.studio-container.studio-container-content-normal .studio-block-list {
    max-width: 720px !important;
    margin-left: auto;
    margin-right: auto;
}
.studio-container.studio-container-content-lat .studio-block-list {
    max-width: 1000px !important;
    margin-left: auto;
    margin-right: auto;
}


/* ══════════════════════════════════════════
   BLOCKS — Title (legacy)
   ══════════════════════════════════════════ */

.studio-block-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.studio-block-title.studio-size-big    { font-size: 56px; line-height: 1.1;  letter-spacing: -0.022em; }
.studio-block-title.studio-size-medium { font-size: 40px; line-height: 1.15; letter-spacing: -0.03em;  }
.studio-block-title.studio-size-small  { font-size: 28px; line-height: 1.25; letter-spacing: -0.02em;  }

/* placeholder when empty */
.studio-block-title:empty::before {
    content: attr(data-placeholder);
    color: #A09D98;
    pointer-events: none;
}


/* ══════════════════════════════════════════
   BLOCKS — Paragraph (legacy)
   ══════════════════════════════════════════ */

.studio-block-paragraph {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.studio-block-paragraph.studio-spacing-normal  { line-height: 1.65; }
.studio-block-paragraph.studio-spacing-wide    { line-height: 2.0;  }
.studio-block-paragraph.studio-spacing-compact { line-height: 1.4;  }

[contenteditable]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Kill browser focus outline on editable blocks */
.studio-block-title:focus,
.studio-block-paragraph:focus,
[contenteditable]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* placeholder when empty */
.studio-block-paragraph:empty::before {
    content: attr(data-placeholder);
    color: #A09D98;
    pointer-events: none;
}


/* ══════════════════════════════════════════
   BLOCKS — Unified Text (with subtypes)
   ══════════════════════════════════════════ */

/* Base text block — shared across subtypes */
.studio-block-text {
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* placeholder when empty */
.studio-block-text:empty::before {
    content: attr(data-placeholder);
    color: #A09D98;
    pointer-events: none;
}

/* ── Subtype: Titlu ── */
.studio-block-text.studio-text-titlu {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    line-height: 1.15;
}
.studio-block-text.studio-text-titlu.studio-size-big    { font-size: 56px; line-height: 1.1;  letter-spacing: -0.022em; }
.studio-block-text.studio-text-titlu.studio-size-medium { font-size: 40px; line-height: 1.15; letter-spacing: -0.03em;  }
.studio-block-text.studio-text-titlu.studio-size-small  { font-size: 28px; line-height: 1.25; letter-spacing: -0.02em;  }

/* ── Subtype: Paragraf ── */
.studio-block-text.studio-text-paragraf {
    font-size: 18px;
    font-weight: 400;
}
.studio-block-text.studio-text-paragraf.studio-spacing-normal  { line-height: 1.65; }
.studio-block-text.studio-text-paragraf.studio-spacing-wide    { line-height: 2.0;  }
.studio-block-text.studio-text-paragraf.studio-spacing-compact { line-height: 1.4;  }

/* ── Subtype: Lista (bullete sau numere) ── */
.studio-block-text.studio-text-lista {
    font-size: 18px;
    line-height: 1.6;
}

/* Fiecare linie a listei e un <div> (sau <p>) direct in bloc.
   Aplicam padding si marker decorativ prin ::before.
   Margin-bottom 10px intre elemente (conform style guide LMS). */
.studio-block-text.studio-text-lista > div,
.studio-block-text.studio-text-lista > p {
    position: relative;
    padding-left: 28px;
    margin: 0 0 10px 0;
}

.studio-block-text.studio-text-lista > div:last-child,
.studio-block-text.studio-text-lista > p:last-child {
    margin-bottom: 0;
}

/* ── Bullete (•) ── */
.studio-block-text.studio-text-lista.studio-lista-bullet > div::before,
.studio-block-text.studio-text-lista.studio-lista-bullet > p::before {
    content: "\2022";
    position: absolute;
    left: 10px;
    top: 0;
    color: #3b82f6;
    font-weight: 700;
    font-size: 1em;
    line-height: inherit;
}

/* ── Numere (1. 2. 3.) ── */
.studio-block-text.studio-text-lista.studio-lista-numerotata {
    counter-reset: lista-item;
}
.studio-block-text.studio-text-lista.studio-lista-numerotata > div,
.studio-block-text.studio-text-lista.studio-lista-numerotata > p {
    counter-increment: lista-item;
}
.studio-block-text.studio-text-lista.studio-lista-numerotata > div::before,
.studio-block-text.studio-text-lista.studio-lista-numerotata > p::before {
    content: counter(lista-item) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: inherit;
    font-weight: 600;
    min-width: 22px;
    text-align: right;
    line-height: inherit;
}

/* ── Subtype: Special (placeholder, de implementat) ── */
.studio-block-text.studio-text-special {
    font-size: 18px;
    line-height: 1.65;
    padding: 18px 22px;
    border-radius: 4px;
}
.studio-block-text.studio-text-special.studio-special-citat {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-style: italic;
    background: rgba(37, 99, 235, 0.06);
    border-left: 4px solid #3b82f6;
}
.studio-block-text.studio-text-special.studio-special-highlight {
    background: rgba(250, 204, 21, 0.2);
    font-weight: 500;
}


/* ══════════════════════════════════════════
   GRADIENT TITLE — titlu cu split plain/gradient
   Gradientul se aplica pe span-ul interior, nu pe element.
   Astfel textul se distribuie corect pe toate culorile,
   iar alinierea (stanga/centru/dreapta) functioneaza normal.
   ══════════════════════════════════════════ */

/* Span-ul gradient — portiunea colorata cu gradient Apple */
.studio-title-gradient {
    background: linear-gradient(90deg, #2997ff 0%, #a855f7 35%, #ec4899 65%, #ff6b35 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-bottom: 0.08em;
}

/* Span-ul plain — portiunea inainte de | ramane in culoarea normala */
.studio-title-plain {
    color: inherit;
    -webkit-text-fill-color: currentColor;
    background: none;
}

/* Cand blocul este in editare (activ), cursorul sa fie vizibil */
.studio-block-text.studio-text-titlu.studio-gradient-on {
    caret-color: #1d1d1f;
}


/* ══════════════════════════════════════════
   RESPONSIVE — Mobile
   ══════════════════════════════════════════ */

/* Prag ridicat de la 480px la 640px — telefoanele moderne raporteaza
   latimi de 480-640px, deci regulile de mobil nu se aplicau deloc. */
@media (max-width: 640px) {
    .studio-block-title.studio-size-big    { font-size: 34px; letter-spacing: -0.5px; }
    .studio-block-title.studio-size-medium { font-size: 27px; letter-spacing: -0.3px; }
    .studio-block-title.studio-size-small  { font-size: 22px; letter-spacing: -0.2px; }
    
    .studio-block-paragraph { font-size: 19px; }

    .studio-block-text.studio-text-titlu.studio-size-big    { font-size: 34px; letter-spacing: -0.5px; }
    .studio-block-text.studio-text-titlu.studio-size-medium { font-size: 27px; letter-spacing: -0.3px; }
    .studio-block-text.studio-text-titlu.studio-size-small  { font-size: 22px; letter-spacing: -0.2px; }
    .studio-block-text.studio-text-paragraf,
    .studio-block-text.studio-text-lista    { font-size: 19px; }
    .studio-block-text.studio-text-special  { font-size: 19px; }
}

/* ══════════════════════════════════════════
   TITLU LAT (optiunea "Latime rand" = lata)
   Cand titlul are clasa .studio-titlewidth-lata, randul-parinte iese din
   coloana de text (720px) cu 96px in fiecare parte, ca sa para mai lat
   (la fel ca imaginea "mare"). In editor wrapper-ul randului e .se-block-wrap,
   in vizualizator (user view) este .studio-view-block.
   Calcul: -96px = -16px (anuleaza padding-ul intern) - 80px (iesire vizibila).
   ══════════════════════════════════════════ */
.se-block-wrap:has(.studio-text-titlu.studio-titlewidth-lata),
.studio-view-block:has(.studio-text-titlu.studio-titlewidth-lata) {
    margin-left: -96px;
    margin-right: -96px;
    width: calc(100% + 192px);
}

/* Pe ecrane mici (tableta/telefon, sub coloana de ~720px) efectul NU se aplica —
   ar cauza scroll orizontal si nu are rost. Titlul ramane in latimea normala. */
@media (max-width: 1024px) {
    .se-block-wrap:has(.studio-text-titlu.studio-titlewidth-lata),
    .studio-view-block:has(.studio-text-titlu.studio-titlewidth-lata) {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}

/* In editor, in modul de previzualizare telefon/tableta, titlul lat NU iese din ecran. */
.se-device-frame .se-block-wrap:has(.studio-text-titlu.studio-titlewidth-lata) {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}


/* ══════════════════════════════════════════
   TITLU AERISIT (optiunea "Spatiu" = extra)
   Cand titlul are clasa .studio-titlespace-extra, adaugam spatiu gol
   deasupra si sub el, ca sa nu mai para inghesuit de blocurile vecine.
   Clasa e pe acelasi element in editor si in vizualizator, deci arata la fel
   in ambele. ~20px sus + 20px jos (peste spatierea normala dintre blocuri).
   ══════════════════════════════════════════ */
.studio-block-text.studio-text-titlu.studio-titlespace-extra {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ══════════════════════════════════════════
   TITLU LIPIT (optiunea "Spatiu" = fara)
   Cand titlul are clasa .studio-titlespace-fara, anulam cei 10px sus + 10px jos
   de pe invelisul blocului (cutia din jur), ca titlul sa se apropie de blocurile
   vecine. Lateralele (16px stanga/dreapta) raman, ca textul sa nu se lipeasca de
   margine. Invelisul in editor e .se-block-wrap, in vizualizator .studio-view-block
   — la fel ca la "Titlu lat". Asa, intre doua titluri puse pe "fara" ramane doar
   spatierea dintre blocuri (din container), nimic in plus.
   ══════════════════════════════════════════ */
.se-block-wrap:has(.studio-text-titlu.studio-titlespace-fara),
.studio-view-block:has(.studio-text-titlu.studio-titlespace-fara) {
    padding-top: 0;
    padding-bottom: 0;
}

/* ══════════════════════════════════════════
   TITLU LIPIT — taierea spatiului de respiratie al randului
   Dupa ce am scos padding-ul invelisului (mai sus), mai ramane un spatiu mic in
   jurul literelor, din inaltimea randului (line-height). Il taiem cu o margine
   negativa exact cat jumatatea de spatiu de sus si de jos, calculata per marime:
     mare:  line-height 1.1,  font 56px -> (1.1-1)*56/2  = 2.8px
     mediu: line-height 1.15, font 40px -> (1.15-1)*40/2 = 3px
     mic:   line-height 1.25, font 28px -> (1.25-1)*28/2 = 3.5px
   Asta NU strange randurile DIN INTERIORUL unui titlu pe mai multe randuri —
   taie doar spatiul de la marginea de sus si de jos a blocului. Asa doua titluri
   puse pe "fara" se lipesc cu adevarat.
   ══════════════════════════════════════════ */
.studio-block-text.studio-text-titlu.studio-titlespace-fara.studio-size-big    { margin-top: -2.8px; margin-bottom: -2.8px; }
.studio-block-text.studio-text-titlu.studio-titlespace-fara.studio-size-medium { margin-top: -3px;   margin-bottom: -3px;   }
.studio-block-text.studio-text-titlu.studio-titlespace-fara.studio-size-small  { margin-top: -3.5px; margin-bottom: -3.5px; }