/*
 * file_name = jaeger__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = CSS styles used by the webpages dedicated to Jaeger products
 *                
 * descripción = Hoja de estilo usada para la páginas web dedicadas a los productos de Jaeger
 *
 */

div.jaeger__product_category_title
{
  background-image: linear-gradient(transparent, rgb(233, 242, 252, 0.9) );
             color: #333333         ;
         font-size: 1.9rem            ;
       font-weight: bold              ;
            height: 2rem              ;
           padding: 1rem 0.5rem 5rem 0.5rem   ;

} 


/* Display layout for wide screens (laptops and workstations) 
   The content will typicall display in 2 columns, with one product per column */
div.jaeger__products_container
{
            /* vertically align children elements to top of this container div */
            align-items: flex-start;
             /* background:  coral; */
       background-image: linear-gradient( rgb(233, 242, 252, 1) 35% , rgb(233, 242, 252, 0.4) 60% , rgb(233, 242, 252, 1));
                display: grid     ;
        grid-column-gap: 2rem     ;
           grid-row-gap: 3rem     ;
  grid-template-columns: repeat(auto-fit, minmax(44ch, 1fr));
        justify-content: center                ;
                 margin: 0rem auto 0rem auto   ;
                padding: 0rem max(1rem, 5%) 2rem max(1rem, 5%)       ;
                  width: 100%                  ;

           /* grid-auto-rows: 1fr; */

}


/* Display layout for wide screens (laptops and workstations) */
div.jaeger__product
{
            /* vertically align children elements to top of this container div */
            align-items: stretch;
               /* background: lightyellow; */
       background-image: radial-gradient(white 0%, rgb(228, 239, 253) ); 
                 /* border: solid 3px rgb(228, 237, 253); */
                 border: solid 3px rgb(211, 224, 245, 0.7);
          border-radius: 1rem              ;
                display: grid              ;
                
    grid-template-areas: 
                        '      product_item__name__container          product_item__name__container        '
                        '             product_image                         product_info_files             '
                        '   product_item__description__container    product_item__description__container   '
                        ;

  grid-template-columns: 2.5fr 1fr                 ;
     grid-template-rows: min-content min-content   ;
                 height: 100%                      ;
                padding: 1rem 1rem 2rem 2rem       ;
}


div.jaeger__product_item__name__container
{
     /* background: lightgreen         ; */
          color: #1F497D            ;
      font-size: 1.7rem               ;
    font-weight: bold                 ;
      grid-area: product_item__name__container         ;
         margin: 1rem 2rem 3rem 2rem  ;
}


span.jaeger__product_subtitle
{
          color: #1F497D        ; 
        display: block            ;
      font-size: 1.2rem             ;
    font-weight: bold             ;
    margin: 0.5rem 0rem 0rem 0rem   ;
}


div.jaeger_product_image
{
      align-items: flex-start;
       /* background: lightpink     ; */
           /* border: solid 2px green; */
          display: flex            ;
        grid-area: product_image   ;
  justify-content: center          ;
}


img.jaeger_product_image
{
        display: block        ;
         margin: 0px auto     ;
          width: 90%          ;
     /* max-height: 14rem        ; */
      /* max-width: 90%          ; */
}


div.jaeger__product_item__description__container
{
  /* background: azure               ; */
  /* border: solid 1px gray; */
       display: flex                                   ;
  justify-self: center                                 ;
     flex-flow: column                                 ;
     grid-area: product_item__description__container   ;
     font-size: 1.2rem                                 ;
     max-width: 45ch                                   ;
       padding: 0.75rem 0.75rem 0.75rem 0rem           ;
    text-align: left                                   ;
}


/* PDF icon */
img.product__info_file__button_icon
{
       filter: grayscale(60%);
       opacity: 0.6;
       filter: hue-rotate(240deg);
}


div.product_item__info_files__container
{
       /* background: yellow             ; */
          display: flex                 ;
   flex-direction: column               ;
        grid-area: product_info_files   ;
  justify-content: flex-start           ;
}


a.product__info_file__button:hover img.product__info_file__button_icon
{
  filter: grayscale(0%);
  opacity: 1;
}


/* Contains and image of Debene's contact email address (info@debene.com)  */
div.jaeger__debene_contact_information
{
       align-items: center      ;
             color: #1F497D   ;
  background-image: linear-gradient(rgb(233, 242, 252, 0.9) , transparent );
           display: flex        ; 
    flex-direction: column      ;
         font-size: 1.1rem      ;
       font-weight: bold        ;
   justify-content: center      ;
           padding: 2rem 2rem   ;
}



/*==============================================================*/
/*                                                              */
/*                   M E D I A   Q U E R I E S                  */
/*                                                              */
/*==============================================================*/

/* 
  Display layout for narrower screens (tablets and smart phones).
  All the content is stacked vertically and displayed in a single column.
*/
@media only screen and (max-width: 550px)
{
  div.jaeger__product
  {
            align-content: center                   ;

      grid-template-areas:
                          '     product_item__name__container        '
                          '            product_image                 '
                          '   product_item__description__container   '
                          '          product_info_files              '
                          ;
    grid-template-columns: 1fr                      ;
                   margin: 0rem 2rem 0rem 2rem      ;
  }
}