/*
 * file_name = supplier__single_product__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = this file contains the CSS styles used for pages that are dedicated to 
 *               show a single product (versus a list of products).
 *               The CSS classes organize the information related to the product's name, description,
 *               images and videos, brochure, and available sizes or variants.
 *
 * descripción = este archivo contiene los estilo CSS usados para las paginas dedicadas a un 
 *               solo producto (en vez de una lista de productos). Las clases CSS organizan la información
 *               relacionada al nombre del producto, su descripción, imágenes, folletos 
 *               y las referencias disponibles.
 *
 *
 *            TABLE OF CONTENT          /      ÍNDICE
 *
 *     (1) ➔  GRID LAYOUT              /  PLANTILLA GRID
 *
 *     (2) ➔  PRODUCT NAME             /  NOMBRE DEL PRODUCTO
 *
 *     (3) ➔  PRODUCT IMAGES           /  IMAGENES DEL PRODUCTO
 *
 *     (4) ➔  IMAGE CAROUSEL           /  CARRUSEL DE IMAGENES
 *
 *     (5) ➔  PRODUCT DESCRIPTION      /  DESCRIPCION DEL PRODUCTO
 *
 *     (6) ➔  PRODUCT LINKS            /  VINCULOS DEL PRODUCTO
 *
 *     (7) ➔  PRODUCT VIDEOS           /  VIDEOS DEL PRODUCTO
 * 
 *     (8) ➔  MEDIA QUERIES            /  CONSULTAS DE MEDIOS
 *
*/



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

