/*
 * fd-theme-2 - components.css
 * Componenti condivisi: header, menu mobile, footer, back-to-top, breadcrumb,
 * card portfolio / post / oggetto, contenuto WYSIWYG (.fd-prose).
 *
 * Nota: le transizioni senza timing esplicito usano cubic-bezier(.4, 0, .2, 1)
 * e durata di 150ms.
 */

/* ==========================================================================
   Header
   ========================================================================== */
.fd-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100%;
  padding-block: 1.5rem;
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.3s;
}

/* Stato dopo 50px di scroll: effetto vetro */
.fd-header.is-scrolled {
  padding-block: 1rem;
  background-color: color-mix(in oklab, var(--color-neutral-950) 20%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-xl));
  backdrop-filter: blur(var(--blur-xl));
  box-shadow:
    0 10px 15px -3px color-mix(in oklab, var(--color-black) 50%, transparent),
    0 4px 6px -4px color-mix(in oklab, var(--color-black) 50%, transparent);
  border-bottom-width: 1px;
  border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
}

.fd-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo caricato dal Customizer */
.fd-header__logo {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  transition-property: opacity;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.3s;
}

.fd-header__logo-img {
  height: 2rem;
  width: auto;
  object-fit: contain;
}

/* Logo testuale di riserva "FD." */
.fd-header__brand {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-white);
}

.fd-header__brand-dot {
  color: var(--color-blue-500);
}

/* Menu desktop */
.fd-header__nav {
  display: none;
  gap: 2rem;
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-200);
}

.fd-header__link {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.2s;
}

.fd-header__actions {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
}

/* Spazio di 0.75rem tra le azioni: il margine resta anche se il bottone hamburger e nascosto (desktop) */
.fd-header__actions > :not(:last-child) {
  margin-inline-end: 0.75rem;
}

/* Bottone "PARLIAMO" */
.fd-header__cta {
  padding: 0.5rem 1rem;
  background-color: var(--color-white);
  color: var(--color-black);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-bold);
  border-radius: 9999px;
  box-shadow:
    0 10px 15px -3px color-mix(in oklab, var(--color-white) 10%, transparent),
    0 4px 6px -4px color-mix(in oklab, var(--color-white) 10%, transparent);
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.3s;
}

/* Bottone hamburger (solo mobile) */
.fd-header__toggle {
  padding: 0.25rem;
  color: var(--color-white);
  border-radius: 0.25rem;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.3s;
}

.fd-header__toggle:focus {
  outline-style: none;
  box-shadow: 0 0 0 2px var(--color-blue-500);
}

.fd-header__toggle-icon {
  width: 1.75rem;
  height: 1.75rem;
}

@media (hover: hover) {
  .fd-header__logo:hover {
    opacity: 0.8;
  }

  .fd-header__link:hover {
    color: var(--color-blue-400);
  }

  .fd-header__cta:hover {
    scale: 105%;
    background-color: var(--color-blue-50);
  }
}

@media (width >= 48rem) {
  .fd-header__logo-img {
    height: 2.5rem;
  }

  .fd-header__nav {
    display: flex;
  }

  .fd-header__actions > :not(:last-child) {
    margin-inline-end: 1rem;
  }

  .fd-header__cta {
    padding: 0.625rem 1.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .fd-header__toggle {
    display: none;
  }
}

/* ==========================================================================
   Menu mobile (overlay a schermo intero)
   ========================================================================== */
.fd-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: color-mix(in oklab, var(--color-neutral-950) 95%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-2xl));
  backdrop-filter: blur(var(--blur-2xl));
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.5s;
}

.fd-mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.fd-mobile-menu__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.5rem;
  color: var(--color-neutral-300);
  border-radius: 0.25rem;
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.5s;
}

.fd-mobile-menu__close:focus {
  outline-style: none;
  box-shadow: 0 0 0 2px var(--color-blue-500);
}

.fd-mobile-menu__close-icon {
  width: 2.25rem;
  height: 2.25rem;
}

.fd-mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  padding-inline: 2rem;
  text-align: center;
}

/* Contenitori delle voci: tagliano la voce mentre sale */
.fd-mobile-menu__item {
  overflow: hidden;
}

.fd-mobile-menu__item--cta {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}

.fd-mobile-menu__item--social {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding-top: 3rem;
}

