/*
 * fd-theme-2 - portfolio.css
 * Area portfolio: singolo progetto (single-portfolio.php), archivio (archive-portfolio.php)
 * e categoria (taxonomy-categoria.php). Prefisso .fd-pf-
 *
 * Il colore brand del progetto arriva dal markup come custom property:
 * --project-color (colore) e --project-glow (colore + alpha 0x4D).
 * Le card della griglia sono in components.css (.fd-card-portfolio).
 */

/* Variabili animabili per il gradiente del bottone All Inclusive (la transizione agisce su tutte le proprieta) */
@property --fd-pf-grad-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --fd-pf-grad-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

/* ==========================================================================
   Singolo progetto: pagina
   overflow-x: clip (non hidden) per non rompere la sidebar sticky
   ========================================================================== */
.fd-pf-single {
  position: relative;
  min-height: 100vh;
  padding-bottom: 7rem;
  background-color: var(--color-neutral-950);
  overflow-x: clip;
}

/* Selezione testo in smeraldo (anche sui discendenti) */
.fd-pf-single::selection,
.fd-pf-single ::selection {
  background-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
  color: var(--color-white);
}

/* Velo fisso con il colore brand */
.fd-pf-single__accent {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-color: var(--project-color);
}

/* ==========================================================================
   Sfondo fotografico dell'hero (maschera a gradiente verso il basso)
   ========================================================================== */
.fd-pf-herobg {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 0;
  height: 780px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
}

.fd-pf-herobg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  filter: contrast(125%) grayscale(100%);
}

.fd-pf-herobg__veil {
  position: absolute;
  inset: 0;
  background-color: color-mix(in oklab, var(--color-neutral-950) 65%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.fd-pf-herobg__tint {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 66.6667%;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background: linear-gradient(to top, var(--project-color), transparent);
}

.fd-pf-herobg__glow {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background: radial-gradient(circle at 50% 0%, var(--project-glow, rgba(59, 130, 246, 0.28)) 0%, transparent 65%);
}

/* ==========================================================================
   Hero compatta
   ========================================================================== */
.fd-pf-hero {
  position: relative;
  z-index: 10;
  padding-top: 8rem;
  padding-bottom: 1.5rem;
}

/* Riga con link al portfolio e categoria */
.fd-pf-hero__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.fd-pf-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-400);
  background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-white) 10%, transparent);
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
  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-pf-hero__back-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.fd-pf-hero__slash {
  color: var(--color-neutral-600);
}

/* Badge categoria: tinta e bordo derivati dal colore brand (alpha 0x33 e 0x66) */
.fd-pf-hero__cat {
  padding: 0.125rem 0.625rem;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-white);
  background-color: color-mix(in srgb, var(--project-color) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--project-color) 40%, transparent);
  border-radius: 9999px;
}

.fd-pf-hero__head {
  max-width: var(--container-5xl);
  margin-bottom: 1.5rem;
}

.fd-pf-hero__title {
  margin-bottom: 1rem;
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--color-white);
  filter: drop-shadow(var(--drop-shadow-2xl));
}

.fd-pf-hero__excerpt {
  padding: 0.25rem 0 0.25rem 1.25rem;
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-300);
  background-color: color-mix(in oklab, var(--color-white) 2%, transparent);
  border-left: 4px solid var(--project-color);
  border-top-right-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

/* Striscia metadati */
.fd-pf-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-white) 10%, transparent);
}

.fd-pf-meta__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

/* Separatore verticale tra le voci (divide-x) */
.fd-pf-meta__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fd-pf-meta__item:not(:last-child) {
  border-inline-end: 1px solid color-mix(in oklab, var(--color-white) 10%, transparent);
}

.fd-pf-meta__item--after {
  padding-left: 1.5rem;
}

.fd-pf-meta__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-neutral-400);
}

.fd-pf-meta__value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

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

.fd-pf-meta__logo {
  display: inline-block;
  width: auto;
  height: 1.25rem;
  padding: 0.125rem;
  object-fit: contain;
  background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
  border-radius: 0.25rem;
}