/* 
  Container for elements related to a single product
  (product name, images, videos, description, supporting documents, etc.)
*/
div.product
{
            align-items: stretch         ;
             background: #ecf0f8       ;
          border-radius: 1rem            ;
                display: grid            ;
         grid-auto-flow: column          ;
          /* center horizontally the grid children elements */
          justify-items: center;

    grid-template-areas: 
                        '   product__name     product__name          product__name          product__name          '
                        '   product__images   product__images        product__description   product__description   '
                        '   product__links    product__links         product__links         product__links         '
                        '   product__videos   product__videos        product__videos        product__videos        '
                        ;

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

                 margin: 0rem clamp(0.5rem, 2.5%, 10rem)   ;
                row-gap: 0.75rem                           ;
                padding: 1rem                              ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*            ➔  PRODUCT NAME  /  NOMBRE DEL PRODUCTO                  *
*                                                                      *
***********************************************************************/
/* #region */

div.product__name
{
       /* background: thistle        ; */
          display: flex             ;
        grid-area: product__name    ;
  justify-content: center           ;
         /* Always keep the product name visible at the top of the screen */
         position: sticky           ;
              /* Display product name just beneath the main navigation bar */
              top: 2rem             ;
            width: 100%             ;
          z-index: 3                ;
}


h1.product__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  */
         display: inline-block              ;
     font-weight: 700                       ;
       font-size: 2rem                      ;
  letter-spacing: 0.1rem                    ;
          margin: 1rem 1rem 0.7rem 1rem     ;
          max-width: 60vw                   ;
         padding: 0.3rem 2rem 0.3rem 2rem   ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*           ➔  PRODUCT IMAGES  /  IMAGENES DEL PRODUCTO               *
*                                                                      *
***********************************************************************/
/* #region */

div.product__images
{
       /* background: lightgreen      ; */
   /* border-bottom: 1px solid #CCC   ; */
     align-items: flex-end           ;
         display: flex               ;
  flex-direction: column             ;
       grid-area: product__images    ;
         padding: 1rem 0.5rem        ;
           width: 100%               ;
}


/*#endregion */




/***********************************************************************
*                                                                      *
*           ➔  IMAGE CAROUSEL  /  CARRUSEL DE IMAGENES                *
*                                                                      *
***********************************************************************/
/* #region */

/*
//  CAROUSEL
//    A carousel is a slideshow of images that slide horizontally in and out of the field of view. 
//    The image being viewed can be controlled by the user by clicking on on-screen controls 
//    to advance to the next image or return to the previous one.
//
//  CARRUSEL
//    El carrusel es una presentación de imágenes que se deslizan horizontalmente y entran y salen del campo visual.
//    La imágen visualizada puede ser controlada por el usuario usando controles en la pantalla
//    los cuales permiten avanzarar a la imágen siguente o retroceder a la anterior.
*/

div.carousel
{
  background: white;
      /* height: 30rem      ; previous dimensions */
      height: 16rem      ;
      /* margin: 0 auto     ; previous setting */
    /* A relative positioning allows the images to be positioned within this element absolutely */
    position: relative   ;
       /* width: 80%        ; previous setting */
       width: 50%        ;
}


img.carousel__image
{
      cursor: pointer   ;
      height: 100%      ;
  /* object-fit: cover; previous setting */
  object-fit:contain    ;
       width: 100%      ;
}


div.carousel__slides--container
{
  /* background: lightgreen   ; */
      height: 100%           ;
    position: relative       ;
    /* conceal the slide images that overflow the track container */
    overflow: hidden;
}


ul.carousel__slides
{
  /* background: red; */
  height: 100%;
  list-style: none;
  margin: 0rem;
  padding: 0rem;
  /* remove bullet points */
  position: relative;
  transition: transform 750ms ease-in-out;
}


li.carousel__slide
{
  /* background: lightyellow; */
    bottom: 0rem       ;
    margin: 0rem       ;
   padding: 0rem       ;
  position: absolute   ;
       top: 0rem       ;
     width: 100%       ;
}


button.carousel__button
{
     background: rgb(0,0,0,0.05)   ;
         border: 0                   ;
  border-radius: 0.25rem             ;
          color: lightsteelblue    ;
         cursor: pointer             ;
      /* font-size: 2.5rem              ; previous setting */
      font-size: 2rem                ;
    font-weight: bold                ;
        /* padding: 0.5rem              ; previous setting  */
        padding: 0 0.25rem           ;
       position: absolute            ;
      /* to position the botton at the exact vertical halfway heiht */
      transform: translateY(-50%)    ;
            top: 50%                 ;
        z-index: 2                   ;
}


button.carousel__button--left
{
  /* left: -2.5rem; previous setting */
  left: 0.5rem;
}


button.carousel__button--right
{
  /* left: -2.5rem; previous setting */
  right: 0.5rem;
}


/* Used to hide the left control arrow when viewing the first slide in the series,
   and to hide the right control arrow when viewing the last slide in the series
*/
button.carousel__button:hover
{
       color: cadetblue        ;
  background: rgb(0,0,0,0.1)   ;
}


button.carousel__button--hidden
{
  display: none;
}


div.carousel__navigation
{
       /* background: pink   ; */
          display: flex     ;
  justify-content: center   ;
          padding: 0.5rem   ;
}


button.carousel__indicator
{
     background: rgba(0,0,0,0.4)     ;
         border: 0                     ;
  border-radius: 50%                   ;
         cursor: pointer               ;
         /* height: 1rem                ; previous setting */
         height: 0.8rem                ;
         /* margin: 0 0.3rem            ; previous setting */
         margin: 0.1rem 0.4rem         ;
          /* width: 1rem                ; previous setting */
          width: 0.8rem                ;
}


/* CSS selector is for when both classes are present */
.carousel__indicator.current-slide
{
  background: rgba(0,0,0,0.75);
}



/*#endregion */



/***********************************************************************
*                                                                      *
*     ➔  PRODUCT DESCRIPTION  /  DESCRIPCION DEL PRODUCTO               *
*                                                                      *
***********************************************************************/
/* #region */

div.product__description
{
      background: white                ;
   border-radius: 0.5rem                 ;
       /* font-size: 1.2rem                   ; previous setting */
       font-size: 1rem                   ;
       grid-area: product__description   ;
     /* line-height: 1.7rem                 ; previous setting */
     line-height: 1.5rem                 ;
          margin: 1rem 20% 1rem 1rem    ;
       max-width: 50ch;
         padding: 0.5rem 1rem            ;
}


div.product__description p
{
      /* background: mistyrose       ; */
       font-size: 1.2rem            ;
         padding: 0rem 1rem          ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*     ➔  PRODUCT LINKS  /  VINCULOS DEL PRODUCTO                       *
*                                                                      *
***********************************************************************/
/* #region */

a.info_file__link
{
   /* transform: translate(0rem, -0.2rem)   ; */
   transition: all 0.5s ease;
  }


/* 
  When hovered upon, impart a light olive background color to the info_file container
  and make the file preview image nudge up a little bit
*/
a.info_file__link:hover
{
  background: #ecedde                  ;
   transition: all 2s ease-in-out   ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*          ➔  PRODUCT LINKS  /  VINCULOS DEL PRODUCTO                 *
*                                                                      *
***********************************************************************/
/* #region */

div.product__links
{
     align-items: center                    ;
      /* background: purple          ; */
         display: flex                       ;
       flex-flow: column                        ;
             gap: clamp(2rem, 3vmin, 3rem)   ;
       grid-area: product__links             ;
       justify-content: center               ;
         padding: 1rem clamp(1rem, 4vmin, 2rem) 2rem clamp(1rem, 4vmin, 2rem)   ;
}


div.product__link
{
  background: khaki             ;
      border: green solid 2px   ;
  /* hide any content that would otherwise spill out of this container element */
  overflow: hidden;
  padding: 1rem 2rem ;
  /* allows child <iframe> element to be positioned absolutely */
  position: relative              ;
     /* width: 80%                   ; */
}


/*#endregion */



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

div.product__videos
{
      /* align-items: center            ; */
       /* vertical alignment of children elements*/
      align-items: flex-start                 ;
       /* background: lavender                   ; */
           border: 2px #7a94d292 solid      ;
    border-radius: 1rem                       ;
       column-gap: clamp(2rem, 3vmin, 3rem)   ;
          display: flex                       ;
        flex-flow: row                        ;
        flex-wrap: wrap                       ;
        grid-area: product__videos            ;
          /* horizontal alignment of children elements */
  justify-content: center                     ;
          padding: 1.5rem clamp(1rem, 4vmin, 2rem) 2rem clamp(1rem, 4vmin, 2rem)   ;
          row-gap: 1rem                       ;
            width: 90%                        ;
}


div.product__video
{
  /* background: pink       ; */
   max-width: 22rem        ;
}


div.product__video__title
{
  /* background-color: azure; */
        color: #6b86c6      ;
        /* display: inline-block; */
    font-size: 1.3rem         ;
  font-weight: bold           ;
      padding: 0 0 0.5rem 0   ;
   text-align: left           ;
}


/* 
  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.product__video
{
  /* avoids overflow of the parent container element on small screens */
  max-width: 95%;
}


div.product__video__description
{
  border-radius: 0.5rem                ;
    font-weight: bold                  ;
         /* element will be initially collapsed/not visible */
         height: 0px                   ;
         margin: 1rem auto             ;
       overflow: hidden                 ;
     text-align: left                  ;
     transition: all 1s ease-in-out    ;
          width: 80%                   ;
}


/*#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: 800px)
{
  div.product
  {
        grid-template-areas: 
                            '   product__name          '
                            '   product__images        '
                            '   product__description   '
                            '   product__links         '
                            '   product__videos        '
                            ;
      grid-template-columns: 1fr                      ;
                     /* set margins to zero so that more of the width of the small mobile device screen is used */
                     margin: 0rem                     ;
  }

  div.product__name
  {
         /* Replace position sticky to the default 'static' value 
            so that the product name scrolls out of the way vertically */
         position: static           ;
  }

  h1.product__name
  {
    max-width: min-content   ;
  }


  div.product__images
  {
    align-items: center         ;
     /* background: lightyellow; */
          width: 100%           ;
  }


  div.carousel
  { 
    /* background: lavender   ; */
        height: 100%         ;
    min-height: 20rem        ;
    width: 90%;
  }


  button.carousel__button--left
  {
    /* left: -2.5rem; previous setting */
    left: -2rem;
  }


  button.carousel__button--right
  {
    /* left: -2.5rem; previous setting */
    right: -2rem;
  }


  button.carousel__indicator
  {
    height: 1.2rem                ;
    margin: 0.4rem 0.75rem           ;
     width: 1.2rem                ;
  }


  div.product__description
  { 
       margin: 1.5rem auto 0 auto   ;
    max-width: 50ch                 ;
  }


  div.product__description p
  {
    line-height: 1.7   ;
  }


  div.product__videos
  {
    width: 100%;
  }


  div.product__video
  {
    /* background: khaki             ; */
        /* border: green solid 2px   ; */
  }


  div.product__video__title
  {
    /* background: lightsalmon; */
    font-size: 1.2rem;
    padding: 1rem 0 0.5rem 0;
  }

  div.product__video__description
  {
    /* background: lightgreen; */
    /* make description always visible */
    height: auto;
    width: 95%;
  }

}

/*#endregion */