/* ============================================================
   CAMPUSKATHA — Editorial Composition Engine
   Production-grade newspaper builder stylesheet
   ============================================================ */

/* Typography Constraints to prevent overflow */
.ed-headline, .ed-excerpt, .ed-meta, .ed-category, .ed-venue, .ed-company, .ed-role, .ed-journal, .ed-doi {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    overflow: hidden;
}

/* Event block layout fix */
.vb-placed-block.ed-type-event, .vb-placed-block.ed-type-placement {
    align-self: start; /* Prevents vertical stretching to fill grid cells */
}

/* 1. BUILDER CHROME — Light Editorial Studio */
.vb-header{display:flex;justify-content:space-between;align-items:center;padding:0 24px;background:linear-gradient(90deg, #151520, #1e1e2e);border-bottom:1px solid #2a2a3e;height:56px;color:#fff;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.1);position:relative;z-index:200;}
.vb-header h2{font-family:var(--font-ui);font-size:14px;font-weight:700;margin:0;letter-spacing:-0.01em;}
.vb-header-status{font-size:11px;color:rgba(255,255,255,0.45);margin-top:2px;}
.vb-header-actions{display:flex;gap:12px;align-items:center;}
.vb-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:6px;font-family:var(--font-ui);font-size:12px;font-weight:600;border:none;cursor:pointer;transition:all .15s;}
.vb-btn--ghost{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);}
.vb-btn--ghost:hover{background:rgba(255,255,255,.15);color:#fff;}
.vb-btn--primary{background:#2a2a3e;color:#fff;border:1px solid #3e3e5e;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.vb-btn--primary:hover{background:#3a3a5e;border-color:#4e4e6e;}
.vb-layout{display:flex;height:calc(100vh - 56px);overflow:hidden;}

/* 2. LEFT SIDEBAR — Light theme */
.vb-sidebar-left{width:270px;min-width:270px;background:#f8f8f6;border-right:1px solid #e4e4e0;display:flex;flex-direction:column;overflow:hidden;color:#333;}
.vb-collapse-toggle{display:none;}
.vb-mobile-close-props{display:none;}
.vb-tabs{display:flex;border-bottom:1px solid #e4e4e0;background:#f0f0ee;}
.vb-tab{flex:1;padding:10px 4px;font-family:var(--font-ui);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;background:none;border:none;cursor:pointer;color:#999;border-bottom:2px solid transparent;transition:.2s;}
.vb-tab:hover{color:#555;}
.vb-tab.active{color:var(--color-accent);border-bottom-color:var(--color-accent);background:#fff;}
.vb-panel{flex:1;overflow-y:auto;padding:12px;display:none;}
.vb-panel.active{display:block;}
.vb-section-label{font-family:var(--font-ui);font-size:9px;text-transform:uppercase;letter-spacing:1.2px;color:#aaa;font-weight:700;margin:16px 0 8px;padding-bottom:5px;border-bottom:1px solid #eee;}
.vb-section-label:first-child{margin-top:0;}

/* 3. DRAGGABLE ITEMS — Sidebar */
.vb-drag-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.vb-drag-item{background:#fff;border:1px solid #e8e8e4;border-radius:8px;padding:9px 10px;cursor:grab;display:flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:11px;font-weight:600;color:#555;transition:all .15s;user-select:none;}
.vb-drag-item:hover{background:#f0faf4;border-color:var(--color-accent);color:#333;box-shadow:0 2px 8px rgba(61,125,85,.1);}
.vb-drag-item:active{cursor:grabbing;opacity:.6;}
.vb-drag-item .material-symbols-outlined{font-size:16px;color:var(--color-accent);}

/* Pool items */
.vb-pool-item{background:#fff;border:1px solid #e8e8e4;border-radius:8px;padding:10px 12px;margin-bottom:5px;cursor:grab;transition:.15s;user-select:none;}
.vb-pool-item:hover{background:#f0faf4;border-color:var(--color-accent);}
.vb-pool-title{font-family:var(--font-ui);font-size:12px;font-weight:700;color:#333;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vb-pool-meta{font-size:10px;color:#aaa;}

/* Decor items */
.vb-deco-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
.vb-deco-item{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:20px;background:#fff;border:1px solid #e8e8e4;border-radius:6px;cursor:grab;transition:.15s;}
.vb-deco-item:hover{border-color:var(--color-accent);transform:scale(1.1);background:#f0faf4;}
.vb-divider-item{padding:8px;text-align:center;font-size:13px;letter-spacing:2px;color:#999;background:#fff;border:1px solid #e8e8e4;border-radius:6px;margin-bottom:4px;cursor:grab;transition:.15s;}
.vb-divider-item:hover{border-color:var(--color-accent);color:#555;}

/* 4. RIGHT SIDEBAR — Properties */
.vb-sidebar-right{width:280px;min-width:280px;background:#f8f8f6;border-left:1px solid #e4e4e0;display:flex;flex-direction:column;overflow-y:auto;padding:16px;color:#333;}
.vb-sidebar-right h3{font-family:var(--font-ui);font-size:9px;text-transform:uppercase;letter-spacing:1.2px;color:#aaa;font-weight:700;margin:0 0 14px;}
.vb-prop-group{margin-bottom:12px;}
.vb-prop-label{font-family:var(--font-ui);font-size:10px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;display:block;}
.vb-prop-input{width:100%;padding:7px 10px;border:1px solid #ddd;border-radius:6px;font-family:var(--font-ui);font-size:12px;background:#fff;color:#333;transition:border-color .15s;}
.vb-prop-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(61,125,85,.1);}
.vb-prop-input::placeholder{color:#bbb;}
.vb-prop-row{display:flex;gap:8px;margin-bottom:6px;}
.vb-prop-row>div{flex:1;}

/* Slider control */
.vb-prop-slider{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:#ddd;outline:none;}
.vb-prop-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-accent);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);}
.vb-prop-slider-value{font-family:var(--font-ui);font-size:11px;font-weight:600;color:var(--color-accent);margin-left:8px;}

/* Focal point grid */
.vb-focal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:90px;}
.vb-focal-btn{width:28px;height:20px;border:1px solid #ddd;border-radius:3px;background:#fff;cursor:pointer;transition:.15s;}
.vb-focal-btn:hover{border-color:var(--color-accent);}
.vb-focal-btn.active{background:var(--color-accent);border-color:var(--color-accent);}

/* 5. CANVAS WRAPPER */
.vb-canvas-wrap{flex:1;background:var(--color-canvas-bg, #c8c5be);overflow:auto;display:flex;justify-content:center;padding:40px 32px;position:relative;}

/* 6. THE NEWSPAPER — WYSIWYG Canvas */
.vb-newspaper{width:900px;max-width:100%;min-height:1200px;height:max-content;background:var(--color-card-bg, #fdfbf7);box-shadow:0 30px 100px rgba(0,0,0,0.15);position:relative;font-family:var(--font-body);border-radius:2px;padding:24px var(--space-outer-margin, 32px) 60px;flex-shrink:0;}
.vb-masthead{text-align:center;padding:var(--space-lg, 24px) 0 var(--space-md, 16px);border-bottom:3px double var(--color-primary, #000);margin-bottom:var(--space-sm, 8px);position:relative;}
.vb-masthead::before{content:'';display:block;height:1px;background:var(--color-primary, #000);margin-bottom:3px;}
.vb-masthead h1{font-family:var(--font-masthead);font-size:var(--text-masthead-size, 80px);font-weight:var(--text-masthead-weight, 400);margin:0;letter-spacing:-0.01em;line-height:var(--text-masthead-line-height, 1.1);color:var(--color-ink-primary, #111);}
.vb-masthead h1 .the{font-style:italic;font-weight:inherit;margin-right:0.04em;}
.vb-masthead .vb-tagline{font-family:var(--font-ui);font-size:11px;text-transform:uppercase;letter-spacing:0.15em;color:var(--color-on-surface-variant);margin-top:var(--space-xs, 4px);font-weight:500;}
.vb-edition-bar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm, 8px) 0;border-bottom:1px solid var(--color-rule-line, #E0E0E0);margin-bottom:var(--space-lg, 24px);font-family:var(--font-ui);font-size:var(--text-meta-size, 13px);color:var(--color-on-surface-variant);}
.vb-footer{margin-top:var(--space-3xl, 64px);padding:var(--space-2xl, 48px) 0;border-top:2px solid var(--color-primary, #000);text-align:center;font-family:var(--font-masthead);font-size:28px;font-weight:400;letter-spacing:-0.01em;color:var(--color-ink-primary);}

/* 7. VISIBLE 12-COLUMN GRID — The editorial body */
.vb-body{position:relative;padding:var(--space-md, 16px) 0 var(--space-3xl, 64px);min-height:800px;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(40px,auto);gap:var(--space-gutter, 16px);align-content:start;}

/* Visual indicator when drag is active over canvas */
.vb-body.drag-active{box-shadow:inset 0 0 0 3px rgba(61,125,85,0.2);}

/* Empty canvas placeholder */
.vb-canvas-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 40px;color:#ccc;font-family:var(--font-ui);text-align:center;gap:12px;min-height:400px;}
.vb-canvas-empty .material-symbols-outlined{font-size:48px;opacity:.25;}
.vb-canvas-empty span{font-size:13px;font-weight:500;}

/* Ghost insertion indicator */
.vb-insert-ghost{grid-column:span 6;min-height:80px;border:2px dashed rgba(61,125,85,.35);border-radius:8px;background:rgba(61,125,85,.04);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;pointer-events:none;}
.vb-insert-ghost.visible{opacity:1;}
.vb-insert-line{position:absolute;left:40px;right:40px;height:2px;background:var(--color-accent);border-radius:1px;pointer-events:none;z-index:20;opacity:0;transition:opacity .15s,top .15s;}
.vb-insert-line.visible{opacity:1;}

/* 8. PLACED BLOCKS — Pure editorial regions, no cards */
.vb-placed-block{position:relative;cursor:pointer;transition:transform var(--transition-base, 200ms ease), box-shadow var(--transition-base, 200ms ease);min-height:0;align-self:start;}
.vb-placed-block:hover{z-index:2;transform:translateY(-2px);box-shadow:inset 0 0 10px rgba(0,0,0,0.02), 0 4px 12px rgba(0,0,0,0.04);}
.vb-placed-block::after{content:'';position:absolute;inset:-3px;border:2px solid transparent;border-radius:6px;pointer-events:none;transition:border-color .15s;}
.vb-placed-block:hover::after{border-color:rgba(61,125,85,.25);}
.vb-placed-block.selected::after{border-color:var(--color-accent);box-shadow:0 0 0 4px rgba(61,125,85,.1);}
.vb-placed-block.dragging{opacity:.95;box-shadow:0 12px 24px rgba(0,0,0,0.15);z-index:100;}

/* Overlap warning highlight */
.vb-placed-block.overlap-warning::after{border-color:#dc3545 !important;box-shadow:0 0 0 4px rgba(220,53,69,.15) !important;}
.vb-placed-block.overlap-warning .vb-block-badge{background:#dc3545 !important;}

/* Block badges & actions — appear on hover */
/* Block badges & actions — appear on hover */
.vb-block-badge{position:absolute;top:-8px;left:-8px;font-family:var(--font-ui);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;background:#222;color:#fff;padding:4px 8px;border-radius:4px;opacity:0;transition:opacity .15s;z-index:5;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.15);}
.vb-placed-block:hover .vb-block-badge,.vb-placed-block.selected .vb-block-badge{opacity:1;}
.vb-block-actions{position:absolute;top:-10px;right:-10px;display:none;gap:4px;z-index:15;}
.vb-placed-block:hover .vb-block-actions,.vb-placed-block.selected .vb-block-actions{display:flex;}
.vb-block-actions button{width:26px;height:26px;border:1px solid #ddd;border-radius:6px;background:#fff;color:#444;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .15s;box-shadow:0 2px 6px rgba(0,0,0,.1);}
.vb-block-actions button:hover{background:#111;color:#fff;border-color:#111;}

/* 9. EDITORIAL SCALE SYSTEM — Typography Intelligence */

/* --- Scale: Full (span 10-12) --- */
/* --- Scale: Full (span 8-12) --- */
.ed-scale-full{padding:0;}
.ed-scale-full .ed-headline{font-family:var(--font-headline);font-size:var(--text-h1-size, 48px);font-weight:var(--text-h1-weight, 700);line-height:var(--text-h1-line-height, 1.15);color:var(--color-ink-primary);margin:0 0 var(--space-sm, 8px);letter-spacing:-.02em;text-wrap:balance;}
.ed-scale-full .ed-image{width:100%;height:320px;object-fit:cover;object-position:center top;margin-bottom:var(--space-md, 16px);border-radius:var(--radius-sm, 4px);}
.ed-scale-full .ed-excerpt{font-family:var(--font-body);font-size:var(--text-body-size, 18px);line-height:var(--text-body-line-height, 1.7);color:var(--color-ink-secondary);margin-bottom:var(--space-md, 16px);}
.ed-scale-full .ed-meta{font-family:var(--font-ui);font-size:var(--text-meta-size, 13px);color:var(--color-on-surface-variant);display:flex;gap:var(--space-md, 16px);align-items:center;}
.ed-scale-full .ed-category{font-family:var(--font-ui);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-accent);margin-bottom:var(--space-sm, 8px);display:inline-block;}

/* --- Scale: Hero (span 5-7) --- */
.ed-scale-hero{padding:0;}
.ed-scale-hero .ed-headline{font-family:var(--font-headline);font-size:var(--text-h2-size, 32px);font-weight:var(--text-h2-weight, 600);line-height:var(--text-h2-line-height, 1.2);color:var(--color-ink-primary);margin:0 0 var(--space-xs, 4px);letter-spacing:-.01em;text-wrap:balance;}
.ed-scale-hero .ed-image{width:100%;height:240px;object-fit:cover;object-position:center top;margin-bottom:var(--space-sm, 8px);border-radius:var(--radius-sm, 4px);}
.ed-scale-hero .ed-excerpt{font-family:var(--font-body);font-size:var(--text-column-size, 16px);line-height:var(--text-column-line-height, 1.6);color:var(--color-ink-secondary);display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:var(--space-sm, 8px);}
.ed-scale-hero .ed-meta{font-family:var(--font-ui);font-size:var(--text-meta-size, 13px);color:var(--color-on-surface-variant);display:flex;gap:var(--space-sm, 8px);}
.ed-scale-hero .ed-category{font-family:var(--font-ui);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-accent);margin-bottom:4px;display:inline-block;}

/* --- Scale: Feature (span 3-4) --- */
.ed-scale-feature{padding:0;}
.ed-scale-feature .ed-headline{font-family:var(--font-headline);font-size:var(--text-h3-size, 20px);font-weight:var(--text-h3-weight, 600);line-height:var(--text-h3-line-height, 1.3);color:var(--color-ink-primary);margin:0 0 6px;}
.ed-scale-feature .ed-image{width:100%;height:200px;object-fit:cover;object-position:center top;margin-bottom:var(--space-sm, 8px);border-radius:var(--radius-sm, 4px);}
.ed-scale-feature .ed-excerpt{font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--color-ink-secondary);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:var(--space-sm, 8px);}
.ed-scale-feature .ed-meta{font-family:var(--font-ui);font-size:var(--text-meta-size, 13px);color:var(--color-on-surface-variant);}
.ed-scale-feature .ed-category{font-family:var(--font-ui);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-accent);margin-bottom:4px;display:inline-block;}

/* --- Scale: Compact (span 1-2) --- */
.ed-scale-compact{padding:0;}
.ed-scale-compact .ed-headline{font-family:var(--font-headline);font-size:17px;font-weight:600;line-height:1.3;color:var(--color-ink-primary);margin:0 0 4px;}
.ed-scale-compact .ed-image{width:100%;height:140px;object-fit:cover;object-position:center top;margin-bottom:var(--space-sm, 8px);border-radius:var(--radius-sm, 4px);}
.ed-scale-compact .ed-excerpt{font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--color-ink-secondary);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.ed-scale-compact .ed-meta{font-family:var(--font-ui);font-size:11px;color:var(--color-on-surface-variant);}
.ed-scale-compact .ed-category{font-family:var(--font-ui);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-accent);margin-bottom:2px;display:inline-block;}

/* --- Scale: Micro (legacy fallback) --- */
.ed-scale-micro{padding:0;}
.ed-scale-micro .ed-headline{font-family:var(--font-headline);font-size:15px;font-weight:600;line-height:1.25;color:var(--color-ink-primary);margin:0;}
.ed-scale-micro .ed-image{display:none;}
.ed-scale-micro .ed-excerpt{display:none;}
.ed-scale-micro .ed-meta{display:none;}
.ed-scale-micro .ed-category{font-family:var(--font-ui);font-size:10px;font-weight:600;text-transform:uppercase;color:var(--color-accent);margin-bottom:4px;letter-spacing:0.08em;display:inline-block;}

/* Compact image-left layout variant */
.ed-scale-compact.ed-img-left{display:flex;gap:12px;}
.ed-scale-compact.ed-img-left .ed-image{width:100px;height:80px;flex-shrink:0;margin-bottom:0;}
.ed-scale-compact.ed-img-left .ed-content-wrap{flex:1;min-width:0;}

/* 10. CONTENT TYPE ACCENTS */
.ed-type-event .ed-date-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;background:#f8f8f6;border:1px solid #e4e4e0;border-radius:8px;flex-shrink:0;}
.ed-type-event .ed-date-badge .ed-month{font-family:var(--font-ui);font-size:9px;font-weight:700;text-transform:uppercase;color:var(--color-accent);letter-spacing:1px;}
.ed-type-event .ed-date-badge .ed-day{font-family:var(--font-headline);font-size:22px;font-weight:800;color:#111;line-height:1;}
.ed-type-event .ed-venue{font-family:var(--font-ui);font-size:11px;color:#888;margin-top:4px;}

.ed-type-placement .ed-company{font-family:var(--font-ui);font-size:14px;font-weight:800;color:#111;margin-bottom:2px;}
.ed-type-placement .ed-role{font-family:var(--font-ui);font-size:12px;color:#555;}
.ed-type-placement .ed-package{font-family:var(--font-ui);font-size:11px;font-weight:700;color:var(--color-accent);}

.ed-type-research .ed-journal{font-family:var(--font-ui);font-size:10px;font-style:italic;color:#888;margin-top:4px;}
.ed-type-research .ed-doi{font-family:var(--font-ui);font-size:9px;color:var(--color-accent);word-break:break-all;}

.ed-type-opinion .ed-quote-mark{font-family:var(--font-headline);font-size:60px;line-height:.8;color:rgba(61,125,85,.2);margin-bottom:-8px;}
.ed-type-opinion .ed-headline{font-style:italic;}

.ed-type-sports .ed-scoreline{font-family:var(--font-ui);font-size:24px;font-weight:900;color:#111;letter-spacing:2px;margin:8px 0;}
.ed-type-sports .ed-mvp{font-family:var(--font-ui);font-size:11px;color:var(--color-accent);font-weight:600;}

.ed-type-achievement{background:linear-gradient(135deg,#fffdf5,#fff8e7);border-radius:4px;padding:16px !important;}
.ed-type-birthday{background:linear-gradient(135deg,#fff5f7,#fff0f3);border-radius:4px;padding:16px !important;}
.ed-type-announcement{background:#fffbeb;border-left:3px solid #f0c040;padding:16px !important;}
.ed-type-meme{background:#111;border-radius:8px;padding:12px !important;}
.ed-type-meme .ed-headline{color:#fff !important;}
.ed-type-meme .ed-excerpt{color:#ccc !important;font-family:monospace !important;}

/* Gallery sub-layouts */
.ed-gallery-masonry{column-count:2;column-gap:8px;}
.ed-gallery-masonry img{width:100%;margin-bottom:8px;border-radius:4px;break-inside:avoid;}
.ed-gallery-strip{display:flex;gap:6px;overflow:hidden;}
.ed-gallery-strip img{flex:1;min-width:0;height:160px;object-fit:cover;border-radius:4px;}
.ed-gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.ed-gallery-grid img{width:100%;height:140px;object-fit:cover;border-radius:4px;}

/* Editorial utilities */
.ed-section-title{grid-column:1/-1;padding:var(--space-md, 16px) 0 var(--space-sm, 8px);margin-top:var(--space-3xl, 64px);margin-bottom:var(--space-lg, 24px);border-top:2px solid var(--color-primary, #000);position:relative;}
.ed-section-title h2{font-family:var(--font-ui);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--color-accent);margin:0;}

.ed-pull-quote{padding:28px 24px;border-left:none;position:relative;background:#faf9f6;}
.ed-pull-quote::before{content:'';position:absolute;top:0;bottom:0;left:0;width:4px;background:#111;}
.ed-pull-quote blockquote{font-family:var(--font-headline);font-size:26px;font-style:italic;line-height:1.3;color:#111;margin:0 0 12px;quotes:'"' '"';}
.ed-pull-quote blockquote::before{content:open-quote;font-size:48px;color:#ccc;line-height:0;vertical-align:-16px;margin-right:6px;font-weight:900;}
.ed-pull-quote cite{font-family:var(--font-ui);font-size:11px;font-style:normal;color:#555;font-weight:700;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:8px;}
.ed-pull-quote cite::before{content:'';display:block;width:20px;height:1px;background:#555;}

.ed-byline-cluster{display:flex;flex-wrap:wrap;gap:10px;padding:12px 0;}
.ed-byline-cluster .ed-byline-person{font-family:var(--font-ui);font-size:10px;color:#333;padding:4px 10px;background:#eee;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;}

.ed-image-caption{padding:0;}
.ed-image-caption img{width:100%;border-radius:4px;}
.ed-image-caption figcaption{font-family:var(--font-ui);font-size:11px;color:#888;padding:6px 0;border-bottom:1px solid #eee;}
.ed-image-caption .ed-credit{font-size:9px;color:#aaa;font-style:italic;}

.ed-editorial-note{padding:16px 20px;background:#f5f5f5;border-left:4px solid #333;font-family:var(--font-ui);font-size:12px;color:#444;font-style:italic;line-height:1.6;margin:12px 0;position:relative;}

/* 11. FREEFORM OVERLAY LAYER */
.vb-freeform-layer{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:10;}
.vb-freeform-item{position:absolute;cursor:grab;pointer-events:auto;transform-origin:center center;user-select:none;transition:opacity .15s;}
.vb-freeform-item:active{cursor:grabbing;}
.vb-freeform-item.selected::before{content:'';position:absolute;inset:-8px;border:1px dashed var(--color-accent);border-radius:4px;}
.vb-freeform-item.locked{cursor:default;opacity:.7;}
.vb-freeform-item.locked::before{border-style:dotted;border-color:#aaa;}
.vb-freeform-emoji{font-size:48px;line-height:1;}
.vb-freeform-divider{font-size:16px;color:var(--color-ink-primary);letter-spacing:4px;white-space:nowrap;}
.vb-freeform-line{border:none;height:2px;background:#222;min-width:60px;}
.vb-freeform-actions{position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);display:none;gap:3px;background:#fff;padding:4px 6px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);z-index:20;white-space:nowrap;}
.vb-freeform-item.selected .vb-freeform-actions{display:flex;}
.vb-freeform-actions button{width:24px;height:24px;border:none;background:#f5f5f3;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:#555;transition:.15s;}
.vb-freeform-actions button:hover{background:var(--color-accent);color:#fff;}
.vb-freeform-actions button.active{background:var(--color-accent);color:#fff;}

/* 12. ANIMATIONS & BLOCK FLUIDITY */
@keyframes vb-block-enter{from{opacity:0;}to{opacity:1;}}
@keyframes vb-pulse-border {
  0% { border-color: rgba(61,125,85, 0.4); box-shadow: 0 0 0 rgba(61,125,85, 0.4); }
  50% { border-color: rgba(61,125,85, 1); box-shadow: 0 0 16px rgba(61,125,85, 0.4); }
  100% { border-color: rgba(61,125,85, 0.4); box-shadow: 0 0 0 rgba(61,125,85, 0.4); }
}
.vb-placed-block{
  animation:vb-block-enter .15s ease;
  transition:top .2s ease, left .2s ease, grid-column .2s ease, opacity .2s ease, box-shadow .2s ease;
  will-change: transform, left, top;
}
.vb-body.drag-active .vb-placed-block {
  transition: opacity .2s ease, box-shadow .2s ease !important;
}
@keyframes vb-ghost-pulse{0%,100%{opacity:.4;}50%{opacity:.7;}}

/* Better grid gaps and spacing — unified with newspaper */

/* Placed blocks — card styling applied above */
.vb-placed-block{border-radius:var(--radius-sm, 4px);margin:0;}

/* Section title full-bleed */
.ed-section-title{margin:12px 0 4px;padding:16px 0 10px;}

/* Editorial note and pull quote improvements */
.ed-pull-quote{margin:8px 0;border-radius:4px;}
.ed-editorial-note{margin:8px 0;border-radius:4px;}

/* Select dropdown styling */
.vb-prop-input select,.vb-sidebar-right select{width:100%;padding:7px 10px;border:1px solid #ddd;border-radius:6px;font-family:var(--font-ui);font-size:12px;background:#fff;color:#333;cursor:pointer;}

/* Fix canvas empty state pointer events */
.vb-canvas-empty{pointer-events:none;}
.vb-body{min-height:600px;}

/* ============================================================ */
/* 13. MOBILE-FIRST RESPONSIVE DESIGN                          */
/* ============================================================ */

/* Tablet and smaller */
@media(max-width:992px){
  .vb-layout{flex-direction:column;overflow-y:auto;height:auto;min-height:calc(100vh - 52px);}
  .vb-sidebar-left{width:100%;min-width:100%;border-right:none;border-bottom:1px solid #e4e4e0;max-height:none;}
  .vb-tabs{overflow-x:auto;flex-shrink:0;-webkit-overflow-scrolling:touch;}
  .vb-tab{font-size:10px;padding:12px 8px;white-space:nowrap;}
  .vb-panel{max-height:250px;overflow-y:auto;}
  .vb-drag-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
  .vb-drag-item{padding:10px 8px;font-size:10px;gap:6px;}
  .vb-canvas-wrap{padding:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .vb-newspaper{width:900px;transform:none;transform-origin:top left;}
  .vb-sidebar-right{width:100%;min-width:100%;border-left:none;border-top:1px solid #e4e4e0;max-height:300px;overflow-y:auto;}
}

/* Phone */
@media(max-width:640px){
  .vb-header{padding:0 12px;height:48px;background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);}
  .vb-header h2{font-size:14px;font-weight:700;letter-spacing:-0.02em;}
  .vb-header-status{font-size:10px;color:var(--color-on-surface-variant);}
  .vb-btn{padding:8px 12px;font-size:11px;font-weight:600;gap:4px;border-radius:24px;}
  .vb-btn .material-symbols-outlined{font-size:16px !important;}

  /* Mobile sidebar: Sleek bottom sheet drawer */
  .vb-placed-block {
    position: relative;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    align-self: start;
  }
  .vb-sidebar-left{
    position:fixed;bottom:0;left:0;right:0;z-index:100;
    background:#ffffff;
    border-radius:24px 24px 0 0;
    box-shadow:0 -8px 32px rgba(0,0,0,0.12);
    transform:translateY(0);
    transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
    max-height:60vh;display:flex;flex-direction:column;
  }
  .vb-sidebar-left.collapsed{
    transform:translateY(calc(100% - 40px));
    box-shadow:0 -4px 16px rgba(0,0,0,0.08);
  }
  /* The toggle handle */
  .vb-collapse-toggle{
    display:flex;align-items:center;justify-content:center;
    padding:16px 0 12px;cursor:pointer;-webkit-tap-highlight-color:transparent;
    position:relative;z-index:101;
  }
  .vb-collapse-toggle::after {
    content: "Tap to expand tools";
    position:absolute; top:-24px; font-size:10px; font-weight:600; color:var(--color-ink-secondary);
    opacity:0; transition:opacity 0.2s; pointer-events:none;
    background:#fff; padding:4px 12px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.1);
  }
  .vb-sidebar-left.collapsed .vb-collapse-toggle::after { opacity: 1; }
  .vb-collapse-toggle .vb-handle{width:40px;height:5px;border-radius:3px;background:#e0e0e0;transition:background 0.2s;}
  .vb-sidebar-left.collapsed .vb-collapse-toggle .vb-handle{background:var(--color-accent);}

  .vb-tabs{background:transparent;padding:0 8px 8px;border-bottom:1px solid rgba(0,0,0,0.05);}
  .vb-tab{padding:10px 12px;font-size:10px;font-weight:600;letter-spacing:0.5px;border-radius:16px;}
  .vb-panel{flex:1;overflow-y:auto;padding:16px;}
  .vb-drag-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
  .vb-drag-item{padding:12px 8px;font-size:10px;gap:6px;border-radius:12px;background:var(--color-surface-variant);border:1px solid rgba(0,0,0,0.03);cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .vb-drag-item:active{background:var(--color-accent);color:#fff;transform:scale(0.95);}
  .vb-drag-item:active .material-symbols-outlined{color:#fff !important;}
  .vb-drag-item .material-symbols-outlined{font-size:18px;}
  .vb-deco-grid{grid-template-columns:repeat(5,1fr);gap:8px;}
  .vb-deco-item{font-size:24px;padding:8px;background:var(--color-surface-variant);border-radius:12px;text-align:center;}
  .vb-divider-item{font-size:12px;padding:10px;background:var(--color-surface-variant);border-radius:12px;text-align:center;font-weight:600;}
  .vb-pool-item{padding:12px;background:var(--color-surface-variant);border-radius:12px;}
  .vb-pool-title{font-size:12px;font-weight:600;}

  /* Canvas: adjust padding based on sidebar state */
  .vb-canvas-wrap{padding:12px;padding-bottom:calc(60vh + 20px);transition:padding-bottom 0.4s cubic-bezier(0.2,0.8,0.2,1);}
  .vb-sidebar-left.collapsed ~ .vb-canvas-wrap,
  body.panels-collapsed .vb-canvas-wrap{padding-bottom:80px;}
  
  .vb-newspaper{width:100%;min-width:320px;box-shadow:0 8px 32px rgba(0,0,0,0.08);border-radius:8px;overflow:hidden;}
  .vb-masthead{padding:24px 16px 12px;}
  .vb-masthead h1{font-size:32px;}
  .vb-masthead .vb-tagline{font-size:10px;letter-spacing:2px;margin-top:12px;}
  .vb-edition-bar{padding:8px 16px;font-size:10px;}
  .vb-body{padding:16px 16px 48px;gap:12px;grid-template-columns:repeat(6,1fr);}
  .vb-footer{padding:16px;font-size:10px;}

  /* Properties panel: slide-up sheet on mobile */
  .vb-sidebar-right{
    position:fixed;bottom:0;left:0;right:0;z-index:110;
    background:#ffffff;border-top:none;
    box-shadow:0 -12px 40px rgba(0,0,0,0.2);
    max-height:75vh;overflow-y:auto;padding:16px 20px 24px;
    border-radius:24px 24px 0 0;
    transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
    display:flex;flex-direction:column;
  }
  .vb-sidebar-right.mobile-open{transform:translateY(0);}
  .vb-sidebar-right h3{margin:0 0 16px;font-size:14px;font-weight:700;}
  .vb-prop-group{margin-bottom:12px;}
  .vb-prop-label{font-size:11px;font-weight:600;color:var(--color-ink-secondary);}
  .vb-prop-input{font-size:13px;padding:10px 12px;border-radius:8px;background:var(--color-surface-variant);border:1px solid rgba(0,0,0,0.05);}
  .vb-mobile-close-props{display:flex;align-items:center;justify-content:center;width:100%;padding:8px 0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;background:none;}
  .vb-mobile-close-props .vb-handle{width:40px;height:5px;border-radius:3px;background:#e0e0e0;}

  /* Block actions always visible on mobile */
  .vb-block-badge{opacity:1 !important;font-size:9px;padding:2px 6px;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,0.1);}
  .vb-block-actions{display:flex !important;top:4px;right:4px;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);padding:4px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.15);}
  .vb-block-actions button{width:28px;height:28px;background:transparent;border:none;color:var(--color-ink-primary);}

  /* Freeform actions */
  .vb-freeform-actions{padding:4px 6px;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.15);}
  .vb-freeform-actions button{width:32px;height:32px;font-size:18px;}
}

/* Landscape phone */
@media(max-width:640px) and (orientation:landscape){
  .vb-sidebar-left{max-height:40vh;}
  .vb-panel{max-height:calc(40vh - 44px);}
  .vb-sidebar-right{max-height:50vh;}
}

/* Height mode removed as per user request */

/* ====== FIX DUPLICATE TITLES IN BUILDER ====== */
/* Category tag now visible in builder for newspaper rendering parity */

/* Cap badge font size to prevent oversized labels on large blocks */
.vb-block-badge {
    font-size: 10px !important;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Builder grid output styles now defined in content-types.css for single source of truth */

.vb-footer-placeholder {
    padding: 40px;
    text-align: center;
    color: var(--color-on-surface-variant);
    font-family: var(--font-ui);
    background: rgba(0,0,0,0.02);
    border-top: 1px dashed var(--color-rule-line);
    margin-top: 40px;
    clear: both;
}