/* ========================================================================
   POST IMAGE STYLES
   ======================================================================== 
   
   This file contains all image-related CSS for post content.
   Organized by image type and layout system.
   
   VIEWPORT HEADNOTE: Standard boundaries 1024, 768–1023, ≤767. max-width 479px is not tied to our device viewport sizes; used for small-mobile tighter spacing only. Viewport rules grouped at end of file.
   Desktop (1024px+): abspos/JS relocation. Tablet (768–1023px): float, text wraps images. Mobile (≤767px): in-flow, full width.
   
   SECTIONS:
   1. Feature Images (hero images at top of posts)
   2. Layout System - Desktop (1024px+) float right; tablet/mobile at end
   3. Image Captions (applies to all captioned images)
   4. Image Placeholders (invisible markers for moved images)
   5. Viewport overrides — all in one block at end (DESKTOP / TABLET / MOBILE)
   ======================================================================== */

/* ========================================================================
   1. FEATURE IMAGES
   ======================================================================== 
   
   APPLIES TO: Hero images at the top of posts (feature_image in Ghost)
   USAGE: Set via Ghost admin panel as "Feature image"
   LOCATION: Outside article-body, spans full content width
   GRID: Columns 2/4 (same as main content)
   ======================================================================== */

.post-main-image img {
    border-top: 1px solid var(--text-color);
    border-bottom: 1px solid var(--text-color);
    width: 100%;
    height: auto;
}

.post-main-image figcaption {
    font-size: 20px;
    line-height: 1.4;
    margin-top: 10px;
    text-align: center;
}

/* Feature image now lives in .post-header (article.hbs); layout in post.css. No grid-column here. */
.post-header .post-main-image {
    flex-shrink: 0;
    max-width: min(55%, 720px);
}
.post-header .post-main-image img {
    width: 100%;
    height: auto;
}



/* ========================================================================
   3. IMAGE CAPTIONS (ALL CAPTIONED IMAGES)
   ======================================================================== 
   
   APPLIES TO: All images with captions, regardless of layout system
   USAGE: Generated by ghost-publish.js from Obsidian syntax ![[image.jpg|caption]]
   STRUCTURE: <figure class="image-with-caption"><img class="captioned-image"><figcaption class="image-caption">
   BEHAVIOR: Caption is pinned to image width, styled consistently
   ======================================================================== */

/* Caption styling - applies to all captioned images */
.article-body .image-with-caption figcaption,
.post-content > figure.image-with-caption > figcaption,
.post-content .article-body > figure.image-with-caption > figcaption,
.post-content figure.image-with-caption > figcaption,
.post-content .image-with-caption > figcaption,
.post-content > figure.kg-card.kg-image-card > figcaption,
.post-content figure.kg-card.kg-image-card > figcaption {
    font-family: var(--etm) !important;      /* Epicene Text Medium */
    font-style: italic !important;            /* Italic variant */
    font-size: inherit;
    color: color-mix(in srgb, var(--text-color) 90%, white 10%) !important;   /* Dark gray, 10% lighter than body text */
    margin-top: 0.5rem !important;            /* .5rem spacing below image */
    margin-bottom: 0.5rem !important;         /* .5rem spacing above text below */
    line-height: 1.25 !important;
    text-align: center;
    width: 100% !important;                   /* Takes full width of parent (which is image width) */
    display: inline-block !important;
} 

/* Desktop only: stacking needed for 3-col grid, .images-container abspos, and footnotes. Avoid applying to tablet/mobile. */
@media (min-width: 1024px) {
    .article-body {
        position: relative;              /* Required for z-index stacking */
        z-index: 1;                      /* Keep prose/media below side-footnote layer */
        overflow: visible;               /* Allow content to extend beyond boundaries */
    }

    .post-content {
        position: relative;              /* Establish stacking context */
        z-index: 1;                      /* Base layer */
    }
}


/* ========================================================================
   4. IMAGE PLACEHOLDERS
   ======================================================================== 
   
   APPLIES TO: Invisible markers left in original text position
   USAGE: Created by images.hbs JavaScript when moving images to layout system
   LOCATION: Original position in article-body where image was located
   BEHAVIOR: Completely hidden, maintains document structure
   PURPOSE: Preserves text flow and reading order while images are repositioned
   ======================================================================== */

.image-placeholder {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    visibility: hidden;           /* Hidden but maintains layout structure */
}





/* ========================================================================
   1. DESKTOP (1024px+)
   ======================================================================== */
