/* =====================================================================
   BLOG FILTERS — Premium editorial, Studio Legale Internazionale
   ===================================================================== */
.page-blog {
  --c-gold: #b8975a;
  --c-gold-deep: #96793f;
  --c-gold-soft: #d4b87c;
  --c-navy: #1a2a4a;
  --c-cream: #faf7f2;
  --c-border: #e7e2d6;
  --c-muted: #6d7383;
  --font-serif: Georgia, 'Times New Roman', serif;
}

/* Wrapper filtri: 1 modulo unico allineato al .container della griglia
   (stessa larghezza di .blog-grid e .blog-featured per coerenza visiva). */
.page-blog .blog-filters {
  margin: 2.6rem 0 2rem;
}

/* ---------- Search input premium ---------- */
.page-blog .blog-filter-search {
  position: relative;
  margin: 0 0 1.2rem;
  max-width: 560px;
}
.page-blog .blog-filter-search-icon {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-muted);
  pointer-events: none;
  font-size: 1rem;
  transition: color .25s ease;
}
[dir="rtl"] .page-blog .blog-filter-search-icon { left: auto; right: 1.05rem; }
.page-blog .blog-filter-search input {
  width: 100%;
  padding: .85rem 2.6rem .85rem 2.85rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-navy);
  font-size: .92rem;
  font-family: inherit;
  transition: border-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 1px 2px rgba(15,29,53,.04);
}
[dir="rtl"] .page-blog .blog-filter-search input {
  padding: .85rem 2.85rem .85rem 2.6rem;
}
.page-blog .blog-filter-search input::placeholder {
  color: var(--c-muted);
  opacity: .85;
}
.page-blog .blog-filter-search input:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(184,151,90,.18);
}
.page-blog .blog-filter-search input:focus + .blog-filter-search-icon,
.page-blog .blog-filter-search input:not(:placeholder-shown) ~ .blog-filter-search-icon {
  color: var(--c-gold-deep);
}
.page-blog .blog-filter-search-clear {
  position: absolute;
  right: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--c-cream);
  color: var(--c-muted);
  font-size: .68rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, color .25s ease;
}
[dir="rtl"] .page-blog .blog-filter-search-clear { right: auto; left: 1.05rem; }
.page-blog .blog-filter-search-clear:hover { background: var(--c-gold); color: #fff; }
.page-blog .blog-filter-search.has-value .blog-filter-search-clear { display: inline-flex; }
.page-blog .blog-filter-search-submit { display: none; }

/* ---------- Toolbar chip tipologia ---------- */
.page-blog .blog-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: flex-start;
  margin: 0;
}
.page-blog .blog-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.05rem .58rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-navy);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  font-family: inherit;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .25s ease, box-shadow .3s ease;
}
.page-blog .blog-filter-chip i {
  font-size: .92rem;
  color: var(--c-gold);
  transition: color .3s ease;
}
.page-blog .blog-filter-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 .35rem;
  background: var(--c-cream);
  color: var(--c-muted);
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-left: .15rem;
  transition: background .3s ease, color .3s ease;
}
.page-blog .blog-filter-chip:hover {
  border-color: var(--c-gold);
  color: var(--c-gold-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15,29,53,.07);
}
.page-blog .blog-filter-chip:hover .blog-filter-chip-count {
  background: rgba(184,151,90,.12);
  color: var(--c-gold-deep);
}
.page-blog .blog-filter-chip[aria-pressed="true"] {
  background: var(--c-navy);
  color: #fff;
  border-color: var(--c-navy);
  box-shadow: 0 8px 22px rgba(15,29,53,.18);
}
.page-blog .blog-filter-chip[aria-pressed="true"] i { color: var(--c-gold-soft); }
.page-blog .blog-filter-chip[aria-pressed="true"] .blog-filter-chip-count {
  background: rgba(184,151,90,.28);
  color: #fff;
}
/* Chip inattivi quando count=0 (dataset vuoto): sfumati e non clickable */
.page-blog .blog-filter-chip[data-count="0"]:not([aria-pressed="true"]) {
  opacity: .35;
  pointer-events: none;
}