/* ==========================================================================
   Vetro (scheda descrizione, navigazione progetti)
   ========================================================================== */
.fd-pf-story__card,
.fd-pf-pn__link {
  background: rgba(18, 22, 34, 0.65);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   Corpo: descrizione (8 colonne) e sidebar sticky (4 colonne)
   ========================================================================== */
.fd-pf-body {
  scroll-margin-top: 6rem;
}

.fd-pf-body__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: stretch;
  gap: 2.5rem;
}

.fd-pf-story__card {
  padding: 2rem;
  border-radius: var(--radius-3xl);
  box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
}

.fd-pf-story__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-white) 10%, transparent);
}

.fd-pf-story__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background-color: var(--project-color);
}

.fd-pf-story__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-neutral-300);
}

/* Colonna sidebar: si estende quanto la descrizione, il contenuto interno resta sticky da lg */
.fd-pf-side {
  position: relative;
  align-self: stretch;
}

.fd-pf-side__sticky {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Box preventivo */
.fd-pf-quote {
  position: relative;
  padding: 1.5rem;
  overflow: hidden;
  background-image: linear-gradient(to bottom in oklab, var(--color-neutral-900), var(--color-neutral-950));
  border: 1px solid color-mix(in oklab, var(--color-white) 15%, transparent);
  border-radius: var(--radius-3xl);
  box-shadow: 0 25px 50px -12px #00000040;
}

.fd-pf-quote__glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 8rem;
  height: 8rem;
  border-radius: 9999px;
  background-color: var(--project-color);
  opacity: 0.2;
  filter: blur(60px);
  pointer-events: none;
}

.fd-pf-quote__eyebrow,
.fd-pf-offer__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.fd-pf-quote__eyebrow {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-neutral-400);
}

.fd-pf-quote__title,
.fd-pf-offer__title {
  margin-bottom: 0.5rem;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--color-white);
}

.fd-pf-quote__title {
  font-weight: var(--font-weight-bold);
}

.fd-pf-offer__title {
  font-weight: var(--font-weight-extrabold);
}

.fd-pf-quote__text,
.fd-pf-offer__text {
  margin-bottom: 1.25rem;
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-300);
}

.fd-pf-quote__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-black);
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.fd-pf-quote__btn-icon,
.fd-pf-offer__btn-icon {
  width: 1rem;
  height: 1rem;
}

/* Scheda All Inclusive */
.fd-pf-offer {
  position: relative;
  padding: 1.5rem;
  overflow: hidden;
  background-image: linear-gradient(
    to bottom in oklab,
    color-mix(in oklab, var(--color-emerald-950) 40%, transparent),
    color-mix(in oklab, var(--color-neutral-900) 90%, transparent),
    var(--color-neutral-950)
  );
  border: 1px solid color-mix(in oklab, var(--color-emerald-500) 40%, transparent);
  border-radius: var(--radius-3xl);
  box-shadow: 0 25px 50px -12px #00000040;
}

.fd-pf-offer__glow {
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 12rem;
  height: 12rem;
  border-radius: 9999px;
  background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
  filter: blur(60px);
  pointer-events: none;
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.7s;
}

.fd-pf-offer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.fd-pf-offer__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-emerald-300);
  background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
  border-radius: 9999px;
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}

.fd-pf-offer__price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-white) 10%, transparent);
  border-radius: var(--radius-lg);
}

.fd-pf-offer__price-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-neutral-400);
}

.fd-pf-offer__price-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-black);
  color: var(--color-emerald-400);
}

.fd-pf-offer__points {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.875rem;
  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-black) 40%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-white) 5%, transparent);
  border-radius: var(--radius-xl);
}

.fd-pf-offer__point {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fd-pf-offer__check {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--color-emerald-400);
  background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
  border-radius: 9999px;
}

.fd-pf-offer__check-icon {
  width: 0.625rem;
  height: 0.625rem;
}

