/*
 * file_name = supplier__product_list__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = this file contains the  CSS styles used for the supplier pages
 *               where products are listed. The CSS classes organize the information related
 *               to product names, product description, product images, brochures and catalogs 
 *
 * descripción = este archivo contiene los estilo CSS usados para las paginas de los provedores
 *               donde aparecen listados sus productos. Las clases CSS organizan la información
 *               relacionada a los nombres de los productos, sus descripciones, imágenes, folletos 
 *               y catálogos
 *
 */

/***********************************************************************
*                                                                      *
*                         PRODUCT PAGES                                *
*                                                                      *
*                PAGINAS CON LISTADO DE PRODUCTOS                      *
*                                                                      *
***********************************************************************/


/*
  Style used only for Novatech product pages for text at the top of the page
  that shows what area these products belong to, e.g. 'Cirugía Torácica ➜ Accessorios'
  
  Estilo usado unicamente para las páginas con los productos Novatech para el texto
  en la parte superior de la página que muestra a que area pertenecen estos productos,
  p.e. 'Cirugía Torácica ➜ Accessorios'
*/
div.product_area__container
{
  width: 100%   ;
}


div.product_area
{
          color: #1F497D            ;
        display: block                ;
      font-size: 1.1rem               ;
    font-weight: bold                 ;
         margin: 1rem 0rem 0rem 10%   ;
        padding: 5px                  ;
     text-align: left                 ;
}


/* 
   Styles used to list individual products within a vertical list.
   These styles allow for the display of a product image, product description, and a PDF brochure
   It is on pages such as ~htdocs/productos/balt/balt__neuroradiology__aneurysm_treatment.html
   
   Estilos usados para una lista vertical de productos.
   Estos estilos permiten visualizar una imagen del producto, su descripción, y un folleto PDF.  
   Es usadon en páginas tales como ~htdocs/productos/balt/balt__neuroradiology__aneurysm_treatment.html
*/

div.product_line
{
    /* background: sienna              ; */
        margin: 1rem auto 2rem auto   ;
         width: 90%                   ;
}


/* styles common to both the header row of the product list
   and the product item rows */
div.medxpert__product_item   ,
div.product_line__header     ,
div.product_item
{
       background: #ecf0f8                   ;
    border-radius: 0.75rem                     ;
           border: #c6d1eb solid 2px         ;
           margin: 1rem auto                   ;
           padding: 0.50rem 0rem 0.5rem 0rem   ;
            width: 90%                         ;
}


/*
  This row is at the top of the product list and contains the name of the product line,
   e.g. 'Catéteres Balón Intra Aórticos'. It also holds an image representing/symbolizing 
   the product line, and a link to the complete catalog.
*/
div.product_line__header
{
             background: #dae2f1         ;
                display: grid              ;
    grid-template-areas: 
                        '   product_line__images__container   product_line__title__container   product_line__info_files__container   '
                        '   product_line__images__container    product_line__category_image    product_line__info_files__container   '
                        ;
  grid-template-columns: 1.5fr 3.5fr 1.5fr       ;
}


/*  When a product line header appears in the middle of a list, i.e, after a product_item, 
use a larger top margin to clearly separate one section of products from the next */
div.product_item + div.product_line__header
{
  margin-top: 2.5rem;
}


div.product_line__images__container
{ 
        align-items: center                            ;
            display: flex                              ;
          grid-area: product_line__images__container   ;
    justify-content: center                            ;
}


div.product_line__title__container
{
  display: flex                              ;
align-items: center;
justify-self: center;
  grid-area: product_line__title__container       ;
    padding: 1rem                                 ;
}

/* <div> used on the top row to display the Title of the entire product line
   e.g. 'GSS Stents' or 'Bronchoscopy Instruments'                            */      
   div.product_line__title
{
               background: #FAFAFA                 ;
                    color: #496983                 ;
                   border: outset 2px #8da8bf      ;
                  display: inline-block              ;
                font-size: 1.4rem                    ;
              font-weight: 800                       ;
                   margin: 0.5rem 0rem               ;
                  padding: 0.2rem 1rem               ;
               text-align: center                    ;
}


div.product_line__category_image
{ 
       /* Prevents child image from distorting when the row height changes. The row height increases
          temporarily when the catalog PDF is hovered on */
       align-self: center                         ;
       /* background: aquamarine                   ; */
          display: flex                           ;
  justify-content: center                         ;
        grid-area: product_line__category_image   ;
}


div.product_line__info_files__container
{
      align-items: center                                ;
       /* background: mistyrose                           ; */
          display: flex                                  ;
   flex-direction: column                                ;
        grid-area: product_line__info_files__container   ;
}


/* Display layout for wide screens (laptops and workstations) */
div.product_item
{
            align-items: start       ;
                display: grid        ;
    grid-template-areas: 
    '   product_item__images__container       product_item__name__container      product_item__info_files__container   '
    '   product_item__images__container   product_item__description__container   product_item__info_files__container   '
    ;

    grid-template-columns: 2fr 2.8fr 1fr   ;
       grid-template-rows: auto 1fr      ;
}


