/* The Wizard 1.0.0 — WordPress content compatibility.
 * Only .wiz-prose (rendered the_content) is covered here. Do not modify the
 * WP block editor, other plugins' markup, or The Wizard gallery components.
 * :where() keeps specificity low so Gutenberg's style presets and inline
 * editor choices take precedence over these fallbacks.
 */
.wiz-prose::after{content:"";display:block;clear:both}

/* WordPress Classic Editor floats and caption wrappers, plus block images. */
:where(.wiz-prose .alignleft){float:left;margin:.35em 1.75em 1.15em 0}
:where(.wiz-prose .alignright){float:right;margin:.35em 0 1.15em 1.75em}
:where(.wiz-prose img.aligncenter,.wiz-prose figure.aligncenter,.wiz-prose .wp-caption.aligncenter){display:block;clear:both;margin:1.5em auto}
:where(.wiz-prose .wp-caption){max-width:100%;box-sizing:border-box}
:where(.wiz-prose .wp-caption img){max-width:100%;height:auto}
:where(.wiz-prose .wp-caption .wp-caption-text){margin:.5em 0 0;color:var(--wiz-soft);font-size:.82rem;line-height:1.5;text-align:center}
:where(.wiz-prose img.alignnone,.wiz-prose .wp-caption.alignnone){margin:.5em 0 1em}

/* Gutenberg top-level alignwide / alignfull breakouts only. Nested Groups
 * must retain WordPress' own constrained layout and responsive sizing. */
:where(.wiz-prose > .alignwide){width:min(calc(100vw - 64px),var(--wiz-content-width));max-width:none;margin-left:calc(50% - min(calc(100vw - 64px),var(--wiz-content-width)) / 2);margin-right:0}
/* v1.0.14 diagnostic: extend ONLY the painted background of top-level
 * full-width Gutenberg Groups. The Group itself keeps its native dimensions,
 * nested layout, padding and content positioning from WordPress.
 * Background color, gradient and background images are inherited from the Group.
 * This does not change other alignfull block types. */
:where(.wiz-prose > .wp-block-group.alignfull){
  position:relative;
  isolation:isolate;
}
:where(.wiz-prose > .wp-block-group.alignfull)::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:inherit;
  pointer-events:none;
  z-index:-1;
}

/* v1.0.16 — Full-width Group decorations. The existing ::before layer
 * paints Gutenberg's background across the viewport, without changing the
 * Group's layout. This transparent overlay carries its top/bottom borders and
 * Wizard inset shadows across the SAME width, above that background.
 * The visual layer never intercepts clicks or affects nested block widths. */
:where(.wiz-prose > .wp-block-group.alignfull)::after{
  content:"";
  position:absolute;
  inset-block:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  pointer-events:none;
  box-sizing:border-box;
  z-index:1;
  border-top:inherit;
  border-bottom:inherit;
}
/* v1.0.18: Avoid double-painted Gutenberg borders. Frontend JS captures the
 * original computed top/bottom border before marking a Group as ready. The
 * full-viewport overlay gets those exact border values while the Group's
 * own border widths are reset to zero after capture to prevent narrow lines.
 * Non-JS visitors retain the original Group border as a safe fallback. */
.wiz-prose > .wp-block-group.alignfull.wiz-full-border-ready{
  border-top-width:0 !important;
  border-bottom-width:0 !important;
}
.wiz-prose > .wp-block-group.alignfull.wiz-full-border-ready::after{
  border-top:var(--wiz-full-border-top,0px none transparent);
  border-bottom:var(--wiz-full-border-bottom,0px none transparent);
}

/* Relocate ONLY the three Wizard inset shadow styles on top-level full-width
 * Groups. Other Group/image/WordPress shadows are left unchanged. */
.wiz-prose > .wp-block-group.alignfull:is(.is-style-wiz-shadow-top,.is-style-wiz-shadow-bottom,.is-style-wiz-shadow-both){
  box-shadow:none !important;
}
.wiz-prose > .wp-block-group.alignfull.is-style-wiz-shadow-top::after{
  box-shadow:inset 0 var(--wiz-inset-depth,16px) var(--wiz-inset-blur,22px) var(--wiz-inset-spread,-17px) var(--wiz-inset-color,rgba(0,0,0,.38));
}
.wiz-prose > .wp-block-group.alignfull.is-style-wiz-shadow-bottom::after{
  box-shadow:inset 0 calc(-1 * var(--wiz-inset-depth,16px)) var(--wiz-inset-blur,22px) var(--wiz-inset-spread,-17px) var(--wiz-inset-color,rgba(0,0,0,.38));
}
.wiz-prose > .wp-block-group.alignfull.is-style-wiz-shadow-both::after{
  box-shadow:inset 0 var(--wiz-inset-depth,16px) var(--wiz-inset-blur,22px) var(--wiz-inset-spread,-17px) var(--wiz-inset-color,rgba(0,0,0,.38)),
    inset 0 calc(-1 * var(--wiz-inset-depth,16px)) var(--wiz-inset-blur,22px) var(--wiz-inset-spread,-17px) var(--wiz-inset-color,rgba(0,0,0,.38));
}