.fd-pf-offer__point-text {
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
}

/* CTA: gradiente smeraldo -> teal, animato in hover tramite le variabili registrate */
.fd-pf-offer__btn {
  --fd-pf-grad-from: var(--color-emerald-400);
  --fd-pf-grad-to: var(--color-teal-300);
  --fd-pf-shadow: color-mix(in oklab, var(--color-emerald-950) 60%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-black);
  background-image: linear-gradient(to right in oklab, var(--fd-pf-grad-from), var(--color-emerald-300), var(--fd-pf-grad-to));
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 25px -5px var(--fd-pf-shadow), 0 8px 10px -6px var(--fd-pf-shadow);
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.fd-pf-offer__btn-icon {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

/* ==========================================================================
   Navigazione progetto precedente / successivo
   ========================================================================== */
.fd-pf-pn {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid color-mix(in oklab, var(--color-white) 10%, transparent);
}

.fd-pf-pn__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

.fd-pf-pn__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  border-radius: var(--radius-2xl);
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.fd-pf-pn__link--next {
  text-align: right;
}

.fd-pf-pn__eyebrow {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-neutral-400);
}

.fd-pf-pn__title {
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  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-pf-pn__arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-white);
  background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-white) 10%, transparent);
  border-radius: 9999px;
  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-pf-pn__arrow-icon {
  width: 1rem;
  height: 1rem;
}

/* ==========================================================================
   Testo del progetto (the_content)
   ========================================================================== */
.fd-pf-content {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #d4d4d8;
}

.fd-pf-content h1,
.fd-pf-content h2,
.fd-pf-content h3,
.fd-pf-content h4,
.fd-pf-content h5,
.fd-pf-content h6 {
  margin-top: 2.2em;
  margin-bottom: 0.8em;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.fd-pf-content h2 {
  padding-bottom: 0.3em;
  font-size: 1.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fd-pf-content h3 {
  font-size: 1.35rem;
}

.fd-pf-content p {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.fd-pf-content strong {
  font-weight: 700;
  color: #ffffff;
}

/* Immagini nel testo */
.fd-pf-content 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 nel colore del brand */
.fd-pf-content a {
  color: var(--project-color, #3b82f6);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

/* Elenchi: puntati con bullet nel colore del brand */
.fd-pf-content ul {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  padding-left: 0;
  list-style: none;
}

.fd-pf-content ol {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  padding-left: 1.5em;
  list-style-type: decimal;
}

.fd-pf-content li {
  position: relative;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 1.6em;
}

.fd-pf-content ul > li::before {
  content: "•";
  position: absolute;
  left: 0.25em;
  font-size: 1.25em;
  font-weight: bold;
  line-height: 1;
  color: var(--project-color, #3b82f6);
}

/* Tabelle */
.fd-pf-content table {
  width: 100%;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  text-align: left;
  border-collapse: collapse;
}

.fd-pf-content thead {
  background-color: rgba(23, 23, 23, 0.8);
  border-bottom: 2px solid var(--project-color, #3b82f6);
}

.fd-pf-content th {
  padding: 1em;
  font-weight: 700;
  color: #ffffff;
}

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

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

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

/* ==========================================================================
   Archivio e categoria
   ========================================================================== */
.fd-pf-archive {
  min-height: 100vh;
  background-color: var(--color-neutral-950);
}

.fd-pf-arch {
  position: relative;
  padding-top: 11rem;
  padding-bottom: 5rem;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in oklab, var(--color-neutral-900) 50%, transparent);
}

.fd-pf-arch__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fd-pf-arch__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.fd-pf-arch__bg-fade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom in oklab,
    transparent,
    color-mix(in oklab, var(--color-neutral-950) 60%, transparent),
    var(--color-neutral-950)
  );
}

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

/* Breadcrumb centrati (archivio) */
.fd-pf-arch__crumbs {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.fd-pf-arch__crumbs .fd-breadcrumbs__list {
  justify-content: center;
}

/* Link "Torna a tutti i progetti" (categoria) */
.fd-pf-arch__back-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.fd-pf-arch__back {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-400);
  background-color: color-mix(in oklab, var(--color-neutral-900) 50%, transparent);
  border: 1px solid var(--color-neutral-800);
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
  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-pf-arch__back-icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}

.fd-pf-arch__title {
  margin-bottom: 1.5rem;
  font-size: var(--text-5xl);
  line-height: var(--text-5xl--line-height);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  text-transform: uppercase;
  color: var(--color-white);
}

.fd-pf-arch__desc {
  max-width: var(--container-3xl);
  margin-inline: auto;
  margin-bottom: 2rem;
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  color: var(--color-neutral-400);
}

/* Descrizione del termine (WYSIWYG) */
.fd-pf-arch__desc--term {
  max-width: var(--container-4xl);
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-300);
}

/* Menu categorie a comparsa (stato is-open impostato da portfolio.js) */
.fd-pf-cats {
  margin-top: 2rem;
}

.fd-pf-cats__toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-white);
  background-color: color-mix(in oklab, var(--color-neutral-900) 50%, transparent);
  border: 1px solid var(--color-neutral-800);
  border-radius: 9999px;
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.fd-pf-cats__toggle > :not(:last-child) {
  margin-inline-end: 0.75rem;
}

.fd-pf-cats__icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-blue-400);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 0.5s;
}

