/* =====================================================
   PEDIGREE 4 GENERATION
   Horizontal pedigree poster
===================================================== */


/* ????? ????????? */

.pedigree-container{

    width:100%;
    max-width:1600px;

    margin:0 auto;

    padding:30px 15px;

    box-sizing:border-box;

}



/* ??? ?????? */

.pedigree-tree{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:45px;
 background:
        radial-gradient(circle at top left,
            rgba(212,175,55,.08),
            transparent 40%),
        radial-gradient(circle at bottom right,
            rgba(184,134,11,.06),
            transparent 45%),
        linear-gradient(#fffefb,#faf6ec);

    border:1px solid #e5d19a;

    border-radius:18px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.08);}

/* ?????? */

.level{

    display:flex;

    align-items:center;

    position:relative;

}

/* ????????? ??????? ??? ???????? */

.ped-role{

    display:none;

}



/* =====================================================
   ????????
===================================================== */


.ped-card{

    width:120px;

    padding:8px;

    background:#fff;

    border:1px solid #d4af37;

    border-radius:10px;

    box-sizing:border-box;

    text-align:center;

    position:relative;

    box-shadow:0 3px 10px rgba(0,0,0,.12);

}




.ped-card img{

    width:100px;

    max-width:100%;

    height:auto;

    display:block;

    margin:0 auto 8px;

    border-radius:6px;

}




.ped-card h3{

    margin:5px 0;

    font-size:10px;

    line-height:1.3;

    color:#6b4f1d;

}



.ped-card p{

    margin:0;

    font-size:12px;

    color:#666;

}





.main-card{

    width:160px;

    border:2px solid #b8860b;

}




.small{

    width:140px;

}







/* =====================================================
   ?????????
===================================================== */



/* ???? ? ???? */

.couple{

    display:flex;

    flex-direction:column;

    gap:45px;

    position:relative;

}






/* 3 ????????? */

.level3{

    display:flex;

    flex-direction:column;

    gap:35px;

}






/* ???? ?????? + ??? ???????? */

.ancestor{

    display:grid;

    grid-template-columns:170px 160px;

    column-gap:50px;

    align-items:center;

    position:relative;

}




/* ???????? ?????? */

.great{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:20px;

    position:relative;

}







/* =====================================================
   ??????? ?????
===================================================== */



/* ????? ????? ????????? ????????? */

.level:not(:last-child)::after{

    content:"";

    position:absolute;

    right:-45px;

    top:50%;

    width:45px;

    height:2px;

    background:#d4af37;

}






/* ????? ?? ????/????? ? ?? ????????? */

.ancestor::after{

    content:"";

    position:absolute;

    right:-50px;

    top:50%;

    width:50px;

    height:2px;

    background:#d4af37;

}






/* ???????????? ????? ????? ???????? ? ????????? */

.great::before{

    content:"";

    position:absolute;

    left:-20px;

    top:25%;

    bottom:25%;

    width:2px;

    background:#d4af37;

}







/* ???????? ????? ? ??????? ? ???????? */

.great .ped-card::before{

    content:"";

    position:absolute;

    left:-20px;

    top:50%;

    width:20px;

    height:2px;

    background:#d4af37;

}







/* =====================================================
   ?????:
   ????????????? ????? ?? 4 ??????
===================================================== */


/* ??? ??????????? ????? ???????? */

.great .ped-card::after{

    content:none;

}







/* =====================================================
   MOBILE PEDIGREE
   Vertical family tree
===================================================== */

@media (max-width:768px){


.pedigree-container{

    padding:15px;

}



/* main tree */

.pedigree-tree{

    display:block;

    width:100%;

    background:#fffef8;

    border-radius:15px;

}





/* hide desktop connection lines */

.level::before,
.level::after,
.ancestor::before,
.ancestor::after,
.great::before,
.great::after,
.ped-card::before,
.ped-card::after{

    display:none !important;

}





/* vertical generations */

.level{

    display:block;

    margin-bottom:25px;

}




/* hide main dog label */

.level1 .ped-role{

    display:none;

}



/* hide main dog card title */

.level1 h3{

    display:none;

}



/* main dog photo */

.level1 .ped-card{

    border:none;

    box-shadow:none;

}






/* parents block */

.couple{

    display:block;

}





/* ancestor branch */

.ancestor{

    display:block;

    margin:20px 0;

    padding-left:20px;

    border-left:3px solid #d4af37;

}






/* parent cards */

.couple .ped-card{

    margin-bottom:25px;

}






/* grandparents */

.ancestor > .ped-card{

    margin-bottom:15px;

}






/* great grandparents */

.great{

    display:block;

    margin-left:20px;

    padding-left:18px;

    border-left:2px solid #e2c15b;

}







/* all cards */

.ped-card,
.main-card,
.small{

    width:100%;

    max-width:330px;

    margin-left:auto;

    margin-right:auto;

}





/* images */

.ped-card img{

    width:150px;

    height:auto;

    display:block;

    margin:0 auto 10px;

}






/* relationship labels */

.ped-role{

    display:block;

    font-size:11px;

    font-weight:bold;

    color:#8b6b15;

    text-transform:uppercase;

    margin-bottom:8px;

    letter-spacing:.05em;

}






/* dog names */

.ped-card h3{

    font-size:14px;

    line-height:1.35;

    margin:5px 0;

}





}