/*
 * ZXM Insights Widget -- Structural Stylesheet
 * Version: 1.9.0
 *
 * This file owns MECHANICS only:
 *   -- grid layout
 *   -- card shell and stacking context
 *   -- ::before photo layer and zoom
 *   -- scrim positioning
 *   -- body positioning and flex layout
 *   -- reveal show/hide transition
 *   -- responsive column breakpoints
 *   -- reduced-motion safety
 *   -- mobile always-visible excerpt
 *
 * Brand decisions (colour, typography, spacing, border-radius)
 * live in the global stylesheet -- Section 20: ZXM INSIGHTS WIDGET.
 * Per-instance overrides use the Elementor wrapper ID:
 *   .elementor-element-{id} .zxm-insights-grid { ... }
 */

/* ============================================================
   GRID
   ============================================================ */

.zxm-insights-grid {
    --zxm-ins-cols: 3;
    --zxm-ins-gap:  16px;

    display: grid;
    grid-template-columns: repeat( var(--zxm-ins-cols), minmax(0, 1fr) );
    gap: var(--zxm-ins-gap);
    width: 100%;
}

/* ============================================================
   CARD SHELL
   ============================================================ */

.zxm-insights-card {
    position: relative;
}

.zxm-insights-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* ============================================================
   IMAGE CONTAINER
   padding-bottom drives aspect ratio.
   overflow:hidden clips the ::before zoom.
   ============================================================ */

.zxm-insights-card__image {
    position: relative;
    width: 100%;
    padding-bottom: 65%;
    overflow: hidden;
}

/* ============================================================
   ::BEFORE -- photo layer
   Background image set via --card-bg CSS custom property on the
   article element. CSS custom properties are inherited, so
   var(--card-bg) resolves correctly here. background-image: inherit
   does not work reliably across browsers in this context.
   Only this pseudo-element scales on hover -- nothing else moves.
   ============================================================ */

.zxm-insights-card__image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--card-bg, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Base state -- no animation by default.
       Add a modifier class to the card element to enable an animation:
         zxm-insights-card--img-grow   (scale up on hover)
         zxm-insights-card--img-shrink (scale down on hover)
         zxm-insights-card--img-fade   (fade on hover)
         zxm-insights-card--img-none   (no animation, explicit)
       All modifier classes are defined in the global stylesheet Section 14.
       Use the Image hover animation control in the widget Style tab. */
    z-index: 0;
}

/* ============================================================
   SCRIM -- gradient overlay, sits above photo, below body
   ============================================================ */

.zxm-insights-card__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: background 300ms ease;
}

/* ============================================================
   BODY -- content layer, sits above scrim
   ============================================================ */

.zxm-insights-card__body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ============================================================
   BADGE -- structural positioning only
   ============================================================ */

.zxm-insights-card__badge {
    align-self: flex-start;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   FOOTER -- stacks title, reveal, date at bottom
   ============================================================ */

.zxm-insights-card__footer {
    display: flex;
    flex-direction: column;
}

/* ============================================================
   TITLE -- line clamp to keep cards uniform height
   ============================================================ */

.zxm-insights-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* ============================================================
   REVEAL -- structural base state only.
   No hover behaviour is defined here.
   Reveal animation is controlled by modifier classes on the card:
     zxm-insights-card--reveal-none       (always visible, no animation)
     zxm-insights-card--reveal-slide      (slides open on hover)
     zxm-insights-card--reveal-fade       (fades in on hover)
     zxm-insights-card--reveal-slide-fade (slides and fades on hover)
   All modifier classes are defined in the global stylesheet Section 14.
   Use the Excerpt reveal on hover control in the widget Style tab.
   ============================================================ */

.zxm-insights-card__reveal {
    overflow: hidden;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    /* Suppress all transitions and transforms -- covers image modifier
       classes and reveal modifier classes defined in the global CSS */
    .zxm-insights-card__image::before,
    .zxm-insights-card__scrim,
    .zxm-insights-card__reveal {
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   RESPONSIVE -- tablet (2 columns)
   ============================================================ */

@media (max-width: 1024px) {
    .zxm-insights-grid {
        --zxm-ins-cols: 2;
    }
}

/* ============================================================
   RESPONSIVE -- mobile (1 column, always-visible excerpt)
   ============================================================ */

@media (max-width: 767px) {
    .zxm-insights-grid {
        --zxm-ins-cols: 1;
        --zxm-ins-gap: 12px;
    }

    .zxm-insights-card__image {
        padding-bottom: 70%;
    }

    /* Touch devices have no hover.
       Reveal modifier classes in global CSS handle the always-visible
       state for mobile via the same responsive overrides there. */
}