/**
 * File: featured-button.css
 * Purpose: Custom styles for featured buttons used in square or stretched layouts with optional icons and hover effects.
 * Usage: Applied to modules or sections using `.featured-button`, `.featured-stretch`, or `.featured-square` classes.
 * Dependencies: Divi (for ETmodules icon font)
 *
 * Notes:
 * - Responsive across large desktop, tablet, and mobile breakpoints
 * - Uses CSS variables for theme-controlled colors
 * - Arrow icon (`ETmodules \35`) fades in on hover
 *
 * - Check if this component is still in use before modifying or removing
 */


/* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

/* These are not set or tested since the restructure, due to the component not being in use. Edit before implementing. */
.featured-stretch,
.featured-square
{
  --featured-button-border-color: var(--gray-medium);
  --featured-button-bg-hover-color: var(--black-overlay-lighter);
  --featured-button-border-hover-color: var(--brand-accent-color);
  --featured-button-font-color: var(--black);
  --featured-button-arrow-color: var(--brand-accent-color);
  --featured-button-mobile-bg-color: var(--white);
  --featured-button-mobile-border-color: var(--gray-medium);
  --featured-button-mobile-text-bg-color: var(--black-overlay-lighter);
}

/* -------------------------- */


/* Large desktop styles */
@media all and (min-width: 1405px) {
  .featured-stretch .featured-button{
    aspect-ratio:1/1!important;
  }
}

/* Desktop styles */
@media all and (min-width: 981px){
  .featured-stretch {
      height:100%;
      align-items:stretch;
  }
  
  .featured-square .featured-button{
      aspect-ratio:1/1!important;
  }
    
  .featured-button{
    margin: 0.25em!important;
    border:1px solid var(--featured-button-border-color)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center;
    flex-direction: row!important;
    transition: all 500ms ease!important;
    background-blend-mode: saturation;
    padding-left:1em;
  }

  .featured-button:hover {
    background-color: var(--featured-button-bg-hover-color)!important;
    border: 1px solid var(--featured-button-border-hover-color)!important;
  }

  .featured-square .featured-button:after{
    font-family: ETmodules !important;
    content:'\35';
    font-size: 3em!important;
    opacity: 0!important;
    transition: all 800ms ease!important;
    margin:0em 4em 0em -5.5em;
    color: var(--featured-button-arrow-color)!important;
    z-index: 1;
  }
  
  .featured-stretch .featured-button:after{
    font-family: ETmodules !important;
    content:'\35';
    font-size: 2em!important;
    opacity: 0!important;
    transition: all 800ms ease!important;
    margin:0em 4em 0em -5.5em;
    padding-bottom: 5px;
    color: var(--featured-button-arrow-color)!important;
    z-index: 1;
  }

  .featured-button p, .featured-button h2{
    opacity:0;
  text-align:center;
    transition: all 500ms ease!important;
    color: var(--featured-button-font-color) !important;
  }

  .featured-button:hover p, .featured-button:hover h2{
    opacity:1;
  }

  .featured-button:hover:after{
    opacity: 1!important;
    margin:0em 0em 0em 0em;
  }
}

/* Tablet & Mobile styles */
@media all and (max-width: 980px){
  .featured-stretch .featured-button{
    aspect-ratio:1/1!important;
  }
  
  .featured-button {
    border:1px solid var(--featured-button-mobile-border-color)!important;
    background-color: var(--featured-button-mobile-bg-color);
  }
      
  .featured-stretch .featured-button .featured-text p,
  .featured-stretch .featured-button .featured-text h2{
    padding: 0!important;
    font-weight:600;
  }
  
  .featured-square .featured-button p {
    padding: 0em 1em 0.5em 1em!important;
  }
  
  .featured-square .featured-button h2 {
    font-weight: 500!important;
    padding-bottom: 0!important;
  }

}

/* Tablet styles */
@media all and (min-width: 768px) and (max-width: 980px){
  .featured-button {
    margin: 0.25em!important;
  }

  .featured-stretch .featured-button .featured-text {
    margin: 72% 0 0.5em 0;
    padding: 1em;
    background-color: var(--featured-button-mobile-text-bg-color);
    text-align: center;	
  }
}

/* Mobile styles */
@media all and (max-width:767px){
  .featured-button {
    margin: 5px 0 5px 0!important;
  }

  .featured-stretch .featured-button .featured-text{
    margin: 80% 0 0.5em 0;
    padding: 1em;
    background-color: var(--featured-button-mobile-text-bg-color);
    text-align: center;	
  }
}

/* Mobile styles */
@media (max-width: 479px) {
  .active-filter-container {
    margin: 5px 0 5px 0 !important;
  }
}