/* 
  Image used on the first/header row of the list of products to symbolize the entire
  product line.
  Imágen usada en el primer renglón / renglón de cabecera de la lista de productos. 
  La imágen simboliza/representa toda la línea de productos.
*/  
img.product_category
{
  border-radius: 0.5rem                  ;
        display: block                   ;
         margin: 0.5rem auto 1rem auto   ;
     max-height: 12rem                   ;
      max-width: 10rem                   ;
}


div.product_item__images__container
{
    align-items: center          ;
  /* background: mistyrose    ;  */
         display: flex           ;
  flex-direction: column         ;
       font-size: 0.8rem         ;
       grid-area: product_item__images__container   ;
       min-width: 10rem          ;
}


div.product_image__container
{
    align-items: center         ;
     /* background: aquamarine   ; */
   justify-self: center;
     text-align: center         ;
}


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


/* used for an optional caption under a product image */
div.product_image__caption
{
   font-size: 0.9rem                ;
      margin: 0rem auto 0.5rem auto   ;
  text-align: center                ;
       width: 90%                   ;
}



/*  
    CSS Classes used to display video preview images/thumbnails with a 'play video' icon overlay.
    It also includes and optional text caption for the video preview image.

    Classes de CSS usadas para mostrar estampillase de la vista previa de videos con un icono para iniciar 
    el video sobrepuesto a la imágen.  Tambien incluye una leyenda opcional para la imagén previa del video.
*/

div.product_item__video
{
  /* background: tomato; */
   max-width: 90%        ;
   min-width: 6rem       ;
}


/* 
   For this element the display cannot be left as the default 'inline',
   otherwise the icon overlay does not position correctly.
   'display: flex' or 'display: block' are values that work well
*/
a.product_item__video__link
{ 
    /* align-content: center      ; */
       /* background: yellow    ; */
          display:block        ;
  /* justify-content: center      ; */
         position: relative    ;
}


img.product_item__video__preview_thumbnail
{
     /* white with a 50% opacity/transparency */
     background: rgba(255, 255, 255, 0.75)   ;
  border-radius: 0.5rem                        ;
     transition: 0.3s                          ;
          width: 100%                          ;
}


/* This image is typically an icon, such as a right-pointing triangle within a circle that symbolizes
   the 'play video' functionality or a PDF file icon. 
   The icon overlays the image immediately preceeding it. */
img.product_item__video__play_icon
{
  /* background: black                 ; */
        left: 50%                     ;
     opacity: 0.50                    ;
    position: absolute                ;
         top: 50%                     ;
   transform: translate(-50%, -50%)   ;
  transition: all 500ms               ;
       width: 35%                     ;
}


a.product_item__video__link:hover  img.product_item__video__preview_thumbnail   ,
a.info_file_link:hover img.product_image
{
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
     opacity: 1   ;
}


/* When the mouse is placed over the video link, the video play button goes to almost full opacity
   and it will enlarge very slightly */
a.product_item__video__link:hover  img.product_item__video__play_icon
{
    opacity: 0.85   ;
  /* if the translate values are not restated the play icon shifts south-east in diagonal */
  transform: translate(-50%, -50%) scale(1.05)   ;
  transform-origin: center;
}


/* When the mouse is placed over the video link, the video preview image goes to full opacity */
a.info_file_link:hover img.info_file_icon
{
  opacity: 1   ;
}


/* used for an optional caption under the video preview thumbnail image */
div.product_item__video__caption
{
         color: #555                ;
     font-size: 0.9rem                ;
   font-weight: bold                  ;
      margin: 0.5rem auto 1rem auto   ;
  text-align: center                  ;
       width: 90%                     ;
}


a.product_item__video__link:hover + div.product_item__video__caption
{
  color:  var(--body__font_color);
}

div.product_item__name__container
{
       /* background: lightyellow   ; */
          display: flex            ;
        grid-area: product_item__name__container   ;
}


/*
  Used to style the prodcut name that appears at the beginning of the product description

  Estilo usado para el nombre del producto que aparece al comienzo de la descripción del producto
*/  
div.product_item__name
{ 
      background:rgb(255, 255, 255, 0.9);
      box-shadow: 0px 0px 0.1rem 0rem rgb(0, 0, 0, 0.2)         ,
                  0.125rem 0.125rem 0.2rem rgba(64, 89, 145, 0.541)   ;
           color: #555         ;
         /* 'display: table' allows the div left and right edges to hug the text within it 
            while it also forces the text right after this <div> element onto a new line */
         display: table          ;
     font-weight: 900            ;
       font-size: 1.3rem         ;
  letter-spacing: 0.2rem         ;
          margin: 1rem 0.5rem 0.7rem 0.5rem   ;
         padding: 0.3rem 0.4rem 0.3rem 0.6rem   ;
      text-align: center         ;
}


