/*!
This is a template for a stylesheet that allows WordPress users to use a custom theme within Gutenberg that matches their frontend.
*/

/* Set global width for all Gutenberg blocks - this should be the same as your article width */

/* set all block rows full width */
.is-root-container.is-layout-flow.wp-block-post-content
  > .wp-block:not(.wp-block-gallery),
.detail_item > .wp-block,
.detail_item > .wp-block-image,
.detail_item > .wp-block-video,
.detail_item > .is-layout-flex.wp-block-columns {
  max-width: unset;
  width: 100%;
  margin: 0 0 10px;
  /* height: 110vh;   */
  aspect-ratio: 200 / 133;
  overflow-y: hidden;
}

/* make sure rows direct div goe full height (700px) */
.is-root-container.is-layout-flow.wp-block-post-content > .wp-block > div,
.is-layout-flow.wp-block-column .wp-block-image {
  height: 100% !important;
  max-height: unset !important;
}

/* when a backgrodun color is added it adds a padding, lets remove it */
.wp-block.has-background {
  padding: 0 !important;
}

/* full width image parent container */
.block-editor-block-list__block.wp-block > div,
.block-editor-block-list__block.wp-block-image > div,
.detail_item > .wp-block > div,
.detail_item > .wp-block-image > div {
  max-width: unset !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: unset !important;
}

/* use the block image alignments! */
.block-editor-block-list__block.wp-block > div > div.wp-block {
  margin: 0; /* guttenberg adds margin when alignin images so let's remove the margin */
}

.block-editor-block-list__block.wp-block
  > div
  > div.wp-block[data-align='left']
  img,
figure.alignleft img {
  object-position: left top;
}
.block-editor-block-list__block.wp-block
  > div
  > div.wp-block[data-align='center']
  img,
figure.aligncenter img {
  object-position: center top;
}
.block-editor-block-list__block.wp-block
  > div
  > div.wp-block[data-align='right']
  img,
figure.alignright img {
  object-position: right top;
}

/* gap between columns */
.block-editor-block-list__block.wp-block.is-layout-flex.wp-block-columns,
.detail_item .is-layout-flex.wp-block-columns {
  gap: 10px;
}

/* making sure all figure elements don't have margins */
.wp-block figure,
.wp-block-column figure,
.wp-block-column figure a {
  display: block;
  margin: 0 !important;
  height: 100%;
  width: 100%;
}

.detail_item figure a {
  pointer-events: none;
  width: 100%;
}

.detail_item figure.logo-gallery a {
  pointer-events: all;
}

.wp-block-image > figure {
  width: 100%;
  margin: 0 !important;
  padding: 0;
}

.wp-block-video video {
  height: 100%;
  max-height: 100%;
  object-fit: cover;
}

.block-editor-block-list__block.wp-block-image > div img,
.detail_item > .wp-block-image img,
.wp-block-column img {
  height: 100%;
  object-fit: cover;
}

/* don't show "is loading preview" for videos */
.wp-block-embed.is-loading,
.videopress-block-hide {
  display: none !important;
}

/* post title */
.wp-block.wp-block-post-title.editor-post-title {
  font-size: 5vw;
  margin: 1em 0;
  text-align: center;
  min-width: 100% !important;
}

/* logo ggallery grid caoptions */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  height: auto;
  max-height: 100%;
  background: none;
  padding: 0;
  font-size: clamp(17px, 1.5vw, 20px);
  color: #9f9690;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 15px;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption a {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: -15px;
  padding-bottom: 15px;
  height: calc(100% + 15px) !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption a:before {
  content: url('data:image/svg+xml,<?xml version="1.0" ?><svg class="feather feather-link" fill="none" height="24" stroke="%239F9690" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>');
  position: absolute;
  top: 10px;
  right: 10px;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption a:after {
  content: 'View project';
  font-size: clamp(17px, 1.5vw, 20px);
  opacity: 0;
  visibility: hidden;
  color: white;
  position: absolute;
  top: 10px;
  right: 45px;
  transform: translateY(-100%);
  transition: all 0.4s ease-in-out;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption a:hover {
  background-color: rgba(214, 0, 28, 0.8);
  color: white;
}

.wp-block-gallery.has-nested-images
  figure.wp-block-image
  figcaption
  a:hover:before {
  content: url('data:image/svg+xml,<?xml version="1.0" ?><svg class="feather feather-link" fill="none" height="24" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>');
}

.wp-block-gallery.has-nested-images
  figure.wp-block-image
  figcaption
  a:hover:after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0%);
}

/* Main typography elements */
/* If the column has text center vertically */
.block-editor-block-list__block > div.block-editor-block-list__block.wp-block,
.detail_item .wp-block-column {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 !important;
  box-sizing: border-box;
}

.block-editor-block-list__block > .block-editor-block-list__block.wp-block h2,
.block-editor-block-list__block > .block-editor-block-list__block.wp-block h3,
.block-editor-block-list__block > .block-editor-block-list__block.wp-block h4,
.block-editor-block-list__block > .block-editor-block-list__block.wp-block h5,
.block-editor-block-list__block > .block-editor-block-list__block.wp-block h6,
.block-editor-block-list__block > .block-editor-block-list__block.wp-block p,
.block-editor-block-list__block > .block-editor-block-list__block.wp-block ol,
.block-editor-block-list__block > .block-editor-block-list__block.wp-block ul,
.detail_item .wp-block-column h2,
.detail_item .wp-block-column h3,
.detail_item .wp-block-column h4,
.detail_item .wp-block-column h5,
.detail_item .wp-block-column h6,
.detail_item .wp-block-column p,
.detail_item .wp-block-column ol,
.detail_item .wp-block-column ul {
  padding-left: 15% !important;
  padding-right: 15% !important;
}

