/*
 * Home / Inside Italian Design sparse-result presentation.
 *
 * Elementor continues to own the Loop Grid columns/gaps and the query continues
 * to own membership/order. This companion layer only adapts the accepted Home
 * editorial card presentation when the feed contains one or two results.
 */

/* Elementor injects a <style> element as the first child of the Loop container.
 * Count Loop Item divs by type instead of by raw child position, otherwise the
 * single-result card is structurally the second child and sparse selectors do
 * not describe the actual number of rendered cards. */

/* Desktop: a single featured result keeps the normal featured half-row width,
 * but occupies the middle two tracks instead of sticking to the left edge of
 * the canonical four-column Loop Grid. */
@media (min-width: 1025px) {
    .wwts-home-idem-grid .elementor-loop-container:has(> .e-loop-item:only-of-type) > .e-loop-item:only-of-type {
        grid-column: 2 / span 2;
    }
}

/* With exactly two results, both cards are editorial-featured cards. The first
 * already spans two tracks through home-idem-editorial.css; make the second use
 * the remaining two tracks instead of the normal one-track small-card slot. */
@media (min-width: 768px) {
    .wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type {
        grid-column: span 2;
    }
}

/* On the accepted two-column tablet grid each large card becomes a complete
 * row. This matches the existing tablet treatment of the first featured item. */
@media (min-width: 768px) and (max-width: 1024px) {
    .wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type {
        grid-column: 1 / -1;
    }
}

/* Exactly-two feed: promote the second result from the normal compact card to
 * the same large overlay presentation as result #1. These rules intentionally
 * come after home-idem-editorial.css so they can reverse its small-card-only
 * media/footer/shadow rules without changing the 3+ result layout. */
.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card {
    aspect-ratio: 16 / 10;
    background: #1e1b17;
    box-shadow: var(--wwts-card-shadow);
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card:hover,
.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card:focus-within {
    box-shadow: var(--wwts-card-shadow-hover);
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    aspect-ratio: auto;
    border-radius: var(--wwts-card-radius);
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__image,
.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__image > .elementor-widget-container,
.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__image a {
    width: 100% !important;
    height: 100% !important;
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center;
    border-radius: var(--wwts-card-radius);
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(30, 27, 23, 0) 28%,
        rgba(30, 27, 23, 0.12) 48%,
        rgba(30, 27, 23, 0.88) 100%
    );
    pointer-events: none;
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid !important;
    box-sizing: border-box;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    margin: 0 !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-content: end !important;
    align-items: end;
    column-gap: 24px;
    row-gap: 10px;
    padding: 24px 24px 22px !important;
    border-radius: inherit;
    background: transparent !important;
    color: #fff;
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__title {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    align-self: end;
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-card.wwts-home-inside-card .wwts-card__title .elementor-heading-title {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;
    color: #fff !important;
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__description {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    align-self: end;
    margin-top: 0 !important;
    color: rgba(255, 255, 255, 0.92);
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__footer {
    display: flex !important;
    grid-column: 2;
    grid-row: 2;
    width: auto !important;
    align-self: end;
    justify-self: end;
    margin: 0 !important;
    padding: 0 !important;
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__footer::before {
    display: none;
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__cta,
.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__cta > .elementor-widget-container,
.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__cta .elementor-button {
    width: auto !important;
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__cta .elementor-button {
    justify-content: flex-end;
    gap: 0;
    white-space: nowrap;
    color: #fff !important;
}

.wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__cta .elementor-button::after {
    display: none;
}

@media (max-width: 1024px) {
    .wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__body {
        column-gap: 18px;
        padding: 20px !important;
    }

    .wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-card.wwts-home-inside-card .wwts-card__title .elementor-heading-title {
        font-size: 32px !important;
    }
}

@media (max-width: 767px) {
    .wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card {
        aspect-ratio: 4 / 3;
    }

    .wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        row-gap: 9px;
        padding: 18px !important;
    }

    .wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-card.wwts-home-inside-card .wwts-card__title .elementor-heading-title {
        font-size: 28px !important;
    }

    .wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__description {
        grid-column: 1;
        grid-row: 2;
    }

    .wwts-home-idem-grid .elementor-loop-container > .e-loop-item:nth-of-type(2):last-of-type .wwts-home-inside-card .wwts-card__footer {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
    }
}