/* ========================================================================
 * FILE: assets/css/wcaf-banner.css
 * Banner categoria / shop (WCAF)
 * ===================================================================== */

.wcaf-cat-banner {
  position: relative;
  color: var(--wcaf-banner-text-desktop, #fff);
  margin: var(--wcaf-banner-m-desktop, 0);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: var(--wcaf-banner-h-desktop, 260px);
  overflow: hidden;
}

.wcaf-cat-banner.has-bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wcaf-banner-overlay, rgba(0,0,0,.35));
  pointer-events: none;
}

.wcaf-cat-banner__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--wcaf-banner-py-desktop, 28px) var(--wcaf-banner-px-desktop, 24px);
  text-align: var(--wcaf-banner-align-desktop, left);
  display: flex;
  flex-direction: column;
  justify-content: var(--wcaf-banner-valign-desktop, center);
  min-height: var(--wcaf-banner-h-desktop, 260px);
}

/* Optional panel container (unico box per breadcrumbs + title + desc) */
.wcaf-cat-banner__panel {
  display: inline-block;
  max-width: var(--wcaf-banner-panel-maxw-desktop, 900px);
  background: var(--wcaf-banner-panel-bg-desktop, transparent);
  padding: var(--wcaf-banner-panel-py-desktop, 0px) var(--wcaf-banner-panel-px-desktop, 0px);
  border-radius: var(--wcaf-banner-panel-radius-desktop, 0px);
  border: var(--wcaf-banner-panel-border-desktop, none);
  -webkit-backdrop-filter: var(--wcaf-banner-panel-blur-desktop, none);
  backdrop-filter: var(--wcaf-banner-panel-blur-desktop, none);
}

/* Breadcrumbs */
.wcaf-cat-banner__breadcrumbs { margin: 0 0 10px 0; }

.wcaf-bc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;

  font-size: var(--wcaf-banner-bc-size-desktop, 13px);
  font-family: var(--wcaf-banner-bc-font-desktop, inherit);
  font-weight: var(--wcaf-banner-bc-weight-desktop, 500);
  letter-spacing: var(--wcaf-banner-bc-letter-desktop, 0px);
  text-transform: var(--wcaf-banner-bc-transform-desktop, none);

  background: var(--wcaf-banner-bc-bg-desktop, transparent);
  padding: var(--wcaf-banner-bc-bg-py-desktop, 0px) var(--wcaf-banner-bc-bg-px-desktop, 0px);
  border-radius: var(--wcaf-banner-bc-radius-desktop, 0px);
  border: var(--wcaf-banner-bc-border-desktop, none);
}

.wcaf-bc__link,
.wcaf-bc__current {
  color: inherit;
  text-decoration: none;
  opacity: .92;
}

.wcaf-bc__link:hover { text-decoration: underline; }
.wcaf-bc__sep { opacity: .65; }

/* Title */
.wcaf-cat-banner__title {
  margin: 0;
  font-size: var(--wcaf-banner-title-size-desktop, 34px);
  line-height: 1.1;

  font-family: var(--wcaf-banner-title-font-desktop, inherit);
  font-weight: var(--wcaf-banner-title-weight-desktop, 700);
  letter-spacing: var(--wcaf-banner-title-letter-desktop, 0px);
  text-transform: var(--wcaf-banner-title-transform-desktop, none);

  background: var(--wcaf-banner-title-bg-desktop, transparent);
  padding: var(--wcaf-banner-title-bg-py-desktop, 0px) var(--wcaf-banner-title-bg-px-desktop, 0px);
  border-radius: var(--wcaf-banner-title-radius-desktop, 0px);
  border: var(--wcaf-banner-title-border-desktop, none);

  display: inline-block;
}

/* Description */
.wcaf-cat-banner__desc {
  margin: 10px 0 0 0;
  max-width: 60ch;
  opacity: .92;

  font-size: var(--wcaf-banner-desc-size-desktop, 16px);
  line-height: 1.45;

  font-family: var(--wcaf-banner-desc-font-desktop, inherit);
  font-weight: var(--wcaf-banner-desc-weight-desktop, 400);
  letter-spacing: var(--wcaf-banner-desc-letter-desktop, 0px);
  text-transform: var(--wcaf-banner-desc-transform-desktop, none);

  background: var(--wcaf-banner-desc-bg-desktop, transparent);
  padding: var(--wcaf-banner-desc-bg-py-desktop, 0px) var(--wcaf-banner-desc-bg-px-desktop, 0px);
  border-radius: var(--wcaf-banner-desc-radius-desktop, 0px);
  border: var(--wcaf-banner-desc-border-desktop, none);

  display: inline-block;
}

