/*
 * file_name = medxpert__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = CSS styles used by the webpages dedicated to MedXpert STRACOS products
 *                
 * descripción = Hoja de estilo usada para la páginas web dedicadas a los productos STRACOS de MedXpert
 *
 *            TABLE OF CONTENT          /      ÍNDICE
 *
 *     (1) ➔  GRID LAYOUT               /  PLANTILLA GRID
 *
 *     (2) ➔  PRODUCT-RELATED ELEMENTS  /  ELEMENTOS RELACIONADOS AL PRODUCTO
 *
 *     (3) ➔  IMAGE CONTOUR COORDINATES /  COORDENADAS DEL CONTORNO DE IMAGENES
 *
 *     (4) ➔  PRODUCT DESCRIPTION       /  DESC RELACIONADOS AL PRODUCTO
 *
 *     (5) ➔  PRODUCT VIDEOS           /  VIDEOS DEL PRODUCTO
 * 
 *     (6) ➔  MEDIA QUERIES            /  CONSULTAS DE MEDIOS
 *
*/

 
/***********************************************************************
*                                                                      *
*              ➔  GRID LAYOUT /  PLANTILLA GRID                       *
*                                                                      *
***********************************************************************/
/* #region */


 div.medxpert__product_item
 {
            /* background: lavender              ; */
               display: grid                    ;
   grid-template-areas: 
                       '       medxpert__product_item__name__container       medxpert__product_item__name__container   '
                       '   medxpert__product_item__description__container   medxpert__product_item__images__container   '
                       ;

  grid-template-columns: 3fr 1fr             ;
                 margin: 1rem auto           ;
                  width: 90%                 ;
}

/*#endregion */



 
/***********************************************************************
*                                                                      *
*                   ➔  PRODUCT-RELATED ELEMENTS                       *
*                  ELEMENTOS RELACIONADOS AL PRODUCTO                  *
*                                                                      *
***********************************************************************/
/* #region */

 div.medxpert__product_item__name__container
 {
    grid-area: medxpert__product_item__name__container   ;
 }


div.medxpert__product_item__name
{
   /* background: azure     ; */
        color: #1F497D   ;
    font-size: 1.6rem      ;
  font-weight: 700         ;
  padding: 0.5rem 0rem 0rem 0rem   ;
}


div.medxpert__product_item__short_description
{
     /* background: lightyellow           ; */
          color: #626284               ;
         margin: 0rem auto               ;
        padding: 0rem 1rem 0.5rem 1rem   ;
      font-size: 1.1rem                    ;
    font-weight: 600                     ;
     margin-top: 0.75rem                 ;
     text-align: center                  ;
          width: 70%                    ;
 }


 div.medxpert__product_item__description__container
 {
   /* background: lightyellow       ; */
        grid-area: medxpert__product_item__description__container   ;
          line-height: 1.3; 
          padding-right: 5px; 
       text-align: left           ;
   vertical-align: top            ;
 }


 div.medxpert__product_item__images__container
 {
      align-items: center                   ;
       background: #dae2f1                ;
       /* background: lightgreen               ; */
    border-radius: 0.5rem                   ;
          display: flex                     ;
   flex-direction: column                   ;
        grid-area: medxpert__product_item__images__container   ;
           height: min-content              ;
  justify-content: flex-start               ;
           margin: 1rem                     ;
        min-width: 16rem                    ;
           padding: 1rem 0rem 0.5rem 0rem   ;
 }


 p.medxpert__product_feature_title
 {
          color: sienna   ;
    font-weight: bold       ;
     margin-top: 20px       ;
 }
 
 /* Add bullet point at the beginning of each paragraph that list a product feature */
 p.medxpert__product_feature::before
 {
   /* \2022 symbol looks like this '•' */
   content: '\2022';
   font-size: inherit;
   padding-right: 0.25rem;
 }
 
 div.medxpert__product_item__description__container p
 {
    margin-left: 1rem   ;
   margin-right: 1rem   ;
 }
 
  span.product_feature_highlight
 {
         color: #333   ;
   font-weight: 600      ;
 }

/*#endregion */




/***********************************************************************
*                                                                      *
*          ➔  IMAGE CONTOUR COORDINATES MAGENES                       *
*              COORDENADAS DEL CONTORNO DE IMAGENES                    *
*                                                                      *
***********************************************************************/
/* #region */

img.medxpert__pes__image
{
        display: block                ; 
          float: left                 ;
         margin: 7px auto 5px 1rem    ;
   /* allows text to wrap along image countours (rib cage) */
   shape-margin: 1rem                 ; 
  shape-outside: polygon(70.06% 95.42%, 1.25% 96.79%, 0.75% 2.81%, 84.24% 2.07%, 84.36% 12.38%, 82.58% 21.06%, 79.29% 28.36%, 73.97% 35.66%, 71.64% 43.34%, 72.36% 54.83%, 72.39% 67.06%, 74.03% 78.31%);          width: 400px                ;
          width: 55%                  ;
}


 img.medxpert__stracos__image
 {
         display: block                ; 
           float: left                 ;
          margin: 7px auto 5px auto    ;
      max-height: 53rem                ;
   /* allows text to wrap along image countours (rib cage) */
   shape-outside: polygon(56.5% 96.59%, 1.25% 96.79%, 0.75% 2.81%, 44.25% 2.77%, 43.25% 8.18%, 53.25% 15%, 61.5% 21.6%, 71.75% 41.96%, 74.75% 61.99%, 75.25% 73.48%, 73.5% 81.51%, 66.25% 91.36%);   shape-margin: 10px                 ;  /* pushes out the the text that hugs the image countour */
           width: 60%                ;
}  


