/* ============================================================
   meggybug journal placeholder tint

   The placeholder drawing is black ink on white paper. Each
   journal entry tints it a different pastel so the same image
   repeated down the list reads as a choice, not a missing file.

   BLEND MODE: multiply is the correct one here, and it is not a
   matter of taste. Multiply keeps whichever is darker at every
   pixel, so pure black line work stays pure black while the white
   paper takes the tint fully. The alternatives all fail on this
   kind of image:
     - screen / lighten  wash the black lines out to grey
     - overlay / soft-light  lift the blacks and muddy the colour
     - darken  looks close, but clips mid-tones in the paper
       texture and loses the pencil grain
   Multiply is the digital equivalent of printing the same ink on
   coloured stock, which is exactly the effect wanted.

   To restyle: edit the six colours below. If you add or remove
   any, update MEGGYBUG_TINT_COUNT in the plugin to match.
   ============================================================ */

/* The class lands on the featured image block's own <figure>, so
   this must not fight the width and height the block sets itself. */
.mb-tint {
    /* Contains the blend. Without this the multiply would also
       blend with the orange page background behind the image. */
    isolation: isolate;

    background-color: var(--mb-tint-color, #ffc2c2);

    /* Clips the tint to the image corners. Matches the radius used
       in the journal templates - adjust here if those change. */
    border-radius: 6px;
    overflow: hidden;
}

.mb-tint img {
    display: block;
    mix-blend-mode: multiply;
}

/* --- the pastel rainbow, in spectrum order --- */

.mb-tint-1 { --mb-tint-color: #ffc2c2; }   /* soft red     */
.mb-tint-2 { --mb-tint-color: #ffd9b3; }   /* soft orange  */
.mb-tint-3 { --mb-tint-color: #fdf0a9; }   /* soft yellow  */
.mb-tint-4 { --mb-tint-color: #bfe3c0; }   /* soft green   */
.mb-tint-5 { --mb-tint-color: #bcd9f2; }   /* soft blue    */
.mb-tint-6 { --mb-tint-color: #d9c6ef; }   /* soft violet  */

/* ------------------------------------------------------------
   Fallbacks.

   High-contrast mode strips blend modes, which would leave a flat
   colour block over the drawing. Drop the tint entirely there and
   show the plain image.
   ------------------------------------------------------------ */

@media (forced-colors: active) {
    .mb-tint {
        background-color: transparent;
    }
    .mb-tint img {
        mix-blend-mode: normal;
    }
}

/* Blend modes are unreliable in print. Keep the line art legible. */
@media print {
    .mb-tint {
        background-color: transparent;
    }
    .mb-tint img {
        mix-blend-mode: normal;
    }
}