/* ---------- Filter row: select + sort + reset (v3 premium) ---------- */
.page-blog .blog-filter-advanced {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.6rem;
  justify-content: flex-start;
  align-items: flex-end;
  margin: 1.2rem 0 0;
  padding: 1.3rem 1.7rem;
  background:
    linear-gradient(180deg, #fffefb 0%, var(--c-cream) 100%);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 8px 24px rgba(15,29,53,.04);
  position: relative;
}
/* Sottile riga gold al top, accento editoriale */
.page-blog .blog-filter-advanced::before {
  content: '';
  position: absolute;
  top: 0; left: 1.5rem; right: 1.5rem;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(184,151,90,.55) 30%,
    rgba(184,151,90,.55) 70%,
    transparent 100%);
  pointer-events: none;
}
/* Group: label sopra il dropdown, icona gold piccola */
.page-blog .blog-filter-group {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 180px;
  flex: 1 1 180px;
  max-width: 260px;
}
.page-blog .blog-filter-group label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--c-navy);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .64rem;
  opacity: .8;
}
.page-blog .blog-filter-group label i { color: var(--c-gold); font-size: .85rem; opacity: 1; }

/* Wrapper select: shell premium con bordo, hover/focus state ricalibrati. */
.page-blog .blog-filter-group .blog-filter-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.page-blog .blog-filter-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: .9rem 2.8rem .9rem 1.15rem;
  border: 1px solid #e1dccb;
  border-radius: 8px;
  background: #fff;
  color: var(--c-navy);
  font-size: .92rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: .01em;
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    background-color .25s ease,
    transform .25s cubic-bezier(.22,.6,.36,1);
  box-shadow:
    0 1px 0 #fff inset,
    0 1px 2px rgba(15,29,53,.05);
}
[dir="rtl"] .page-blog .blog-filter-group select { padding: .9rem 1.15rem .9rem 2.8rem; }
.page-blog .blog-filter-group select::-ms-expand { display: none; }
/* Custom arrow SVG con gradient gold-deep, animato su focus/hover */
.page-blog .blog-filter-group .blog-filter-select-wrap::after {
  content: '';
  position: absolute;
  right: 1.05rem;
  top: 50%;
  width: 12px; height: 8px;
  margin-top: -4px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2396793f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:
    transform .35s cubic-bezier(.22,.6,.36,1),
    opacity .25s ease;
  opacity: .85;
}
[dir="rtl"] .page-blog .blog-filter-group .blog-filter-select-wrap::after {
  right: auto; left: 1.05rem;
}
.page-blog .blog-filter-group select:hover {
  border-color: var(--c-gold);
  background: #fefdfb;
  box-shadow:
    0 1px 0 #fff inset,
    0 6px 16px rgba(15,29,53,.07);
}
.page-blog .blog-filter-group .blog-filter-select-wrap:hover::after {
  transform: translateY(1px);
  opacity: 1;
}
.page-blog .blog-filter-group select:focus {
  outline: none;
  border-color: var(--c-gold);
  background: #fff;
  box-shadow:
    0 1px 0 #fff inset,
    0 0 0 3px rgba(184,151,90,.22),
    0 6px 18px rgba(15,29,53,.08);
}
.page-blog .blog-filter-group select:focus + .blog-filter-select-arrow,
.page-blog .blog-filter-group select:focus ~ .blog-filter-select-arrow { /* legacy */ }
.page-blog .blog-filter-group .blog-filter-select-wrap:focus-within::after {
  transform: translateY(0) rotate(180deg);
  opacity: 1;
}
.page-blog .blog-filter-group select option {
  font-family: inherit;
  font-size: .92rem;
  padding: .5rem .9rem;
  color: var(--c-navy);
  background: #fff;
}

/* Reset filters: bottone sobrio */
.page-blog .blog-filter-reset {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  color: var(--c-gold-deep);
  background: transparent;
  border: 1px solid var(--c-gold);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .5rem 1rem;
  border-radius: 999px;
  transition: background .3s ease, color .3s ease, transform .25s ease;
}
.page-blog .blog-filter-reset:hover {
  background: var(--c-gold);
  color: #fff;
  transform: translateY(-1px);
}
[dir="rtl"] .page-blog .blog-filter-reset { margin-left: 0; margin-right: auto; }

/* ---------- v4 — Custom dropdown listbox accessibile ---------- */
/* Pattern: il <select> nativo è hidden (via JS, dopo enhance) ma resta nel
   DOM per il submit del form. Sopra di esso costruiamo una UI custom
   premium (button + listbox). Se JS fallisce, il select nativo resta
   visibile via fallback CSS. */
