/*  CSS edermconsult.com, wind 2026  */

/*
---------------------------------------------------
------ GP.css -------------------------------------
---------------------------------------------------
*/

section.feat-panel  {
    display: grid;
    grid-template-areas:
        "crumbs crumbs"
        "feat-text picture";
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    max-width: unset;
    padding: 0;

    .breadcrumbs  { grid-area: crumbs; }
    .eyebrow  { padding-top: 0.5rem; }
    .wrapper-col  { grid-area: feat-text; }
/* 
# a1 architecture of GP/pat section feat-panel

┌──section.featpanel───────────────────────────────┐
│ ┌──.breadcrumbs────────────────────────────────┐ │ 
│ |                                              | |
│ └──────────────────────────────────────────────┘ |
│ ┌──.wrapper-col─────────────┐ ┌─.picture-right─┐ │
│ │  ┌── .eyebrow ──────────┐ | |                │ │
│ |  └──────────────────────┘ | |                │ │
│ │  ┌── h1 ────────────────┐ | |                │ │
│ |  └──────────────────────┘ | |                │ │
│ │  ┌── h3 ────────────────┐ | |                │ │
│ |  └──────────────────────┘ | |                │ │
│ │  ┌── p.lead ────────────┐ | └────────────────┘ │
│ |  └──────────────────────┘ |                    |
│ │  ┌── p.lead ────────────┐ |                    |
│ |  └──────────────────────┘ |                    |
│ └───────────────────────────┘                    |
└──────────────────────────────────────────────────┘

*/

    .picture-right  {
        grid-area: picture;
        border-radius: 8px;
        border: 1px solid var(--border-500);
        min-width: 19rem;
        min-height: 19rem;
        margin-left: 2rem;
        background-image: url("../pix/vibe_pat_stretching.png");
        background-repeat: no-repeat; 
        background-attachment: local;
        background-position: left bottom;
        background-size: cover; 
        border-top-right-radius: 0.8rem;
        border-bottom-right-radius: 0.8rem;
        overflow: hidden;
    }
}


.wrapper#td section, .wrapper#d2p section  {
    display: grid;
    grid-template-areas:
        "text aside";
    grid-template-columns: 2.3fr 0.9fr;
    gap: 2rem;

    h2  { 
        display: flex;
        flex-direction: row;
        align-items: flex-start; 
    }

    .badge  {
        padding: .22rem .34rem .27rem;
        align-items: flex-start;
        justify-content: flex-start;
        margin-left: 5px;
        font-size: .77rem;
        line-height: .8rem;
    }

    aside  {
        padding-left: 2rem;

        .bold  {
            font-weight: 600;
            color: var(--ink-700);
        }

        p  {
            margin-top: 0.3rem;
            color: var(--ink-500);
            line-height: 1.1rem;
            font-size: 0.9rem;
            text-align: left;
        }

        .block + .block  {
            margin-top: 1rem;
        }
    }

    aside.d2p  { margin-top: 1rem; }
}

.wrapper#td   {
    aside  { border-left: 2px solid var(--border-blue); }
}

.wrapper#d2p  {
    aside { border-left: 2px solid var(--d2p-green); }
}

.band.picture  {
    display: flex;
    width: 100%;
    height: 274px;
    margin: 0;
    padding: 0;
    background-color: #7d7672;

    .bg-pic  {
        /* info: container query sits in queries.css */
        display: flex;
        flex: 0 1 auto;
        min-height: 272px;
        width: 1480px; 
        max-height: 272px;
        background-image: url("../pix/vibe_pat_red-hair.png");
        background-repeat: no-repeat; 
        background-attachment: local;
        background-position: center center;
        background-size: cover;
        background-color: var(--picture-band-bg);
        overflow: hidden;
    }
}


.wrapper#bottomcards  {
    h2.header, h3.header  { align-self: center; }
    .folding  { gap: 1rem; }

    .card {  
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        align-self: unset;
        border-radius: 0.5rem;
        padding: 0;
        width: 50%;
        font-family: var(--tiktok);
        font-size: 1rem;
        font-weight: 400;
        border: 1px solid var(--card-border);
        background-color: var(--card-on-band);
        line-height: .9;

        .eyebrow  { margin: 1.5rem 2.7rem 0.6rem; }

        h2  {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            margin: 0 2.5rem;
            font-size: 1.5rem;

            .badge  {
                align-items: flex-start;
                justify-content: flex-start;
                padding: .22rem .34rem .27rem;
                margin: 0;
                margin-left: 8px;
                font-size: .77rem;
                line-height: .8rem;
            }
        }

        .p-wrapper  {
            width: 100%;
            flex: 1 1 auto;
            margin-top: 0.8rem;
            border-top: 1px solid var(--border-100);
            background-color: var(--card-on-page);

            p  {
                text-align: justify;
                padding: 1rem 0;
                margin: 0 2.5rem;
                line-height: 1.2rem;
            }
        }

        .link-wrapper  {
            display: flex;
            align-self: stretch;
            justify-content: center;
            padding: 1.4rem;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            background-color: var(--card-on-band);
            border-top: 1px solid var(--border-100);

            a  { text-decoration: none; }

            a.button.d2p  {
                color: var(--green-ink-500);
            }

            a.button.d2p:hover  {
                color: var(--white-ink-900);
            }
        }
    }
}

/* 
------------------------------------------ 
# b1 QUERY wrapper width
------------------------------------------ 
*/

.wrapper#feat-panel  {
    container-type: inline-size;
    container-name: wrapper-feat;
}

@container wrapper-feat (width > 540px) {
    .spacer_div  { border-top: 0; }
}

@container wrapper-feat (width <= 540px) {
    .spacer_div  { border-top: 1px solid var(--border-100);  }
} 

@container wrapper-feat (width <= 700px) {
    section.feat-panel {
        grid-template-areas:
        "crumbs"
        "feat-text";
        grid-template-columns: 1fr;
        gap: 1rem;

        .eyebrow  {
            padding-top: 0;
        }

        .lead  {
            grid-area: feat-text;
        }

        .picture-right  {
            display: none;
        }
    }
} 

.wrapper#d2p, .wrapper#td  {
    container-type: inline-size;
    container-name: wrapperD;
}

@container wrapperD (width <= 700px) {
    .wrapper#td section, .wrapper#d2p section  {
        grid-template-areas:
            "one";
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.wrapper#bottomcards  {
    container-type: inline-size;
    container-name: wrapperBottom;
}

@container wrapperBottom (width <= 700px) {
    .wrapper#bottomcards .folding {
        flex-direction: column;
        padding: 0;
        .card  { width: 100%; }
    }
}