/* ═══════════════════════════════════════════════════════════════
   STUDIO BLOCKS CSS — Shared visual styles
   Loaded: EVERYWHERE (editor + user view)
   Contains: container styles, block styles, alignment, spacing
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Fraunces:wght@600;700;800&display=swap');

/* ══════════════════════════════════════════
   CONTAINERS
   ══════════════════════════════════════════ */

.studio-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 16px;
    padding: 32px 40px 32px 48px;
    position: relative;
    transition: box-shadow 0.15s ease;
}

/* ── Container Colors ── */
.studio-container-alb       { background: #ffffff; color: #1C1B19; }
.studio-container-negru     { background: #111827; color: #f3f4f6; }
.studio-container-gri       { background: #f3f4f6; color: #1f2937; }
.studio-container-rosu      { background: #fef2f2; color: #991b1b; }
.studio-container-verde     { background: #f0fdf4; color: #166534; }
.studio-container-albastru  { background: #eff6ff; color: #1e40af; }
.studio-container-galben    { background: #fefce8; color: #854d0e; }

/* ── Container Corners ── */
.studio-container-corners-rotunde { border-radius: 16px; }
.studio-container-corners-drepte  { border-radius: 0; }

/* ── Container Width ── */
.studio-container-width-normal { max-width: 1000px; }
.studio-container-width-maxima { max-width: 100%; }

/* ── Container Height ── */
.studio-container-height-normal { min-height: auto; }
.studio-container-height-mare   { min-height: 300px; }
.studio-container-height-maxima { min-height: 500px; }

/* ── Container Block Spacing ── */
.studio-container-spacing-mica  .studio-block-list { gap: 4px; }
.studio-container-spacing-medie .studio-block-list { gap: 16px; }
.studio-container-spacing-mare  .studio-block-list { gap: 32px; }

/* ── Block List ── */
.studio-block-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* ══════════════════════════════════════════
   BLOCKS — Title
   ══════════════════════════════════════════ */

.studio-block-title {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.3px;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.studio-block-title.studio-size-big    { font-size: 28px; }
.studio-block-title.studio-size-medium { font-size: 22px; }
.studio-block-title.studio-size-small  { font-size: 18px; }

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


/* ══════════════════════════════════════════
   BLOCKS — Paragraph
   ══════════════════════════════════════════ */

.studio-block-paragraph {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.studio-block-paragraph.studio-spacing-normal  { line-height: 1.8; }
.studio-block-paragraph.studio-spacing-wide    { line-height: 2.2; }
.studio-block-paragraph.studio-spacing-compact { line-height: 1.5; }

[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;
}


/* ══════════════════════════════════════════
   ALIGNMENT
   ══════════════════════════════════════════ */

.studio-align-left    { text-align: left; }
.studio-align-center  { text-align: center; }
.studio-align-right   { text-align: right; }
.studio-align-justify { text-align: justify; }


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

@media (max-width: 480px) {
    .studio-container {
        padding: 20px 16px;
        border-radius: 12px;
    }
    
    .studio-block-title.studio-size-big    { font-size: 22px; }
    .studio-block-title.studio-size-medium { font-size: 18px; }
    .studio-block-title.studio-size-small  { font-size: 16px; }
    
    .studio-block-paragraph { font-size: 14px; }
}