.page-blog .bf-dd {
  position: relative;
  width: 100%;
  font-family: inherit;
}
/* Bottone trigger: ricalca la shell del select nativo v3 */
.page-blog .bf-dd-trigger {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .9rem 2.8rem .9rem 1.15rem;
  border: 1px solid #e1dccb;
  border-radius: 8px;
  background: #fff;
  color: var(--c-navy);
  font-size: .92rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: .01em;
  text-align: left;
  position: relative;
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    background-color .25s ease;
  box-shadow:
    0 1px 0 #fff inset,
    0 1px 2px rgba(15,29,53,.05);
}
[dir="rtl"] .page-blog .bf-dd-trigger { text-align: right; padding: .9rem 1.15rem .9rem 2.8rem; }
.page-blog .bf-dd-trigger::after {
  content: '';
  position: absolute;
  right: 1.05rem;
  top: 50%;
  width: 12px; height: 8px;
  margin-top: -4px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2396793f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .3s cubic-bezier(.22,.6,.36,1);
  opacity: .85;
}
[dir="rtl"] .page-blog .bf-dd-trigger::after { right: auto; left: 1.05rem; }
.page-blog .bf-dd-trigger:hover {
  border-color: var(--c-gold);
  background: #fefdfb;
  box-shadow: 0 1px 0 #fff inset, 0 6px 16px rgba(15,29,53,.07);
}
.page-blog .bf-dd-trigger:focus-visible {
  outline: none;
  border-color: var(--c-gold);
  box-shadow:
    0 1px 0 #fff inset,
    0 0 0 3px rgba(184,151,90,.22),
    0 6px 18px rgba(15,29,53,.08);
}
.page-blog .bf-dd[data-open="true"] .bf-dd-trigger {
  border-color: var(--c-gold);
  box-shadow:
    0 1px 0 #fff inset,
    0 0 0 3px rgba(184,151,90,.22);
}
.page-blog .bf-dd[data-open="true"] .bf-dd-trigger::after {
  transform: rotate(180deg);
  opacity: 1;
}
/* v6 — Listbox luxe: panel più presente, transitions raffinate, accent gold */
.page-blog .bf-dd-list {
  position: absolute;
  top: calc(100% + .55rem);
  left: 0; right: 0;
  z-index: 50;
  margin: 0;
  padding: .55rem .4rem;
  list-style: none;
  background: #fffdf8;
  border: 1px solid #e8e2cf;
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 24px 48px rgba(15,29,53,.20),
    0 6px 16px rgba(15,29,53,.07);
  max-height: 320px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transform-origin: top center;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity .26s ease,
    transform .28s cubic-bezier(.22,.6,.36,1),
    visibility 0s linear .26s;
}
/* Sottile linea gold sopra il listbox per accent editoriale */
.page-blog .bf-dd-list::before {
  content: '';
  position: absolute;
  top: 0; left: 1.2rem; right: 1.2rem;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(184,151,90,.55) 30%,
    rgba(184,151,90,.55) 70%,
    transparent 100%);
  pointer-events: none;
}
.page-blog .bf-dd[data-open="true"] .bf-dd-list {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity .26s ease,
    transform .28s cubic-bezier(.22,.6,.36,1),
    visibility 0s;
}
.page-blog .bf-dd-list::-webkit-scrollbar { width: 8px; }
.page-blog .bf-dd-list::-webkit-scrollbar-track { background: transparent; }
.page-blog .bf-dd-list::-webkit-scrollbar-thumb {
  background: rgba(184,151,90,.35);
  border-radius: 4px;
}
.page-blog .bf-dd-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .72rem 1rem .72rem 1.05rem;
  border-radius: 8px;
  color: var(--c-navy);
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background .25s ease,
    color .25s ease,
    padding-left .25s cubic-bezier(.22,.6,.36,1);
}
/* Sottile bordo sinistro gold animato su hover/active per feel editoriale */
.page-blog .bf-dd-option::before {
  content: '';
  position: absolute;
  left: .35rem; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px; height: 60%;
  background: var(--c-gold);
  border-radius: 2px;
  transition: transform .28s cubic-bezier(.22,.6,.36,1);
}
[dir="rtl"] .page-blog .bf-dd-option::before { left: auto; right: .35rem; }
.page-blog .bf-dd-option:hover,
.page-blog .bf-dd-option[data-active="true"] {
  background: linear-gradient(90deg, rgba(184,151,90,.12) 0%, rgba(184,151,90,.04) 100%);
  color: var(--c-gold-deep);
  padding-left: 1.3rem;
}
[dir="rtl"] .page-blog .bf-dd-option:hover,
[dir="rtl"] .page-blog .bf-dd-option[data-active="true"] {
  padding-left: 1.05rem;
  padding-right: 1.3rem;
}
.page-blog .bf-dd-option:hover::before,
.page-blog .bf-dd-option[data-active="true"]::before {
  transform: translateY(-50%) scaleY(1);
}
.page-blog .bf-dd-option[aria-selected="true"] {
  background: rgba(15,29,53,.045);
  color: var(--c-navy);
  font-weight: 700;
  letter-spacing: .005em;
}
.page-blog .bf-dd-option[aria-selected="true"]::after {
  content: '\F26E'; /* bi-check */
  font-family: 'bootstrap-icons';
  color: var(--c-gold-deep);
  font-size: 1.05rem;
  margin-left: auto;
  flex-shrink: 0;
}
[dir="rtl"] .page-blog .bf-dd-option[aria-selected="true"]::after { margin-left: 0; margin-right: auto; }