/* v1.0.21 — Full Width Gutenberg Cover support.
 * Unlike a Group color, Cover's image/video is a real media element and
 * its whole box must break out. Limit this rule to direct article Covers;
 * nested Gutenberg Groups and existing full-width Group decorations retain
 * the proven background-only treatment above. The independent translate
 * property does not replace transforms used by optional animations. */
.wiz-prose > .wp-block-cover.alignfull {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  translate: -50% 0;
  box-sizing: border-box;
}

/* Media must never overflow the article; do not force aspect ratios on blocks. */
:where(.wiz-prose iframe,.wiz-prose video,.wiz-prose embed){max-width:100%}

@media (max-width:540px){
  /* Preserve the original mobile-friendly behavior for Classic image floats. */
  .wiz-prose :where(img.alignleft,img.alignright,figure.alignleft,figure.alignright,.wp-caption.alignleft,.wp-caption.alignright){float:none;display:block;max-width:100%;margin:1.25em auto}
  .wiz-prose :where(.wp-caption.alignleft,.wp-caption.alignright){width:auto!important}
  :where(.wiz-prose > .alignwide){width:calc(100vw - 32px);margin-left:calc(50% - (100vw - 32px) / 2)}
}

/* The Wizard V1.0.8: WordPress page template width choices.
 * These styles affect the outer theme page container, not the_content or
 * nested block styles. Blog post wrappers have separate layout settings.
 */
/* Home page content uses the same narrow container as a normal Default Page.
 * The hero and gallery collection keep their independent site-wide widths.
 * Wide blocks have the existing breakout; Full Width Groups use a background-
 * only extension above. Respect the saved Page Layout width. */
.wiz-home-custom-content{max-width:var(--wiz-page-content-width,950px)}
/* A following full/wide section should start beneath a floated image, even
 * if the preceding biography text is shorter than its photograph. */
.wiz-home-custom-content > :where(.alignfull,.alignwide){clear:both}
.wiz-page-wrap.wiz-page-layout--default{max-width:var(--wiz-page-content-width,950px)}
.wiz-page-wrap.wiz-page-layout--wide{max-width:var(--wiz-content-width,1260px)}
.wiz-page-wrap.wiz-page-layout--full{width:100%;max-width:none;padding-inline:clamp(16px,3vw,64px)}


/* The Wizard 1.0.0: independent BLOG listing and single-post container widths.
 * WordPress retains control of the Posts page and post editing. These rules
 * affect only the outer theme wrapper, never Gutenberg or Classic content. */
.wiz-page-wrap.wiz-blog-layout--narrow{max-width:var(--wiz-blog-content-width,950px)}
.wiz-page-wrap.wiz-blog-layout--site{max-width:var(--wiz-content-width,1260px)}
.wiz-page-wrap.wiz-blog-layout--full{width:100%;max-width:none;padding-inline:clamp(16px,3vw,64px)}


/* The Wizard 1.0.0 — presentation of THEME BLOG CARDS ONLY.
 * No .wiz-prose, Classic Editor or Gutenberg content selectors here. */
.wiz-post-list{grid-template-columns:repeat(var(--wiz-blog-columns,2),minmax(0,1fr))}
.wiz-post-list--cols-1{--wiz-blog-columns:1}
.wiz-post-list--cols-2{--wiz-blog-columns:2}
.wiz-post-list--cols-3{--wiz-blog-columns:3}
.wiz-post-list--cols-4{--wiz-blog-columns:4}
.wiz-post-card{container:wiz-blog-card / inline-size;min-width:0}
.wiz-post-card__inner{min-width:0}
.wiz-post-card__image{max-height:var(--wiz-blog-top-height,650px)}
.wiz-post-card__image img{display:block;object-fit:cover}
.wiz-post-list--shape-wide .wiz-post-card__image{aspect-ratio:16/9}
.wiz-post-list--shape-square .wiz-post-card__image{aspect-ratio:1}
.wiz-post-list--shape-portrait .wiz-post-card__image{aspect-ratio:4/5}
.wiz-post-list--shape-original .wiz-post-card__image{aspect-ratio:auto;max-height:none}
.wiz-post-list--shape-original .wiz-post-card__image img{height:auto}
/* Side-image ratios use the same options as top images. The image owns its
   natural aspect height; it must NOT stretch to the excerpt's grid-row height. */
