/* ============================================================
 * builder-front.css — Frontend rendering of builder blocks
 * ============================================================ */

@layer builder {
  .bfm-bb {
    --bb-gap: clamp(16px, 3vw, 32px);
    direction: rtl;
  }

  /* Section */
  .bfm-bb__section {
    padding-block: clamp(32px, 5vw, 72px);

    &[data-bg="muted"]  { background: var(--surface-muted, #f1f5f9); }
    &[data-bg="dark"]   { background: var(--color-slate-900, #0f172a); color: white; }
    &[data-bg="brand"]  {
      background: linear-gradient(135deg, var(--color-primary-700, #4338ca), var(--color-primary-900, #312e81));
      color: white;
    }
    &[data-spacing="none"]  { padding-block: 0; }
    &[data-spacing="small"] { padding-block: clamp(16px, 2vw, 32px); }
    &[data-spacing="large"] { padding-block: clamp(48px, 7vw, 120px); }
  }

  .bfm-bb__container {
    inline-size: min(100% - 2 * var(--bb-gap), 1280px);
    margin-inline: auto;
  }
  .bfm-bb__container--narrow { max-inline-size: 880px; }
  .bfm-bb__container--prose  { max-inline-size: 800px; }

  /* Row = 12-col grid */
  .bfm-bb__row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--bb-gap);

    &[data-align="center"] { align-items: center; }
    &[data-align="end"]    { align-items: end; }
  }

  /* Column spans (mobile-first; refine at md) */
  .bfm-bb__col { grid-column: span 12; min-inline-size: 0; }
  @media (min-width: 768px) {
    .bfm-bb__col[data-span="1"]  { grid-column: span 1;  }
    .bfm-bb__col[data-span="2"]  { grid-column: span 2;  }
    .bfm-bb__col[data-span="3"]  { grid-column: span 3;  }
    .bfm-bb__col[data-span="4"]  { grid-column: span 4;  }
    .bfm-bb__col[data-span="5"]  { grid-column: span 5;  }
    .bfm-bb__col[data-span="6"]  { grid-column: span 6;  }
    .bfm-bb__col[data-span="7"]  { grid-column: span 7;  }
    .bfm-bb__col[data-span="8"]  { grid-column: span 8;  }
    .bfm-bb__col[data-span="9"]  { grid-column: span 9;  }
    .bfm-bb__col[data-span="10"] { grid-column: span 10; }
    .bfm-bb__col[data-span="11"] { grid-column: span 11; }
    .bfm-bb__col[data-span="12"] { grid-column: span 12; }
  }

  /* ---------- Block primitives ---------- */
  .bfm-bb__heading {
    font-family: "Tajawal", "Cairo", system-ui, sans-serif;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-block-end: 0.5em;
    &[data-level="1"] { font-size: clamp(2rem, 1.6rem + 2vw, 3.25rem); }
    &[data-level="2"] { font-size: clamp(1.6rem, 1.35rem + 1.3vw, 2.5rem); }
    &[data-level="3"] { font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.875rem); }
  }
  .bfm-bb__text {
    font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
    line-height: 1.8;
    color: var(--text-secondary, #334155);
  }
  .bfm-bb__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    background: var(--color-primary-600, #4f46e5);
    color: white;
    transition: transform 180ms, box-shadow 180ms;
  }
  .bfm-bb__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(79,70,229,0.4);
  }
  .bfm-bb__btn--ghost {
    background: transparent;
    color: var(--color-primary-700, #4338ca);
    border: 1.5px solid var(--color-primary-600, #4f46e5);
  }

  /* Image block */
  .bfm-bb__image {
    overflow: hidden;
    border-radius: 14px;
    background: var(--surface-muted, #f1f5f9);

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      aspect-ratio: var(--ratio, 16/10);
    }
    &[data-ratio="square"] img    { aspect-ratio: 1/1; }
    &[data-ratio="portrait"] img  { aspect-ratio: 3/4; }
    &[data-ratio="wide"] img      { aspect-ratio: 21/9; }
  }

  /* Spacer */
  .bfm-bb__spacer { block-size: var(--h, 24px); }

  /* Divider */
  .bfm-bb__divider {
    border: 0;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.2;
    margin-block: 16px;
  }

  /* Posts grid block */
  .bfm-bb__posts {
    display: grid;
    gap: var(--bb-gap);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

    &[data-cols="2"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
    &[data-cols="4"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  }

  /* Animated reveal */
  @media (prefers-reduced-motion: no-preference) {
    .bfm-bb__col[data-reveal] {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
                  transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .bfm-bb__col[data-reveal].is-in-view {
      opacity: 1;
      transform: translateY(0);
    }
  }
}