/* WordPress Column Block
-------------------------------------------------------------- */

/* Shared base — ensures column children
   inherit the style context correctly */
.wp-block-columns[class*="is-style-magshow-columns-"]{gap:1.5em;}
.wp-block-columns[class*="is-style-magshow-columns-"] > .wp-block-column{min-width:0;}

/* --- 1. Card Grid (Default) ---
   Each column is a bordered card with rounded corners.
   Ideal for feature lists,service cards,and pricing tiers. */
.wp-block-columns.is-style-magshow-columns-card-grid > .wp-block-column{border:1px solid #e5e7eb;border-radius:8px;padding:1.25em 1.5em;background-color:#ffffff;}

/* --- 2. Divided ---
   Columns separated by a thin vertical rule with no backgrounds.
   Clean and editorial — sits naturally in flowing content. */
.wp-block-columns.is-style-magshow-columns-divided{gap:0;}
.wp-block-columns.is-style-magshow-columns-divided > .wp-block-column{border-right:1px solid #e5e7eb;padding:0.5em 1.5em;}
.wp-block-columns.is-style-magshow-columns-divided > .wp-block-column:first-child{padding-left:0;}
.wp-block-columns.is-style-magshow-columns-divided > .wp-block-column:last-child{border-right:none;padding-right:0;}

/* --- 3. Dark Cards ---
   Dark charcoal background per column with light text.
   Great for technical features,server specs,and dark-section layouts. */
.wp-block-columns.is-style-magshow-columns-dark-cards > .wp-block-column{background-color:#1f2937;border-radius:8px;padding:1.25em 1.5em;}
.wp-block-columns.is-style-magshow-columns-dark-cards > .wp-block-column,.wp-block-columns.is-style-magshow-columns-dark-cards > .wp-block-column p,.wp-block-columns.is-style-magshow-columns-dark-cards > .wp-block-column li{color:#d1d5db;}
.wp-block-columns.is-style-magshow-columns-dark-cards > .wp-block-column h1,.wp-block-columns.is-style-magshow-columns-dark-cards > .wp-block-column h2,.wp-block-columns.is-style-magshow-columns-dark-cards > .wp-block-column h3,.wp-block-columns.is-style-magshow-columns-dark-cards > .wp-block-column h4,.wp-block-columns.is-style-magshow-columns-dark-cards > .wp-block-column h5,.wp-block-columns.is-style-magshow-columns-dark-cards > .wp-block-column h6{color:#f9fafb;}

/* --- 4. Accent Top Border ---
   Brand-color top border with a light tinted background per column.
   Perfect for pricing plans,plan comparisons,and feature tiers. */
.wp-block-columns.is-style-magshow-columns-accent-top > .wp-block-column{border-top:3px solid #1a56db;background-color:#f8fafc;border-radius:0 0 8px 8px;padding:1.25em 1.5em;}
.wp-block-columns.is-style-magshow-columns-accent-top > .wp-block-column h1,.wp-block-columns.is-style-magshow-columns-accent-top > .wp-block-column h2,.wp-block-columns.is-style-magshow-columns-accent-top > .wp-block-column h3,.wp-block-columns.is-style-magshow-columns-accent-top > .wp-block-column h4,.wp-block-columns.is-style-magshow-columns-accent-top > .wp-block-column h5,.wp-block-columns.is-style-magshow-columns-accent-top > .wp-block-column h6{color:#1e3a5f;}

/* --- 5. Elevated Shadow ---
   White card with a drop shadow per column.
   Premium feel for feature highlights,team profiles,and portfolios. */
.wp-block-columns.is-style-magshow-columns-elevated > .wp-block-column{background-color:#ffffff;border-radius:10px;padding:1.5em;box-shadow:0 4px 16px rgba(0,0,0,0.08),0 0 0 1px rgba(0,0,0,0.04);}

/* --- 6. Tinted Alternate ---
   Alternating blue-tinted and neutral-grey backgrounds.
   Visual rhythm for feature lists,skill grids,and service breakdowns. */
.wp-block-columns.is-style-magshow-columns-tinted-alt > .wp-block-column:nth-child(odd){background-color:#eff6ff;border-radius:8px;padding:1.25em 1.5em;}
.wp-block-columns.is-style-magshow-columns-tinted-alt > .wp-block-column:nth-child(even){background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:1.25em 1.5em;}

/* --- 7. Feature Stats ---
   Centered stat layout with a top accent border on the wrapper.
   Built for numbers,metrics,achievements,and social proof sections. */
.wp-block-columns.is-style-magshow-columns-stats{gap:0;border-top:3px solid #1a56db;}
.wp-block-columns.is-style-magshow-columns-stats > .wp-block-column{border-right:1px solid #f3f4f6;padding:1.25em 1em;text-align:center;}
.wp-block-columns.is-style-magshow-columns-stats > .wp-block-column:last-child{border-right:none;}
.wp-block-columns.is-style-magshow-columns-stats > .wp-block-column h1,.wp-block-columns.is-style-magshow-columns-stats > .wp-block-column h2,.wp-block-columns.is-style-magshow-columns-stats > .wp-block-column h3,.wp-block-columns.is-style-magshow-columns-stats > .wp-block-column h4{color:#1a56db;font-size:2em;font-weight:800;line-height:1;margin-bottom:0.25em;}
.wp-block-columns.is-style-magshow-columns-stats > .wp-block-column p{color:#6b7280;margin:0;}

/* --- 8. Warm Neutral ---
   Parchment-toned background with amber-tinted borders.
   Suits food,travel,lifestyle,recipe,and editorial themes. */
.wp-block-columns.is-style-magshow-columns-warm > .wp-block-column{background-color:#fdfaf3;border:1px solid #e8e0cc;border-radius:8px;padding:1.25em 1.5em;}
.wp-block-columns.is-style-magshow-columns-warm > .wp-block-column h1,.wp-block-columns.is-style-magshow-columns-warm > .wp-block-column h2,.wp-block-columns.is-style-magshow-columns-warm > .wp-block-column h3,.wp-block-columns.is-style-magshow-columns-warm > .wp-block-column h4,.wp-block-columns.is-style-magshow-columns-warm > .wp-block-column h5,.wp-block-columns.is-style-magshow-columns-warm > .wp-block-column h6{color:#3d2b1f;}
.wp-block-columns.is-style-magshow-columns-warm > .wp-block-column p{color:#92400e;}

/* --- 9. Icon Feature ---
   Centered column layout with space for an icon,heading,and text.
   Structured for feature grids,service overviews,and about sections.
   Tip:Place an Image block (icon/emoji) at the top of each column. */
.wp-block-columns.is-style-magshow-columns-icon-feature > .wp-block-column{text-align:center;border:1px solid #f3f4f6;border-radius:10px;padding:1.75em 1.25em;background-color:#ffffff;}
.wp-block-columns.is-style-magshow-columns-icon-feature > .wp-block-column .wp-block-image{margin-bottom:0.75em;}
.wp-block-columns.is-style-magshow-columns-icon-feature > .wp-block-column .wp-block-image img{width:48px;height:48px;object-fit:contain;margin:0 auto;display:block;background-color:#eff6ff;border-radius:10px;padding:10px;}
.wp-block-columns.is-style-magshow-columns-icon-feature > .wp-block-column h3,.wp-block-columns.is-style-magshow-columns-icon-feature > .wp-block-column h4{font-size:2em;font-weight:600;margin-bottom:0.4em;color:#111827;}
.wp-block-columns.is-style-magshow-columns-icon-feature > .wp-block-column p{color:#6b7280;margin:0;}

/* --- 10. Bordered Outline ---
   Strong dark border per column — bold and structured.
   Works well for plans,steps,process stages,and comparison layouts. */
.wp-block-columns.is-style-magshow-columns-outlined > .wp-block-column{border:2px solid #111827;border-radius:8px;padding:1.25em 1.5em;}
.wp-block-columns.is-style-magshow-columns-outlined > .wp-block-column h1,.wp-block-columns.is-style-magshow-columns-outlined > .wp-block-column h2,.wp-block-columns.is-style-magshow-columns-outlined > .wp-block-column h3,.wp-block-columns.is-style-magshow-columns-outlined > .wp-block-column h4,.wp-block-columns.is-style-magshow-columns-outlined > .wp-block-column h5,.wp-block-columns.is-style-magshow-columns-outlined > .wp-block-column h6{color:#111827;}

/* --- 11. Numbered Steps ---
   Adds automatic step numbers to each column.
   Good for process sections, tutorials, workflows, and setup guides. */
.wp-block-columns.is-style-magshow-columns-numbered-steps{counter-reset:magshow-columns-step;}
.wp-block-columns.is-style-magshow-columns-numbered-steps > .wp-block-column{counter-increment:magshow-columns-step;position:relative;background-color:#ffffff;border:1px solid #e5e7eb;border-radius:10px;padding:3em 1.5em 1.5em;}
.wp-block-columns.is-style-magshow-columns-numbered-steps > .wp-block-column::before{content:counter(magshow-columns-step);position:absolute;top:1em;inset-inline-start:1.25em;width:2em;height:2em;display:grid;place-items:center;border-radius:999px;background-color:#1a56db;color:#ffffff;font-size:0.85em;font-weight:700;line-height:1;}

/* --- 12. Timeline Flow ---
   Creates connected timeline-style columns.
   Useful for history, roadmap, milestones, and project phases. */
.wp-block-columns.is-style-magshow-columns-timeline{position:relative;gap:2em;}
.wp-block-columns.is-style-magshow-columns-timeline::before{content:"";position:absolute;top:1.35em;inset-inline-start:0;inset-inline-end:0;height:2px;background-color:#e5e7eb;}
.wp-block-columns.is-style-magshow-columns-timeline > .wp-block-column{position:relative;padding-top:3em;}
.wp-block-columns.is-style-magshow-columns-timeline > .wp-block-column::before{content:"";position:absolute;top:0.85em;inset-inline-start:0;width:1em;height:1em;border:3px solid #1a56db;border-radius:999px;background-color:#ffffff;z-index:1;}
.wp-block-columns.is-style-magshow-columns-timeline > .wp-block-column h1,.wp-block-columns.is-style-magshow-columns-timeline > .wp-block-column h2,.wp-block-columns.is-style-magshow-columns-timeline > .wp-block-column h3,.wp-block-columns.is-style-magshow-columns-timeline > .wp-block-column h4,.wp-block-columns.is-style-magshow-columns-timeline > .wp-block-column h5,.wp-block-columns.is-style-magshow-columns-timeline > .wp-block-column h6{color:#111827;}

/* --- 13. Glass Panels ---
   Semi-transparent panels with soft blur.
   Best when placed over a Cover block, image background, or gradient section. */
.wp-block-columns.is-style-magshow-columns-glass > .wp-block-column{background-color:rgba(255,255,255,0.72);border:1px solid rgba(255,255,255,0.45);border-radius:12px;padding:1.5em;box-shadow:0 10px 30px rgba(15,23,42,0.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}

/* --- 14. Gradient Cards ---
   Bright gradient cards with white text.
   Suitable for promo boxes, featured services, and strong landing sections. */
.wp-block-columns.is-style-magshow-columns-gradient > .wp-block-column{background:linear-gradient(135deg,#1a56db,#7c3aed);border-radius:12px;padding:1.5em;color:#ffffff;}
.wp-block-columns.is-style-magshow-columns-gradient > .wp-block-column,.wp-block-columns.is-style-magshow-columns-gradient > .wp-block-column p,.wp-block-columns.is-style-magshow-columns-gradient > .wp-block-column li{color:#ffffff;}
.wp-block-columns.is-style-magshow-columns-gradient > .wp-block-column h1,.wp-block-columns.is-style-magshow-columns-gradient > .wp-block-column h2,.wp-block-columns.is-style-magshow-columns-gradient > .wp-block-column h3,.wp-block-columns.is-style-magshow-columns-gradient > .wp-block-column h4,.wp-block-columns.is-style-magshow-columns-gradient > .wp-block-column h5,.wp-block-columns.is-style-magshow-columns-gradient > .wp-block-column h6{color:#ffffff;}

/* --- 15. Quote Panels ---
   Turns each column into a quote/testimonial panel.
   Works well for reviews, testimonials, praise, and client comments. */
.wp-block-columns.is-style-magshow-columns-quote-panels > .wp-block-column{position:relative;background-color:#f9fafb;-webkit-border-start:4px solid #1a56db;border-inline-start:4px solid #1a56db;border-radius:8px;padding:2.75em 1.5em 1.5em;}
.wp-block-columns.is-style-magshow-columns-quote-panels > .wp-block-column::before{content:"\201C";position:absolute;top:0.2em;inset-inline-start:0.35em;color:#1a56db;font-size:3em;font-family:Georgia,serif;line-height:1;}
.wp-block-columns.is-style-magshow-columns-quote-panels > .wp-block-column p{color:#374151;}

/* --- 16. Image Feature ---
   Makes the first image in each column look like a feature thumbnail.
   Good for blog category previews, service cards, and portfolio grids. */
.wp-block-columns.is-style-magshow-columns-image-feature > .wp-block-column{overflow:hidden;background-color:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:0 0 1.25em;}
.wp-block-columns.is-style-magshow-columns-image-feature > .wp-block-column > .wp-block-image{margin:0 0 1em;}
.wp-block-columns.is-style-magshow-columns-image-feature > .wp-block-column > .wp-block-image img{display:block;width:100%;height:180px;object-fit:cover;border-radius:0;}
.wp-block-columns.is-style-magshow-columns-image-feature > .wp-block-column >:not(.wp-block-image){margin-left:1.25rem;margin-right:1.25rem;}

/* --- 17. Checklist Panels ---
   Designed for lists of benefits, features, inclusions, and package details. */
.wp-block-columns.is-style-magshow-columns-checklist > .wp-block-column{background-color:#ffffff;border:1px solid #d1fae5;border-radius:10px;padding:1.35em 1.5em;}
.wp-block-columns.is-style-magshow-columns-checklist > .wp-block-column ul{list-style:none;-webkit-padding-start:0;padding-inline-start:0;}
.wp-block-columns.is-style-magshow-columns-checklist > .wp-block-column li{position:relative;-webkit-padding-start:1.6em;padding-inline-start:1.6em;margin-bottom:0.55em;}
.wp-block-columns.is-style-magshow-columns-checklist > .wp-block-column li::before{content:"\2713";position:absolute;inset-inline-start:0;top:0;color:#047857;font-weight:700;}

/* --- 18. Compact Pills ---
   Small rounded panels for short items.
   Good for tags, quick features, tools, categories, and short benefit rows. */
.wp-block-columns.is-style-magshow-columns-compact-pills{gap:0.75em;}
.wp-block-columns.is-style-magshow-columns-compact-pills > .wp-block-column{background-color:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:0.8em 1.1em;text-align:center;}
.wp-block-columns.is-style-magshow-columns-compact-pills > .wp-block-column p{margin:0;color:#374151;}

/* --- 19. Split Highlight ---
   First column becomes the main highlighted column.
   Good for feature comparison, pricing focus, and primary secondary layouts. */
.wp-block-columns.is-style-magshow-columns-split-highlight > .wp-block-column{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:1.35em 1.5em;}
.wp-block-columns.is-style-magshow-columns-split-highlight > .wp-block-column:first-child{background-color:#111827;border-color:#111827;color:#ffffff;}
.wp-block-columns.is-style-magshow-columns-split-highlight > .wp-block-column:first-child,.wp-block-columns.is-style-magshow-columns-split-highlight > .wp-block-column:first-child p,.wp-block-columns.is-style-magshow-columns-split-highlight > .wp-block-column:first-child li{color:#e5e7eb;}
.wp-block-columns.is-style-magshow-columns-split-highlight > .wp-block-column:first-child h1,.wp-block-columns.is-style-magshow-columns-split-highlight > .wp-block-column:first-child h2,.wp-block-columns.is-style-magshow-columns-split-highlight > .wp-block-column:first-child h3,.wp-block-columns.is-style-magshow-columns-split-highlight > .wp-block-column:first-child h4,.wp-block-columns.is-style-magshow-columns-split-highlight > .wp-block-column:first-child h5,.wp-block-columns.is-style-magshow-columns-split-highlight > .wp-block-column:first-child h6{color:#ffffff;}

/* --- 20. Editorial Notes ---
   Soft note-style columns with a paper-like feel.
   Useful for tips, warnings, summaries, author notes, and editorial highlights. */
.wp-block-columns.is-style-magshow-columns-editorial-notes > .wp-block-column{position:relative;background-color:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:1.35em 1.5em 1.35em 1.75em;}
.wp-block-columns.is-style-magshow-columns-editorial-notes > .wp-block-column::before{content:"";position:absolute;top:1em;bottom:1em;inset-inline-start:0.75em;width:3px;border-radius:999px;background-color:#f59e0b;}
.wp-block-columns.is-style-magshow-columns-editorial-notes > .wp-block-column h1,.wp-block-columns.is-style-magshow-columns-editorial-notes > .wp-block-column h2,.wp-block-columns.is-style-magshow-columns-editorial-notes > .wp-block-column h3,.wp-block-columns.is-style-magshow-columns-editorial-notes > .wp-block-column h4,.wp-block-columns.is-style-magshow-columns-editorial-notes > .wp-block-column h5,.wp-block-columns.is-style-magshow-columns-editorial-notes > .wp-block-column h6{color:#78350f;}
.wp-block-columns.is-style-magshow-columns-editorial-notes > .wp-block-column p{color:#92400e;}