.fd-pf-cats.is-open .fd-pf-cats__icon {
  rotate: 180deg;
}

.fd-pf-cats__list {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Entrata: da -1rem e trasparente a posizione finale in 300ms (ease-out) */
.fd-pf-cats.is-open .fd-pf-cats__list {
  display: flex;
  opacity: 1;
  translate: 0 0;
  transition-property: opacity, translate;
  transition-timing-function: var(--ease-out);
  transition-duration: 0.3s;
}

@starting-style {
  .fd-pf-cats.is-open .fd-pf-cats__list {
    opacity: 0;
    translate: 0 -1rem;
  }
}

.fd-pf-cats__chip {
  padding: 0.625rem 1.5rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-neutral-400);
  border: 1px solid var(--color-neutral-800);
  border-radius: 9999px;
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.fd-pf-cats__chip.is-active {
  color: var(--color-black);
  background-color: var(--color-white);
  border-color: var(--color-white);
}

/* Griglia di card */
.fd-pf-list {
  padding-block: 6rem;
}

.fd-pf-list__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}

.fd-pf-list__empty {
  grid-column: 1 / -1;
  padding-block: 5rem;
  text-align: center;
}

.fd-pf-list__empty-text {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  color: var(--color-neutral-500);
}

/* Paginazione (link generati da paginate_links) */
.fd-pf-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 5rem;
}

.fd-pf-pager__link {
  padding: 0.5rem 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-400);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-xl);
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.fd-pf-pager__link.is-active {
  color: var(--color-black);
  background-color: var(--color-white);
  border-color: var(--color-white);
}

/* ==========================================================================
   Hover (solo dispositivi con puntatore)
   ========================================================================== */
@media (hover: hover) {
  .fd-pf-hero__back:hover {
    color: var(--color-white);
  }

  .fd-pf-quote__btn:hover {
    scale: 1.02;
    background-color: var(--color-neutral-200);
  }

  .fd-pf-offer:hover .fd-pf-offer__glow {
    background-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
  }

  .fd-pf-offer__btn:hover {
    --fd-pf-grad-from: var(--color-emerald-300);
    --fd-pf-grad-to: var(--color-teal-200);
    --fd-pf-shadow: color-mix(in oklab, var(--color-emerald-500) 25%, transparent);
    scale: 1.02;
  }

  .fd-pf-offer__btn:hover .fd-pf-offer__btn-icon {
    translate: 0.25rem 0;
  }

  .fd-pf-pn__link--prev:hover .fd-pf-pn__title {
    color: var(--color-blue-400);
  }

  .fd-pf-pn__link--next:hover .fd-pf-pn__title {
    color: var(--color-purple-400);
  }

  .fd-pf-pn__link:hover .fd-pf-pn__arrow {
    color: var(--color-black);
    background-color: var(--color-white);
  }

  .fd-pf-content a:hover {
    color: #ffffff;
  }

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

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

  .fd-pf-cats__toggle:hover {
    border-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  }

  .fd-pf-cats__chip:not(.is-active):hover {
    border-color: var(--color-neutral-600);
  }

  .fd-pf-pager__link:hover {
    color: var(--color-white);
    border-color: var(--color-neutral-500);
  }

  .fd-pf-pager__link.is-active:hover {
    color: var(--color-black);
    background-color: var(--color-neutral-200);
  }
}