/*
 * Voci animate: da chiuso sono 2rem piu in basso e trasparenti.
 * All'apertura entrano a cascata: ritardo = 100ms + 50ms per indice (--fd-i, impostato in PHP).
 * In chiusura tornano nascoste dopo 400ms, come nello script originale.
 */
.fd-mobile-menu__link,
.fd-mobile-menu__cta,
.fd-mobile-menu__social-link {
  --fd-delay: calc(100ms + var(--fd-i, 0) * 50ms);
  translate: 0 2rem;
  opacity: 0;
  transition-timing-function: var(--default-transition-timing-function);
}

.fd-mobile-menu.is-open .fd-mobile-menu__link,
.fd-mobile-menu.is-open .fd-mobile-menu__cta,
.fd-mobile-menu.is-open .fd-mobile-menu__social-link {
  translate: 0 0;
  opacity: 1;
}

/* Link di menu: colore animato, ingresso a scatto dopo il ritardo */
.fd-mobile-menu__link {
  display: block;
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-neutral-200);
  transition-property: color, translate, opacity;
  transition-duration: 0.3s, 0s, 0s;
  transition-delay: 0s, 400ms, 400ms;
}

/* Bottone "CONTATTAMI" */
.fd-mobile-menu__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border: 1px solid var(--color-neutral-700);
  border-radius: 9999px;
  color: var(--color-white);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  transition-property: color, background-color, translate, opacity;
  transition-duration: 0.5s;
  transition-delay: 0s, 0s, 400ms, 400ms;
}

.fd-mobile-menu__cta-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.5rem;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.fd-mobile-menu__social-link {
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-400);
  transition-property: color, translate, opacity;
  transition-duration: 0.3s;
  transition-delay: 0s, 400ms, 400ms;
}

.fd-mobile-menu.is-open .fd-mobile-menu__link {
  transition-delay: 0s, var(--fd-delay), var(--fd-delay);
}

.fd-mobile-menu.is-open .fd-mobile-menu__cta {
  transition-delay: 0s, 0s, var(--fd-delay), var(--fd-delay);
}

.fd-mobile-menu.is-open .fd-mobile-menu__social-link {
  transition-delay: 0s, var(--fd-delay), var(--fd-delay);
}

@media (hover: hover) {
  .fd-mobile-menu__close:hover {
    color: var(--color-white);
    rotate: 90deg;
  }

  .fd-mobile-menu__link:hover {
    color: var(--color-blue-400);
  }

  .fd-mobile-menu__cta:hover {
    background-color: var(--color-white);
    color: var(--color-black);
  }

  .fd-mobile-menu__cta:hover .fd-mobile-menu__cta-icon {
    translate: 0.25rem 0;
  }

  .fd-mobile-menu__social-link:hover {
    color: var(--color-white);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.fd-footer {
  position: relative;
  z-index: 10;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 2.5rem;
  background-color: var(--color-neutral-950);
  border-top: 1px solid color-mix(in oklab, var(--color-neutral-800) 50%, transparent);
}

/* Pagina contatti: meno spazio sopra */
.fd-footer--compact {
  padding-top: 2.5rem;
}

/* Home: filetto superiore più tenue */
.fd-footer--home {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Alone blu sul bordo inferiore */
.fd-footer__glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 50%;
  width: 600px;
  height: 300px;
  background-color: color-mix(in oklab, var(--color-blue-600) 10%, transparent);
  filter: blur(100px);
  border-radius: 9999px;
  pointer-events: none;
}

.fd-footer__inner {
  position: relative;
  z-index: 10;
  text-align: center;
}

.fd-footer__title {
  margin-bottom: 2rem;
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-white);
}

.fd-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 5rem;
  padding: 1rem 2rem;
  background-color: var(--color-white);
  color: var(--color-black);
  font-weight: var(--font-weight-bold);
  border-radius: 9999px;
  box-shadow:
    0 10px 15px -3px color-mix(in oklab, var(--color-white) 5%, transparent),
    0 4px 6px -4px color-mix(in oklab, var(--color-white) 5%, transparent);
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.3s;
}

.fd-footer__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

/* Barra con filetto (tutte le pagine tranne contatti) */
.fd-footer__bar--bordered {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in oklab, var(--color-neutral-800) 50%, transparent);
}

.fd-footer__copy-name {
  margin-left: 0.25rem;
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
}

.fd-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

.fd-footer__links > :not(:last-child) {
  margin-inline-end: 1.5rem;
}

