/*
 * file_name = bayer__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = CSS styles used by the main page dedicated to Bayer products
 *                
 * descripción = Hoja de estilo usada para la página principal dedicada a los productos de Bayer
 * 
 *
 *
 */

/*  These styles are for <div> elements on the Bayer paged that display products in an 
 *    approximately 3 x 3 grid that looks as follows:
 *
 *  Estos estilos son para elementos <div> en la página de Bayer que ponen en muestra productos
 *  en una tabla que tiene aproximadamente 3 x 3 casilla y se ve de esta manera:
 *
        <--    left column    ---><--   middle column   ---><--    right column    --->
      
--▲---   |-------------------------|-------------------------|-------------------------|
  h      |                         |                         |                         |
  e  r   |        header           |        header           |        header           |
  a  o   |         left            |        middle           |         right           |
  d  w   |        column           |        column           |        column           |
  e      |                         |                         |                         |
  r      |                         |                         |                         |
--▼----  |-------------------------|-------------------------|-------------------------|
  ▲      |                         |                         |                         |
         |                         |                         |                         |
  b  r   |         body            |         body            |         body            |
  o  o   |         left            |        middle           |         right           |
  d  w   |        column           |        column           |        column           |
  y      |                         |                         |                         |
         |                         |                         |                         |
         |                         |                         |                         |
         |                         |                         |                         |
         |                         |                         |                         |
--▼---   |-------------------------|-------------------------|-------------------------|


*/

/* Display layout for wide screens (laptops and workstations) 
   The content is displayed in 3 columns */
div.bayer__grid_container
{
                  display: grid                ;
      grid-template-areas: 
                          '     ct_header         hemodynamics_header         mri_header          '
                          '     ct_content        hemodynamics_content        mri_content         '
                          ;

    grid-template-columns: 1fr 1fr 1fr         ;
                   margin: 2rem 10% 2rem 10%   ;
}


div.ct_header
{
  grid-area: ct_header   ;
}


div.hemodynamics_header
{
  grid-area: hemodynamics_header   ;
}


div.mri_header
{
  grid-area: mri_header   ;
}


div.ct_content
{
  grid-area: ct_content   ;
}


div.hemodynamics_content
{
  grid-area: hemodynamics_content   ;
}


div.mri_content
{
  grid-area: mri_content   ;
}


div.accesories_content
{
  grid-area: accesories_content   ;
}




/* This is a common styles applied to all the <div> children elements of the main grid container div */
 div.bayer__grid_container > div
 {
         border: solid 2px #b8b894         ;
      font-size: 1.3rem                       ;
    font-weight: bold                         ;
        padding: 0.5rem 0.2rem 0.5rem 0.2rem  ;
 }


div.bayer__header
{
  background: #d6d6c2             ;
       color: #4d4d33             ;
}


div.bayer__content 
{
  background: #ebebe0                    ;
  color: #4d4d33                         ;
}


img.bayer__header_image
{
         margin: 0.5rem 1.25rem 1.25rem 1.25rem  ;
      min-width: 8rem   ;
          width: 70%    ;
}


div.bayer__figure
{
             border: solid 2px transparent  ; 
      border-radius: 0.5rem                   ;
            display: inline-block           ;
            padding: 0.5rem 1rem              ;
         text-align: center                 ;
         transition: 0.5s                   ;
}


div.bayer__figure:hover
{
       background: #d6d6c2               ;
           border: solid 2px #b8b894     ;
            color: black                 ;
           cursor: pointer                 ;
}


img.bayer__product_image
{
         border-radius: 0.5rem                   ;
                margin: 0.5rem auto              ;
            transition: 0.3s                     ;
}


div.bayer__figure:hover img.bayer__product_image
{
            box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
               opacity: 0.7                   ;
}

/* Thge PDF icon image is green to match the color scheme for this page  */
div.bayer__pdf_icon
{
         /* background: url('../productos/bayer/media/images/pdf__icon__green.png')   ; */
         background: url('/productos/bayer/media/images/pdf__icon__green.webp')   ;
    background-size: cover;
            display: inline-block                               ;
             height: 1.75rem                                    ;
     vertical-align: sub                                        ;  /* keeps the pdf icon aligne with text that preceeds are follows it */
              width: 1.75rem                                    ;
}


/* On mouseover, the PDF icon changes from a green to a red version  */
div.bayer__figure:hover > div.bayer__pdf_icon
{
         background: url('/productos/bayer/media/images/pdf__icon__red.webp');
    background-size: cover;
}


/* Display layout for narrower screens (tablets and smart phones)
   All the content is displayed in a single column, instead of 3 columns */
   @media only screen and (max-width: 550px)
   {
     div.bayer__grid_container
     {
                     display: grid                     ;
   
         grid-template-areas:
                             '     ct_header           '
                             '     ct_content          '
                             '  hemodynamics_header    '
                             '  hemodynamics_content   '
                             '     mri_header          '
                             '     mri_content         '
                                                       ;
   
       grid-template-columns: 1fr                      ;
                      margin: 2rem 10% 2rem 10%        ;
     }
   }