/*
 * file_name = articles__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = CSS styles used by news articles or press releases posted
 * on the Debene website. the Debene.com
 *                
 * descripción = Hoja de estilo para los artículos o comunicados de prensa 
 * publicados en el sitio web de Debene.com
 * 
 */

/*
            TABLE OF CONTENT       /         INDICE

      (1) ➔  PAGE LAYOUT          /     DISEÑO DE LA PÁGINA 

      (2) ➔  ARTICLE IMAGES       /  IMAGENES DE LOS ARTICULOS

      (3) ➔  NUMBERED LISTS       /     LISTAS NUMERADAS

      (4) ➔  NUMBERED LISTS       /     LISTAS NUMERADAS

      (5) ➔  MEDIA QUERIES        /     CONSULTAS DE MEDIOS

*/

/***********************************************************************
*                                                                      *
*             ➔  PAGE LAYOUT  /  DISEÑO DE LA PÁGINA                  *
*                                                                      *
***********************************************************************/
/* #region */

/*
  Container for all of the article's content: title, date, images, text, etc.
  Recipiente para todo el contenido del artículo: título, fecha, imagenes, texto, etc.
*/  
article.article__container
{
    /* background: coral       ;  */
                display: grid           ;
    grid-template-areas: 
                        '     article__title      article__media_files   '
                        '      article__date      article__media_files   '
                        '      article__body      article__media_files   '
                        '   article__info_files   article__media_files   '
                        ;
  grid-template-columns: minmax(45ch, 50ch) minmax(20rem, 35vw)    ;
     grid-template-rows: min-content min-content min-content 1fr   ;
        justify-content: center                                    ;
                 margin: 0.5rem clamp(0rem, 10%, 5rem)             ;
} 


/*
  Title of the article, appears at the top of the page
  Título del articulo, aparece al tope de la página
*/
div.article__title
{
            /* background: mistyrose      ; */
                 color: #333333        ;
             font-size: 1.6rem           ;
           font-weight: bold             ;
             grid-area: article__title   ;
               padding: 1rem             ;
            text-align: left             ;
}


/*
  Date when the article was published
  Fecha cuando se publicó el artículo
*/  
div.article__date
{
            /* background: lavender      ; */
                 color: #888888       ;
             font-size: 0.8rem          ;
            font-style: italic          ;
           font-weight: bold            ;
             grid-area: article__date   ;
               padding: 0rem 1rem       ;
            text-align: left            ;
}


/* Main body of the article, subdivided into paragraphs of prose */
div.article__body
{
         /* background: coral                 ; */
          grid-area: article__body         ;
         text-align: left                  ;
            padding: 0rem 1rem 1rem 1rem   ;
     vertical-align: top                   ;
      border-bottom: 2px solid #ddd      ;
}


/*
  Typically, in this section, brochures are placed for product(s) that the 
  news article references

  Tipicamente, en esta sección se colocan los folletos del/los producto(s)
  que se mencionan en el artículo
*/
div.article__info_files
{
     /* background: lightyellow           ; */
        display: flex                  ;
      grid-area: article__info_files   ;
   justify-self: center                ;
        padding: 1rem                  ;
}


/*
Container for the media files associated to the article, e.g. product images, 
diagrams highlighting product features, videos of medical interventions where product is used, etc.
Currently this <div> element acts as a right column.

Recipiente para archivos multimedia asociados al artículo, p.e. imagenes del producto, 
diagramas que resaltan característica del producto, videos de intervenciones médicas donde 
se usa el producto, etc.  Actualmente este elemento <div> actua como columna derecha.
*/
div.article__media_files
{
      align-items: center            ;
       /* background: aquamarine      ; */
          display: flex              ;
   flex-direction: column            ;
        grid-area: article__media_files   ;
  justify-content: flex-start        ;
          padding: 1rem              ;
} 

/*#endregion */



/***********************************************************************
*                                                                      *
*         ➔  ARTICLE IMAGES  /  IMAGENES DE LOS ARTICULOS             *
*                                                                      *
***********************************************************************/
/* #region */


/* Heading used as a title for a subsection of the article */
div.article_section_title
{
            /* color: #5476c4     ; */
            color: #3b5cab     ;
        font-size: 1.1rem        ;
      font-weight: bold          ;
       margin-top: 0.7rem        ;
}