.fd-footer__link {
  color: var(--color-neutral-400);
  font-weight: var(--font-weight-medium);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.fd-footer__empty {
  color: var(--color-neutral-600);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-style: italic;
}

@media (hover: hover) {
  .fd-footer__cta:hover {
    scale: 105%;
    background-color: var(--color-neutral-200);
  }

  .fd-footer__link:hover {
    color: var(--color-white);
  }
}

@media (width >= 48rem) {
  .fd-footer__title {
    font-size: var(--text-6xl);
    line-height: var(--text-6xl--line-height);
  }

  .fd-footer__bar {
    flex-direction: row;
  }

  .fd-footer__links {
    margin-top: 0;
  }
}

/* ==========================================================================
   Back to top
   ========================================================================== */
.fd-back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 50;
  padding: 0.625rem;
  color: var(--color-white);
  background-color: color-mix(in oklab, var(--color-neutral-800) 40%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
  border: 1px solid color-mix(in oklab, var(--color-neutral-700) 50%, transparent);
  border-radius: var(--radius-2xl);
  box-shadow:
    0 20px 25px -5px color-mix(in oklab, var(--color-black) 50%, transparent),
    0 8px 10px -6px color-mix(in oklab, var(--color-black) 50%, transparent);
  /* nascosto: trasparente e 2rem piu in basso */
  opacity: 0;
  translate: 0 2rem;
  pointer-events: none;
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.5s;
}

.fd-back-to-top.is-visible {
  opacity: 1;
  translate: none;
  pointer-events: auto;
}

.fd-back-to-top:focus {
  outline-style: none;
  box-shadow:
    0 0 0 2px var(--color-blue-500),
    0 20px 25px -5px color-mix(in oklab, var(--color-black) 50%, transparent),
    0 8px 10px -6px color-mix(in oklab, var(--color-black) 50%, transparent);
}

.fd-back-to-top__icon {
  width: 1.25rem;
  height: 1.25rem;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.3s;
}

@media (hover: hover) {
  .fd-back-to-top:hover {
    background-color: var(--color-blue-600);
    color: var(--color-white);
    border-color: var(--color-blue-500);
    translate: 0 -0.25rem;
  }

  .fd-back-to-top:hover .fd-back-to-top__icon {
    translate: 0 -0.25rem;
  }
}

@media (width >= 64rem) {
  .fd-back-to-top {
    padding: 0.75rem;
  }
}

/* ==========================================================================
   Breadcrumb (markup generato da fd_breadcrumbs())
   ========================================================================== */
.fd-breadcrumbs {
  position: relative;
  z-index: 20;
  width: 100%;
  margin-bottom: 2rem;
}

.fd-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-400);
}

.fd-breadcrumbs__list > :not(:last-child) {
  margin-inline-end: 0.5rem;
}

.fd-breadcrumbs__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-inline: 0.25rem;
  border-radius: 0.25rem;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.fd-breadcrumbs__link:focus {
  outline-style: none;
  box-shadow: 0 0 0 2px var(--color-blue-500);
}

/* Variante verde per blog e categorie */
.fd-breadcrumbs__link--blog:focus {
  box-shadow: 0 0 0 2px var(--color-green-500);
}

.fd-breadcrumbs__sep {
  display: flex;
  align-items: center;
  color: var(--color-neutral-600);
}

.fd-breadcrumbs__current {
  color: var(--color-neutral-200);
}

.fd-breadcrumbs__current--truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) {
  .fd-breadcrumbs__link:hover {
    color: var(--color-blue-400);
  }

  .fd-breadcrumbs__link--blog:hover {
    color: var(--color-green-400);
  }
}

@media (width >= 40rem) {
  .fd-breadcrumbs__current--truncate {
    max-width: var(--container-md);
  }
}

@media (width >= 48rem) {
  .fd-breadcrumbs__list {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }
}

/* ==========================================================================
   Card portfolio
   Il colore brand arriva dal markup come custom property --hover-color;
   --fd-shot-ratio (altezza/larghezza) e --fd-shot-w (px reali) da fd_project_media_style().
   Modalità (classe --mode, decisa in inc/media.php):
   --scroll  screenshot alto in finestra browser, la pagina scorre in hover / quando entra in vista
   --framed  immagine piccola in finestra browser, mai più larga della sua risoluzione
   --cover   immagine grande a tutta card
   --none    copertina generativa con monogramma nel colore brand
   ========================================================================== */
