/* ==========================================================
   Artizio Process Widget — Frontend Styles
   ========================================================== */

.artizio-process,
.artizio-process * {
    box-sizing: border-box;
}

.artizio-process {
    width: 100%;
    background: transparent;
    color: #2c2220;
}

/* ==========================================================
   Grid layout — 3 rows so all text areas + dividers + images
   align across cards (subgrid). Equal-height text guaranteed.
   ========================================================== */
.artizio-process .process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;  /* text | divider | image */
    column-gap: 24px;
    row-gap: 0;
    width: 100%;
}

/* ==========================================================
   Card — single rounded container, beige all the way through.
   Image sits flush at the bottom. NO white gap anywhere.
   ========================================================== */
.artizio-process .process-item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    border: 1px solid #caa97f;
    border-radius: 24px;
    overflow: hidden;
    background-color: #f5e9d8;
    line-height: 0;  /* kills any inline whitespace inside */
}

/* If divider is disabled, collapse to 2-row layout */
.artizio-process .process-grid:not(:has(.process-item__divider)) {
    grid-template-rows: auto 1fr;
}
.artizio-process .process-grid:not(:has(.process-item__divider)) .process-item {
    grid-row: span 2;
}

/* ----- Text region ----- */
.artizio-process .process-item__text {
    padding: 28px;
    line-height: normal;  /* restore normal line-height for text */
    background-color: #f5e9d8;
}

.artizio-process .process-item__text h3 {
    font-family: "EB Garamond", Georgia, serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #2c2220;
}

.artizio-process .process-item__text p {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    color: #4b4540;
}

/* ----- Divider — flush 1px line, no spacing ----- */
.artizio-process .process-item__divider {
    width: 100%;
    height: 1px;
    background-color: #caa97f;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    font-size: 0;
    line-height: 0;
}

/* ----- Image region — flush against text/divider, no gap ----- */
.artizio-process .process-item__image {
    width: 100%;
    height: 380px;
    overflow: hidden;
    margin-top: -20px;  /* pulls image up to eliminate any residual gap */
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    display: block;
    position: relative;
    z-index: 1;
}

.artizio-process .process-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;  /* removes any baseline gap under inline images */
}

/* ==========================================================
   Fallback for browsers without subgrid support
   ========================================================== */
@supports not (grid-template-rows: subgrid) {
    .artizio-process .process-item {
        display: flex;
        flex-direction: column;
    }
    .artizio-process .process-item__text {
        flex: 1 0 auto;
    }
    .artizio-process .process-item__divider,
    .artizio-process .process-item__image {
        flex-shrink: 0;
    }
    .artizio-process .process-grid {
        grid-template-rows: auto;
        align-items: stretch;
    }
}

/* ==========================================================
   Responsive — Tablet
   ========================================================== */
@media (max-width: 1024px) {
    .artizio-process .process-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 30px;
    }
    .artizio-process .process-item__image {
        height: 320px;
    }
}

/* ==========================================================
   Responsive — Mobile
   ========================================================== */
@media (max-width: 767px) {
    .artizio-process .process-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    /* Restore vertical spacing between cards on mobile */
    .artizio-process .process-grid > .process-item + .process-item {
        margin-top: 28px;
    }
    .artizio-process .process-item {
        border-radius: 20px;
    }
    .artizio-process .process-item__text {
        padding: 22px;
    }
    .artizio-process .process-item__text h3 {
        font-size: 22px;
    }
    .artizio-process .process-item__image {
        height: 260px;
    }
}