/* Shortcodes */

/* Image Shortcode */
.sc-image { /* Base for all shortcode images */
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border-radius: 4px;
}
.sc-image-default { /* Default centered image */
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 8px rgba(var(--shadow-color-light-rgb), var(--shadow-opacity-light));
}
.sc-image-inline {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.5em 0.2em 0.5em; /* Top margin 0, adjust others */
}
.sc-image-left {
  float: left;
  margin-right: 1.5em;
  margin-left: 0; /* Ensure no extra left margin */
  margin-top: 0.5em;
  margin-bottom: 0.8em;
}
.sc-image-right {
  float: right;
  margin-left: 1.5em;
  margin-right: 0; /* Ensure no extra right margin */
  margin-top: 0.5em;
  margin-bottom: 0.8em;
}
.sc-image-float-container::after, /* Container for floated images to clear float */
.clear-float::after { /* Utility class to clear floats */
  content: "";
  display: table;
  clear: both;
}
.sc-image-artistic-blur-wrapper {
  position: relative;
  overflow: hidden;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border-radius: 8px;
  padding-top: 56.25%; /* 16:9 Aspect Ratio, image src for bg should be set by shortcode */
  background-size: cover;
  background-position: center;
  background-image: var(--bg-image); /* Fallback, ideally set by shortcode */
}
.sc-image-artistic-blur-wrapper::before { /* The blurred background layer */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit; /* Inherits from parent wrapper */
  background-size: cover;
  background-position: center;
  filter: blur(15px) brightness(0.8);
  z-index: 1;
  transform: scale(1.1); /* Scale to avoid edge artifacts */
}
html.dark-mode .sc-image-artistic-blur-wrapper::before {
  filter: blur(15px) brightness(0.65);
}
.sc-image-artistic-blur-wrapper .sc-image-artistic-blur { /* The main, less-blurred image */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 75%; /* Adjust size of foreground image */
  max-height: 85%;
  width: auto; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  object-fit: contain;
  z-index: 2;
  border-radius: 6px;
  box-shadow: 0 5px 20px rgba(var(--shadow-color-light-rgb), 0.25);
  margin: 0 !important; /* Override any inherited margins */
}
.sc-image.small-image { max-width: 200px; margin-left: auto; margin-right: auto; }
.sc-image.medium-image { max-width: 450px; margin-left: auto; margin-right: auto; }
.sc-image.large-image { max-width: 100%; } /* Default behavior */
.sc-image.full-width-image {
  max-width: 100vw;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* Center full-width image */
  margin-right: calc(50% - 50vw);
  border-radius: 0; /* No radius for full viewport width */
}

/* Admonition Shortcode */
.admonition {
  padding: 1em 1.25em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border-radius: 6px;
  border-left-width: 5px;
  border-left-style: solid;
  overflow: hidden;
}
.admonition.note {
  background-color: var(--admonition-note-bg);
  border-left-color: var(--admonition-note-border);
}
.admonition.note .admonition-heading,
.admonition.note .admonition-icon {
  color: var(--admonition-note-heading-text);
}
.admonition.note .admonition-content {
  color: var(--admonition-note-text);
}
.admonition.note .admonition-content a {
  color: var(--admonition-note-border);
  font-weight: 500;
}
.admonition.info {
  background-color: var(--admonition-info-bg);
  border-left-color: var(--admonition-info-border);
}
.admonition.info .admonition-heading,
.admonition.info .admonition-icon {
  color: var(--admonition-info-heading-text);
}
.admonition.info .admonition-content {
  color: var(--admonition-info-text);
}
.admonition.info .admonition-content a {
  color: var(--admonition-info-border);
  font-weight: 500;
}
.admonition.warning {
  background-color: var(--admonition-warning-bg);
  border-left-color: var(--admonition-warning-border);
}
.admonition.warning .admonition-heading,
.admonition.warning .admonition-icon {
  color: var(--admonition-warning-heading-text);
}
.admonition.warning .admonition-content {
  color: var(--admonition-warning-text);
}
.admonition.warning .admonition-content a {
  color: var(--admonition-warning-border);
  font-weight: 500;
}
.admonition.tip {
  background-color: var(--admonition-tip-bg);
  border-left-color: var(--admonition-tip-border);
}
.admonition.tip .admonition-heading,
.admonition.tip .admonition-icon {
  color: var(--admonition-tip-heading-text);
}
.admonition.tip .admonition-content {
  color: var(--admonition-tip-text);
}
.admonition.tip .admonition-content a {
  color: var(--admonition-tip-border);
  font-weight: 500;
}
.admonition-heading {
  display: flex;
  align-items: center;
  margin-bottom: 0.75em;
  font-weight: 600;
}
.admonition-icon {
  margin-right: 0.6em;
  flex-shrink: 0;
}
.admonition-title {
  font-size: 1.1em;
}
.admonition-content > :last-child { margin-bottom: 0; }
.admonition-content > :first-child { margin-top: 0; }
.admonition-content p,
.admonition-content ul,
.admonition-content ol {
    font-size: 0.95em;
    line-height: 1.6;
}

/* Video Shortcode */
.video-shortcode-wrapper {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  background-color: #000; /* Background for letterboxing if video not 16:9 */
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(var(--shadow-color-light-rgb), var(--shadow-opacity-light));
  max-width: 100%; /* Ensure it doesn't overflow container */
}
.video-shortcode__player { /* For the iframe or video element */
  display: block;
  width: 100%;
  height: auto; /* Default to auto, aspect ratio will handle it if set */
  max-height: 70vh; /* Prevent overly tall videos */
  aspect-ratio: 16 / 9; /* Common aspect ratio, adjust if needed or set by JS */
  outline: none;
}
/* If your video player (e.g. Plyr) sets width/height attributes, this might be needed */
.video-shortcode__player[width][height] {
    height: auto; /* Override fixed height if width is 100% */
}