/* Quando JS è attivo, nascondi il select nativo (che diventa
   un input fantasma per il submit). La classe `.bf-enhanced` viene
   aggiunta dal JS al wrap dopo l'enhancement: select fallback resta in
   DOM ma invisibile (no display:none → submit form ok in tutti i casi). */
.page-blog .blog-filter-select-wrap.bf-enhanced > select {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.page-blog .blog-filter-select-wrap.bf-enhanced > .blog-filter-select-wrap-arrow,
.page-blog .blog-filter-select-wrap.bf-enhanced::after {
  display: none;
}

/* ---------- Result counter + active filters summary ---------- */
.page-blog .blog-filter-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin: 1.4rem 0 0;
  padding: 0 .25rem;
  font-size: .82rem;
  color: var(--c-muted);
  letter-spacing: .02em;
}
.page-blog .blog-filter-status-count {
  font-family: var(--font-serif);
  color: var(--c-navy);
  font-weight: 500;
  font-size: .9rem;
}
.page-blog .blog-filter-status-count strong {
  color: var(--c-gold-deep);
  font-weight: 700;
  margin-right: .25rem;
}
.page-blog .blog-filter-status-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .7rem;
  background: rgba(184,151,90,.1);
  color: var(--c-gold-deep);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.page-blog .blog-filter-status-pill i { font-size: .78rem; }

/* ---------- Empty state premium ---------- */
.page-blog .blog-empty {
  text-align: center;
  padding: 4rem 1.5rem 3.5rem;
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  max-width: 720px;
  margin: 2.4rem auto;
}
.page-blog .blog-empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: rgba(184,151,90,.12);
  color: var(--c-gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.page-blog .blog-empty-title {
  font-family: var(--font-serif);
  color: var(--c-navy);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 .6rem;
}
.page-blog .blog-empty-text {
  color: var(--c-muted);
  font-size: .92rem;
  line-height: 1.55;
  margin: 0 0 1.4rem;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.page-blog .blog-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--c-gold-deep);
  background: #fff;
  border: 1px solid var(--c-gold);
  padding: .65rem 1.25rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .3s ease, color .3s ease, transform .25s ease;
}
.page-blog .blog-empty-cta:hover {
  background: var(--c-gold);
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .page-blog .blog-filters { margin: 2rem auto 1.2rem; }
  .page-blog .blog-filter-toolbar {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: .6rem;
    margin: 0 -.5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    scroll-snap-type: x proximity;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page-blog .blog-filter-toolbar::-webkit-scrollbar { display: none; }
  .page-blog .blog-filter-chip {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .page-blog .blog-filter-advanced {
    flex-direction: column;
    align-items: stretch;
    gap: .9rem;
    padding: 1rem 1.1rem;
  }
  .page-blog .blog-filter-group {
    max-width: none;
    flex: 1 1 auto;
  }
  .page-blog .blog-filter-reset {
    margin: .4rem 0 0;
    align-self: stretch;
    justify-content: center;
  }
  .page-blog .blog-filter-status {
    justify-content: center;
    text-align: center;
  }
}