/* ==========================================================================
   FRONT PAGE SECTIONS — image-container treatment.
   This file is loaded by the `tiempos/front_page_sections` library, which is
   attached only when the "Enable front page sections Javascript" theme
   setting is on. So everything here is predicated on that setting, alongside
   front_page_sections.js (which equalizes each row's containers to the
   tallest image's height).
   ========================================================================== */

:root {
    --fps-image-container-bg: url("../images/loading.gif") no-repeat center;
    --fps-image-visibility: hidden;
}

/* Flex centering is in frontpage.css (always on); these are the gated
   extras layered on top when the setting is enabled. */
.front-page-sections .image-container {
    background: var(--fps-image-container-bg);
    background-size: 30%;
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius);
    margin-bottom: 0.4rem;
    padding: 1px;
    /* front_page_sections.js sets height to the tallest image's *content*
       height. With the global border-box that height would swallow the
       padding and clip the tallest image; content-box keeps the 3px padding
       outside the set height so every image (including the tallest) is
       padded, not cropped. */
    box-sizing: content-box;
}

.front-page-sections .image-container img {
    visibility: var(--fps-image-visibility);
    /* Natural size; front_page_sections.js sets each container to the
       tallest image's height, so shorter images sit centered (flex) with
       space around them — no crop. */
    width: auto;
    /* Feather all four edges so the photo dissolves softly into the
       background instead of ending on a hard rectangle. Two gradients
       (one per axis) combined with intersect fade every edge. */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 3px, #000 calc(100% - 3px), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 3px, #000 calc(100% - 3px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0, #000 3px, #000 calc(100% - 3px), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 3px, #000 calc(100% - 3px), transparent 100%);
    mask-composite: intersect;
}

/* Subtle edge vignette — mirrors the frontpage slideshow treatment. Tints
   toward the nav/footer background color (--nav-footer-bg, set in
   preprocess_html) when present; neutral black fallback otherwise. */
.front-page-sections .image-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--nav-footer-bg, #000) 9%, transparent) 0%,
        transparent 25%,
        transparent 75%,
        color-mix(in srgb, var(--nav-footer-bg, #000) 11%, transparent) 100%);
    pointer-events: none;
}

/* Drop the edge vignette on mobile (cards are full-width there, so the
   gradient reads heavier). Matches the theme's 768px mobile breakpoint. */
@media screen and (max-width: 768px) {
    .front-page-sections .image-container::after {
        display: none;
    }
}