/* ==========================================================================
   Ghost Card Width Overrides
   This file is loaded DIRECTLY (not via Tailwind) because Ghost's {{content}}
   helper generates card classes (kg-*) at runtime that Tailwind would
   tree-shake from the build.
   ========================================================================== */

/* Prevent cards from breaking out of the content container */
.clarity-content .kg-width-full,
.clarity-content .kg-width-wide {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  left: auto !important;
  transform: none !important;
}

/* Header card containment */
.clarity-content .kg-header-card {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  left: auto !important;
  transform: none !important;
  border-radius: 0.5rem;
  overflow: hidden;
}

.clarity-content .kg-header-card img,
.clarity-content .kg-header-card-image {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Image card containment */
.clarity-content .kg-image-card {
  max-width: 100%;
}

.clarity-content .kg-image-card img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

/* Gallery containment */
.clarity-content .kg-gallery-card {
  max-width: 100%;
}

/* Prevent prose images from overflowing */
.clarity-content .prose img {
  max-width: 100% !important;
  height: auto;
}

/* Content container - clip any overflow from cards */
.clarity-content .prose {
  overflow: hidden;
}