/* ==========================================================
   DPV Image Card Hover — Stylesheet v1.2.0
   ========================================================== */

/* ----------------------------------------------------------
   GRID
---------------------------------------------------------- */
.dpv-ich-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ----------------------------------------------------------
   CARD — base
---------------------------------------------------------- */
.dpv-ich-card {
    position: relative;
    display: block;
    height: 320px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

/* ----------------------------------------------------------
   IMAGE
---------------------------------------------------------- */
.dpv-ich-card > img.dpv-ich-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    max-width: none !important;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    will-change: transform;
    transition: transform 350ms ease, filter 350ms ease, opacity 350ms ease;
}

/* ----------------------------------------------------------
   OVERLAY — always visible with a gradient so text is
   readable at all times, not just on hover.
---------------------------------------------------------- */
.dpv-ich-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    background: transparent;
    z-index: 2;
}

/* Dedicated visual layer: background/opacity can change on hover without
   fading the title or description that live inside the overlay. */
.dpv-ich-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
    opacity: 1;
    transition-property: background, opacity;
    transition-duration: 350ms;
    transition-timing-function: ease;
}

/* ----------------------------------------------------------
   CONTENT (title + text) — always visible
---------------------------------------------------------- */
.dpv-ich-content {
    position: relative;
    z-index: 1;
    opacity: 1;
    transform: none;
    transition: transform 350ms ease, opacity 350ms ease;
}

.dpv-ich-title {
    margin: 0 0 8px;
    padding: 0;
    color: #ffffff;
    transition-property: transform;
    transition-duration: 350ms;
    transition-timing-function: ease;
}

.dpv-ich-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}

/* ----------------------------------------------------------
   DESCRIPTION VISIBILITY / ENTRANCE
---------------------------------------------------------- */
.dpv-ich-grid {
    --dpv-ich-desc-distance: 24px;
    --dpv-ich-desc-duration: 350ms;
    --dpv-ich-desc-easing: ease;
    --dpv-ich-title-normal-x: 0px;
    --dpv-ich-title-normal-y: 0px;
    --dpv-ich-title-hover-x: 0px;
    --dpv-ich-title-hover-y: 0px;
}


/* Title position can be tuned independently for the normal and hover states.
   Transform is used intentionally so existing margins/content flow are preserved. */
.dpv-ich-card:not(:hover):not(:focus-within) .dpv-ich-title {
    transform: translate(var(--dpv-ich-title-normal-x), var(--dpv-ich-title-normal-y));
}

.dpv-ich-card:hover .dpv-ich-title,
.dpv-ich-card:focus-within .dpv-ich-title {
    transform: translate(var(--dpv-ich-title-hover-x), var(--dpv-ich-title-hover-y));
}

.dpv-ich-desc-hidden .dpv-ich-text {
    display: none !important;
}

.dpv-ich-desc-always .dpv-ich-text {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* When description is revealed only on hover, the default behavior is to
   remove its height from the normal-state layout. This keeps every title on
   the same baseline regardless of description length. The description row
   expands smoothly on hover/focus. */
.dpv-ich-desc-hover.dpv-ich-desc-collapse .dpv-ich-content {
    display: grid;
    grid-template-rows: auto minmax(0, 0fr);
    transition-property: grid-template-rows, transform, opacity;
    transition-duration: var(--dpv-ich-desc-duration), 350ms, 350ms;
    transition-timing-function: var(--dpv-ich-desc-easing), ease, ease;
}

.dpv-ich-desc-hover.dpv-ich-desc-collapse .dpv-ich-card:hover .dpv-ich-content,
.dpv-ich-desc-hover.dpv-ich-desc-collapse .dpv-ich-card:focus-within .dpv-ich-content {
    grid-template-rows: auto minmax(0, 1fr);
}

.dpv-ich-desc-hover.dpv-ich-desc-collapse .dpv-ich-desc-wrap {
    min-height: 0;
    overflow: hidden;
}

.dpv-ich-desc-wrap {
    min-width: 0;
}

.dpv-ich-desc-hover .dpv-ich-text {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-property: opacity, transform, visibility;
    transition-duration: var(--dpv-ich-desc-duration);
    transition-timing-function: var(--dpv-ich-desc-easing);
}

.dpv-ich-desc-hover .dpv-ich-card:hover .dpv-ich-text,
.dpv-ich-desc-hover .dpv-ich-card:focus-within .dpv-ich-text {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.dpv-ich-desc-hover.dpv-ich-desc-anim-none .dpv-ich-text,
.dpv-ich-desc-hover.dpv-ich-desc-anim-fade .dpv-ich-text {
    transform: none;
}

.dpv-ich-desc-hover.dpv-ich-desc-anim-slide_up .dpv-ich-text {
    transform: translateY(var(--dpv-ich-desc-distance));
}

.dpv-ich-desc-hover.dpv-ich-desc-anim-slide_down .dpv-ich-text {
    transform: translateY(calc(var(--dpv-ich-desc-distance) * -1));
}

.dpv-ich-desc-hover.dpv-ich-desc-anim-slide_left .dpv-ich-text {
    transform: translateX(var(--dpv-ich-desc-distance));
}

.dpv-ich-desc-hover.dpv-ich-desc-anim-slide_right .dpv-ich-text {
    transform: translateX(calc(var(--dpv-ich-desc-distance) * -1));
}

.dpv-ich-desc-hover.dpv-ich-desc-anim-zoom_in .dpv-ich-text {
    transform: scale(.92);
    transform-origin: left bottom;
}

/* ==========================================================
   ANIMATION: Slide Up
   — text is always visible; on hover the overlay darkens
   slightly and the content nudges up for a subtle effect.
   ========================================================== */
.dpv-ich-anim-slide_up .dpv-ich-content {
    transform: translateY(0);
    opacity: 1;
}


.dpv-ich-anim-slide_up .dpv-ich-card:hover .dpv-ich-content {
    transform: translateY(-4px);
}

/* ==========================================================
   ANIMATION: Fade In
   — text is always visible; on hover overlay darkens.
   ========================================================== */

/* ==========================================================
   ANIMATION: Zoom In (image scales on hover)
   — text always visible; image zooms in on hover.
   ========================================================== */
.dpv-ich-anim-zoom_in .dpv-ich-img {
    transform: scale(1);
}

.dpv-ich-anim-zoom_in .dpv-ich-card:hover .dpv-ich-img {
    transform: scale(1.08);
}


/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */
@media (max-width: 1024px) {
    .dpv-ich-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .dpv-ich-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dpv-ich-card {
        height: 240px;
    }
}

/* ----------------------------------------------------------
   ACCESSIBILITY — respect reduced motion preference
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dpv-ich-img,
    .dpv-ich-overlay,
    .dpv-ich-content,
    .dpv-ich-text {
        transition: none !important;
    }
}

.dpv-ich-anim-none .dpv-ich-content { transform:none; opacity:1; }