/* issue with gap/justify-center (is adding space before & after not filling the space. */  


/* .all-about-turkey-section  - -------------------------------------------------------------- also affects sm cta square */

.all-about-turkey-section {
   display: grid;
    gap: var(--wp--style--block-gap, 20px);
    grid-template-columns: repeat(3, 1fr); /* default 3 per row */
     --column-width: calc( (100% - (2 * var(--wp--style--block-gap, 20px))) / 2 );
}
.all-about-turkey-section > .wp-block-group {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: flex-end; /* text at bottom */
    overflow: hidden;
    padding: var(--wp--preset--spacing--30);
    margin: 0 !important;

    /* background settings */
    background-repeat: cover;
    background-position: top center;
    background-size: 100% !important;

    /* smooth animation both directions */
    transition: background-size 0.25s cubic-bezier(.4,0,.2,1);
}
/*
.all-about-turkey-section:not(.cta-section-square) > .wp-block-group {
    aspect-ratio: 3 / 4;   
}
*/
.all-about-turkey-section.cta-section-square {
   display: flex;
    height: auto !important;
    flex-wrap: wrap;
    justify-content: center; 
    gap: var(--wp--style--block-gap);
}
.all-about-turkey-section.cta-section-square > .wp-block-group {
   display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex-basis: calc((100% - (2 * var(--wp--preset--spacing--50))) / 3);
    margin: 0!important;
    padding: var(--wp--preset--spacing--30);
    position: relative;
    overflow: hidden;
}
.all-about-turkey-section > .wp-block-group:hover {
    background-size: 110% !important;
}
@media (min-width: 990px) { 
 .all-about-turkey-section.cta-section-square {
        gap: 30px;
 }
}
@media (min-width: 1200px) { 
 .all-about-turkey-section.cta-section-square {
        gap: 48px;
 }
}

