/* ============================================================
   BlockEditor — published content styles (no editor chrome).
   Markup is produced by App\Libraries\BlockEditor\BlockRenderer.
   ============================================================ */

.bc-canvas {
    --bc-text: #4a5568;
    --bc-heading: #334155;
    --bc-muted: #94a3b8;
    --bc-border: #e5e7eb;
    color: var(--bc-text);
}

/* ----------------------------------------------------------- sections */

/* Full-bleed sections below break out of the centred container with
   `width: 100vw`. By default `100vw` includes the vertical scrollbar gutter
   while the page content area does not, so the section ends up a scrollbar
   wider than the viewport and triggers horizontal overflow. Reserving the
   gutter permanently keeps `100vw` and the content width in sync, so the
   full-bleed math lines up edge-to-edge with no overflow. */
html { scrollbar-gutter: stable; }

.bc-section { background: #fff; }
.bc-section.bc-full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.bc-section.bc-bg-gray { background: #f6f7f9; }
.bc-section.bc-bg-dark { background: #1f2937; color: #e5e7eb; }
.bc-section.bc-bg-dark .bc-heading,
.bc-section.bc-bg-dark .bc-card-title { color: #f9fafb; }
.bc-section.bc-bg-gradient { background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%); }

/* Spacing lives on the <section> element now (vertical padding/margin, set
   inline from settings.spacing); the grid itself never carries padding. */
.bc-section .bc-grid { padding: 0; }

/* ----------------------------------------------------------- grid
   Same coordinate system as the editor: --bc-cols columns (the section's own
   count, set inline by BlockRenderer; 12 when the content predates the setting)
   and 36px rows.
   Rows are minmax(36px, auto): the block's designed height is a floor, but a
   block whose content is taller than its dragged size grows its row band
   instead of overflowing and overlapping its neighbours (the editor canvas
   clips with overflow:hidden; published content must never be lost).
   Blocks keep their column position (--bc-x) but rows auto-flow: like the
   editor's float:false, items gravitate up and can't float with empty rows
   between them. DOM order is reading order (BlockRenderer sorts by y,x), so
   grid-auto-flow:dense packs items without reordering them.
   Below 768px it collapses to 2 tracks with auto-flowing rows — spans relative
   to the section's own count would go ragged there, since an odd count has no
   even split. Which of the two widths a block takes is decided by its share of
   the row (BlockRenderer: a quarter or less keeps half width, wider goes full),
   so the collapse follows any column count. Below 576px everything is full. */

.bc-grid {
    display: grid;
    grid-template-columns: repeat(var(--bc-cols, 12), 1fr);
    grid-auto-rows: minmax(36px, auto);
    grid-auto-flow: row dense;
    gap: 16px;
}

.bc-item {
    grid-column: var(--bc-x) / span var(--bc-w);
    grid-row: span var(--bc-h);
    min-width: 0;
}

/* Custom (theme-defined) blocks own their layout: their markup is content-flow
   (sections, card rows, sliders), not media that fills a fixed cell. So instead
   of being forced to `span var(--bc-h)` and stretched to the dragged height —
   leaving an empty box around short content — they take a single auto row that
   follows the natural height of what they render. Built-in media blocks keep
   the designed-height span above because they rely on `height: 100%`. */
.bc-item.bc-custom {
    grid-row: auto;
    align-self: start;
}

/* Same reasoning for the core blocks that are content-flow rather than a box to
   fill: text has a height, it doesn't have a size you can drag it to. A row
   stack joins them — it lays its children out along the inline axis, so its
   height is whatever the tallest child needs. Column stacks deliberately do NOT:
   `justify-*` needs a definite height to have free space to distribute, so they
   keep the designed span. */
.bc-item:is(.bc-type-heading, .bc-type-paragraph, .bc-type-rich-text),
.bc-item.bc-type-stack:has(> .bc-stack.bc-dir-row) {
    grid-row: auto;
    align-self: start;
}

@media (max-width: 768px) {
    .bc-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
    }

    .bc-item {
        grid-column: auto / span 1;
        grid-row: auto;
    }

    .bc-m-full { grid-column: auto / span 2; }

    /* fixed-height media follows its own aspect once rows are auto */
    .bc-image { height: auto; }
    .bc-video { height: auto; aspect-ratio: 16 / 9; }
    .bc-richlink-img { flex-basis: auto; height: 130px; }
}

@media (max-width: 576px) {
    .bc-m-half { grid-column: auto / span 2; }
}

/* ------------------------------------------------------- block content */

.bc-size-xs { font-size: .72rem; }
.bc-size-s  { font-size: .86rem; }
.bc-size-m  { font-size: 1rem; }
.bc-size-l  { font-size: 1.25rem; }
.bc-size-xl { font-size: 1.6rem; }

.bc-align-left   { text-align: left; }
.bc-align-center { text-align: center; }
.bc-align-right  { text-align: right; }

.bc-text {
    margin: 0;
    font-size: 1.05em;
    line-height: 1.75;
}

.bc-richtext { overflow: hidden; line-height: 1.75; }
.bc-richtext > :first-child { margin-top: 0; }
.bc-richtext img { max-width: 100%; }

.bc-heading {
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bc-heading);
}
.bc-heading:is(h1) { font-size: 2.5em; }
.bc-heading:is(h2) { font-size: 2.1em; }
.bc-heading:is(h3) { font-size: 1.75em; }
.bc-heading:is(h4) { font-size: 1.5em; }
.bc-heading:is(h5) { font-size: 1.25em; }
.bc-heading:is(h6) { font-size: 1em; }

.bc-list {
    margin: 0;
    padding-left: 1.4em;
    font-size: 1.05em;
    line-height: 1.9;
}

.bc-btn {
    display: inline-flex;
    align-items: center;
    padding: .65em 1.6em;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: #1f2937;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
}

.bc-btn--full {
    display: flex;
    justify-content: center;
    width: 100%;
}

.bc-align-center .bc-btn:not(.bc-btn--full) { margin: 0 auto; display: table; }

.bc-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.bc-input {
    width: 100%;
    padding: 10px 14px;
    font: inherit;
    color: inherit;
    background: #f8f9fb;
    border: 1px solid var(--bc-border);
    border-radius: 9px;
    resize: none;
    box-sizing: border-box;
}

.bc-input:focus { outline: 2px solid #bfdbfe; }

.bc-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.bc-image-link { display: block; height: 100%; }

.bc-image.is-square,
.bc-image.is-circle { aspect-ratio: 1; width: auto; max-width: 100%; margin: 0 auto; }

.bc-image.ratio-16-9 { aspect-ratio: 16 / 9; }
.bc-image.ratio-3-2  { aspect-ratio: 3 / 2; }
.bc-image.ratio-4-3  { aspect-ratio: 4 / 3; }

.bc-image.ratio-16-9,
.bc-image.ratio-3-2,
.bc-image.ratio-4-3 { height: auto; max-height: 100%; }

.bc-image.corners-none { border-radius: 0; }
.bc-image.corners-l { border-radius: 22px; }
.bc-image.is-circle { border-radius: 50%; }

.bc-image.style-inset { padding: 8px; background: #fff; border: 1px solid #e7e8ec; }
.bc-image.style-shadow { box-shadow: 0 12px 28px rgba(16, 24, 40, .22); }

.bc-align-left .bc-image { margin-left: 0; }
.bc-align-right .bc-image { margin-right: 0; }

.bc-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #111827;
    border-radius: 10px;
}

.bc-video.ratio-16-9 { aspect-ratio: 16 / 9; }
.bc-video.ratio-4-3  { aspect-ratio: 4 / 3; }
.bc-video.ratio-1-1  { aspect-ratio: 1 / 1; }
.bc-video.ratio-9-16 { aspect-ratio: 9 / 16; }

.bc-video.ratio-16-9,
.bc-video.ratio-4-3,
.bc-video.ratio-1-1,
.bc-video.ratio-9-16 { height: auto; max-height: 100%; }

.bc-video.corners-none { border-radius: 0; }
.bc-video.corners-l { border-radius: 22px; }

.bc-video.style-inset { padding: 8px; background: #fff; border: 1px solid #e7e8ec; }
.bc-video.style-shadow { box-shadow: 0 12px 28px rgba(16, 24, 40, .22); }

.bc-iconblock {
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--bc-heading);
}

.bc-iconblock svg { width: 2em; height: 2em; }
.bc-iconblock .bc-glyph { width: 2em; height: 2em; font-size: 2em; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }

.bc-align-center .bc-iconblock { justify-content: center; }
.bc-align-right .bc-iconblock { justify-content: flex-end; }

.bc-stack {
    display: flex;
    height: 100%;
}

.bc-stack.bc-dir-column { flex-direction: column; }
.bc-stack.bc-dir-row { flex-direction: row; }

.bc-stack.bc-gap-s { gap: 4px; }
.bc-stack.bc-gap-m { gap: 12px; }
.bc-stack.bc-gap-l { gap: 24px; }

/* Justify spreads children along the main axis */
.bc-stack.bc-justify-start { justify-content: flex-start; }
.bc-stack.bc-justify-center { justify-content: center; }
.bc-stack.bc-justify-end { justify-content: flex-end; }
.bc-stack.bc-justify-between { justify-content: space-between; }

/* Align maps to the cross axis: horizontal placement for vertical stacks,
   vertical placement for horizontal ones */
.bc-align-left .bc-stack { align-items: flex-start; }
.bc-align-center .bc-stack { align-items: center; }
.bc-align-right .bc-stack { align-items: flex-end; }

.bc-stack-child { min-width: 0; }

.bc-richlink {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--bc-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.bc-richlink-img {
    display: grid;
    place-items: center;
    flex: 0 0 46%;
    min-height: 0;
    color: #cbd5e1;
    background: #f4f5f7;
}

.bc-richlink-img svg { width: 36px; height: 36px; }
.bc-richlink-img img { width: 100%; height: 100%; object-fit: cover; }

.bc-richlink-body {
    flex: 1;
    min-height: 0;
    padding: 12px 16px;
    overflow: hidden;
}

.bc-richlink-title { font-size: 1.1em; font-weight: 700; color: var(--bc-heading); }
.bc-richlink-desc { margin-top: 4px; font-size: .85em; line-height: 1.5; color: #8a94a6; }
.bc-richlink-url { margin-top: 6px; font-size: .8em; color: var(--bc-muted); }

.bc-tweet {
    height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--bc-border);
    border-radius: 12px;
}

.bc-tweet-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--bc-heading); }
.bc-tweet-bird { color: #1d9bf0; }
.bc-tweet-bird svg { width: 18px; height: 18px; display: block; }
.bc-tweet p { margin: 8px 0 0; line-height: 1.6; }

.bc-card {
    height: 100%;
    padding: 16px 18px;
    border: 1px solid var(--bc-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.bc-card-title { font-size: 1.15em; font-weight: 700; color: var(--bc-heading); }
.bc-card-text { margin-top: 6px; line-height: 1.6; }

.bc-divider {
    height: 1px;
    margin-top: 9px;
    background: var(--bc-border);
}

.bc-accordion {
    border: 1px solid var(--bc-border);
    border-radius: 12px;
    overflow: hidden;
}

.bc-accordion summary {
    padding: 12px 16px;
    font-weight: 700;
    color: var(--bc-heading);
    background: #f8f9fb;
    cursor: pointer;
}

.bc-accordion-body { padding: 12px 16px; }