@media (min-width: 1024px) {
  /* Dormant float system removed: images are relocated to .images-container by JS; only abspos rules below apply. */

  .post-content .images-container[data-images="true"] > figure,
  .post-content .images-container[data-images="true"] > figure.image-with-caption,
  .post-content .images-container[data-images="true"] > figure.kg-card.kg-image-card {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0 0 1.25rem 0;
    display: block;
  }

  .post-content .images-container[data-images="true"] > figure > img,
  .post-content .images-container[data-images="true"] > figure.image-with-caption > img,
  .post-content .images-container[data-images="true"] > figure.kg-card.kg-image-card > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: calc(600px * var(--imgScale));
    object-fit: contain;
  }
}





/* ========================================================================
   2b. TABLET (768px–1023px) — float figures right so text wraps
   Selector scope matches desktop (figure, figure.image-with-caption, figure.kg-card.kg-image-card) but in .article-body.
   ======================================================================== */
@media (max-width: 1023px) {
  /* Clearfix: a pseudo-element at the end of .article-body so content after the last float doesn’t sit beside it. */
  .article-body::after {
    content: "";       /* Empty box; we only need it to clear. */
    display: block;    /* So it’s a block and clear: both takes effect. */
    clear: both;      /* Force this “line” below any floats, so the next section starts underneath. */
  }

  /* Figure: the wrapper. In HTML it’s <figure><img><figcaption></figure>. Float it so text wraps. */
  .article-body figure,
  .article-body figure.image-with-caption,
  .article-body figure.kg-card.kg-image-card {
    float: right;                    /* Put figure on the right so body text wraps on the left. */
    width: max-content;              /* Shrink figure to the image (and caption) so no empty strip to the right. */
    max-width: 80%;                  /* Don’t use full width so a text column can sit 
    beside it. */
    margin: 0 0 2em 1.5em;           /* Space below figure; 1.5em left = gutter between figure and text. */
  }

  /* Img: lives inside figure. These rules only apply to images that are direct children of the figure. */
  .article-body figure > img,
  .article-body figure.image-with-caption > img,
  .article-body figure.kg-card.kg-image-card > img {
    display: block;                   /* Removes inline gap under the image. */
    height: auto;                    /* Keep aspect ratio when width is constrained. */
    max-height: calc(600px * var(--imgScale));  /* Cap height so the float doesn’t dominate the column. */
    object-fit: contain;             /* Scale image to fit inside the box without cropping. */
  }

  /* Figcaption: also inside figure, under the img. Only alignment/margin here; font/size come from global caption rules. */
  .article-body .image-with-caption figcaption,
  .post-content > figure.image-with-caption > figcaption,
  .post-content .article-body > figure.image-with-caption > figcaption,
  .post-content figure.image-with-caption > figcaption,
  .post-content .image-with-caption > figcaption,
  .post-content > figure.kg-card.kg-image-card > figcaption,
  .post-content figure.kg-card.kg-image-card > figcaption {
    text-align: left;                /* Left-align caption under the image. */
    margin: 0 .5em 0 1em;           /* Top right bottom left: space on right and left of caption text. */
  }
}

/* ========================================================================
   2c. MOBILE (≤767px) — in-flow, full width, no float
   ======================================================================== */
/* @media (max-width: 767px) {
  .article-body img {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(540px * var(--imgScale)) !important;
    object-fit: contain !important;
    margin: 1em 0 !important;
    shape-outside: none !important;
    clear: none !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;
  }

  .article-body figure {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1em 0 !important;
    shape-outside: none !important;
    clear: none !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;
  }
} */





/* ========================================================================
   2c. MOBILE (≤767px) — traditional in-flow layout, full width
   ======================================================================== */
@media (max-width: 640px) {
  .article-body figure,
  .article-body figure.image-with-caption,
  .article-body figure.kg-card.kg-image-card {
        width: 100%;
        max-height: calc(360px * var(--imgScale));
        object-fit: contain;
        margin: 0 .5em 1.5em .5em;
    }

   .article-body figure > img,
  .article-body figure.image-with-caption > img,
  .article-body figure.kg-card.kg-image-card > img {
        width: auto;
        max-width: 100%;
        margin: 1em 0 0 1em;
    }
/* 
    .post-content .images-container figure.image-with-caption {
        width: 100%;
        margin: 1.5em 0;
        text-align: center;
    }


    .post-content .images-container figure.image-with-caption img {
        max-width: 100%;
        max-height: calc(360px * var(--imgScale));
        height: auto;
        object-fit: contain;
        display: inline-block;
        margin: 0 auto;
    }

    .image-with-caption {
        display: inline-block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left;
        margin: 1em 0 1em 0;
    }

    Tighter spacing for mobile (folded from former 479px-only block per standard bands). 
    .layout-image,
    .post-content img,
    .post-content figure,
    .image-with-caption {
        margin: 0.8em 0 !important;
    } 
    */
}