/*
  blog-shortcodes.css (v8)
  Data-attribute driven styling for Plinky's Framer CMS directives.
  - Horizontal rules: <hr data-cms-hr> with configurable spacing, color, thickness, and variants.
  - Images: <img data-cms-img> with alignment, sizing, bleed, borders, shadows, etc. controlled by CSS variables.
  The companion script (blog-shortcodes.js) only sets data attributes / CSS custom properties; all layout lives here.
*/

:root {
    /* Legacy aliases for backwards compatibility */
    --hr-margin: 24px;
    --hr-alpha-light: 0.25;
    --hr-alpha-dark: 0.25;

    /* Horizontal rule defaults */
    --cms-hr-margin: var(--hr-margin);
    --cms-hr-thickness: 1px;
    --cms-hr-alpha-default: var(--hr-alpha-light, var(--hr-alpha-dark, 0.25));
    --cms-hr-fade: 12%;

    /* Image defaults */
    --cms-img-gap: 24px;
    --cms-img-radius: 0px;
    --cms-img-gutter: 16px; /* used for bleed mode */
    --cms-img-border-width: 0px;
}

/* ---------- Horizontal Rules ---------- */
.framer-text hr[data-cms-hr],
hr[data-cms-hr] {
    --_hr-alpha: var(--cms-hr-alpha, var(--cms-hr-alpha-default, 0.25));
    --_hr-fade: var(--cms-hr-fade, 12%);

    color: var(--cms-hr-color, rgba(0, 0, 0, 1));
    opacity: var(--_hr-alpha);
    margin-block-start: var(--cms-hr-margin, var(--hr-margin, 24px));
    margin-block-end: var(--cms-hr-margin, var(--hr-margin, 24px));
    width: var(--cms-hr-width, 100%);
    border: 0;
    border-top: var(--cms-hr-thickness, 1px) solid currentColor;
    background: none;
    line-height: 0;
    border-image-slice: 1;
    border-image-source: linear-gradient(
        to right,
        transparent,
        currentColor var(--_hr-fade),
        currentColor calc(100% - var(--_hr-fade)),
        transparent
    );
}

hr[data-cms-hr][data-cms-hr-variant="solid"] {
    border-image: none;
}

hr[data-cms-hr][data-cms-hr-variant="dotted"] {
    border-image: none;
    border-top-style: dotted;
}

hr[data-cms-hr][data-cms-hr-variant="dashed"] {
    border-image: none;
    border-top-style: dashed;
}

hr[data-cms-hr][data-cms-hr-variant="minimal"] {
    border-image: none;
    opacity: 0.6;
}

hr[data-cms-hr][data-cms-hr-spacing="compact"] {
    margin-block: calc(var(--cms-hr-margin, 24px) * 0.5);
}

hr[data-cms-hr][data-cms-hr-spacing="none"] {
    margin-block: 0;
}

hr[data-cms-hr][data-cms-hr-spacing="loose"] {
    margin-block: calc(var(--cms-hr-margin, 24px) * 1.5);
}

hr[data-cms-hr][data-cms-hr-align="start"] {
    margin-inline-start: 0;
    margin-inline-end: auto;
    max-width: min(100%, var(--cms-hr-width, 100%));
}

hr[data-cms-hr][data-cms-hr-align="end"] {
    margin-inline-start: auto;
    margin-inline-end: 0;
    max-width: min(100%, var(--cms-hr-width, 100%));
}

/* ---------- Images ---------- */
.framer-text img[data-cms-img],
img[data-cms-img] {
    display: block;
    width: var(--cms-img-width, auto);
    max-width: min(100%, var(--cms-img-max-width, 100%));
    height: auto;
    margin-block: var(--cms-img-gap, 24px);
    margin-inline: 0;
    border-radius: var(--cms-img-radius, 0px);
    overflow: hidden;
    object-fit: var(--cms-img-object-fit, initial);
    box-shadow: var(--cms-img-shadow, none);
    border: var(--cms-img-border-width, 0px) solid
        var(--cms-img-border-color, transparent);
    background: var(--cms-img-background, transparent);
}

img[data-cms-img]:not([data-cms-img-border]) {
    clip-path: inset(0 round var(--cms-img-radius, 0px));
}

img[data-cms-img][data-cms-img-border] {
    clip-path: none;
}

img[data-cms-img][data-cms-align="center"] {
    margin-left: auto;
    margin-right: auto;
}

img[data-cms-img][data-cms-align="right"] {
    margin-left: auto;
    margin-right: 0;
}

img[data-cms-img][data-cms-align="left"] {
    margin-left: 0;
    margin-right: auto;
}

@media (max-width: 600px) {
    img[data-cms-img][data-cms-align-m="center"] {
        margin-left: auto;
        margin-right: auto;
    }
    img[data-cms-img][data-cms-align-m="right"] {
        margin-left: auto;
        margin-right: 0;
    }
    img[data-cms-img][data-cms-align-m="left"] {
        margin-left: 0;
        margin-right: auto;
    }
}

@media (min-width: 601px) {
    img[data-cms-img][data-cms-align-d="center"] {
        margin-left: auto;
        margin-right: auto;
    }
    img[data-cms-img][data-cms-align-d="right"] {
        margin-left: auto;
        margin-right: 0;
    }
    img[data-cms-img][data-cms-align-d="left"] {
        margin-left: 0;
        margin-right: auto;
    }
}

img[data-cms-img][data-cms-mode="full"] {
    width: 100%;
    max-width: 100%;
}

img[data-cms-img][data-cms-mode="inline"] {
    display: inline-block;
}

img[data-cms-img][data-cms-mode="bleed"] {
    width: calc(
        100vw - 2 * var(--cms-page-gutter, var(--cms-img-gutter, 16px))
    );
    max-width: none;
    margin-left: calc(
        50% - 50vw + var(--cms-page-gutter, var(--cms-img-gutter, 16px))
    );
    margin-right: calc(
        50% - 50vw + var(--cms-page-gutter, var(--cms-img-gutter, 16px))
    );
}

img[data-cms-img][data-cms-mode="bleed"][data-cms-align="center"] {
    margin-left: calc(
        50% - 50vw + var(--cms-page-gutter, var(--cms-img-gutter, 16px))
    );
    margin-right: calc(
        50% - 50vw + var(--cms-page-gutter, var(--cms-img-gutter, 16px))
    );
}

img[data-cms-img][data-cms-img-maxh] {
    max-height: var(--cms-img-max-height, none);
    object-fit: var(--cms-img-object-fit, contain);
    width: auto;
}

@media (max-width: 600px) {
    img[data-cms-img][data-cms-img-maxh] {
        max-height: var(
            --cms-img-max-height-mobile,
            var(--cms-img-max-height, none)
        );
    }
}

img[data-cms-img][data-cms-gap="none"] {
    margin-block: 0;
}

img[data-cms-img][data-cms-gap="compact"] {
    margin-block: calc(var(--cms-img-gap, 24px) * 0.5);
}

img[data-cms-img][data-cms-gap="loose"] {
    margin-block: calc(var(--cms-img-gap, 24px) * 1.5);
}

figure:has(> img[data-cms-img]) {
    border-radius: var(--cms-img-radius, 0px);
    overflow: hidden;
}

figure:has(> img[data-cms-img]):not([data-cms-img-border]) {
    clip-path: inset(0 round var(--cms-img-radius, 0px));
}

figure[data-cms-img-border] {
    clip-path: none;
}

html,
body {
    overflow-x: clip;
}