.wiz-post-list--shape-wide{--wiz-blog-side-aspect:16/9}
.wiz-post-list--shape-square{--wiz-blog-side-aspect:1}
.wiz-post-list--shape-portrait{--wiz-blog-side-aspect:4/5}
.wiz-post-list--shape-original{--wiz-blog-side-aspect:auto}
/* At left/right, card image and excerpt live in an independent two-column
   GRID inside the post card, not floated into or over WordPress content. */
.wiz-post-list--image-left .wiz-post-card--has-image .wiz-post-card__inner,
.wiz-post-list--image-right .wiz-post-card--has-image .wiz-post-card__inner{
  display:grid;grid-template-columns:var(--wiz-blog-side-width,40%) minmax(0,1fr);align-items:stretch;gap:20px;
}
.wiz-post-list--image-right .wiz-post-card--has-image .wiz-post-card__inner{
  grid-template-columns:minmax(0,1fr) var(--wiz-blog-side-width,40%);
}
.wiz-post-list--image-right .wiz-post-card--has-image .wiz-post-card__image{grid-column:2;grid-row:1}
.wiz-post-list--image-right .wiz-post-card--has-image .wiz-post-card__body{grid-column:1;grid-row:1}
.wiz-post-list--image-left .wiz-post-card--has-image .wiz-post-card__image,
.wiz-post-list--image-right .wiz-post-card--has-image .wiz-post-card__image{
  position:relative;aspect-ratio:var(--wiz-blog-side-aspect,1.55);max-height:none;min-height:0;height:auto;align-self:start;
}
.wiz-post-list--image-left .wiz-post-card--has-image .wiz-post-card__image img,
.wiz-post-list--image-right .wiz-post-card--has-image .wiz-post-card__image img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Original proportions cannot use an absolutely positioned image: let the
   intrinsic dimensions establish the link's height at its responsive width. */
.wiz-post-list--image-left.wiz-post-list--shape-original .wiz-post-card--has-image .wiz-post-card__image img,
.wiz-post-list--image-right.wiz-post-list--shape-original .wiz-post-card--has-image .wiz-post-card__image img{
  position:static;inset:auto;width:100%;height:auto;object-fit:contain;
}
.wiz-post-list--image-left .wiz-post-card--has-image .wiz-post-card__body,
.wiz-post-list--image-right .wiz-post-card--has-image .wiz-post-card__body{padding:0;min-width:0}
/* Allow the header controls and paragraphs to fit even in narrow cards. */
.wiz-post-card h2{overflow-wrap:anywhere}
.wiz-post-list--image-left .wiz-post-card h2,.wiz-post-list--image-right .wiz-post-card h2{font-size:var(--wiz-fluid-blog-title,clamp(22px,2vw,32px))}
@media(max-width:1100px){
  .wiz-post-list--cols-3,.wiz-post-list--cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .wiz-post-list{grid-template-columns:minmax(0,1fr)}
}
/* Side-by-side cards are useful when wide, but narrow cards must stack.
   Container queries respond to CARD size, not the entire page's viewport. */
@container wiz-blog-card (max-width:500px){
  .wiz-post-list--image-left .wiz-post-card--has-image .wiz-post-card__inner,
  .wiz-post-list--image-right .wiz-post-card--has-image .wiz-post-card__inner{display:block}
  .wiz-post-list--image-left .wiz-post-card--has-image .wiz-post-card__image,
  .wiz-post-list--image-right .wiz-post-card--has-image .wiz-post-card__image{
    min-height:0;height:auto;aspect-ratio:1.55;max-height:var(--wiz-blog-top-height,650px)
  }
  .wiz-post-list--shape-wide .wiz-post-card--has-image .wiz-post-card__image{aspect-ratio:16/9}
  .wiz-post-list--shape-square .wiz-post-card--has-image .wiz-post-card__image{aspect-ratio:1}
  .wiz-post-list--shape-portrait .wiz-post-card--has-image .wiz-post-card__image{aspect-ratio:4/5}
  .wiz-post-list--shape-original .wiz-post-card--has-image .wiz-post-card__image{aspect-ratio:auto;max-height:none}
  .wiz-post-list--image-left .wiz-post-card--has-image .wiz-post-card__image img,
  .wiz-post-list--image-right .wiz-post-card--has-image .wiz-post-card__image img{position:static;width:100%;height:100%}
  .wiz-post-list--shape-original .wiz-post-card--has-image .wiz-post-card__image img{height:auto}
  .wiz-post-list--image-left .wiz-post-card--has-image .wiz-post-card__body,
  .wiz-post-list--image-right .wiz-post-card--has-image .wiz-post-card__body{padding:19px 0}
}

/* Page-specific vertical spacing: leave Gutenberg widths and side gutters untouched. */
.wiz-page-wrap.wiz-page-no-top-spacing { padding-top: 0; }
.wiz-page-wrap.wiz-page-no-bottom-spacing { padding-bottom: 0; }