.fd-card-portfolio {
  --fd-card-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 400px;
  padding: 2rem;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background-color: var(--color-neutral-900);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-white) 6%, transparent);
  cursor: pointer;
  transition: translate .6s var(--fd-card-ease), box-shadow .6s var(--fd-card-ease);
}

/* Luce ambientale: la stessa anteprima, molto sfocata e satura */
.fd-card-portfolio__ambient {
  position: absolute;
  inset: -15%;
  z-index: 0;
  width: 130%;
  max-width: none;
  height: 130%;
  object-fit: cover;
  object-position: top;
  opacity: .5;
  filter: blur(36px) saturate(1.5);
  transform: translateZ(0);
  transition: opacity .8s var(--fd-card-ease);
}

/* Immagine a tutta card (solo anteprime ad alta risoluzione) */
.fd-card-portfolio__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: .55;
  transition: opacity .9s var(--fd-card-ease), scale 1.4s var(--fd-card-ease);
}

/* Finestra browser con lo screenshot */
.fd-card-portfolio__window {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  z-index: 1;
  width: min(80%, calc(var(--fd-shot-w, 2000) * 1px));
  height: 74%;
  overflow: hidden;
  border-radius: .75rem;
  background-color: var(--color-neutral-950);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--color-white) 12%, transparent),
    0 30px 60px -20px #000000cc,
    0 0 50px -10px color-mix(in srgb, var(--hover-color) 35%, transparent);
  transform: translateX(-50%) perspective(1400px) rotateX(9deg);
  transform-origin: 50% 100%;
  transition: transform .9s var(--fd-card-ease), box-shadow .9s var(--fd-card-ease);
}

.fd-card-portfolio__bar {
  display: flex;
  align-items: center;
  gap: .3rem;
  height: 1.25rem;
  padding-inline: .6rem;
  background-color: color-mix(in oklab, var(--color-neutral-800) 90%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--color-white) 8%, transparent);
}

.fd-card-portfolio__bar i {
  width: .375rem;
  height: .375rem;
  border-radius: 9999px;
  background-color: color-mix(in oklab, var(--color-white) 25%, transparent);
}

.fd-card-portfolio__viewport {
  position: relative;
  height: calc(100% - 1.25rem);
  overflow: hidden;
  container-type: size;
}

.fd-card-portfolio__shot {
  display: block;
  width: 100%;
  height: auto;
  /* Rientro rapido quando il mouse esce */
  transition: transform 1.1s var(--fd-card-ease);
}

/* Immagine orizzontale piccola: riempie la finestra dall'alto, senza scorrere */
.fd-card-portfolio--framed .fd-card-portfolio__shot {
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Copertina generativa per i progetti senza immagine */
.fd-card-portfolio__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 3.5rem;
  background:
    radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--hover-color) 55%, transparent), transparent 60%),
    radial-gradient(90% 70% at 0% 30%, color-mix(in srgb, var(--hover-color) 25%, transparent), transparent 70%),
    linear-gradient(color-mix(in oklab, var(--color-white) 4%, transparent) 1px, transparent 1px) 0 0 / 2rem 2rem,
    linear-gradient(90deg, color-mix(in oklab, var(--color-white) 4%, transparent) 1px, transparent 1px) 0 0 / 2rem 2rem,
    var(--color-neutral-900);
}

.fd-card-portfolio__monogram {
  font-size: clamp(5rem, 14vw, 8rem);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--color-white) 35%, transparent);
  transition: translate 1s var(--fd-card-ease), -webkit-text-stroke-color .6s;
}

/* Sfumatura scura dal basso per la leggibilità: la parte alta resta all'anteprima */
.fd-card-portfolio__shade {
  position: absolute;
  inset: 0;
  z-index: 10;
  background-image: linear-gradient(
    to top in oklab,
    var(--color-neutral-950) 0%,
    color-mix(in oklab, var(--color-neutral-950) 88%, transparent) 32%,
    color-mix(in oklab, var(--color-neutral-950) 30%, transparent) 62%,
    transparent 85%
  );
}

/* Velo nel colore brand, visibile solo in hover */
.fd-card-portfolio__glow {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 11;
  height: 66.6667%;
  background: linear-gradient(to top, var(--hover-color) 0%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s var(--fd-card-ease);
}

.fd-card-portfolio__content {
  position: relative;
  z-index: 20;
}

.fd-card-portfolio__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: 1rem;
}