/* Device visibility */
.wcaf-cat-banner .is-mobile { display: none; }
.wcaf-cat-banner .is-desktop { display: block; }

@media (max-width: 768px) {
  /* Mobile banner height uses fixed height (not min-height) */
  .wcaf-cat-banner{ height: var(--wcaf-banner-h-mobile, 170px); min-height: 0; }

  .wcaf-cat-banner {
    color: var(--wcaf-banner-text-mobile, #fff);
    margin: var(--wcaf-banner-m-mobile, 0);
    min-height: var(--wcaf-banner-h-mobile, 170px);
  }

  .wcaf-cat-banner__inner {
    /* IMPORTANT:
     * With fixed banner height on mobile, inner must not keep the desktop min-height.
     * Otherwise vertical alignment (especially bottom) can push texts outside the visible
     * area because the banner clips overflow.
     */
    height: var(--wcaf-banner-h-mobile, 170px);
    min-height: 0;
    padding: var(--wcaf-banner-py-mobile, 18px) var(--wcaf-banner-px-mobile, 16px);
    text-align: var(--wcaf-banner-align-mobile, left);
    justify-content: var(--wcaf-banner-valign-mobile, center);
  }

  .wcaf-cat-banner__panel {
    max-width: var(--wcaf-banner-panel-maxw-mobile, 100%);
    background: var(--wcaf-banner-panel-bg-mobile, transparent);
    padding: var(--wcaf-banner-panel-py-mobile, 0px) var(--wcaf-banner-panel-px-mobile, 0px);
    border-radius: var(--wcaf-banner-panel-radius-mobile, 0px);
    border: var(--wcaf-banner-panel-border-mobile, none);
    -webkit-backdrop-filter: var(--wcaf-banner-panel-blur-mobile, none);
    backdrop-filter: var(--wcaf-banner-panel-blur-mobile, none);
  }

  .wcaf-bc {
    font-size: var(--wcaf-banner-bc-size-mobile, 12px);
    font-family: var(--wcaf-banner-bc-font-mobile, inherit);
    font-weight: var(--wcaf-banner-bc-weight-mobile, 500);
    letter-spacing: var(--wcaf-banner-bc-letter-mobile, 0px);
    text-transform: var(--wcaf-banner-bc-transform-mobile, none);

    background: var(--wcaf-banner-bc-bg-mobile, transparent);
    padding: var(--wcaf-banner-bc-bg-py-mobile, 0px) var(--wcaf-banner-bc-bg-px-mobile, 0px);
    border-radius: var(--wcaf-banner-bc-radius-mobile, 0px);
    border: var(--wcaf-banner-bc-border-mobile, none);
  }

  .wcaf-cat-banner__title {
    font-size: var(--wcaf-banner-title-size-mobile, 26px);
    font-family: var(--wcaf-banner-title-font-mobile, inherit);
    font-weight: var(--wcaf-banner-title-weight-mobile, 700);
    letter-spacing: var(--wcaf-banner-title-letter-mobile, 0px);
    text-transform: var(--wcaf-banner-title-transform-mobile, none);

    background: var(--wcaf-banner-title-bg-mobile, transparent);
    padding: var(--wcaf-banner-title-bg-py-mobile, 0px) var(--wcaf-banner-title-bg-px-mobile, 0px);
    border-radius: var(--wcaf-banner-title-radius-mobile, 0px);
    border: var(--wcaf-banner-title-border-mobile, none);
  }

  /* richiesta: descrizione NON su mobile */
  .wcaf-cat-banner__desc { display: none !important; }

  .wcaf-cat-banner .is-mobile { display: block; }
  .wcaf-cat-banner .is-desktop { display: none; }
}

/* Toggle device enabled */
@media (min-width: 769px) { .wcaf-cat-banner:not(.is-desktop-on) { display: none; } }
@media (max-width: 768px) { .wcaf-cat-banner:not(.is-mobile-on) { display: none; } }