{"id":70,"date":"2025-11-02T23:57:07","date_gmt":"2025-11-02T22:57:07","guid":{"rendered":"https:\/\/click.monkey-lab.it\/?page_id=70"},"modified":"2026-09-11T06:08:37","modified_gmt":"2026-09-11T04:08:37","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/www.clickagency.it\/en\/portfolio\/","title":{"rendered":"PORTFOLIO &#8211; dark mode"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"70\" class=\"elementor elementor-70\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e9dabda elementor-section-full_width elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no\" data-id=\"e9dabda\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-495b200\" data-id=\"495b200\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-15809f5 elementor-widget elementor-widget-image\" data-id=\"15809f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.clickagency.it\/wp-content\/uploads\/2025\/11\/Hero-Area2.png\" class=\"attachment-full size-full wp-image-30\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-22eab43 elementor-section-full_width elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no\" data-id=\"22eab43\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a2c78ca\" data-id=\"a2c78ca\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8a4fe18 elementor-widget elementor-widget-html\" data-id=\"8a4fe18\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/*\n   * Griglia continua per le card quadrate finali.\n   * Mantiene due colonne desktop e una colonna mobile.\n   *\/\n  \/* Allineamento portfolio al layout Figma 1713:2157 *\/\n  @media (min-width: 768px) {\n    .pf-grid .pf-row {\n      gap: 20px !important;\n    }\n\n    .pf-row--1 .pf-card--hero {\n      width: 848px !important;\n      flex: 0 0 848px !important;\n    }\n    .pf-row--1 .pf-card--small {\n      width: calc(100% - 868px) !important;\n      flex: 1 1 auto !important;\n    }\n\n    .pf-row--3 .pf-card--small {\n      width: 413px !important;\n      flex: 0 0 413px !important;\n    }\n    .pf-row--3 .pf-card--wide {\n      width: calc(100% - 433px) !important;\n      flex: 1 1 auto !important;\n    }\n\n    .pf-row--4:not(.pf-row--continuous) .pf-card--square {\n      width: calc((100% - 20px) \/ 2) !important;\n      flex: 0 0 calc((100% - 20px) \/ 2) !important;\n    }\n\n    .pf-row.pf-row--continuous {\n      display: flex !important;\n      flex-wrap: wrap !important;\n      gap: 20px !important;\n    }\n    .pf-row.pf-row--continuous > .pf-card:nth-child(1) {\n      order: 1;\n      width: 413px !important;\n      flex: 0 0 413px !important;\n    }\n    .pf-row.pf-row--continuous > .pf-card:nth-child(3) {\n      order: 2;\n      width: calc(100% - 433px) !important;\n      flex: 1 1 auto !important;\n    }\n    .pf-row.pf-row--continuous > .pf-card:nth-child(2) {\n      order: 3;\n      width: calc((100% - 20px) \/ 2) !important;\n      flex: 0 0 calc((100% - 20px) \/ 2) !important;\n    }\n  }\n\n  @media (max-width: 767px) {\n    .pf-row.pf-row--continuous {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr);\n    }\n    .pf-row.pf-row--continuous > .pf-card {\n      order: initial;\n      width: 100% !important;\n      flex: 0 0 100% !important;\n    }\n  }\n  \/* ==================================================\n   FILTRI: RIMOZIONE SFONDI, BORDI E COLORE HOVER\n   ================================================== *\/\n\n.pf-wrapper button.pf-filter-main,\n.pf-wrapper button.pf-chip {\n  appearance: none !important;\n  -webkit-appearance: none !important;\n\n  background: transparent !important;\n  background-color: transparent !important;\n  background-image: none !important;\n\n  border: 0 !important;\n  border-color: transparent !important;\n  border-radius: 0 !important;\n\n  box-shadow: none !important;\n  outline: none !important;\n\n  color: #ffffff !important;\n  -webkit-tap-highlight-color: transparent;\n}\n\n\/* Hover *\/\n.pf-wrapper button.pf-filter-main:hover,\n.pf-wrapper button.pf-chip:hover {\n  background: transparent !important;\n  background-color: transparent !important;\n  background-image: none !important;\n\n  border: 0 !important;\n  border-color: transparent !important;\n\n  box-shadow: none !important;\n  outline: none !important;\n\n  color: #ffffff !important;\n}\n\n\/* Focus e click *\/\n.pf-wrapper button.pf-filter-main:focus,\n.pf-wrapper button.pf-filter-main:focus-visible,\n.pf-wrapper button.pf-filter-main:active,\n.pf-wrapper button.pf-chip:focus,\n.pf-wrapper button.pf-chip:focus-visible,\n.pf-wrapper button.pf-chip:active {\n  background: transparent !important;\n  background-color: transparent !important;\n  background-image: none !important;\n\n  border: 0 !important;\n  border-color: transparent !important;\n\n  box-shadow: none !important;\n  outline: none !important;\n\n  color: #ffffff !important;\n}\n\n\/* Eventuali classi attive applicate dal JavaScript *\/\n.pf-wrapper button.pf-filter-main.is-active,\n.pf-wrapper button.pf-filter-main.active,\n.pf-wrapper button.pf-chip.is-active,\n.pf-wrapper button.pf-chip.active {\n  background: transparent !important;\n  background-color: transparent !important;\n  background-image: none !important;\n\n  border: 0 !important;\n  border-color: transparent !important;\n\n  box-shadow: none !important;\n  color: #ffffff !important;\n}\n\n\/* ==================================================\n   FILTRI MOBILE: PULSANTE + PANNELLO A SCOMPARSA\n   ================================================== *\/\n\n.pf-mobile-filter-trigger,\n.pf-mobile-filter-head,\n.pf-mobile-filter-footer,\n.pf-mobile-filter-backdrop {\n  display: none;\n}\n\n.pf-filter-main__icon {\n  display: none;\n}\n\n@media (max-width: 767px) {\n  body.pf-filters-locked {\n    overflow: hidden;\n  }\n\n  .pf-mobile-filter-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: calc(100% - 40px);\n    min-height: 54px;\n    margin: 22px 20px 28px;\n    padding: 0 18px;\n    appearance: none;\n    -webkit-appearance: none;\n    border: 1px solid rgba(255, 255, 255, .45);\n    border-radius: 999px;\n    background: #000;\n    color: #fff;\n    font: inherit;\n    font-size: 16px;\n    line-height: 1;\n    text-align: left;\n    cursor: pointer;\n    box-shadow: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .pf-mobile-filter-trigger:hover,\n  .pf-mobile-filter-trigger:focus,\n  .pf-mobile-filter-trigger:active {\n    border-color: #fff;\n    background: #000;\n    color: #fff;\n    outline: none;\n    box-shadow: none;\n  }\n\n  .pf-mobile-filter-trigger__right {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .pf-mobile-filter-count {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    min-width: 24px;\n    height: 24px;\n    padding: 0 7px;\n    border-radius: 999px;\n    background: #e52b2f;\n    color: #fff;\n    font-size: 12px;\n    line-height: 1;\n  }\n\n  .pf-mobile-filter-count.has-filters {\n    display: inline-flex;\n  }\n\n  .pf-mobile-filter-trigger svg {\n    width: 20px;\n    height: 20px;\n    flex: 0 0 20px;\n  }\n\n  .pf-mobile-filter-backdrop {\n    position: fixed;\n    inset: 0;\n    z-index: 9998;\n    display: block;\n    background: rgba(0, 0, 0, .68);\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: opacity .25s ease, visibility .25s ease;\n  }\n\n  .pf-mobile-filter-backdrop.is-open {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  .pf-wrapper .pf-filters {\n    position: fixed !important;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 9999;\n    display: block !important;\n    width: 100%;\n    max-height: min(82vh, 720px);\n    margin: 0 !important;\n    padding: 0 20px calc(20px + env(safe-area-inset-bottom));\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    border-radius: 24px 24px 0 0;\n    background: #090909;\n    box-shadow: 0 -18px 50px rgba(0, 0, 0, .45);\n    transform: translateY(105%);\n    visibility: hidden;\n    transition: transform .32s cubic-bezier(.22, 1, .36, 1), visibility .32s ease;\n  }\n\n  .pf-wrapper .pf-filters.is-mobile-open {\n    transform: translateY(0);\n    visibility: visible;\n  }\n\n  .pf-mobile-filter-head {\n    position: sticky;\n    top: 0;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    min-height: 76px;\n    margin: 0 -20px 8px;\n    padding: 0 20px;\n    border-bottom: 1px solid rgba(255, 255, 255, .18);\n    background: #090909;\n  }\n\n  .pf-mobile-filter-title {\n    margin: 0;\n    color: #fff;\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 1.2;\n  }\n\n  .pf-mobile-filter-close {\n    display: grid;\n    place-items: center;\n    width: 44px;\n    height: 44px;\n    padding: 0;\n    appearance: none;\n    -webkit-appearance: none;\n    border: 0;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, .1);\n    color: #fff;\n    font-size: 30px;\n    font-weight: 300;\n    line-height: 1;\n    cursor: pointer;\n  }\n\n  .pf-wrapper .pf-filters > .pf-filter-main {\n    position: relative;\n    display: flex !important;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 62px;\n    padding: 0 36px 0 0 !important;\n    border-bottom: 1px solid rgba(255, 255, 255, .22) !important;\n    font-size: 18px !important;\n    font-weight: 500;\n    line-height: 1.2;\n    text-align: left;\n    cursor: pointer;\n  }\n\n  .pf-wrapper .pf-filters > .pf-filter-main::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    right: 4px;\n    width: 10px;\n    height: 10px;\n    border-right: 2px solid #fff;\n    border-bottom: 2px solid #fff;\n    transform: translateY(-70%) rotate(45deg);\n    transition: transform .22s ease;\n  }\n\n  .pf-wrapper .pf-filters > .pf-filter-main.pf-mobile-open::after {\n    transform: translateY(-25%) rotate(225deg);\n  }\n\n  .pf-wrapper .pf-sublist {\n    display: block !important;\n    width: 100%;\n    max-height: 0;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: hidden;\n    opacity: 0;\n    visibility: hidden;\n    transition: max-height .32s ease, opacity .2s ease, padding .25s ease, visibility .25s ease;\n  }\n\n  .pf-wrapper .pf-sublist.pf-mobile-open {\n    max-height: 520px;\n    padding: 12px 0 18px !important;\n    opacity: 1;\n    visibility: visible;\n  }\n\n  .pf-wrapper .pf-sublist .pf-chip {\n    display: block !important;\n    width: 100%;\n    min-height: 46px;\n    padding: 10px 14px !important;\n    border-radius: 10px !important;\n    font-size: 15px !important;\n    line-height: 1.25;\n    text-align: left;\n    cursor: pointer;\n  }\n\n  .pf-wrapper .pf-sublist .pf-chip:hover,\n  .pf-wrapper .pf-sublist .pf-chip:focus-visible {\n    background: rgba(255, 255, 255, .08) !important;\n  }\n\n  .pf-wrapper .pf-sublist .pf-chip.is-active,\n  .pf-wrapper .pf-sublist .pf-chip.active,\n  .pf-wrapper .pf-sublist .pf-chip[aria-pressed='true'] {\n    background: #e52b2f !important;\n    color: #fff !important;\n  }\n\n  .pf-mobile-filter-footer {\n    position: sticky;\n    bottom: calc(-20px - env(safe-area-inset-bottom));\n    z-index: 3;\n    display: grid;\n    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);\n    gap: 10px;\n    margin: 18px -20px calc(-20px - env(safe-area-inset-bottom));\n    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));\n    border-top: 1px solid rgba(255, 255, 255, .18);\n    background: #090909;\n  }\n\n  .pf-mobile-filter-reset,\n  .pf-mobile-filter-apply {\n    min-height: 50px;\n    padding: 0 14px;\n    appearance: none;\n    -webkit-appearance: none;\n    border-radius: 999px;\n    font: inherit;\n    font-size: 14px;\n    cursor: pointer;\n  }\n\n  .pf-mobile-filter-reset {\n    border: 1px solid rgba(255, 255, 255, .55);\n    background: transparent;\n    color: #fff;\n  }\n\n  .pf-mobile-filter-apply {\n    border: 1px solid #fff;\n    background: #fff;\n    color: #000;\n  }\n\n  \/* ================================================\n     CLICK AGENCY \u2014 OVERRIDE VISIVO MOBILE\n     ================================================ *\/\n\n  .pf-wrapper {\n    --pf-click-red: #ef3340;\n    --pf-click-black: #050505;\n    --pf-click-line: rgba(255, 255, 255, .22);\n    --pf-click-muted: rgba(255, 255, 255, .58);\n  }\n\n  .pf-mobile-filter-trigger {\n    width: calc(100% - 32px);\n    min-height: 58px;\n    margin: 18px 16px 30px;\n    padding: 0 18px 0 20px;\n    border: 1px solid #fff;\n    border-radius: 0;\n    background: var(--pf-click-black);\n    font-family: \"Zalando Sans Expanded\", \"Helvetica Neue\", Arial, sans-serif;\n    font-size: 14px;\n    font-weight: 500;\n    letter-spacing: .015em;\n    text-transform: uppercase;\n  }\n\n  .pf-mobile-filter-trigger:hover,\n  .pf-mobile-filter-trigger:focus,\n  .pf-mobile-filter-trigger:active {\n    border-color: var(--pf-click-red);\n  }\n\n  .pf-mobile-filter-trigger svg {\n    width: 22px;\n    height: 22px;\n    color: var(--pf-click-red);\n  }\n\n  .pf-mobile-filter-count {\n    min-width: 23px;\n    height: 23px;\n    border-radius: 0;\n    background: var(--pf-click-red);\n    font-family: Arial, sans-serif;\n    font-size: 11px;\n    font-weight: 700;\n  }\n\n  .pf-mobile-filter-backdrop {\n    background: rgba(0, 0, 0, .82);\n    backdrop-filter: blur(5px);\n    -webkit-backdrop-filter: blur(5px);\n  }\n\n  .pf-wrapper .pf-filters {\n    max-height: min(88svh, 760px);\n    padding: 0 18px calc(18px + env(safe-area-inset-bottom));\n    border: 0;\n    border-top: 4px solid var(--pf-click-red);\n    border-radius: 0;\n    background: var(--pf-click-black);\n    box-shadow: 0 -24px 70px rgba(0, 0, 0, .72);\n    font-family: \"Zalando Sans Expanded\", \"Helvetica Neue\", Arial, sans-serif;\n    scrollbar-width: thin;\n    scrollbar-color: var(--pf-click-red) transparent;\n  }\n\n  .pf-wrapper .pf-filters::-webkit-scrollbar {\n    width: 3px;\n  }\n\n  .pf-wrapper .pf-filters::-webkit-scrollbar-thumb {\n    background: var(--pf-click-red);\n  }\n\n  .pf-mobile-filter-head {\n    min-height: 78px;\n    margin: 0 -18px;\n    padding: 0 18px;\n    border-bottom: 1px solid var(--pf-click-line);\n    background: var(--pf-click-black);\n  }\n\n  .pf-mobile-filter-title {\n    font-family: \"Zalando Sans Expanded\", \"Helvetica Neue\", Arial, sans-serif;\n    font-size: 14px;\n    font-weight: 500;\n    letter-spacing: .04em;\n    text-transform: uppercase;\n  }\n\n  .pf-mobile-filter-title::before {\n    content: '';\n    display: inline-block;\n    width: 8px;\n    height: 8px;\n    margin-right: 10px;\n    background: var(--pf-click-red);\n    transform: rotate(45deg);\n  }\n\n  .pf-mobile-filter-close,\n  .pf-mobile-filter-close:hover,\n  .pf-mobile-filter-close:focus,\n  .pf-mobile-filter-close:active {\n    position: relative;\n    display: block;\n    width: 42px;\n    height: 42px;\n    padding: 0 !important;\n    border: 0 !important;\n    border-radius: 0 !important;\n    background: transparent !important;\n    color: transparent !important;\n    box-shadow: none !important;\n    outline: none;\n  }\n\n  .pf-mobile-filter-close::before,\n  .pf-mobile-filter-close::after {\n    content: '' !important;\n    position: absolute;\n    top: 20px;\n    left: 8px;\n    width: 27px;\n    height: 2px;\n    background: #fff;\n    transition: background-color .2s ease, transform .2s ease;\n  }\n\n  .pf-mobile-filter-close::before {\n    transform: rotate(45deg);\n  }\n\n  .pf-mobile-filter-close::after {\n    transform: rotate(-45deg);\n  }\n\n  .pf-mobile-filter-close:hover::before,\n  .pf-mobile-filter-close:hover::after,\n  .pf-mobile-filter-close:focus-visible::before,\n  .pf-mobile-filter-close:focus-visible::after {\n    background: var(--pf-click-red);\n  }\n\n  .pf-wrapper .pf-filters > .pf-filter-main,\n  .pf-wrapper .pf-filters > .pf-filter-main:hover,\n  .pf-wrapper .pf-filters > .pf-filter-main:focus,\n  .pf-wrapper .pf-filters > .pf-filter-main:active {\n    min-height: 76px;\n    padding: 0 44px 0 0 !important;\n    border-top: 0 !important;\n    border-right: 0 !important;\n    border-bottom: 1px solid var(--pf-click-line) !important;\n    border-left: 0 !important;\n    border-radius: 0 !important;\n    background: transparent !important;\n    color: #fff !important;\n    font-family: \"Zalando Sans Expanded\", \"Helvetica Neue\", Arial, sans-serif;\n    font-size: clamp(23px, 7vw, 30px) !important;\n    font-weight: 500;\n    letter-spacing: -.035em;\n    line-height: 1;\n    text-transform: uppercase;\n    box-shadow: none !important;\n  }\n\n  \/* Elimina icone e rombi iniettati dal tema WordPress *\/\n  .pf-wrapper .pf-filters > .pf-filter-main::before {\n    content: none !important;\n    display: none !important;\n  }\n\n  .pf-wrapper .pf-filters > .pf-filter-main::after {\n    content: '+' !important;\n    top: 50%;\n    right: 3px;\n    width: auto;\n    height: auto;\n    border: 0;\n    color: var(--pf-click-red);\n    font-family: Arial, sans-serif;\n    font-size: 32px;\n    font-weight: 300;\n    line-height: 1;\n    transform: translateY(-52%);\n    transition: transform .25s ease, color .2s ease;\n  }\n\n  .pf-wrapper .pf-filters > .pf-filter-main.pf-mobile-open::after {\n    content: '\u2212' !important;\n    transform: translateY(-52%);\n  }\n\n  .pf-wrapper .pf-sublist {\n    counter-reset: pf-mobile-option;\n    border-bottom: 0;\n  }\n\n  .pf-wrapper .pf-sublist.pf-mobile-open {\n    max-height: 560px;\n    padding: 10px 0 22px !important;\n    border-bottom: 1px solid var(--pf-click-line);\n  }\n\n  .pf-wrapper .pf-sublist .pf-chip,\n  .pf-wrapper .pf-sublist .pf-chip:hover,\n  .pf-wrapper .pf-sublist .pf-chip:focus,\n  .pf-wrapper .pf-sublist .pf-chip:active {\n    counter-increment: pf-mobile-option;\n    position: relative;\n    display: grid !important;\n    grid-template-columns: 32px minmax(0, 1fr);\n    align-items: center;\n    min-height: 44px;\n    padding: 8px 0 !important;\n    border: 0 !important;\n    border-radius: 0 !important;\n    background: transparent !important;\n    color: #fff !important;\n    font-family: \"Zalando Sans Expanded\", \"Helvetica Neue\", Arial, sans-serif;\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: -.01em;\n    line-height: 1.25;\n    text-transform: uppercase;\n    box-shadow: none !important;\n    transition: color .2s ease, transform .2s ease;\n  }\n\n  .pf-wrapper .pf-sublist .pf-chip::before {\n    content: counter(pf-mobile-option, decimal-leading-zero) !important;\n    display: block !important;\n    color: var(--pf-click-muted);\n    font-family: Arial, sans-serif;\n    font-size: 10px;\n    font-weight: 400;\n    letter-spacing: .08em;\n    transition: color .2s ease;\n  }\n\n  .pf-wrapper .pf-sublist .pf-chip::after {\n    content: '' !important;\n    position: absolute;\n    right: 0;\n    bottom: 4px;\n    left: 32px;\n    width: 0;\n    height: 1px;\n    background: var(--pf-click-red);\n    transition: width .25s ease;\n  }\n\n  .pf-wrapper .pf-sublist .pf-chip:hover,\n  .pf-wrapper .pf-sublist .pf-chip:focus-visible,\n  .pf-wrapper .pf-sublist .pf-chip.is-active,\n  .pf-wrapper .pf-sublist .pf-chip.active,\n  .pf-wrapper .pf-sublist .pf-chip[aria-pressed='true'] {\n    background: transparent !important;\n    color: var(--pf-click-red) !important;\n    transform: translateX(4px);\n  }\n\n  .pf-wrapper .pf-sublist .pf-chip:hover::before,\n  .pf-wrapper .pf-sublist .pf-chip:focus-visible::before,\n  .pf-wrapper .pf-sublist .pf-chip.is-active::before,\n  .pf-wrapper .pf-sublist .pf-chip.active::before,\n  .pf-wrapper .pf-sublist .pf-chip[aria-pressed='true']::before {\n    color: var(--pf-click-red);\n  }\n\n  .pf-wrapper .pf-sublist .pf-chip.is-active::after,\n  .pf-wrapper .pf-sublist .pf-chip.active::after,\n  .pf-wrapper .pf-sublist .pf-chip[aria-pressed='true']::after {\n    width: 22px;\n  }\n\n  .pf-mobile-filter-footer {\n    bottom: calc(-18px - env(safe-area-inset-bottom));\n    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);\n    gap: 0;\n    margin: 18px -18px calc(-18px - env(safe-area-inset-bottom));\n    padding: 0 18px calc(14px + env(safe-area-inset-bottom));\n    border-top: 1px solid var(--pf-click-line);\n    background: var(--pf-click-black);\n  }\n\n  .pf-mobile-filter-reset,\n  .pf-mobile-filter-apply,\n  .pf-mobile-filter-reset:hover,\n  .pf-mobile-filter-apply:hover,\n  .pf-mobile-filter-reset:focus,\n  .pf-mobile-filter-apply:focus,\n  .pf-mobile-filter-reset:active,\n  .pf-mobile-filter-apply:active {\n    min-height: 58px;\n    margin: 14px 0 0;\n    padding: 0 12px;\n    border-radius: 0;\n    font-family: \"Zalando Sans Expanded\", \"Helvetica Neue\", Arial, sans-serif;\n    font-size: 12px;\n    font-weight: 500;\n    letter-spacing: .025em;\n    text-transform: uppercase;\n    box-shadow: none;\n    transition: background-color .2s ease, color .2s ease;\n  }\n\n  .pf-mobile-filter-reset,\n  .pf-mobile-filter-reset:hover,\n  .pf-mobile-filter-reset:focus,\n  .pf-mobile-filter-reset:active {\n    border: 1px solid #fff;\n    background: transparent;\n    color: #fff;\n  }\n\n  .pf-mobile-filter-apply,\n  .pf-mobile-filter-apply:hover,\n  .pf-mobile-filter-apply:focus,\n  .pf-mobile-filter-apply:active {\n    border: 1px solid var(--pf-click-red);\n    background: var(--pf-click-red);\n    color: #fff;\n  }\n\n  .pf-mobile-filter-reset:hover,\n  .pf-mobile-filter-reset:focus-visible {\n    background: #fff;\n    color: #000;\n  }\n\n  .pf-mobile-filter-apply:hover,\n  .pf-mobile-filter-apply:focus-visible {\n    background: #fff;\n    border-color: #fff;\n    color: #000;\n  }\n\n  @media (max-width: 380px) {\n    .pf-wrapper .pf-filters > .pf-filter-main {\n      font-size: 22px !important;\n    }\n\n    .pf-mobile-filter-reset,\n    .pf-mobile-filter-apply {\n      font-size: 11px;\n    }\n  }\n\n  \/* ================================================\n     RIPRISTINO STILE ORIGINALE + ICONE SVG CORRETTE\n     ================================================ *\/\n\n  .pf-mobile-filter-trigger {\n    width: calc(100% - 40px);\n    min-height: 54px;\n    margin: 22px 20px 28px;\n    padding: 0 18px;\n    border: 1px solid rgba(255, 255, 255, .45);\n    border-radius: 999px;\n    background: #000;\n    font-family: inherit;\n    font-size: 16px;\n    font-weight: inherit;\n    letter-spacing: normal;\n    text-transform: none;\n  }\n\n  .pf-mobile-filter-trigger svg {\n    width: 20px;\n    height: 20px;\n    color: #fff;\n  }\n\n  .pf-mobile-filter-count {\n    min-width: 24px;\n    height: 24px;\n    border-radius: 999px;\n    background: #d42f67;\n    font-size: 12px;\n  }\n\n  .pf-mobile-filter-backdrop {\n    background: rgba(0, 0, 0, .68);\n    backdrop-filter: none;\n    -webkit-backdrop-filter: none;\n  }\n\n  .pf-wrapper .pf-filters {\n    max-height: min(82vh, 720px);\n    padding: 0 20px calc(20px + env(safe-area-inset-bottom));\n    overflow-x: hidden !important;\n    border: 0;\n    border-radius: 24px 24px 0 0;\n    background: #090909;\n    box-shadow: 0 -18px 50px rgba(0, 0, 0, .45);\n    font-family: inherit;\n    scrollbar-width: none !important;\n  }\n\n  \/* Nasconde le barre di scorrimento rosse senza bloccare lo scroll verticale *\/\n  .pf-wrapper .pf-filters::-webkit-scrollbar {\n    display: none !important;\n    width: 0 !important;\n    height: 0 !important;\n  }\n\n  .pf-wrapper .pf-filters::-webkit-scrollbar-track,\n  .pf-wrapper .pf-filters::-webkit-scrollbar-thumb {\n    background: transparent !important;\n  }\n\n  .pf-mobile-filter-head {\n    min-height: 76px;\n    margin: 0 -20px 8px;\n    padding: 0 16px 0 18px;\n    border-bottom: 1px solid rgba(255, 255, 255, .18);\n    background: #090909;\n  }\n\n  .pf-mobile-filter-title {\n    font-family: inherit;\n    font-size: 20px;\n    font-weight: 500;\n    letter-spacing: normal;\n    text-transform: none;\n  }\n\n  .pf-mobile-filter-title::before {\n    content: none;\n    display: none;\n  }\n\n  .pf-mobile-filter-close,\n  .pf-mobile-filter-close:hover,\n  .pf-mobile-filter-close:focus,\n  .pf-mobile-filter-close:active {\n    display: grid;\n    place-items: center;\n    width: 48px;\n    height: 48px;\n    padding: 0 !important;\n    border: 3px solid #fff !important;\n    border-radius: 50% !important;\n    background: #090909 !important;\n    color: #fff !important;\n    font-size: 31px;\n    font-weight: 300;\n    line-height: 1;\n    box-shadow: none !important;\n  }\n\n  .pf-mobile-filter-close::before,\n  .pf-mobile-filter-close::after {\n    content: none !important;\n    display: none !important;\n  }\n\n  .pf-wrapper .pf-filters > .pf-filter-main,\n  .pf-wrapper .pf-filters > .pf-filter-main:hover,\n  .pf-wrapper .pf-filters > .pf-filter-main:focus,\n  .pf-wrapper .pf-filters > .pf-filter-main:active {\n    min-height: 62px;\n    padding: 0 0 !important;\n    border-top: 0 !important;\n    border-right: 0 !important;\n    border-bottom: 1px solid rgba(255, 255, 255, .22) !important;\n    border-left: 0 !important;\n    border-radius: 0 !important;\n    background: transparent !important;\n    color: #fff !important;\n    font-family: inherit;\n    font-size: 18px !important;\n    font-weight: 500;\n    letter-spacing: normal;\n    line-height: 1.2;\n    text-transform: uppercase;\n  }\n\n  \/* Blocca definitivamente simboli, rombi e icone del tema *\/\n  .pf-wrapper .pf-filters > .pf-filter-main::before,\n  .pf-wrapper .pf-filters > .pf-filter-main::after {\n    content: none !important;\n    display: none !important;\n  }\n\n  .pf-filter-main__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    margin-left: auto;\n    color: #fff;\n    flex: 0 0 30px;\n    transition: transform .22s ease, color .22s ease;\n  }\n\n  .pf-filter-main__icon svg {\n    display: block;\n    width: 18px;\n    height: 18px;\n    overflow: visible;\n  }\n\n  .pf-filter-main.pf-mobile-open .pf-filter-main__icon {\n    color: #ffffff !important;\n    transform: rotate(180deg);\n  }\n\n  .pf-wrapper .pf-sublist {\n    counter-reset: none;\n  }\n\n  .pf-wrapper .pf-sublist.pf-mobile-open {\n    max-height: 520px;\n    padding: 12px 0 18px !important;\n    border-bottom: 0;\n  }\n\n  .pf-wrapper .pf-sublist .pf-chip,\n  .pf-wrapper .pf-sublist .pf-chip:hover,\n  .pf-wrapper .pf-sublist .pf-chip:focus,\n  .pf-wrapper .pf-sublist .pf-chip:active {\n    display: block !important;\n    min-height: 46px;\n    padding: 10px 14px !important;\n    border: 0 !important;\n    border-radius: 10px !important;\n    background: transparent !important;\n    color: #fff !important;\n    font-family: inherit;\n    font-size: 15px !important;\n    font-weight: inherit;\n    letter-spacing: normal;\n    line-height: 1.25;\n    text-transform: uppercase;\n    transform: none;\n  }\n\n  .pf-wrapper .pf-sublist .pf-chip::before,\n  .pf-wrapper .pf-sublist .pf-chip::after {\n    content: none !important;\n    display: none !important;\n  }\n\n  .pf-wrapper .pf-sublist .pf-chip:hover,\n  .pf-wrapper .pf-sublist .pf-chip:focus-visible {\n    background: rgba(255, 255, 255, .08) !important;\n  }\n\n  .pf-wrapper .pf-sublist .pf-chip.is-active,\n  .pf-wrapper .pf-sublist .pf-chip.active,\n  .pf-wrapper .pf-sublist .pf-chip[aria-pressed='true'] {\n    background: #d42f67 !important;\n    color: #fff !important;\n  }\n\n  .pf-mobile-filter-footer {\n    bottom: calc(-20px - env(safe-area-inset-bottom));\n    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);\n    gap: 10px;\n    margin: 18px -20px calc(-20px - env(safe-area-inset-bottom));\n    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));\n    border-top: 1px solid rgba(255, 255, 255, .18);\n    background: #090909;\n  }\n\n  .pf-mobile-filter-reset,\n  .pf-mobile-filter-apply,\n  .pf-mobile-filter-reset:hover,\n  .pf-mobile-filter-apply:hover,\n  .pf-mobile-filter-reset:focus,\n  .pf-mobile-filter-apply:focus,\n  .pf-mobile-filter-reset:active,\n  .pf-mobile-filter-apply:active {\n    min-height: 50px;\n    margin: 0;\n    padding: 0 14px;\n    border-radius: 999px;\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: inherit;\n    letter-spacing: normal;\n    text-transform: none;\n  }\n\n  .pf-mobile-filter-reset,\n  .pf-mobile-filter-reset:hover,\n  .pf-mobile-filter-reset:focus,\n  .pf-mobile-filter-reset:active {\n    border: 1px solid rgba(255, 255, 255, .55);\n    background: transparent;\n    color: #fff;\n  }\n\n  .pf-mobile-filter-apply,\n  .pf-mobile-filter-apply:hover,\n  .pf-mobile-filter-apply:focus,\n  .pf-mobile-filter-apply:active {\n    border: 1px solid #fff;\n    background: #fff;\n    color: #000;\n  }\n\n  .pf-mobile-filter-apply {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .pf-mobile-results-count {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 24px;\n    height: 24px;\n    padding: 0 6px;\n    border-radius: 999px;\n    background: #090909;\n    color: #fff;\n    font-family: Arial, sans-serif;\n    font-size: 12px;\n    font-weight: 700;\n    line-height: 1;\n  }\n\n  .pf-mobile-results-count[hidden] {\n    display: none !important;\n  }\n}\n<\/style>\n\n<section class=\"pf-wrapper\">\n\n  <!-- ===== APERTURA FILTRI MOBILE ===== -->\n  <button\n    type=\"button\"\n    class=\"pf-mobile-filter-trigger\"\n    aria-controls=\"pf-mobile-filter-panel\"\n    aria-expanded=\"false\"\n  >\n    <span>Filtra progetti<\/span>\n    <span class=\"pf-mobile-filter-trigger__right\">\n      <span class=\"pf-mobile-filter-count\" aria-label=\"Filtri attivi\">0<\/span>\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path d=\"M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M7 14v6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\n      <\/svg>\n    <\/span>\n  <\/button>\n\n  <div class=\"pf-mobile-filter-backdrop\" aria-hidden=\"true\"><\/div>\n\n  <!-- ===== TOP FILTER BAR ===== -->\n  <div class=\"pf-filters\" id=\"pf-mobile-filter-panel\">\n\n    <div class=\"pf-mobile-filter-head\">\n      <p class=\"pf-mobile-filter-title\">Filtra progetti<\/p>\n      <button type=\"button\" class=\"pf-mobile-filter-close\" aria-label=\"Chiudi filtri\">&times;<\/button>\n    <\/div>\n\n    <!-- SERVICES -->\n    <button\n      type=\"button\"\n      class=\"pf-filter-main\"\n      data-panel=\"services\"\n    >\n      <span>Services<\/span>\n      <span class=\"pf-filter-main__icon\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M4 7L10 13L16 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"square\" stroke-linejoin=\"miter\"\/>\n        <\/svg>\n      <\/span>\n    <\/button>\n\n    <div class=\"pf-sublist pf-sublist--services\">\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"services\"\n        data-value=\"business-consultancy\"\n      >\n        Business consultancy\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"services\"\n        data-value=\"branding\"\n      >\n        Branding\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"services\"\n        data-value=\"strategy\"\n      >\n        Strategy\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"services\"\n        data-value=\"video-production\"\n      >\n        Video Production\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"services\"\n        data-value=\"social-media-management\"\n      >\n        Social Media Management\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"services\"\n        data-value=\"motion-graphic\"\n      >\n        Motion Graphic\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"services\"\n        data-value=\"cgi\"\n      >\n        CGI\n      <\/button>\n\n    <\/div>\n\n    <!-- MARKET -->\n    <button\n      type=\"button\"\n      class=\"pf-filter-main\"\n      data-panel=\"markets\"\n    >\n      <span>Market<\/span>\n      <span class=\"pf-filter-main__icon\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M4 7L10 13L16 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"square\" stroke-linejoin=\"miter\"\/>\n        <\/svg>\n      <\/span>\n    <\/button>\n\n    <div class=\"pf-sublist pf-sublist--markets\">\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"markets\"\n        data-value=\"food\"\n      >\n        Food\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"markets\"\n        data-value=\"healthcare\"\n      >\n        Healthcare\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"markets\"\n        data-value=\"industry\"\n      >\n        Industry\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"markets\"\n        data-value=\"yachts\"\n      >\n        Yachts\n      <\/button>\n\n    <\/div>\n\n    <!-- YEAR -->\n    <button\n      type=\"button\"\n      class=\"pf-filter-main\"\n      data-panel=\"years\"\n    >\n      <span>Year<\/span>\n      <span class=\"pf-filter-main__icon\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M4 7L10 13L16 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"square\" stroke-linejoin=\"miter\"\/>\n        <\/svg>\n      <\/span>\n    <\/button>\n\n    <div class=\"pf-sublist pf-sublist--years\">\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"years\"\n        data-value=\"2023\"\n      >\n        2023\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"years\"\n        data-value=\"2024\"\n      >\n        2024\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"years\"\n        data-value=\"2025\"\n      >\n        2025\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"pf-chip\"\n        data-group=\"years\"\n        data-value=\"2026\"\n      >\n        2026\n      <\/button>\n\n    <\/div>\n\n    <div class=\"pf-mobile-filter-footer\">\n      <button type=\"button\" class=\"pf-mobile-filter-reset\">Azzera<\/button>\n      <button type=\"button\" class=\"pf-mobile-filter-apply\">\n        <span>Mostra progetti<\/span>\n        <span class=\"pf-mobile-results-count\" aria-live=\"polite\" hidden>0<\/span>\n      <\/button>\n    <\/div>\n\n  <\/div>\n\n  <!-- ===== GRID PROGETTI ===== -->\n  <div class=\"pf-grid\">\n\n    <!-- ===== RIGA 1: AUGUSTA + SAN SALVATORE ===== -->\n    <div class=\"pf-row pf-row--1\">\n\n      <!-- AUGUSTA -->\n      <article\n        class=\"pf-card pf-card--hero\"\n        data-services=\"branding\"\n        data-markets=\"industry\"\n        data-years=\"2024,2025\"\n      >\n        <a\n          href=\"https:\/\/www.clickagency.it\/portfolio-augusta\/\"\n          class=\"pf-card-link\"\n        >\n          <div class=\"pf-media\">\n            <video\n              class=\"pf-media-el\"\n              src=\"https:\/\/www.clickagency.it\/wp-content\/uploads\/2025\/11\/Video-header.mp4\"\n              autoplay\n              muted\n              loop\n              playsinline\n              preload=\"metadata\"\n            ><\/video>\n          <\/div>\n\n          <div class=\"pf-card-overlay\"><\/div>\n\n          <div class=\"pf-card-info\">\n            <h3>Augusta<\/h3>\n\n            <p>\n              Brand Identity<br>\n              Web Design\n            <\/p>\n          <\/div>\n        <\/a>\n      <\/article>\n\n      <!-- SAN SALVATORE -->\n      <article\n        class=\"pf-card pf-card--small\"\n        data-services=\"branding,motion-graphic,social-media-management\"\n        data-markets=\"food\"\n        data-years=\"2025\"\n      >\n        <a\n          href=\"https:\/\/www.clickagency.it\/portfolio-san-salvatore\/\"\n          class=\"pf-card-link\"\n        >\n          <div class=\"pf-media\">\n            <video\n              class=\"pf-media-el\"\n              src=\"https:\/\/www.clickagency.it\/wp-content\/uploads\/2025\/11\/Video_2.mp4\"\n              autoplay\n              muted\n              loop\n              playsinline\n              preload=\"metadata\"\n            ><\/video>\n          <\/div>\n\n          <div class=\"pf-card-overlay\"><\/div>\n\n          <div class=\"pf-card-info\">\n            <h3>San Salvatore<\/h3>\n\n            <p>\n              Social Media Strategy<br>\n              and Communication\n            <\/p>\n          <\/div>\n        <\/a>\n      <\/article>\n\n    <\/div>\n\n    <!-- ===== RIGA 2: SANTASEVERA + CASA SCARICA ===== -->\n    <div class=\"pf-row pf-row--3\">\n\n      <!-- SANTASEVERA -->\n      <article\n        class=\"pf-card pf-card--small\"\n        data-services=\"strategy\"\n        data-markets=\"yachts\"\n        data-years=\"\"\n      >\n        <a\n          href=\"https:\/\/www.clickagency.it\/portfolio-santasevera\/\"\n          class=\"pf-card-link\"\n        >\n          <div class=\"pf-media\">\n            <video\n              class=\"pf-media-el\"\n              src=\"https:\/\/www.clickagency.it\/wp-content\/uploads\/2025\/12\/Video-4.11_1_.mp4\"\n              autoplay\n              muted\n              loop\n              playsinline\n              preload=\"metadata\"\n            ><\/video>\n          <\/div>\n\n          <div class=\"pf-card-overlay\"><\/div>\n\n          <div class=\"pf-card-info\">\n            <h3>Santasevera<\/h3>\n\n            <p>\n              Social Media Strategy<br>\n              Web Design\n            <\/p>\n          <\/div>\n        <\/a>\n      <\/article>\n\n      <!-- CASA SCARICA -->\n      <article\n        class=\"pf-card pf-card--wide\"\n        data-services=\"strategy,social-media-management\"\n        data-markets=\"food\"\n        data-years=\"\"\n      >\n        <a\n          href=\"https:\/\/www.clickagency.it\/portfolio-casa-scarica\/\"\n          class=\"pf-card-link\"\n        >\n          <div class=\"pf-media\">\n            <video\n              class=\"pf-media-el\"\n              src=\"https:\/\/www.clickagency.it\/wp-content\/uploads\/2025\/12\/header.mp4\"\n              autoplay\n              muted\n              loop\n              playsinline\n              preload=\"metadata\"\n            ><\/video>\n          <\/div>\n\n          <div class=\"pf-card-overlay\"><\/div>\n\n          <div class=\"pf-card-info\">\n            <h3>Casa Scarica<\/h3>\n\n            <p>\n              Brand Identity<br>\n              Social &amp; Digital Strategy\n            <\/p>\n          <\/div>\n        <\/a>\n      <\/article>\n\n    <\/div>\n\n    <!-- ===== RIGA 3: SAN GIORGIO + VITANOVA ===== -->\n    <div class=\"pf-row pf-row--4\">\n\n      <!-- SAN GIORGIO -->\n      <article\n        class=\"pf-card pf-card--square\"\n        data-services=\"video-production,social-media-management\"\n        data-markets=\"food\"\n        data-years=\"\"\n      >\n        <a\n          href=\"https:\/\/www.clickagency.it\/portfolio-san-giorgio\/\"\n          class=\"pf-card-link\"\n        >\n          <div class=\"pf-media\">\n            <video\n              class=\"pf-media-el\"\n              src=\"https:\/\/www.clickagency.it\/wp-content\/uploads\/2025\/12\/Video-header.mp4\"\n              autoplay\n              muted\n              loop\n              playsinline\n              preload=\"metadata\"\n            ><\/video>\n          <\/div>\n\n          <div class=\"pf-card-overlay\"><\/div>\n\n          <div class=\"pf-card-info\">\n            <h3>San Giorgio<\/h3>\n\n            <p>\n              Social Media Strategy<br>\n              and Communication\n            <\/p>\n          <\/div>\n        <\/a>\n      <\/article>\n\n      <!-- VITANOVA -->\n      <article\n        class=\"pf-card pf-card--square\"\n        data-services=\"branding,strategy,social-media-management\"\n        data-markets=\"food\"\n        data-years=\"\"\n      >\n        <a\n          href=\"https:\/\/www.clickagency.it\/portfolio-vitanova\/\"\n          class=\"pf-card-link\"\n        >\n          <div class=\"pf-media\">\n            <video\n              class=\"pf-media-el\"\n              src=\"https:\/\/www.clickagency.it\/wp-content\/uploads\/2025\/12\/video-vitanova.mp4\"\n              autoplay\n              muted\n              loop\n              playsinline\n              preload=\"metadata\"\n            ><\/video>\n          <\/div>\n\n          <div class=\"pf-card-overlay\"><\/div>\n\n          <div class=\"pf-card-info\">\n            <h3>Vitanova<\/h3>\n\n            <p>\n              Brand Identity<br>\n              Social Media Strategy and Communication\n            <\/p>\n          <\/div>\n        <\/a>\n      <\/article>\n\n    <\/div>\n\n    <!-- ===== GRIGLIA CONTINUA: ZIG + HP + LA MOLISANA ===== -->\n    <div class=\"pf-row pf-row--4 pf-row--continuous\">\n\n      <!-- ZIG -->\n      <article\n        class=\"pf-card pf-card--square\"\n        data-services=\"social-media-management\"\n        data-markets=\"food\"\n        data-years=\"2024,2025\"\n      >\n        <a\n          href=\"https:\/\/www.clickagency.it\/portfolio-zig\/\"\n          class=\"pf-card-link\"\n        >\n          <div class=\"pf-media\">\n            <video\n              class=\"pf-media-el\"\n              src=\"https:\/\/www.clickagency.it\/wp-content\/uploads\/2026\/01\/video-header-def.mp4\"\n              autoplay\n              muted\n              loop\n              playsinline\n              preload=\"metadata\"\n            ><\/video>\n          <\/div>\n\n          <div class=\"pf-card-overlay\"><\/div>\n\n          <div class=\"pf-card-info\">\n            <h3>Zig<\/h3>\n            <p>Social Media Strategy<\/p>\n          <\/div>\n        <\/a>\n      <\/article>\n\n      <!-- HP -->\n      <article\n        class=\"pf-card pf-card--square\"\n        data-services=\"video-production\"\n        data-markets=\"\"\n        data-years=\"2026\"\n      >\n        <!-- Sostituire il permalink se la pagina usa un URL diverso -->\n        <a\n          href=\"https:\/\/www.clickagency.it\/portfolio-hp\/\"\n          class=\"pf-card-link\"\n        >\n          <div class=\"pf-media\">\n            <video\n              class=\"pf-media-el\"\n              src=\"https:\/\/www.clickagency.it\/wp-content\/uploads\/2026\/09\/anteprima.mp4\"\n              autoplay\n              muted\n              loop\n              playsinline\n              preload=\"metadata\"\n            ><\/video>\n          <\/div>\n\n          <div class=\"pf-card-overlay\"><\/div>\n\n          <div class=\"pf-card-info\">\n            <h3>HP<\/h3>\n            <p>Video Production<\/p>\n          <\/div>\n        <\/a>\n      <\/article>\n\n      <!-- LA MOLISANA -->\n      <article\n        class=\"pf-card pf-card--square\"\n        data-services=\"video-production,branding\"\n        data-markets=\"food\"\n        data-years=\"2026\"\n      >\n        <!-- Sostituire il permalink se la pagina usa un URL diverso -->\n        <a\n          href=\"https:\/\/www.clickagency.it\/portfolio-la-molisana\/\"\n          class=\"pf-card-link\"\n        >\n          <div class=\"pf-media\">\n            <video\n              class=\"pf-media-el\"\n              src=\"https:\/\/www.clickagency.it\/wp-content\/uploads\/2026\/09\/anteprima-molisana.mp4\"\n              autoplay\n              muted\n              loop\n              playsinline\n              preload=\"metadata\"\n            ><\/video>\n          <\/div>\n\n          <div class=\"pf-card-overlay\"><\/div>\n\n          <div class=\"pf-card-info\">\n            <h3>La Molisana<\/h3>\n\n            <p>\n              Brand Identity<br>\n              Video Production\n            <\/p>\n          <\/div>\n        <\/a>\n      <\/article>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- ===== INTERFACCIA FILTRI MOBILE ===== -->\n<script>\n(function () {\n  const portfolio = document.querySelector('.pf-wrapper');\n\n  if (!portfolio) {\n    return;\n  }\n\n  const mobileQuery = window.matchMedia('(max-width: 767px)');\n  const panel = portfolio.querySelector('.pf-filters');\n  const trigger = portfolio.querySelector('.pf-mobile-filter-trigger');\n  const backdrop = portfolio.querySelector('.pf-mobile-filter-backdrop');\n  const closeButton = portfolio.querySelector('.pf-mobile-filter-close');\n  const applyButton = portfolio.querySelector('.pf-mobile-filter-apply');\n  const resetButton = portfolio.querySelector('.pf-mobile-filter-reset');\n  const counter = portfolio.querySelector('.pf-mobile-filter-count');\n  const resultCounter = portfolio.querySelector('.pf-mobile-results-count');\n  const mainButtons = Array.from(portfolio.querySelectorAll('.pf-filter-main'));\n  const chips = Array.from(portfolio.querySelectorAll('.pf-chip'));\n  const cards = Array.from(portfolio.querySelectorAll('.pf-card'));\n\n  function isChipActive(chip) {\n    return chip.classList.contains('active') ||\n      chip.classList.contains('is-active') ||\n      chip.classList.contains('selected') ||\n      chip.classList.contains('is-selected') ||\n      chip.getAttribute('aria-pressed') === 'true' ||\n      chip.getAttribute('aria-selected') === 'true';\n  }\n\n  function updateCounter() {\n    const total = chips.filter(isChipActive).length;\n\n    counter.textContent = String(total);\n    counter.classList.toggle('has-filters', total > 0);\n  }\n\n  function isProjectVisible(card) {\n    if (\n      !card ||\n      card.hidden ||\n      card.offsetParent === null ||\n      card.getAttribute('aria-hidden') === 'true'\n    ) {\n      return false;\n    }\n\n    const style = window.getComputedStyle(card);\n\n    return style.display !== 'none' &&\n      style.visibility !== 'hidden' &&\n      style.opacity !== '0';\n  }\n\n  function updateResultCounter() {\n    const hasActiveFilters = chips.some(isChipActive);\n\n    if (!hasActiveFilters) {\n      resultCounter.hidden = true;\n      resultCounter.textContent = '0';\n      return;\n    }\n\n    const visibleProjects = cards.filter(isProjectVisible).length;\n\n    resultCounter.textContent = String(visibleProjects);\n    resultCounter.hidden = false;\n    resultCounter.setAttribute(\n      'aria-label',\n      visibleProjects + (visibleProjects === 1 ? ' progetto' : ' progetti')\n    );\n  }\n\n  function refreshMobileCounters() {\n    updateCounter();\n    updateResultCounter();\n  }\n\n  function setPanel(open) {\n    panel.classList.toggle('is-mobile-open', open);\n    backdrop.classList.toggle('is-open', open);\n    trigger.setAttribute('aria-expanded', String(open));\n    backdrop.setAttribute('aria-hidden', String(!open));\n    document.body.classList.toggle('pf-filters-locked', open);\n\n    if (open) {\n      const activeMain = mainButtons.find(function (button) {\n        const list = button.nextElementSibling;\n        return list && Array.from(list.querySelectorAll('.pf-chip')).some(isChipActive);\n      });\n\n      openAccordion(activeMain || mainButtons[0]);\n      setTimeout(function () {\n        closeButton.focus();\n      }, 50);\n    } else {\n      trigger.focus({ preventScroll: true });\n    }\n  }\n\n  function openAccordion(selectedButton) {\n    mainButtons.forEach(function (button) {\n      const list = button.nextElementSibling;\n      const mustOpen = button === selectedButton && !button.classList.contains('pf-mobile-open');\n      const alreadyOpen = button === selectedButton && button.classList.contains('pf-mobile-open');\n      const nextState = button === selectedButton ? (mustOpen || alreadyOpen) : false;\n\n      button.classList.toggle('pf-mobile-open', nextState);\n      button.setAttribute('aria-expanded', String(nextState));\n\n      if (list && list.classList.contains('pf-sublist')) {\n        list.classList.toggle('pf-mobile-open', nextState);\n      }\n    });\n  }\n\n  function toggleAccordion(button) {\n    const list = button.nextElementSibling;\n    const willOpen = !button.classList.contains('pf-mobile-open');\n\n    mainButtons.forEach(function (item) {\n      const itemList = item.nextElementSibling;\n      item.classList.remove('pf-mobile-open');\n      item.setAttribute('aria-expanded', 'false');\n\n      if (itemList && itemList.classList.contains('pf-sublist')) {\n        itemList.classList.remove('pf-mobile-open');\n      }\n    });\n\n    if (willOpen && list) {\n      button.classList.add('pf-mobile-open');\n      button.setAttribute('aria-expanded', 'true');\n      list.classList.add('pf-mobile-open');\n    }\n  }\n\n  trigger.addEventListener('click', function () {\n    setPanel(true);\n  });\n\n  closeButton.addEventListener('click', function () {\n    setPanel(false);\n  });\n\n  backdrop.addEventListener('click', function () {\n    setPanel(false);\n  });\n\n  applyButton.addEventListener('click', function () {\n    refreshMobileCounters();\n    setPanel(false);\n  });\n\n  resetButton.addEventListener('click', function () {\n    chips.filter(isChipActive).forEach(function (chip) {\n      chip.click();\n      chip.classList.remove('active', 'is-active');\n      chip.setAttribute('aria-pressed', 'false');\n    });\n\n    setTimeout(refreshMobileCounters, 50);\n    setTimeout(refreshMobileCounters, 250);\n  });\n\n  mainButtons.forEach(function (button) {\n    button.setAttribute('aria-expanded', 'false');\n\n    button.addEventListener('click', function () {\n      if (mobileQuery.matches) {\n        toggleAccordion(button);\n      }\n    });\n  });\n\n  chips.forEach(function (chip) {\n    chip.addEventListener('click', function () {\n      setTimeout(refreshMobileCounters, 0);\n      setTimeout(refreshMobileCounters, 80);\n      setTimeout(refreshMobileCounters, 250);\n    });\n  });\n\n  const projectGrid = portfolio.querySelector('.pf-grid');\n\n  if (projectGrid && 'MutationObserver' in window) {\n    let counterFrame = null;\n    const resultsObserver = new MutationObserver(function () {\n      if (counterFrame) {\n        cancelAnimationFrame(counterFrame);\n      }\n\n      counterFrame = requestAnimationFrame(function () {\n        refreshMobileCounters();\n        counterFrame = null;\n      });\n    });\n\n    resultsObserver.observe(projectGrid, {\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['class', 'style', 'hidden', 'aria-hidden']\n    });\n  }\n\n  document.addEventListener('keydown', function (event) {\n    if (event.key === 'Escape' && panel.classList.contains('is-mobile-open')) {\n      setPanel(false);\n    }\n  });\n\n  mobileQuery.addEventListener('change', function (event) {\n    if (!event.matches) {\n      panel.classList.remove('is-mobile-open');\n      backdrop.classList.remove('is-open');\n      document.body.classList.remove('pf-filters-locked');\n      trigger.setAttribute('aria-expanded', 'false');\n    }\n  });\n\n  refreshMobileCounters();\n})();\n<\/script>\n\n<!-- ===== GESTIONE RIPRODUZIONE VIDEO ===== -->\n<script>\n(function () {\n  const portfolio = document.querySelector('.pf-wrapper');\n\n  if (!portfolio) {\n    return;\n  }\n\n  const videos = portfolio.querySelectorAll('video.pf-media-el');\n\n  \/**\n   * Controlla se la card \u00e8 realmente visibile.\n   *\/\n  function isCardVisible(card) {\n    if (!card || card.offsetParent === null) {\n      return false;\n    }\n\n    const style = window.getComputedStyle(card);\n\n    return (\n      style.display !== 'none' &&\n      style.visibility !== 'hidden' &&\n      style.opacity !== '0'\n    );\n  }\n\n  \/**\n   * Avvia i video visibili e ferma quelli filtrati.\n   *\/\n  function updatePortfolioVideos() {\n    videos.forEach(function (video) {\n      const card = video.closest('.pf-card');\n\n      video.muted = true;\n      video.defaultMuted = true;\n      video.playsInline = true;\n\n      video.setAttribute('muted', '');\n      video.setAttribute('playsinline', '');\n      video.setAttribute('webkit-playsinline', '');\n\n      if (isCardVisible(card)) {\n        const playPromise = video.play();\n\n        if (playPromise !== undefined) {\n          playPromise.catch(function () {\n            \/* Il browser riprover\u00e0 al prossimo aggiornamento *\/\n          });\n        }\n      } else {\n        video.pause();\n      }\n    });\n  }\n\n  \/**\n   * Prepara tutti i video.\n   *\/\n  videos.forEach(function (video) {\n    video.muted = true;\n    video.defaultMuted = true;\n    video.playsInline = true;\n\n    video.setAttribute('muted', '');\n    video.setAttribute('playsinline', '');\n    video.setAttribute('webkit-playsinline', '');\n\n    video.addEventListener('loadedmetadata', function () {\n      if (isCardVisible(video.closest('.pf-card'))) {\n        const playPromise = video.play();\n\n        if (playPromise !== undefined) {\n          playPromise.catch(function () {});\n        }\n      }\n    });\n\n    video.addEventListener('canplay', function () {\n      if (isCardVisible(video.closest('.pf-card'))) {\n        const playPromise = video.play();\n\n        if (playPromise !== undefined) {\n          playPromise.catch(function () {});\n        }\n      }\n    });\n  });\n\n  \/**\n   * Primo caricamento.\n   *\/\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', function () {\n      setTimeout(updatePortfolioVideos, 100);\n    });\n  } else {\n    setTimeout(updatePortfolioVideos, 100);\n  }\n\n  window.addEventListener('load', function () {\n    setTimeout(updatePortfolioVideos, 150);\n  });\n\n  \/**\n   * Aggiornamento dopo l'utilizzo dei filtri.\n   *\/\n  portfolio.addEventListener('click', function (event) {\n    const filterButton = event.target.closest(\n      '.pf-chip, .pf-filter-main'\n    );\n\n    if (!filterButton) {\n      return;\n    }\n\n    setTimeout(updatePortfolioVideos, 100);\n    setTimeout(updatePortfolioVideos, 300);\n  });\n\n  \/**\n   * Riprende la riproduzione tornando sulla pagina.\n   *\/\n  document.addEventListener('visibilitychange', function () {\n    if (!document.hidden) {\n      setTimeout(updatePortfolioVideos, 100);\n    }\n  });\n\n  \/**\n   * Avvio e pausa durante lo scorrimento della pagina.\n   *\/\n  if ('IntersectionObserver' in window) {\n    const observer = new IntersectionObserver(\n      function (entries) {\n        entries.forEach(function (entry) {\n          const video = entry.target;\n          const card = video.closest('.pf-card');\n\n          if (entry.isIntersecting && isCardVisible(card)) {\n            video.muted = true;\n\n            const playPromise = video.play();\n\n            if (playPromise !== undefined) {\n              playPromise.catch(function () {});\n            }\n          } else if (!entry.isIntersecting) {\n            video.pause();\n          }\n        });\n      },\n      {\n        threshold: 0.05\n      }\n    );\n\n    videos.forEach(function (video) {\n      observer.observe(video);\n    });\n  }\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4241ca4 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"4241ca4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n  const state = {\n    services: new Set(),\n    markets: new Set(),\n    years:   new Set()\n  };\n\n  const mainButtons = document.querySelectorAll('.pf-filter-main');\n  const sublists = {\n    services: document.querySelector('.pf-sublist--services'),\n    markets:  document.querySelector('.pf-sublist--markets'),\n    years:    document.querySelector('.pf-sublist--years')\n  };\n  const cards = document.querySelectorAll('.pf-card');\n\n  if (!cards.length) return; \/\/ safety, se la sezione \u00e8 vuota non facciamo nulla\n\n  \/\/ toggle sublist aperta\/chiusa\n  mainButtons.forEach(btn => {\n    btn.addEventListener('click', () => {\n      const key = btn.dataset.panel;\n      const alreadyActive = btn.classList.contains('is-active');\n\n      if (alreadyActive) {\n        \/\/ chiudo tutto\n        mainButtons.forEach(b => b.classList.remove('is-active'));\n        Object.values(sublists).forEach(list => list.classList.remove('is-open'));\n        return;\n      }\n\n      \/\/ apro solo il pannello relativo\n      mainButtons.forEach(b => b.classList.toggle('is-active', b === btn));\n      Object.entries(sublists).forEach(([k, list]) => {\n        list.classList.toggle('is-open', k === key);\n      });\n    });\n  });\n\n  \/\/ selezione chip\n  document.querySelectorAll('.pf-chip').forEach(chip => {\n    chip.addEventListener('click', () => {\n      const group = chip.dataset.group;\n      const val   = chip.dataset.value;\n      const set   = state[group];\n\n      if (!set) return;\n\n      if (set.has(val)) {\n        set.delete(val);\n        chip.classList.remove('is-selected');\n      } else {\n        set.add(val);\n        chip.classList.add('is-selected');\n      }\n\n      filterCards();\n    });\n  });\n\n  function cardMatchesGroup(card, groupKey) {\n    const selected = state[groupKey];\n    if (!selected || !selected.size) return true; \/\/ nessun filtro in quel gruppo\n\n    const dataAttr = card.dataset[groupKey];\n    if (!dataAttr) return false;\n\n    \/\/ supporta pi\u00f9 valori, es: data-years=\"2024,2025\"\n    const values = dataAttr.split(',').map(v => v.trim());\n    for (const sel of selected) {\n      if (values.includes(sel)) return true;\n    }\n    return false;\n  }\n\n  function filterCards() {\n    cards.forEach(card => {\n      const match =\n        cardMatchesGroup(card, 'services') &&\n        cardMatchesGroup(card, 'markets') &&\n        cardMatchesGroup(card, 'years');\n\n      card.style.display = match ? '' : 'none';\n    });\n  }\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Filtra progetti 0 Filtra progetti &times; Services Business consultancy Branding Strategy Video Production Social Media Management Motion Graphic CGI Market Food Healthcare Industry Yachts Year 2023 2024 2025 2026 Azzera Mostra progetti 0 Augusta Brand Identity Web Design San Salvatore Social Media Strategy and Communication Santasevera Social Media Strategy Web Design Casa Scarica Brand Identity Social &amp; Digital Strategy San Giorgio Social Media Strategy and Communication Vitanova Brand Identity Social Media Strategy and Communication Zig Social Media Strategy HP Video Production La Molisana Brand Identity Video Production<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-70","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.clickagency.it\/en\/wp-json\/wp\/v2\/pages\/70","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickagency.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.clickagency.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickagency.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickagency.it\/en\/wp-json\/wp\/v2\/comments?post=70"}],"version-history":[{"count":206,"href":"https:\/\/www.clickagency.it\/en\/wp-json\/wp\/v2\/pages\/70\/revisions"}],"predecessor-version":[{"id":4096,"href":"https:\/\/www.clickagency.it\/en\/wp-json\/wp\/v2\/pages\/70\/revisions\/4096"}],"wp:attachment":[{"href":"https:\/\/www.clickagency.it\/en\/wp-json\/wp\/v2\/media?parent=70"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}