h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0 0 0.3em !important;
  padding: 0;
}

.detail_item h2 {
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 2px;
  padding-bottom: 11px;
  margin-bottom: 18px;
}

.detail_item p {
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
}

.block-editor-block-list__block
  > .block-editor-block-list__block.wp-block
  .wp-block-buttons,
.detail_item .wp-block-buttons {
  border-radius: 0 !important;
  height: auto !important;
  margin: 20px 15% 30px !important;
  width: auto !important;
  justify-content: center;
}

.block-editor-block-list__block.wp-block-buttons {
  height: auto !important;
}

.wp-block-buttons .wp-block-button__link,
.detail_item .wp-block-buttons .wp-block-button__link {
  border-radius: 0;
  background: #d6001c;
}

.detail_item .wp-block-column p a,
.block-editor-block-list__block > .block-editor-block-list__block.wp-block p a {
  color: #d6001c;
}

.block-editor-block-list__block > .block-editor-block-list__block.wp-block ul,
.detail_item .wp-block-column ul {
  width: 100%;
  font-size: 20px;
  line-height: 32px;
  list-style: disc;
}

.block-editor-block-list__block
  > .block-editor-block-list__block.wp-block
  ul
  ul,
.detail_item .wp-block-column ul ul {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  font-size: 20px;
  line-height: 32px;
  list-style: disc;
}
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h2.rich-text.block-editor-rich-text__editable {
  margin-top: 2em;
  font-size: 1.75em;
}

h3.rich-text.block-editor-rich-text__editable {
  margin-top: 2em;
  font-size: 1.5em;
}

h4.rich-text.block-editor-rich-text__editable {
  font-size: 1.3em;
}

h5.rich-text.block-editor-rich-text__editable {
  font-size: 1.1em;
}

h6.rich-text.block-editor-rich-text__editable {
  font-size: 1em;
}

p.rich-text.block-editor-rich-text__editable {
  font-size: 20px;
  line-height: 32px;
}

/* swiperjs styles */
.portfolio-swiper {
  height: 100vh;
  position: relative;
}

.portfolio-swiper .swiper-slide {
  height: 100%;
  width: fit-content !important;
  cursor: grab;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portfolio-swiper .swiper-slide img {
  height: 100%;
  object-fit: contain;
  width: auto;
}

.portfolio-swiper .swiper-slide video {
  height: 100%;
}

.portfolio-swiper .swiper-slide .play-portfolio-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.portfolio-swiper .portfolio-slider-btn-container {
  position: absolute;
  cursor: pointer;
  bottom: 20px;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
}
.portfolio-swiper .portfolio-slider-btn {
  background-size: cover;
  /* background-image: url(../images/05-Left-REV.png); */
  border: 0;
  cursor: pointer;
  height: 50px;
  width: 50px;
}

.portfolio-slider-btn-container .portfolio-slider-btn:first-child {
  background-image: url(../images/05-Left-REV.png);
}

.portfolio-slider-btn-container .portfolio-slider-btn:last-child {
  background-image: url(../images/06-Right-REV.png);
}

.play-portfolio-video {
  background: url(../images/08-Play-REV.png);
  background-size: cover;
  border: 0;
  cursor: pointer;
  height: 60px;
  width: 60px;
}

/*********************************
Media Queries Desktop first
********************************/
/* Small Devices, tablets portrait */
@media only screen and (max-width: 998px) {
  .is-root-container.is-layout-flow.wp-block-post-content > .wp-block,
  .detail_item > .wp-block,
  .detail_item > .wp-block-image,
  .detail_item > .wp-block-video,
  .detail_item > .is-layout-flex.wp-block-columns {
    height: auto;
    overflow-y: visible;
  }

  .detail_item .wp-block-column:has(h2, h3, h4, h5, h6, p, ol, ul) {
    padding: 2em 0 !important;
  }
}

/* tablet */
@media only screen and (max-width: 800px) {
  .wp-block-gallery.has-nested-images
    figure.wp-block-image:not(#individual-image) {
    margin: 0;
    width: calc(
      50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.66667
    ) !important;
  }

  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption a:after {
    visibility: visible;
    opacity: 1;
    color: #9f9690;
    right: 45px;
    transform: translateY(0px);
  }
}

/* Mobile portrait */
@media only screen and (max-width: 480px) {
  .portfolio-swiper {
    max-height: 80dvh !important;
    margin-bottom: 3rem;
  }

  .wp-block-gallery.has-nested-images
    figure.wp-block-image:not(#individual-image) {
    margin: 0;
    width: 100% !important;
  }
}

.wp-block-embed-vimeo iframe,
.wp-block-embed-youtube iframe,
.vimeo-iframe {
  width: 100vw;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16/8;
  background-color: black;
}

.wp-element-caption {
  padding-left: 40px;
}

/* remove aspect ratio fomr certain elements 
Sometimes team mates will add images where the aspect ratio
doesn't match the expected one creating spaces around the images
just add this class to the image block iin Guti and it will
fix the spacing issue

Let team mates know that this chance will make the image's height differnt 
from the rest of the portfolio images*/
.detail_item > .wp-block-image .no-aspect-ratio,
.no-aspect-ratio {
  aspect-ratio: auto !important;
}