.fd-card-portfolio__badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-white);
  background-color: color-mix(in srgb, var(--hover-color) 30%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-white) 20%, transparent);
  border-radius: 9999px;
  box-shadow:
    0 4px 6px -1px #0000001a,
    0 2px 4px -2px #0000001a;
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
}

/* Credito "per Dinova srl" estratto dall'estratto del progetto */
.fd-card-portfolio__credit {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-neutral-400);
}

.fd-card-portfolio__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.75rem;
}

.fd-card-portfolio__title {
  padding-right: 1rem;
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: -.01em;
  color: var(--color-white);
  text-wrap: balance;
}

/* Pallino con freccia */
.fd-card-portfolio__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
  transition: background-color .4s var(--fd-card-ease), rotate .5s var(--fd-card-ease);
}

.fd-card-portfolio__arrow-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-white);
  transition: color .4s var(--fd-card-ease);
}

.fd-card-portfolio__excerpt {
  margin-top: 0.5rem;
  color: var(--color-neutral-300);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-wrap: pretty;
}

/* Bordo nel colore brand, visibile solo in hover */
.fd-card-portfolio__frame {
  position: absolute;
  inset: 0;
  z-index: 30;
  border: 1px solid transparent;
  border-radius: var(--radius-3xl);
  pointer-events: none;
  transition: border-color .6s var(--fd-card-ease);
}

/* Stato "attivo": hover su desktop, card in vista su touch (classe is-inview da premium.js) */
@media (hover: hover) {
  .fd-card-portfolio:hover {
    translate: 0 -0.5rem;
    box-shadow:
      inset 0 0 0 1px color-mix(in oklab, var(--color-white) 10%, transparent),
      0 30px 60px -25px color-mix(in srgb, var(--hover-color) 45%, transparent);
  }

  .fd-card-portfolio:hover .fd-card-portfolio__ambient {
    opacity: .75;
  }

  .fd-card-portfolio:hover .fd-card-portfolio__image {
    scale: 104%;
    opacity: .75;
  }

  .fd-card-portfolio:hover .fd-card-portfolio__window {
    transform: translateX(-50%) perspective(1400px) rotateX(0deg) translateY(-.25rem);
  }

  .fd-card-portfolio:hover .fd-card-portfolio__monogram {
    translate: 0 -.5rem;
    -webkit-text-stroke-color: var(--hover-color);
  }

  .fd-card-portfolio:hover .fd-card-portfolio__glow {
    opacity: 0.35;
  }

  .fd-card-portfolio:hover .fd-card-portfolio__arrow {
    background-color: var(--color-white);
    rotate: -45deg;
  }

  .fd-card-portfolio:hover .fd-card-portfolio__arrow-icon {
    color: var(--color-black);
  }

  .fd-card-portfolio:hover .fd-card-portfolio__frame {
    border-color: color-mix(in srgb, var(--hover-color) 70%, transparent);
  }
}

/* Lo screenshot scorre fino in fondo: durata proporzionale all'altezza della pagina */
.fd-card-portfolio--scroll:is(:hover, .is-inview) .fd-card-portfolio__shot {
  transform: translateY(min(0px, calc(-100% + 100cqh)));
  transition: transform calc(var(--fd-shot-ratio, 2.5) * 1.8s) cubic-bezier(.45, .05, .35, 1) .15s;
}

/* Su desktop conta solo l'hover */
@media (hover: hover) {
  .fd-card-portfolio--scroll.is-inview:not(:hover) .fd-card-portfolio__shot {
    transform: none;
    transition: transform 1.1s var(--fd-card-ease);
  }
}

/* Su touch la finestra si raddrizza quando la card è in vista */
@media (hover: none) {
  .fd-card-portfolio.is-inview .fd-card-portfolio__window {
    transform: translateX(-50%) perspective(1400px) rotateX(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fd-card-portfolio,
  .fd-card-portfolio * {
    transition-duration: .01ms !important;
  }

  .fd-card-portfolio--scroll .fd-card-portfolio__shot {
    transform: none !important;
  }
}

@media (width >= 48rem) {
  .fd-card-portfolio__title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
  }
}

/* ==========================================================================
   Card post (blog)
   ========================================================================== */
.fd-card-post {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  padding: 2rem;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  cursor: pointer;
}

.fd-card-post__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0.4;
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.7s;
}

