/* Image Card widget */
.tv-image-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--tv-card-radius, 0);
    color: var(--tv-card-title-color, #fff);
}

/* Aspect ratios */
.tv-image-card--ratio-1-1 { aspect-ratio: 1 / 1; }
.tv-image-card--ratio-4-3 { aspect-ratio: 4 / 3; }
.tv-image-card--ratio-16-9 { aspect-ratio: 16 / 9; }
.tv-image-card--ratio-3-4 { aspect-ratio: 3 / 4; }

/* Media — z-index 1 */
.tv-image-card__media {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tv-image-card__media .tv-image-card__img {
    width: 100%;
    height: 100%;
    object-fit: var(--tv-card-image-fit, cover);
    display: block;
}

/* Animatable percentage powering the overlay gradient stop. Registered via
   @property so CSS transitions can interpolate it smoothly. */
@property --tv-overlay-fill {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

/* Overlay — single element, single background, smooth transition.
   Default state (--tv-overlay-fill: 0%): solid colour at 0%, fades to transparent at 33%
   → gradient covers the bottom third of the card.
   Hover/focus state (--tv-overlay-fill: 100%): solid colour from 0% to 100%, transparent
   stop pushed off-card → covers the whole card at 0.85 opacity.
   The colored band grows upward as the variable animates. */
.tv-image-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to top,
        var(--tv-card-overlay, #315B47) 0%,
        var(--tv-card-overlay, #315B47) var(--tv-overlay-fill),
        transparent calc(var(--tv-overlay-fill) + 33%)
    );
    --tv-overlay-fill: 0%;
    opacity: 1;
    transition: --tv-overlay-fill .3s ease, opacity .3s ease;
    pointer-events: none;
}

.tv-image-card:hover .tv-image-card__overlay,
.tv-image-card:focus-visible .tv-image-card__overlay {
    --tv-overlay-fill: 100%;
    opacity: 0.85;
}

/* Title content — z-index 3, always visible */
.tv-image-card__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: var(--tv-space-6, 1.5rem);
    pointer-events: none;
}

/* Title positions (apply to the content layer) */
.tv-image-card--title-top .tv-image-card__content { justify-content: flex-start; }
.tv-image-card--title-middle .tv-image-card__content { justify-content: center; }
.tv-image-card--title-bottom .tv-image-card__content { justify-content: flex-end; }

/* Title alignment */
.tv-image-card--align-left .tv-image-card__content { text-align: left; }
.tv-image-card--align-center .tv-image-card__content { text-align: center; }
.tv-image-card--align-right .tv-image-card__content { text-align: right; }

/* Title — text-shadow ensures legibility against the image when overlay is hidden.
   Block class repeated to outweigh any heading rule defined upstream. */
.tv-image-card .tv-image-card__title {
    margin: 0;
    font-family: var(--tv-font-heading, 'Lexend Deca', sans-serif);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 600;
    color: var(--tv-card-title-color, #fff);
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* data_json info line — sits under the title. Same text-shadow as the title
   for legibility when the overlay is hidden. Elementor injects per-widget
   color/typography/spacing overrides via `info_*` controls. */
.tv-image-card__info {
    margin-top: 0.25rem;
    font-family: var(--tv-font-body, 'Work Sans', sans-serif);
    font-size: 0.875rem;
    color: var(--tv-card-title-color, #fff);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Arrow — z-index 3, fades in on hover/focus (paired with the overlay) */
.tv-image-card__arrow {
    position: absolute;
    top: var(--tv-space-3, 0.75rem);
    right: var(--tv-space-3, 0.75rem);
    z-index: 3;
    color: var(--tv-card-title-color, #fff);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}

.tv-image-card:hover .tv-image-card__arrow,
.tv-image-card:focus-visible .tv-image-card__arrow {
    opacity: 1;
}

/* Mobile: always show arrow for touch accessibility (matches overlay) */
@media (hover: none) {
    .tv-image-card__arrow {
        opacity: 1;
    }
}

/* Focus ring */
.tv-image-card:focus-visible {
    outline: 3px solid var(--tv-color-coral, #EE7160);
    outline-offset: 2px;
}