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

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&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 ── */
/* Reguli de inaltime comune — se aplica si in editor, si in pagina angajatului.
   Editor-ul are reguli proprii cu !important pentru device mode (mobil/tableta). */
.studio-container-height-normal {
    padding-top: 80px;
    padding-bottom: 80px;
    min-height: auto;
}
.studio-container-height-mare {
    padding-top: 160px;
    padding-bottom: 160px;
    min-height: 300px;
}
.studio-container-height-maxima {
    padding-top: 160px;
    padding-bottom: 160px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.studio-container-height-maxima .studio-block-list {
    width: 100%;
}

/* ── Container Block Spacing ── */
.studio-container-spacing-mica  .studio-block-list { gap: 2px; }
.studio-container-spacing-medie .studio-block-list { gap: 10px; }
.studio-container-spacing-mare  .studio-block-list { gap: 28px; }

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


/* ══════════════════════════════════════════
   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
   ══════════════════════════════════════════ */

/* Prag ridicat de la 480px la 640px (vezi nota din studio-block-text.css).
   Lateral: 20px in loc de 40/48px — castigam latime utila pentru text si imagini.
   Sus/jos: 48px in loc de 80px — mai putin spatiu gol pe ecran mic. */
@media (max-width: 640px) {
    .studio-container {
        padding: 48px 20px;
        border-radius: 12px;
    }
}