/*
 * CherDan Chocolates
 * Videos page
 */


/* ---------------------------------------------------------
   Page header
   --------------------------------------------------------- */

.cdc-videos-header{
  padding: 3.5rem 0 2.5rem;
}

.cdc-videos-intro{
  max-width: 720px;

  color: var(--cdc-muted);
  line-height: 1.8;
}


/* ---------------------------------------------------------
   Videos section
   --------------------------------------------------------- */

.cdc-videos-section{
  padding: 1.5rem 0 4rem;
}


/* ---------------------------------------------------------
   Video card
   --------------------------------------------------------- */

.cdc-video-card{
  overflow: hidden;

  border: 2px solid rgba(200, 164, 106, .55);
  border-radius: 18px;

  background: rgba(255, 255, 255, .35);
}

.cdc-video-card-header{
  padding: 1.75rem;
}


/* ---------------------------------------------------------
   Responsive video
   --------------------------------------------------------- */

/*
 * The existing video appears to be vertical/Shorts format,
 * so use a 9:16 ratio.
 */

.cdc-video-wrapper{
  width: min(100%, 430px);

  margin: 0 auto 2rem;

  aspect-ratio: 9 / 16;

  overflow: hidden;

  border-radius: 14px;

  background: var(--cdc-ink);
}

.cdc-video-wrapper iframe{
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}


/* ---------------------------------------------------------
   Coming soon panel
   --------------------------------------------------------- */

.cdc-video-coming-soon{
  display: flex;

  border: 2px solid rgba(200, 164, 106, .45);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .45),
      rgba(200, 164, 106, .08)
    );
}

.cdc-video-coming-soon-inner{
  width: 100%;

  align-self: center;

  padding: 3rem 2.25rem;

  text-align: center;
}

.cdc-video-coming-soon-icon{
  display: flex;

  width: 64px;
  height: 64px;

  margin: 0 auto 1.5rem;

  align-items: center;
  justify-content: center;

  border: 2px solid var(--cdc-gold);
  border-radius: 50%;

  background: var(--cdc-choco);
  color: #fff;

  font-size: 1.6rem;
}

.cdc-video-coming-soon-icon img{
  width: 28px;
  height: 28px;
  display: block;
}


/* ---------------------------------------------------------
   Closing section
   --------------------------------------------------------- */

.cdc-videos-closing{
  padding: 0 0 3.5rem;
}

.cdc-videos-closing-card{
  max-width: 800px;

  padding: 2.5rem 3rem;

  border-top:
    2px solid rgba(200, 164, 106, .65);

  border-bottom:
    2px solid rgba(200, 164, 106, .65);
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767.98px){

  .cdc-videos-header{
    padding: 2.5rem 0 2rem;
  }

  .cdc-videos-section{
    padding: 1rem 0 2.5rem;
  }

  .cdc-video-card-header{
    padding: 1.4rem;
  }

  .cdc-video-wrapper{
    /*
     * Leave a little space between the video
     * and the card edges on phones.
     */
    width: calc(100% - 2rem);

    margin-bottom: 1rem;
  }

  .cdc-video-coming-soon-inner{
    padding: 2.25rem 1.25rem;
  }

  .cdc-videos-closing{
    padding-bottom: 2.5rem;
  }

  .cdc-videos-closing-card{
    padding: 2rem 1rem;
  }

}