/* ==========================================================================
   Breakpoint (mobile-first)
   ========================================================================== */
@media (width >= 40rem) {
  .fd-pf-hero__title {
    font-size: var(--text-5xl);
  }

  .fd-pf-hero__excerpt {
    font-size: var(--text-lg);
  }

  .fd-pf-story__card {
    padding: 2.5rem;
  }

  .fd-pf-offer {
    padding: 1.75rem;
  }
}

@media (width >= 48rem) {
  .fd-pf-hero {
    padding-top: 10rem;
  }

  .fd-pf-pn__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fd-pf-arch__title {
    font-size: var(--text-8xl);
    line-height: var(--text-8xl--line-height);
  }

  .fd-pf-arch__title--term {
    font-size: var(--text-7xl);
    line-height: var(--text-7xl--line-height);
  }

  .fd-pf-list__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 64rem) {
  .fd-pf-hero__title {
    font-size: var(--text-6xl);
  }

  .fd-pf-body__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .fd-pf-story {
    grid-column: span 8 / span 8;
  }

  .fd-pf-side {
    grid-column: span 4 / span 4;
  }

  .fd-pf-side__sticky {
    position: sticky;
    top: 6rem;
  }

  .fd-pf-list__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Estratto a parole chiave mostrato come etichette nell'hero */
.fd-pf-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.fd-pf-hero__tag {
  padding: .35rem .9rem;
  font-size: var(--text-sm);
  color: var(--color-neutral-200);
  background-color: color-mix(in srgb, var(--project-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--project-color) 35%, transparent);
  border-radius: 9999px;
}

/* ==========================================================================
   Anteprima compatta del progetto (template-parts/project-peek.php)
   --fd-shot-w = larghezza reale dello screenshot: la finestra non la supera di oltre il 15%.
   ========================================================================== */
.fd-pf-peek {
  position: relative;
  isolation: isolate;
  margin: 0;
}

.fd-pf-peek__ambient {
  position: absolute;
  inset: 8% 4% -6%;
  z-index: -1;
  width: 92%;
  max-width: none;
  height: 98%;
  object-fit: cover;
  opacity: .5;
  filter: blur(60px) saturate(1.6);
  pointer-events: none;
}

.fd-pf-peek__window {
  width: min(100%, calc(var(--fd-shot-w, 9999) * 1.15px));
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background-color: var(--color-neutral-950);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--color-white) 12%, transparent),
    0 40px 80px -30px #000000e6,
    0 0 70px -25px color-mix(in srgb, var(--project-color) 55%, transparent);
}

.fd-pf-peek__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 2rem;
  padding-inline: .75rem;
  background-color: var(--color-neutral-900);
  border-bottom: 1px solid color-mix(in oklab, var(--color-white) 8%, transparent);
}

.fd-pf-peek__lights {
  display: flex;
  gap: .3rem;
  width: 2.75rem;
}

.fd-pf-peek__lights i {
  width: .45rem;
  height: .45rem;
  border-radius: 9999px;
  background-color: color-mix(in oklab, var(--color-white) 22%, transparent);
}

.fd-pf-peek__url {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 0;
  margin-right: 2.75rem;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-neutral-400);
  white-space: nowrap;
}