@media (max-width: 992px) { 
    .all-about-turkey-section {
        grid-template-columns: repeat(2, 1fr);
    }
      /* Target the third item to make it span both columns and center it */
     .all-about-turkey-section.all-about-turkey-section--home > .wp-block-group:nth-child(3) {
        grid-column: 1 / -1;
        justify-self: center; 
         max-width: var(--column-width);
    }
    .all-about-turkey-section.cta-section-square  > .wp-block-group {
        flex-basis: calc((100% - (1 * var(--wp--preset--spacing--60))) / 2);
    }
}
@media (max-width: 577px) { 
   .all-about-turkey-section.cta-section-square  > .wp-block-group {
        flex-basis: 100%;
    }
     .all-about-turkey-section {
     grid-template-columns: 1fr;
    }
    /* Reset centering and width for mobile */
    .all-about-turkey-section.all-about-turkey-section--home > .wp-block-group:nth-child(3) {
        grid-column: auto;
        justify-self: stretch;
        max-width: none;
    }
    
}
.all-about-turkey-section > .wp-block-group:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: var(--wp--preset--gradient--custom-dark-horizontal);
}
.all-about-turkey-section  > .wp-block-group > .wp-block-group {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
.all-about-turkey-section > .wp-block-group > figure img {
    visibility: hidden;
      object-fit: cover; /* Fill the aspect-ratio box */
    width: 100%;
    height: 100%;
    aspect-ratio: 5 / 6 !important;
}
.all-about-turkey-section > .wp-block-group > figure a::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.all-about-turkey-section .wp-block-heading a{
    border-bottom: 1px solid transparent;
}
.all-about-turkey-section > .wp-block-group:focus .wp-block-heading a,
.all-about-turkey-section > .wp-block-group:hover .wp-block-heading a{
    border-bottom: 1px solid var(--wp--preset--color--black);
}
.all-about-turkey-section .wp-block-heading > a {
    text-decoration: none;
    color: inherit;
}
.all-about-turkey-section .wp-block-heading > a::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.all-about-turkey-section > .wp-block-group > .wp-block-group > p{ 
   margin-top: var(--wp--preset--spacing--20);
}
@media (max-width: 1200px) { 
    .all-about-turkey-section:not(.cta-section-modal) > .wp-block-group > .wp-block-group > p{
        display: none;
    }
}
@media (min-width: 1200px) { 
.all-about-turkey-section:not(.cta-section-square)  h2 {
margin-bottom:0.5rem !important;
}
}
/* .cta section square -------------------------------------------------*/
body figure.cta--icon {
    position: absolute;
    top: 1rem;
    width: 3rem;
    height: 3rem;
}
body .all-about-turkey-section > .wp-block-group > figure.cta--icon img {
	aspect-ratio: 1/1 !important;
	visibility: visible;
}

.cta-section-square > .wp-block-group > figure img {
    aspect-ratio: 7/5 !important;
}

/* .shop-now-section */
.shop-now-section.is-style-float-media {
    min-height: 466px;
}
:lang(fr) .shop-now-section:not(.shop-now-section--flipped).is-style-float-media {
    min-height: 584px;
}
.shop-now-section.is-style-float-media .float-content{
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
}	
@media (max-width: 1697px) {
    .shop-now-section.is-style-float-media .float-content{
        margin-left:var(--wp--style--root--padding-left) !important;
    }
}
.shop-now-section.is-style-float-media .wp-block-columns {
    justify-content: flex-end;
    min-height: 466px;
}
.shop-now-section--flipped.is-style-float-media .wp-block-columns {
    justify-content: flex-start;
}
:lang(fr) .shop-now-section:not(.shop-now-section--flipped).is-style-float-media .wp-block-columns {
    min-height: 584px;
}	
.shop-now-section.is-style-float-media .wp-block-embed-youtube {
    max-width: 1200px;
    margin-left: auto;
    border-radius: 1rem;
}
@media (min-width: 992px) {
    .shop-now-section:not(.shop-now-section--flipped).is-style-float-media .wp-block-embed-youtube {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
  .shop-now-section--flipped.is-style-float-media .wp-block-embed-youtube {
  border-bottom-left-radius:0;
     border-top-left-radius: 0;
    }
}
@media (min-width: 1200px) {
    .shop-now-section--flipped.is-style-float-media .wp-block-embed-youtube {
     border-bottom-right-radius: 2rem;
     border-top-right-radius: 2rem;
  border-bottom-left-radius:0;
     border-top-left-radius: 0;
    }
.shop-now-section:not(.shop-now-section--flipped).is-style-float-media .wp-block-embed-youtube {
     border-bottom-left-radius: 2rem;
     border-top-left-radius: 2rem;
    }
}
@media (max-width: 1200px) {
    .shop-now-section:not(.shop-now-section--flipped).is-style-float-media .wp-block-columns > .wp-block-column:last-of-type {
        flex-basis: 58%!important;
    }
    .shop-now-section.is-style-float-media {
        min-height: 400px;
    }
    .shop-now-section.is-style-float-media .wp-block-columns {
        min-height: 400px;
    }
.shop-now-section.shop-now-section--lg.is-style-float-media .wp-block-columns {
               min-height: 510px;
    }
    :lang(fr) .shop-now-sectio:not(.shop-now-section--flipped)n.is-style-float-media {
        min-height: 520px;
    }
    :lang(fr) .shop-now-section:not(.shop-now-section--flipped).is-style-float-media .wp-block-columns {
        min-height: 520px;
    }	
}	
@media (max-width: 991px) {
    .shop-now-section.is-style-float-media .float-content {
        position: relative;
        width: 100%;
        text-align: center;
        margin-left: 0 !important;
        margin-bottom: var(--wp--preset--spacing--70);
        padding-right: var(--wp--style--root--padding-right);
        padding-left: var(--wp--style--root--padding-left);
    }
    .shop-now-section.is-style-float-media .float-content h2 br {
        display: none;
    }
    .shop-now-section.is-style-float-media .float-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: 100%;
        margin-left: auto !important;
    }
    .shop-now-section:not(.shop-now-section--flipped).is-style-float-media .wp-block-columns > .wp-block-column:last-of-type {
        flex-basis: 100%!important;
        padding-right: var(--wp--style--root--padding-right);
        padding-left: var(--wp--style--root--padding-left);
    }	
    .shop-now-section.is-style-float-media .wp-block-columns {
        padding-right: var(--wp--style--root--padding-right) !important;
        padding-left: var(--wp--style--root--padding-left)!important;
        min-height: auto;
                position: relative;
        width: 100%;
        margin: 0 auto;
    }	
    :lang(fr) .shop-now-section.is-style-float-media .wp-block-columns, .shop-now-section.shop-now-section--lg.is-style-float-media .wp-block-columns  {
        min-height: auto;
    }
      .recipe-collection-group h2, .recipe-collection-group  .wp-block-post-excerpt {
        text-align:center;
      }
}



/* ------------------------------------------------------------------------- body content floats */
/* has media-text block with full-width image & content aligned with content margins (about us) */ 
.is-style-float-media {
    position:relative;
    overflow: hidden;
}
/* media-text block */	
.is-style-float-media .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media{
    position:absolute;
    left: 0;
    width: 50%;
}
.is-style-float-media .wp-block-media-text.has-media-on-the-right figure.wp-block-media-text__media{
    right: 0;
    left:auto;
}
@media (max-width: 1400px) {
 .is-style-image-logo {
    padding:2rem;
 }
}
@media (max-width: 992px) {
.is-style-image-summary-details summary img {margin:0 auto;}
.is-style-image-logo, .is-style-image-logo  > a {text-align: center;}
    .is-style-float-media .wp-block-media-text.wp-block-media-text--about figure.wp-block-media-text__media,
    .is-style-float-media .wp-block-media-text.wp-block-media-text--about .wp-block-media-text__content {
            padding: 0 var(--wp--style--root--padding-right) !important;
            width:auto;
    }
    .is-style-float-media .wp-block-media-text.wp-block-media-text--about figure.wp-block-media-text__media img {
           object-position: unset;
            position: relative;
            border-radius: 1rem;
            height: 100%;
            width: 100%;
            object-fit: cover;
            height: 550px;
    }
    .is-style-float-media .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media{
        position:relative;
        left: auto;
        width: 100%;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .is-style-float-media .wp-block-media-text.has-media-on-the-right figure.wp-block-media-text__media {
        left: auto;
        right:auto;
    }
    .is-style-float-media.alignfull {
        padding-right: 0;
        padding-left: 0;
    }
   .is-style-float-media  .wp-block-media-text {
      display:block;
    }
     
}
/* .is-style-float-youtube */
.is-style-float-youtube .wp-block-embed-youtube{
    max-width: 50% !important;
    margin-bottom: var(--wp--preset--spacing--40)!important;
}
.is-style-float-youtube .wp-block-embed-youtube.alignright{
    margin-left: var(--wp--preset--spacing--70)!important;
}
@media (max-width: 767px) { 
    .is-style-float-youtube .wp-block-embed-youtube{
        max-width: 100% !important;
    }
    .is-style-float-youtube .wp-block-embed-youtube.alignright{
        margin-left: 0!important;
    }
    .is-style-float-media .wp-block-media-text.wp-block-media-text--about figure.wp-block-media-text__media img {
     height: 350px;
    }
    
}
/* .is-style-float-image */
/* .is-style-float-youtube */
.is-style-float-image .wp-block-image{
    max-width: 50% !important;
    margin-bottom: var(--wp--preset--spacing--40)!important;
}
.is-style-float-image .wp-block-image.alignright{
    margin-left: var(--wp--preset--spacing--70)!important;
}
@media (max-width: 767px) { 
    .is-style-float-image .wp-block-image{
        max-width: 100% !important;
        float:none !important;
    }
    .is-style-float-image .wp-block-image.alignright{
        margin-left: 0 !important;
    }
}

/* ------------------------------------------------------------------------- CTA Modal */
/* The main container remains visible as the "Card" */
.wp-block-group.modal {
    cursor: pointer;
    position: relative;
    display: block; /* Ensure it stays in the page flow */
}

/* Hide the Close Button and the Detailed Content by default */
body .is-layout-flex.modal-close,
.all-about-turkey-section > .wp-block-group > .wp-block-group.modal--content {
    display: none;
}

/* When the modal is "Open" */
.wp-block-group.modal.is-active .modal--content {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1200px;
    max-height: 60vh;
height: auto;
    overflow-y: auto;
    background: #fff;
    padding: 80px 40px 40px 40px;
    z-index: 9999999999999;
    box-shadow: 0 10px 50px rgba(0,0,0,0.5);
 /* This creates a mask that matches your border radius */
  -webkit-mask-image: linear-gradient(white, white), 
                      linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  
  /* Simple version for most browsers */
  -webkit-mask-image: radial-gradient(circle, white 100%, transparent 100%);
  mask-image: paint(something); /* Modern alternative */
  
  /* The easiest way to apply it: */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
@media (min-width: 1400px) { 
.wp-block-group.modal.is-active .modal--content {
padding: 80px 60px 60px 60px;
}

}
/* The Close Button appearing when active */
.wp-block-group.modal.is-active .modal-close {
    display: block;
    position: fixed;
    top: 20px;
    right: 30px;
    z-index: 10002;
}

/* The Overlay (Background Dimmer) */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
}

body.modal-open .modal-overlay {
    display: block;
}

body.modal-open {
    overflow: hidden;
}