/* Riempimento quando manca l'immagine in evidenza */
.fd-card-post__placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-neutral-900);
}

.fd-card-post__shade {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background-image: linear-gradient(
    to top in oklab,
    var(--color-neutral-950),
    color-mix(in oklab, var(--color-neutral-950) 70%, transparent),
    transparent
  );
}

.fd-card-post__content {
  position: relative;
  z-index: 20;
  pointer-events: none;
}

.fd-card-post__badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-green-400);
  background-color: color-mix(in oklab, var(--color-green-400) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-green-400) 20%, transparent);
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
}

.fd-card-post__title {
  margin-bottom: 1rem;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.fd-card-post__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1rem;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-neutral-400);
  border-top: 1px solid color-mix(in oklab, var(--color-neutral-800) 80%, transparent);
}

.fd-card-post__date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fd-card-post__date-icon {
  width: 1rem;
  height: 1rem;
}

.fd-card-post__arrow {
  width: 1.25rem;
  height: 1.25rem;
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.fd-card-post__frame {
  position: absolute;
  inset: 0;
  z-index: 30;
  border: 1px solid color-mix(in oklab, var(--color-neutral-800) 60%, transparent);
  border-radius: var(--radius-2xl);
  pointer-events: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.5s;
}

@media (hover: hover) {
  .fd-card-post:hover .fd-card-post__image {
    scale: 105%;
    opacity: 0.6;
  }

  .fd-card-post:hover .fd-card-post__title {
    color: var(--color-green-300);
  }

  .fd-card-post:hover .fd-card-post__arrow {
    translate: 0.25rem 0;
    color: var(--color-white);
  }

  .fd-card-post:hover .fd-card-post__frame {
    border-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
  }
}

/* ==========================================================================
   Card oggetto (collezioni e passioni)
   Il filtro è gestito da assets/js/oggetti.js: le classi di stato
   .is-entering, .is-leaving, .is-faded e .is-shown pilotano la transizione.
   ========================================================================== */
.fd-card-obj {
  --fd-obj-ring: 0 0 #0000;
  --fd-obj-shadow: 0 0 #0000;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-neutral-900);
  border: 1px solid color-mix(in oklab, var(--color-neutral-800) 60%, transparent);
  border-radius: var(--radius-3xl);
  box-shadow: var(--fd-obj-ring), var(--fd-obj-shadow);
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.5s;
}

.fd-card-obj:focus-within {
  --fd-obj-ring: 0 0 0 2px var(--color-amber-500);
}

/* Fasi della transizione del filtro (0.5s, come nell'originale) */
.fd-card-obj.is-entering {
  transition-timing-function: var(--ease-out);
}

.fd-card-obj.is-leaving {
  transition-timing-function: var(--ease-in);
}

.fd-card-obj.is-faded {
  opacity: 0;
  scale: 95%;
}

.fd-card-obj.is-shown {
  opacity: 1;
  scale: 100%;
}

.fd-card-obj__media {
  position: relative;
  width: 100%;
  height: 16rem;
  overflow: hidden;
  background-color: var(--color-neutral-950);
}

.fd-card-obj__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.7s;
}

.fd-card-obj__shade {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background-image: linear-gradient(
    to top in oklab,
    var(--color-neutral-900),
    color-mix(in oklab, var(--color-neutral-900) 40%, transparent),
    transparent
  );
}

/* Riga in alto: categoria a sinistra, voto a destra */
.fd-card-obj__top {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.fd-card-obj__badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-black);
  background-color: var(--color-amber-500);
  border-radius: 9999px;
  box-shadow:
    0 4px 6px -1px #0000001a,
    0 2px 4px -2px #0000001a;
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
}

.fd-card-obj__rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: color-mix(in oklab, var(--color-neutral-950) 80%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-white) 10%, transparent);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
}

.fd-card-obj__rating-star {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--color-amber-400);
}

.fd-card-obj__rating-value {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.fd-card-obj__rating-max {
  color: var(--color-neutral-500);
}

.fd-card-obj__body {
  z-index: 20;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.5rem;
}

.fd-card-obj__header {
  margin-bottom: 1rem;
}

.fd-card-obj__title {
  margin-bottom: 0.5rem;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

/* Link del titolo esteso a tutta la card */
.fd-card-obj__link:focus {
  outline-style: none;
}

.fd-card-obj__link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.fd-card-obj__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-400);
}

.fd-card-obj__meta-item {
  display: flex;
  align-items: center;
}