.fd-pf-peek__url span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-pf-peek__lock {
  flex-shrink: 0;
  width: .7rem;
  height: .7rem;
  color: var(--color-emerald-400);
}

.fd-pf-peek__view {
  position: relative;
  height: 26rem;
  overflow-y: auto;
  scrollbar-width: none;
  container-type: size;
}

.fd-pf-peek__view::-webkit-scrollbar {
  display: none;
}

.fd-pf-peek__view:focus-visible {
  outline: 2px solid var(--project-color);
  outline-offset: -2px;
}

.fd-pf-peek__shot {
  display: block;
  width: 100%;
  height: auto;
}

/* Immagine orizzontale: la finestra prende le sue proporzioni, niente scorrimento */
.fd-pf-peek--framed .fd-pf-peek__view,
.fd-pf-peek--cover .fd-pf-peek__view {
  height: auto;
  overflow: hidden;
  container-type: normal;
}

.fd-pf-peek__view--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20rem;
  background:
    radial-gradient(80% 90% at 85% 0%, color-mix(in srgb, var(--project-color) 45%, transparent), transparent 60%),
    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-950);
}

.fd-pf-peek__monogram {
  font-size: 8rem;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--project-color) 70%, transparent);
}

.fd-pf-peek__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, calc(var(--fd-shot-w, 9999) * 1.15px));
  margin: 1rem auto 0;
}

.fd-pf-peek__visit {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .95rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  background-color: color-mix(in srgb, var(--project-color) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--project-color) 45%, transparent);
  border-radius: 9999px;
  transition: background-color .3s var(--default-transition-timing-function);
}

@media (hover: hover) {
  .fd-pf-peek__visit:hover {
    background-color: color-mix(in srgb, var(--project-color) 40%, transparent);
  }
}

.fd-pf-peek__note,
.fd-pf-peek__hint {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-neutral-500);
}

/* L'etichetta "Scorre con la lettura" compare solo dove lo scorrimento è davvero sincronizzato */
.fd-pf-peek__hint--sync {
  display: none;
}

.fd-pf-peek__dot {
  width: .45rem;
  height: .45rem;
  border-radius: 9999px;
  background-color: var(--project-color);
}

/* Posizione: in cima alla colonna laterale, ferma mentre si legge la descrizione */
.fd-pf-hero {
  padding-bottom: 2.5rem;
}

.fd-pf-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Binario della parte ferma: finisce prima della scheda All Inclusive, così non la copre */
.fd-pf-side__track {
  flex: 1;
}

.fd-pf-peek__view {
  height: 22rem;
}

@media (width >= 64rem) {
  .fd-pf-peek__view {
    height: 20rem;
  }
}

/*
 * Da desktop lo screenshot segue la lettura della descrizione: inizio della descrizione = cima
 * del sito, fine della descrizione = fondo del sito. Chrome/Edge (scroll-driven animations);
 * negli altri browser e su mobile premium.js fa scorrere l'anteprima da sola.
 */
@supports (animation-timeline: view()) {
  @media (width >= 64rem) and (prefers-reduced-motion: no-preference) {
    .fd-pf-body__grid {
      timeline-scope: --fd-story;
    }

    .fd-pf-story {
      view-timeline: --fd-story block;
    }

    .fd-pf-peek--sync .fd-pf-peek__hint--sync {
      display: inline-flex;
    }

    .fd-pf-peek--sync .fd-pf-peek__hint--auto {
      display: none;
    }

    .fd-pf-peek--sync.fd-pf-peek--scroll .fd-pf-peek__view {
      overflow: hidden;
    }

    .fd-pf-peek--sync.fd-pf-peek--scroll .fd-pf-peek__shot {
      animation: fd-peek-sync linear both;
      animation-timeline: --fd-story;
      animation-range: contain 0% contain 100%;
    }
  }
}

@keyframes fd-peek-sync {
  to {
    transform: translateY(min(0px, calc(-100% + 100cqh)));
  }
}