/* ==========================================================================
   FEATURED-GRID ATTACHMENT IMAGE TREATMENT
   Loaded only when BOTH the "Featured grid homepage layout" AND "Enable front
   page sections Javascript" settings are on (attached in
   TiemposHooks::preprocessPage). Mirrors the front-page-sections image
   treatment — rounded corners, color-tinting edge vignette, feathered edges —
   on the featured-grid secondary cards (the .attachment teasers).
   ========================================================================== */

.view-id-frontpage .attachment .node--view-mode-teaser .image-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius);
}

/* Feather all four edges so the photo dissolves into the card background,
   matching the sections and the slideshow (3px). */
.view-id-frontpage .attachment .node--view-mode-teaser .image-container img {
    -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 — tints toward the nav/footer color (--nav-footer-bg)
   when set, neutral black fallback otherwise. */
.view-id-frontpage .attachment .node--view-mode-teaser .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;
}