div.article_image_container
{
     background-color: azure                 ;
               border: 2px solid transparent   ;
        border-radius: 3px                     ;
               filter: grayscale(30%)          ;
           text-align: center                  ;
           transition: all 0.5s ease           ;
               margin: 15px auto               ;  
       vertical-align: top                     ; 
                width: 90%                     ;
}

div.article_image_container:hover
{
  background: #e5f9ff                ;
      border: 2px solid #e5f2ff      ;
  box-shadow: 5px 10px 10px #AAAAAA  ;
      filter: grayscale(0%)            ;
}


img.article_image
{
      cursor: pointer                ;
      margin: 20px 0px 10px 0px      ; 
       width: 80%                    ;
}


div.article_image_caption
{
          color: #444               ;
      font-size: 0.8rem               ;
    font-weight: bold                 ;
     text-align: center               ;
         margin: 0px 1rem 1rem 1rem   ;
}


div.article_image_container:hover div.article_image_caption
{
          color: #333               ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*         ➔  ARTICLE VIDEOS  /  VIDEOS DE LOS ARTÍCULOS               *
*                                                                      *
***********************************************************************/
/* #region */

div.article__embedded_video__container
{
      align-items: center                  ;
       background: #e5f9ff               ;
           /* border: green solid 2px   ; */
           border: 2px solid transparent   ;
          display: flex                    ;
          filter: grayscale(30%);
        flex-flow: column                  ;
  justify-content: center                  ;
          padding: 1rem 0rem               ;
            width: 90%                     ;
}


div.article__embedded_video__container:hover
{
  background: #e5f9ff                ;
      border: 2px solid #e5f2ff      ;
  box-shadow: 5px 10px 10px #AAAAAA  ;
      filter: grayscale(0%)            ;
}

/* This div elements makes the child <iframe> (embedded video) responsive for smaller screens */
div.article__embedded_video
{
      /* background: khaki                 ; */
          border: 2px solid transparent   ;
          height: 0                       ;

  /* hide any content that would otherwise spill out of this container element */
  overflow: hidden;
  /* 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              ;
     width: 90%                   ;
}


/* 
  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.product__video)
*/
iframe.article__embedded_video
{ 
    height: 90%        ;
      left: 0          ;
  position: absolute   ;
       top: 0          ;
     width: 100%       ;
}


div.article__embedded_video__caption
{
      /* background: coral                   ; */
           color: #444                  ;
       font-size: 0.8rem                  ;
     font-weight: bold                    ;
         padding: 0rem 1rem 0.5rem 1rem   ;
           width: 80%                     ;
}


div.article__embedded_video__container:hover div.article__embedded_video__caption
{
  color: #333               ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*         ➔  NUMBERED LISTS  /  LISTAS NUMERADAS                      *
*                                                                      *
***********************************************************************/
/* #region */

ol
{
         counter-reset: list      ;
             font-size: 1rem      ;
}

ol > li 
{
  list-style: none;
}

ol > li:before 
{
            content: counter(list, decimal) ") ";  
  counter-increment: list;
        font-weight: bold;

}

/* 
  Adds space between the list number with the parenthesis [e.g. "1)" ] and the item text.
  Adiciona espacio entre el númbero de lista con la paréntesis [p.e. "1)" ] y el texto del iten.
*/
     
li::before 
{
  width: 20px;
  display: inline-block;
}

  
span.text_highlight
{
        color: #654321    ;  /* dark brown */
  font-weight: bold       ;
}

/*#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)
{

  main.debene__main_content
  {
            display: flex     ;
    justify-content: center   ;
  }

  article.article__container
  {
    /* background: lightyellow; */

      grid-template-areas:
                          '     article__title       '
                          '      article__date       '
                          '      article__body       '
                          '   article__media_files   '
                          '   article__info_files    '
                          ;
    grid-template-columns: 1fr                           ;
                   margin: 0.5rem auto;

                max-width: 60ch;
  }


  div.article__embedded_video__caption   ,
  div.article_image_caption              ,
  div.info_file__caption
  {
    font-size: 1rem   ;
  }
}