.fd-card-obj__meta-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.25rem;
  color: var(--color-neutral-500);
}

.fd-card-obj__meta-dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 9999px;
  background-color: var(--color-neutral-700);
}

.fd-card-obj__excerpt {
  margin-top: auto;
  margin-bottom: 1.5rem;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-neutral-300);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.fd-card-obj__tags {
  position: relative;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-neutral-800);
}

.fd-card-obj__tag {
  position: relative;
  z-index: 30;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-neutral-500);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

@media (hover: hover) {
  .fd-card-obj:hover {
    --fd-obj-shadow: 0 10px 30px -10px #f59e0b33;
    translate: 0 -0.5rem;
    border-color: color-mix(in oklab, var(--color-amber-500) 50%, transparent);
  }

  .fd-card-obj:hover .fd-card-obj__image {
    scale: 105%;
    opacity: 1;
  }

  .fd-card-obj:hover .fd-card-obj__title {
    color: var(--color-amber-400);
  }

  .fd-card-obj__tag:hover {
    color: var(--color-amber-400);
  }
}

/* ==========================================================================
   Contenuto WYSIWYG (.fd-prose)
   Colore di link, marker e bordi da --project-color (default blu).
   ========================================================================== */
.fd-prose {
  --fd-prose-accent: var(--project-color, var(--color-blue-500));
  font-size: 1.125rem;
  line-height: 1.8;
  color: #d4d4d8;
}

/* Codice: i blocchi lunghi scorrono invece di allargare la pagina */
.fd-prose pre {
  max-width: 100%;
  overflow-x: auto;
  margin-block: 1.5em;
  padding: 1em 1.25em;
  border: 1px solid var(--color-neutral-800);
  border-radius: 0.75rem;
  background-color: color-mix(in oklab, var(--color-neutral-900) 80%, transparent);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* Titoli */
.fd-prose h1,
.fd-prose h2,
.fd-prose h3,
.fd-prose h4,
.fd-prose h5,
.fd-prose h6 {
  margin-top: 2.5em;
  margin-bottom: 1em;
  color: white;
  font-weight: 800;
  line-height: 1.3;
}

.fd-prose h2 {
  font-size: 1.875rem;
}

.fd-prose h3 {
  font-size: 1.5rem;
}

.fd-prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.fd-prose strong {
  color: white;
  font-weight: 700;
}

/* Immagini */
.fd-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em auto;
  border-radius: 1rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

/* Link */
.fd-prose a {
  color: var(--fd-prose-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

/* Elenchi */
.fd-prose ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.fd-prose ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.fd-prose li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 0.375em;
}

.fd-prose li::marker {
  color: var(--fd-prose-accent);
  font-weight: bold;
}

/* Tabelle: su mobile scorrono in orizzontale */
.fd-prose table {
  display: block;
  width: 100%;
  margin-top: 2em;
  margin-bottom: 2em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  border-collapse: collapse;
  font-size: 0.875em;
}

.fd-prose thead {
  background-color: rgba(23, 23, 23, 0.8);
  border-bottom: 2px solid var(--fd-prose-accent);
}

.fd-prose th {
  padding: 1em;
  color: white;
  font-weight: 700;
}

.fd-prose td {
  padding: 1em;
  border-bottom: 1px solid #262626;
  color: #a1a1aa;
}

.fd-prose tr {
  transition: background-color 0.2s ease;
}

/* Citazioni */
.fd-prose blockquote {
  margin: 2em 0;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1.5em;
  border-left: 4px solid var(--fd-prose-accent);
  border-radius: 0 0.5rem 0.5rem 0;
  background-color: rgba(255, 255, 255, 0.02);
  color: #a1a1aa;
  font-style: italic;
}

@media (hover: hover) {
  .fd-prose a:hover {
    color: white;
  }

  .fd-prose tr:hover {
    background-color: rgba(23, 23, 23, 0.5);
  }
}

@media (width >= 48rem) {
  .fd-prose table {
    display: table;
    font-size: 1rem;
  }
}

/* Estratto a parole chiave ("woocommerce - catalogo - ...") mostrato come etichette */
.fd-card-portfolio__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .75rem;
  max-height: 3.6rem;
  overflow: hidden;
}

.fd-card-portfolio__tag {
  padding: .2rem .6rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-neutral-300);
  background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-white) 10%, transparent);
  border-radius: 9999px;
}