/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 
 .specials-content-area .entry-header {
  padding: 0;
}

.specials-content-area .entry-header {
  background-color: inherit;
}

.specials-content-area .page-title {
  padding-bottom: 40px;
}
.post-type-archive-ma-specials .ast-row {
   display: flex;
   flex-flow: row wrap;
   align-items: stretch;
}
.specials-article-space {
   margin-right: 15px !important;
   margin-bottom: 30px !important;
}
.specials-content-area .blog-layout-1 {
  padding: 0 0 40px 0 !important;
}
.specials-content-area .entry-title a{
  padding-left: 20px;
  padding-right: 20px;
}

.specials-header {
   padding-bottom: 50px;
}

.specials-display-full-width .entry-content .fl-builder-content{
 margin-left: -20px;
}


@media only screen and (max-width: 767px) {
  .specials-article-space {
     margin-right: 20px !important;
     margin-left: 20px !important;
     padding: 0 !important;
 }

 .specials-header {
     padding-left: 20px;
  }
}

.ma-specials .single-layout-1 .post-thumb-img-content > img {
   object-fit: cover;
   aspect-ratio: 3/1;
}

/* @media only screen and (max-width: 768px) {
  .ma-image-left-header, .image-right-header,
  .ma-image-left .view-special-link, .ma-image-right .view-special-link {
     padding-left: 0px;
     padding-right: 0px;
  }

} */

/*Final Styling */
/* .specials-pad {
   padding-left: 20px;
   padding-right: 20px;
} */


.specials-layout-pad {
   padding: 30px !important;
}

@media only screen and (max-width: 767px) {
   .specials-img-left {
       width: 100%;
   }
   .specials-right-img-flex {
       display: flex;
       flex-direction: column; 
   }
   .specials-item-flex:nth-of-type(1) {
       order: 2;
   }
   .specials-item-flex:nth-of-type(2) {
       order: 1;
   }

   /* .specials-content-area .entry-content p {
       padding-left: 0px;
       padding-right: 0px;
    } */
   
    
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
   .specials-tab-left {
       padding-left: 2em;
   }
   .specials-tab-right {
       padding-right: 2em;
   }
}
@media only screen and (min-width: 768px) {
   .specials-img-left, .specials-img-right {

       width: 50%;
       float: left;
   }
   .specials-content-area .wp-post-image img {
       object-fit: cover;
       height: 300px;
       width: 100%;
    }
    
}
@media only screen and (min-width: 1025px) {
   .specials-tab-left {
       padding-left: 2em;
   }
   .specials-tab-right {
       padding-right: 2em;
   }
}

/* ==========================================================================
   Cardview Grid Layout
   ========================================================================== */

/* Base grid container */
.specials-cardview-grid {
    display: grid;
    gap: 30px;
    width: 100%;
}

/* Card items within grid */
.specials-cardview-grid > article {
    margin: 0 !important;
    border-bottom: none !important;
}

/* 1 Column Layout */
.specials-cardview-grid.clm1 {
    grid-template-columns: 1fr;
}

/* 2 Column Layout */
.specials-cardview-grid.clm2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 Column Layout */
.specials-cardview-grid.clm3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Tablet: 3 columns becomes 2, 2 stays 2, 1 stays 1 */
@media only screen and (max-width: 1024px) {
    .specials-cardview-grid.clm3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: All layouts become single column */
@media only screen and (max-width: 767px) {
    .specials-cardview-grid.clm2,
    .specials-cardview-grid.clm3 {
        grid-template-columns: 1fr;
    }
    
    .specials-cardview-grid {
        gap: 20px;
    }
}