/* Ιδέες & Έμπνευση · /inspirations/ (partials/inspirations_grid.php)
   From template/Paleta_Inspirations_html_css_js, "για το site" part. Everything is scoped under .insp-page. */

.insp-vh {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0
}

.insp-page {
    --insp-fg: #2f2d2c;
    --insp-mut: #6d6965;
    --insp-line: #e6e1dc;
    --insp-soft: #f7f4f1;
    --insp-acc: #89181A;
    --insp-taupe: #b7ab9b;
    color: var(--insp-fg)
}

/* Full-width hero like the category banners: the page content sits inside .container > .col-12.my-4
   (includes/custom_articles.php), so break out to the viewport width, same as .insp-custom-banner on the detail page.
   The parent .main_divx_container has overflow:hidden, so 100vw causes no horizontal scroll. */
.insp-hero {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -25px
}

.insp-hero img {
    width: 100%;
    max-width: none;
    height: auto;
    display: block
}

@media(max-width:768px) {
    .insp-hero {
        margin-top: -22px
    }
}

.insp-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px
}

.insp-lead {
    text-align: center;
    max-width: 62ch;
    margin: 22px auto 8px;
    color: var(--insp-mut);
    font-size: 17px;
    line-height: 1.6
}

.insp-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 34px
}

.insp-chip {
    border: 1px solid var(--insp-line);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--insp-fg);
    text-decoration: none !important;
    background: #fff
}

.insp-chip:hover {
    border-color: var(--insp-acc);
    color: var(--insp-acc)
}

.insp-sec {
    text-align: center;
    font-weight: 500;
    letter-spacing: .16em;
    font-size: 15px;
    color: var(--insp-taupe);
    margin: 0 0 6px
}

.insp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
    padding-bottom: 60px
}

.insp-card {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    background: #fff;
    border: 1px solid var(--insp-line);
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    min-width: 0
}

.insp-card:hover {
    box-shadow: 0 10px 28px rgba(40, 30, 20, .12);
    transform: translateY(-2px)
}

.insp-ph {
    aspect-ratio: 4/3;
    overflow: hidden
}

.insp-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s
}

.insp-card:hover .insp-ph img {
    transform: scale(1.04)
}

.insp-tx {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1
}

.insp-tx h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--insp-fg)
}

.insp-tx p {
    margin: 0;
    color: var(--insp-mut);
    font-size: 14.5px;
    line-height: 1.6;
    flex: 1
}

/* margin-top:auto (template had 6px) keeps the link at the bottom when a card has no text */
.insp-go {
    margin-top: auto;
    padding-top: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--insp-acc)
}

.insp-go b {
    display: inline-block;
    transition: transform .2s
}

.insp-card:hover .insp-go b {
    transform: translateX(4px)
}

.insp-feat {
    grid-column: 1/-1;
    flex-direction: row
}

.insp-feat.insp-rev {
    flex-direction: row-reverse
}

.insp-feat .insp-ph {
    flex: 0 0 58%;
    aspect-ratio: 16/10
}

.insp-feat .insp-tx {
    padding: 34px 38px;
    justify-content: center;
    background: var(--insp-soft)
}

.insp-feat .insp-go {
    margin-top: 6px
}

.insp-feat h3 {
    font-size: 30px
}

.insp-feat p {
    font-size: 16px;
    flex: none
}

.insp-season {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #fff;
    background: var(--insp-acc);
    padding: 3px 9px;
    border-radius: 3px
}

/* not in the template: card without a cover image, empty page */
.insp-ph-empty {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: var(--insp-soft);
    color: var(--insp-taupe);
    font-size: 42px
}

.insp-empty {
    text-align: center;
    color: var(--insp-mut);
    padding: 40px 0 60px
}

@media(max-width:980px) {
    .insp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:640px) {
    .insp-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px
    }

    .insp-feat,
    .insp-feat.insp-rev {
        flex-direction: column
    }

    .insp-feat .insp-ph {
        flex: none;
        aspect-ratio: 4/3
    }

    .insp-feat .insp-tx {
        padding: 20px
    }

    .insp-feat h3 {
        font-size: 22px
    }

    .insp-lead {
        font-size: 15px
    }

    .insp-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 6px
    }

    .insp-chip {
        white-space: nowrap
    }
}

@media(prefers-reduced-motion:reduce) {

    .insp-card,
    .insp-ph img,
    .insp-go b {
        transition: none
    }
}

/* Behaviour from inspirations_grid.js */
.insp-chip.is-active {
    border-color: var(--insp-acc);
    background: var(--insp-acc);
    color: #fff
}

.insp-card.is-target {
    box-shadow: 0 0 0 3px rgba(137, 24, 26, .35), 0 10px 28px rgba(40, 30, 20, .12)
}

.insp-card {
    scroll-margin-top: 90px
}