div.product_item__description__container
{
          /* background: azure                                ; */
             display: flex                                   ;
      flex-direction: column                                 ;
           font-size: 1.1rem                                 ;
           grid-area: product_item__description__container   ;
         line-height: 1.4                                    ;
           max-width: 45ch                                   ;
           min-width: 25ch                                   ;
             padding: 0.25rem 1rem 1rem 1rem                 ;
          text-align: left                                   ;
}


div.product_item__info_files__container 
{
      align-items: center         ;
       /* background: mistyrose    ; */
          display: flex           ;
   flex-direction: column         ;
        font-size: 0.9rem         ;
        grid-area: product_item__info_files__container   ;
  justify-content: center         ;
}


/* Collapsed state:  contains PDF icon and text description, i.e. "VISTA Folleto (PDF en inglés)" 
   Expanded state: contains the elements above plus a preview image of the first page of the PDF files,
   typically a brochure or catalog */
a.product__info_file__button
{
       /* background: lightyellow   ; */
     border-color: #dae2f1       ;
     border-style: dotted          ;
    border-radius: .75rem          ;
     border-width: 2px             ;
            color: var(--body__font_color)      ;
          display: block           ;
        font-size: 0.9rem          ;
           margin: 1rem            ;
        min-width: 14ch            ;
        /* max-width: 16ch            ; */
          padding: 0.5rem          ;
       text-align: center          ;
  text-decoration: none            ;
}


a.product__info_file__button:hover
{
   background: #dee3ed           ;  /* dae2f1 */
       border: solid 2px #c6d1eb ;
        color: #666 ;
}


/*
  This <div> element will hold for example a PDF file icon
  and the text 'SILK+ Folleto (PDF en inglés)'
  Este elemento <div> tendrá como contenido a título de ejemplo:
  el icono usado para archivos PDF y el texto 'SILK+ Folleto (PDF en inglés)'  
*/  
div.product__info_file__button_icon_and_label
{
  text-align: center         ; 
}


/*
  This <div> element will hold for example a PDF file icon
  Este elemento <div> tendrá como contenido por ejemplo:
  el icono usado para archivos PDF 
*/  
img.product__info_file__button_icon
{
     display: block           ;
      filter: grayscale(20%)  ;
      /* positions icon in horizontal center | posiciona el icono horizontalmente en el centro */
      margin: 0.25rem auto    ;
     opacity: 0.9             ;
  transition: all 500ms       ;
       width: 1.6rem          ;
}


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


/* 
  Used for the title of the informational file asociated with the product,
  e.g. 'SILK+ Folleto (PDF en inglés)'
  Usado para el título del archivo informativo asociado al producto,
  p.e. 'SILK+ Folleto (PDF en inglés)'  
*/  
div.product__info_file__button_label
{
  padding-top: 0.25rem;
}


img.product__info_file__preview 
{
      border: solid 1px #CCCCCC       ;
     display: block                     ;
      /* keeps the file preview image shrunk down to a dot/point from which it can zoom out */
      height: 0%                        ;
      margin: 0.5rem auto 0.5rem auto   ;
      max-width: 16ch;
     opacity: 0                         ;
  transition: all 1s ease-in          ;
       /* keeps the file preview image shrunk down to a dot/point from which it can zoom out */
       width: 0%                        ;
}
 

a.product__info_file__button:hover img.product__info_file__preview
{
     display: block     ;
      height: auto      ;
       width: 90%       ;
     opacity: 1         ;
}



/*==============================================================*/
/*                                                              */
/*                   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 displayed in a single column */
   @media only screen and (max-width: 750px)
   {
     div.product_line__header
     {
        align-content: center                   ;
              display: grid                     ;
   
         grid-template-areas:
                             '     product_line__title__container      '
                             '     product_line__images__container     '
                             '      product_line__category_image       '
                             '   product_line__info_files__container   '
                             ;
       grid-template-columns: 1fr                      ;
     }

     div.product_item
     {
        justify-content: center                   ;
                display: grid                     ;
   
         grid-template-areas:
                             '      product_item__name__container       '
                             '     product_item__images__container      '
                             '   product_item__description__container   '
                             '     product_item__info_files__container  '
                                                       ;
       grid-template-columns: 1fr                      ;
     }

     div.medxpert__product_item   ,
     div.product_line__header     ,
     div.product_item
     {
                margin: 1.5rem auto          ;
     }


     div.product_item__name__container
     {
       justify-content: center   ;
           padding-top: 0.5rem   ;

     }


     div.product_item__description__container
     {
        margin: 0rem auto 0rem auto;
        width: 80%
     }


     div.product_item__name
     {
       margin: 0.75rem 1.5rem 0.5rem 1.5rem   ;
     }
     
   }