img.medxpert__stratos__deformity__image
{
        display: block                     ;
          float: left                      ;
          width: 30%                       ;
         margin: 0.5rem auto 0.5rem 1rem   ;
   /* shape-margin and shape-outside allows text to wrap along image countours (rib cage) */
   shape-margin: 45px                      ;
  shape-outside: polygon(70.06% 95.42%, 1.25% 96.79%, 0.75% 2.81%, 84.24% 2.07%, 84.36% 12.38%, 82.58% 21.06%, 79.29% 28.36%, 73.97% 35.66%, 71.64% 43.34%, 72.36% 54.83%, 72.39% 67.06%, 74.03% 78.31%); 
          width: 40%                     ;
}


img.medxpert__stratos__deformity__image2
{
        display: block                     ;
          float: right                     ;
         margin: 0.5rem 0rem 0.5rem auto   ;
   /* shape-margin and shape-outside allows text to wrap along image countours (rib cage) */
  shape-outside: polygon(98.68% 97.97%, 22.17% 98.71%, 19.83% 83.6%, 21.47% 63.38%, 20.97% 50.06%, 21.35% 42.14%, 20.21% 34.43%, 14.28% 21.93%, 8.87% 13.32%, 19.43% 5.65%, 56.09% 2.24%, 99.57% 3.26%) ;
   shape-margin: 15px                      ;
          width: 45%                       ;
}


img.medxpert__stratos__reconstruction__image
{
        display: block                ; 
          float: left                 ;
         margin: 7px auto 5px auto    ;
  /* allows text to wrap along image countours (rib cage) */
  shape-outside: polygon(56.5% 96.59%, 1.25% 96.79%, 0.75% 2.81%, 44.25% 2.77%, 43.25% 8.18%, 53.25% 15%, 61.5% 21.6%, 71.75% 41.96%, 74.75% 61.99%, 75.25% 73.48%, 73.5% 81.51%, 66.25% 91.36%);   shape-margin: 10px                 ;  /* pushes out the the text that hugs the image countour */
          width: 55%                ;
}  


img.medxpert__stratos__sternal_fracture__image
{
          float: left                 ;
         margin: 0.5rem auto 0.5rem 1rem    ;
   /* shape-margin and shape-outside allows text to wrap along image countours (rib cage) */
   shape-margin: 3rem                 ;
  shape-outside: polygon(70.06% 95.42%, 1.25% 96.79%, 0.75% 2.81%, 84.24% 2.07%, 84.36% 12.38%, 82.58% 21.06%, 79.29% 28.36%, 73.97% 35.66%, 71.64% 43.34%, 72.36% 54.83%, 72.39% 67.06%, 74.03% 78.31%); 
          width: 45%                  ;
}


img.medxpert__stratos__sternal_closure__image
{
          float: right                 ;
         margin: 7px auto 20px auto    ;
   /* shape-margin and shape-outside allows text to wrap along image countours (rib cage) */
   shape-margin: 1.5rem                ;
  shape-outside: polygon(98.99% 99.2%, 28.63% 99.53%, 25.98% 74.17%, 27.31% 62.45%, 27.44% 43.94%, 26.58% 36.5%, 21.75% 28.7%, 21.05% 21.59%, 15.64% 17.96%, 16.66% 11.6%, 33.31% 4.27%, 99.57% 4.56%);          width: 400px                ;
          width: 50%                   ;
}

/*#endregion */




/***********************************************************************
*                                                                      *
*          ➔  PRODUCT VIDEOS  /  VIDEOS DEL PRODUCTO                  *
*                                                                      *
***********************************************************************/
/* #region */

div.medxpert__product__videos
{
      /* background: purple          ; */
       padding: 2rem clamp(1rem, 4vmin, 2rem) 0rem clamp(1rem, 4vmin, 2rem)   ;

}


div.medxpert__product__video
{
  /* background: green; */

  /* border: green solid 2px   ; */
          height: 0                    ;

  /* The percentage bottom padding is derived by the dividing the width:height aspect ratio (16:9)
     of Vimeo.com videos. */
  padding-bottom: 56.25%                ;

        /* allows child <iframe> element to be positioned absolutely */
        position: relative              ;
  
   /* Helps to creates vertical space between videos when more than one video is placed on the page */
   margin-bottom: 2rem;

        /* hide any content that would otherwise spill out of this container element */
        overflow: hidden                 ;

           width: 100%                   ;
}



/* 
  The iframe element is used to display product video files that are hosted on other servers, e.g. Vimeo.com 
  The height and width set at 100% ensure that the video completely covers the parent container (div.medxpert__product__video)

  El eleménto iframe es usado para mostrar videos de productos que residen en otros servidors, p.e. Vimeo.com
  La altura y el ancho tienen un valor de 100% para asegurar que el video abarque por completo el elemento padre (div.product__video)
*/
iframe.medxpert__product__video
{
  position: absolute   ;
    height: 100%       ;
      left: 0          ;
       top: 0          ;
     width: 100%       ;
}


/*#endregion */




/***********************************************************************
*                                                                      *
*          ➔ MEDIA QUERIES  /  CONSULTAS DE MEDIOS                    *
*                                                                      *
***********************************************************************/

/* #region */

/* 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.medxpert__product_item
  {
            align-content: center                   ;

      grid-template-areas:
                          '     medxpert__product_item__name__container          '
                          '     medxpert__product_item__description__container   '
                          '     medxpert__product_item__images__container        '
                                                    ;
    grid-template-columns: 1fr                      ;
  }
}

/*#endregion */