/*
 * file_name = noticias__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = CSS styles used by the html page [Noticias] that displays previes of different news articles 
 *               releated to Debene S.A.
 *                
 * descripción = Hoja de estilo utilizado por la página html [Noticias] la cual muestra diferentes artículos 
 *               relactionados a Debene S.A.
 *
 */


 /*
                TABLE OF CONTENT       /        INDICE

      (1) ➔ GLOBAL STYLES             /  ESTILOS GLOBALES

      (2) ➔ TYPOGRAPHY                /  TIPOGRAFIA
*/



div.article_buttons_container
{
            align-items: flex-start            ;
             /* background: pink                ; */
             column-gap: 4rem                  ;
                display: grid                  ;
  /*grid-template-columns: repeat(auto-fit, minmax(25ch, 70ch));*/
        justify-content: center                ;
                 margin: 2rem clamp(1.5rem, 0%, 200px) 2rem clamp(1.5rem, 0%, 200px)    ;
                row-gap: 2rem                  ;
}


a.article_button 
{       
          align-content: flex-start                        ;
             background: #fff6ed                         ;
           border-color: #f0e0d0                         ;
           border-width: 2px 0px 0px 2px                   ;
           border-style: solid                             ;
          border-radius: 5px                               ;
             box-shadow: 0.25rem 0.25rem 0.5rem rgba(100,90,78, 0.5)  ;  /* horizontal offset, vertical offset, blur effect, shadow color  */
                  color: black                           ; 
                display: grid                              ;
    grid-template-areas:
                        '   article__image   article__title   '
                        '   article__image   article__date    '
                        '   article__image   article__text    '
                        ;
     grid-template-rows: min-content min-content 1fr                   ;
 grid-template-columns: clamp(15rem, 100%, 18rem) minmax(30ch, 35ch)   ;

                padding: 1rem 1rem 1.5rem 1rem                 ;
             text-align: left                                  ;
        text-decoration: none                                  ;
             transition: all 800ms ease-in-out                 ;
} 




/*  On hover the box shadow grows a little.
 *
 *  La sombra de la cajita se hace más grande cuando el mouse está por encima
 */
a.article_button:hover
{
    background: #d6d6c2                         ;
  border-color: #bbbb96                         ; 
  border-width: 2px 0px 0px 2px                   ; 
  border-style: solid                             ; 
    box-shadow: 0.25rem 0.5rem 0.25rem rgba(100,90,78,.5)  ;  /* horizontal offset, vertical offset, blur effect, shadow color  */
  }


div.article__image
{
      align-items: flex-start                ;
       /* background: lightBlue               ; */
          display: flex                      ;
        grid-area: article__image            ;
  justify-content: center                    ;
       max-height: 15rem                     ;
          padding: 0.5rem 0.5rem 1.5rem 0.5rem   ;
}


img.article__image
{
      max-height: 100%     ;
       max-width: 90%      ;
}


span.article_description
{
/* background-color: lightYellow       ;   */
            flex: 1 1 10%             ;
     margin-left: 0.75rem             ;
       min-width: 28ch                ;
}


div.article__title
{
          /* background: lightgreen       ; */
               color: black               ;
             display: block                 ;
           grid-area: article__title        ;
           font-size: 1.4rem                ;
         font-weight: bold                  ;
             padding: 0rem 1rem 0rem 0rem   ;
}


div.article__date
{
    /* background: aquamarine                 ; */
         color: #555                    ;
       display: block                     ;
     font-size: 0.85rem                   ;
    font-style: italic                    ;
     grid-area: article__date             ;
        margin: 0rem 0rem 0rem 0rem       ;
       padding: 0.5rem 0.5rem 1rem 0rem   ;
}


/* 
   When articles are hosted by external sites (e.g. LinkedIn) this CSS class allows to display 
   the social media company's logo 

   Cuando el artículo fue publicado en un sitio externo (p.e. LinkedIn) esta clase CSS permite
   mostrar el logo de la empresa de redes sociales
*/
img.article__social_media__logo
{
    /* background: aquamarine                 ; */
       max-height: 1.2rem                 ;
      margin-left: 0.5rem                 ;
       margin-top: 0.25rem                ;
      padding-top: 0rem                   ;
   vertical-align: -0.3em                 ;
}


div.article__text
{
  /* background: coral                 ; */
    grid-area: article__text         ;
  line-height: 1.4                   ;
      padding: 0rem 1.5rem 0rem 0rem   ;
}


/*  Style used to simulate a link, even though the link has no destination (lacks the href attribute)
 *  Estilo usado para simular un vínculo, aunque el vinculo no apunta a nada (carece el atributo href)
 */   
span.dead_link
{
  color: blue;
  text-decoration: underline;   
}  


span.dead_link:hover
{
  color: purple;
}   


/*==============================================================*/
/*                                                              */
/*                   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, instead of 3 columns */
   @media only screen and (max-width: 550px)
   {
     a.article_button
     {
               align-content: center   ;

         grid-template-areas:
                             '   article__image   '
                             '   article__title   '
                             '   article__date    '
                             '   article__text    '
                             ;

       grid-template-columns: 1fr                      ;
          grid-template-rows: max-content max-content 1fr           ;

                     /* margin: 2rem 10% 2rem 10%        ; */
     }

     div.article__image
     {
       width: 90%;
     }

   }