@use "../abstracts/mixins.scss" as *;

[data-page="species-single"]{
    .page-header{
        --w-fig: 320px;
        padding-bottom: calc(var(--spacing)*0.5);
    
        .page-header__inner{
            display: grid;
            grid-template-columns: var(--w-fig) 1fr;
            grid-column-gap: var(--padding-body);
           
        
        }

         .link-back{
               grid-column: 1;
                  grid-row: 1;
                text-align: left;
                position: relative;
                top: calc(var(--spacing)*-1);
                a{  
                    color: var(--color-green)!important;

                }
              
                padding-left: 1.5ch;

            }

      
        figure, picture{
            border-radius: var(--radius-img);
            grid-column: 1;
            grid-row: 2/4;
            @include fig-ratio(1/1);
        }

        .group-title{
            grid-column: 2;
            grid-row: 2;
            align-self: start;
            padding-top: calc(var(--spacing)*0.5);
            padding-bottom: calc(var(--spacing)*1);
        }

         .saviez-vous{
            grid-column: 2;
            grid-row: 3;
             align-self: start;
        }



        .page-title{
            margin: 0; 
        }

        .latin{
            font-size: var(--fs-medium);
        }

        .saviez-vous__title{
            font-size: var(--fs-normal);
            font-weight: 700;
            margin-bottom: calc(var(--spacing)*0.5);
        }

        .saviez-vous__description{
            font-size: var(--fs-medium);
        }

        .btn--group{
       
            grid-column: span 2;
            display: flex;
            justify-content: right;
            gap: var(--padding-inner);
            position: relative;
            top: calc(var(--spacing)*-1);
           
        }


    }

    .page-content .group-section{
        display: grid;
        grid-gap: var(--padding-body);
        grid-template-columns: 1fr 1fr;
     
    }




}





[data-page="species-single"]{


.page-content{


    section:not(#photos){
        padding-top: var(--top-target);
    }

    .section-title{
          @include title-bg(violet);
    }

    #description  .section-title{ @include title-bg(orange); }
    #ecologie  .section-title{ @include title-bg(violet); }
    #floraison-et-fructuation .section-title{ @include title-bg(green); }
    #repartition .section-title{ @include title-bg(yellow); }




    dl{
        
        display: grid;
        grid-template-columns: 14ch 1fr;
        border-bottom: 1px solid var(--color-orange-light);
        &:first-of-type{
            border-top: 1px solid var(--color-orange-light);
        }
        padding: calc(var(--spacing)*0.75);
        

        dt{
            color: var(--color-orange);
            text-transform: uppercase;
            font-size: var(--fs-normal);
            font-weight: 700;
            letter-spacing: 0.01rem;
            margin-bottom: calc(var(--spacing)*0.5);
            padding-right: var(--padding-inner);
        }

    }

    #ecologie dl{
        border-color: var(--color-violet-light);
        dt{ color: var(--color-violet) }
    }


    #repartition{
        picture, figure{
            background-color: var(--color-yellow);
            img{
                display: flex;
                mix-blend-mode: screen;
                filter: grayscale(1);
            }
        }
    }


    .statut-group{
        .caption{
            font-size: var(--fs-small);
            margin: 0;
            font-weight: 600;
                    margin-bottom: calc(var(--spacing)*0.5);
        }

        .statut{
            display: flex;
            align-items: center;
            gap: 1ch;
            margin: 0;
        }

        .statut-signe{
            color: var(--color-yellow);
            border: 2px solid var(--color-yellow-medium);
            background-color: var(--color-yellow-light);
            display: inline;
            margin: 0;
            border-radius: var(--radius-btn);
            padding: 2px 0.5ch;
            font-weight: 800;
            font-size: var(--fs-small);
        
        }

    }

    #credits{
        font-size: var(--fs-normal);
        .title{
            font-weight: 700;
        }
    }
 
    
}





    .section-photos{
        display: flex;
        // flex-wrap: wrap;
        gap: var(--padding-inner);
        width: 100%;
        

        figure{
            // flex-grow: skrink;
            min-width: 180px;
            max-width: 280px;
            @include fig-ratio(1/1);
        }

        figcaption{
            font-size: var(--fs-normal);
            font-weight: 700;
            text-align: center;
            margin-top: calc(var(--spacing)*0.25);
        }

      

        .credits{
            display: none;
        }
    }



}