@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Zen+Maru+Gothic:wght@400;500;700&display=swap");

/* JAPAN WEEK FONTS */
body,
.palermo-container {
    font-family: 'Zen Maru Gothic', sans-serif;
}

h1, h2, h3, .title, .main-title {
    font-family: 'Dela Gothic One', sans-serif;
    font-weight: 400; /* Dela ha un solo peso, evita il grassetto finto */
    letter-spacing: .02em;
}

:root {
    /* Colors */
    --brand-color: #deaa00;
    --black: hsl(0, 0%, 0%);
    --white: hsl(0, 0%, 100%);
    /* Fonts */
    --font-title: "Montserrat", sans-serif;
    --font-text: "Lato", sans-serif;
}

/* RESET */

/* Box sizing rules */
*,
*::before,
*::after {
    /*box-sizing: border-box;*/
}

/* Remove default margin */
body,
h2,
p {
    margin: 0;
}

/* GLOBAL STYLES */
/*body {*/
/*    display: grid;*/
/*    place-items: center;*/
/*    height: 100vh;*/
/*}*/

.carta h2 {
    font-size: 1.85rem;
    font-family: var(--font-title);
    color: var(--white);
    line-height: 1.1;
}

.carta p {
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--white);
}

.flow > * + * {
    margin-top: var(--flow-space, 1em);
}

/* CARD COMPONENT */

.carta {
    display: grid;
    place-items: center;
    /*width: 80vw;*/
    max-width: 21.875rem;
    margin: 0 20px;
    height: 28.125rem;
    overflow: hidden;
    border-radius: 0.625rem;
    box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}

.carta > * {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.carta__background {
    object-fit: cover;
    max-width: 100%;
    height: 100%;
}

.carta__content {
    --flow-space: 0.9375rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: flex-end;
    height: 75%;
    padding: 0 1.25rem 1.875rem;
    background: linear-gradient(
            180deg,
            hsla(0, 0%, 0%, 0) 0%,
            hsla(0, 0%, 0%, 0.3) 10%,
            hsl(0, 0%, 0%) 100%
    );
}

.carta__content--container {
    --flow-space: 1.25rem;
}

.carta__description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.carta__title {
    position: relative;
    width: fit-content;
    width: -moz-fit-content; /* Prefijo necesario para Firefox  */
}

.carta__title::after {
    content: "";
    position: absolute;
    height: 0.3125rem;
    width: calc(100% + 1.25rem);
    bottom: calc((1.25rem - 0.5rem) * -1);
    left: -1.25rem;
    background-color: var(--brand-color);
}

.carta__button {
    padding: 0.75em 1.6em;
    width: fit-content;
    width: -moz-fit-content; /* Prefijo necesario para Firefox  */
    font-variant: small-caps;
    font-weight: bold;
    border-radius: 0.45em;
    border: none;
    background-color: var(--brand-color);
    font-family: var(--font-title);
    font-size: 1.125rem;
    color: var(--black);
}

.carta__button:focus {
    outline: 2px solid black;
    outline-offset: -5px;
}

@media (any-hover: hover) and (any-pointer: fine) {
    .carta__content {
        transform: translateY(62%);
        transition: transform 500ms ease-out;
        transition-delay: 500ms;
    }

    .carta__title::after {
        opacity: 0;
        transform: scaleX(0);
        transition: opacity 1000ms ease-in, transform 500ms ease-out;
        transition-delay: 500ms;
        transform-origin: right;
    }

    .carta__background {
        transition: transform 500ms ease-in;
    }

    .carta__content--container > :not(.carta__title),
    .carta__button {
        opacity: 0;
        transition: transform 500ms ease-out, opacity 500ms ease-out;
    }

    .carta:hover,
    .carta:focus-within {
        transform: scale(1.05);
        transition: transform 500ms ease-in;
    }

    .carta:hover .carta__content,
    .carta:focus-within .carta__content {
        transform: translateY(0);
        transition: transform 500ms ease-in;
    }

    .carta:focus-within .carta__content {
        transition-duration: 0ms;
    }

    .carta:hover .carta__background,
    .carta:focus-within .carta__background {
        transform: scale(1.3);
    }

    .carta:hover .carta__content--container > :not(.carta__title),
    .carta:hover .carta__button,
    .carta:focus-within .carta__content--container > :not(.carta__title),
    .carta:focus-within .carta__button {
        opacity: 1;
        transition: opacity 500ms ease-in;
        transition-delay: 1000ms;
    }

    .carta:hover .carta__title::after,
    .carta:focus-within .carta__title::after {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: left;
        transition: opacity 500ms ease-in, transform 500ms ease-in;
        transition-delay: 500ms;
    }
}

/* @media (min-width: 768px) { */
    .owl-carousel .owl-nav {
        top: -webkit-calc(60% - 2.5em) !important;
        top: calc(60% - 2.5em) !important;
    }
/* } */

/*.header-2 .header-content .title {*/
/*    font-family: inherit;*/
/*    !*text-transform: none;*!*/
/*    !*letter-spacing: 3px;*!*/
/*    !*font-size: 6rem;*!*/
/*    !*font-weight: 500;*!*/
/*     -webkit-transform: rotate(0deg);*/
/*     transform: rotate(0deg);*/
/*}*/

/*.header-2 {*/
/*    height: 750px;*/
/*    width: 100%;*/
/*    background-color: rgba(0,0,0,.15);*/
/*    border-bottom: none;*/
/*}*/

/*@media (max-width: 575px) {*/
/*    .header-2 .header-content .title {*/
/*        font-size: 1.7rem;*/
/*    }*/
/*}*/

/*.slide {*/
/*    box-shadow: rgba(0, 0, 0, 0.45) 0px 12px 10px -6px;*/
/*}*/

/*.header-2 {*/
/*    box-shadow: rgba(0, 0, 0, 0.45) 0px 12px 10px -6px;*/
/*}*/



/* Logo IFF affiancato a destra del logo Palermo (solo desktop) */
.palermo-navbar .logo-double img.iff-logo {
    width: auto;
    object-fit: contain;
}

.navbar-brand.logo-double img {
    border: 0;
    box-sizing: border-box;
}

/* Navbar mobile: tre loghi su una riga (Japan Week, Palermo, IFF) */
@media (max-width: 575.98px) {
    .palermo-navbar-mobile .logo-double {
        display: flex;
        align-items: flex-start;
        gap: 4px;
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 0;
    }

    .palermo-navbar-mobile .logo-double img,
    .palermo-navbar-mobile .logo-double.navbar-expanded img {
        height: 64px;
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        object-fit: contain;
    }

    .palermo-navbar-mobile .logo-double #palermo-logo,
    .palermo-navbar-mobile .logo-double #palermo-logo-mobile {
        max-width: 72px;
    }

    .palermo-navbar-mobile .logo-double img.iff-logo {
        height: auto;
        max-height: 44px;
        max-width: 30%;
        align-self: center;
        padding: 2px 4px;
        border: 0;
        background: #fff;
    }

    .palermo-navbar-mobile .start-search {
        padding-left: .25rem;
        padding-right: .25rem;
    }

    .palermo-navbar-mobile .navbar-toggler {
        margin-left: .25rem !important;
    }
}

/* Schermi molto stretti (es. 320px) */
@media (max-width: 359.98px) {
    .palermo-navbar-mobile .logo-double {
        gap: 3px;
    }

    .palermo-navbar-mobile .logo-double img,
    .palermo-navbar-mobile .logo-double.navbar-expanded img {
        height: 54px;
    }

    .palermo-navbar-mobile .logo-double #palermo-logo,
    .palermo-navbar-mobile .logo-double #palermo-logo-mobile {
        max-width: 60px;
    }

    .palermo-navbar-mobile .logo-double img.iff-logo {
        max-height: 32px;
    }

    .palermo-navbar-mobile .start-search .icon-2x {
        font-size: 1.5em;
    }
}

/* Navbar mobile: i tre loghi come card della stessa dimensione (76x60) */
@media (max-width: 575.98px) {
    .palermo-navbar-mobile .navbar-brand.logo-double {
        gap: 8px;
        margin-top: 12px;
        margin-bottom: 6px;
    }

    .palermo-navbar-mobile .navbar-brand.logo-double img,
    .palermo-navbar-mobile .navbar-brand.logo-double img.iff-logo {
        width: 76px;
        height: 60px;
        max-width: none;
        max-height: none;
        flex: 0 0 76px;
        align-self: center;
        object-fit: contain;
        padding: 4px;
        border-radius: 10px;
        background: #fff;
    }

    /* Logo Città di Palermo intero, con lo stesso rosso del logo ai lati */
    .palermo-navbar-mobile .navbar-brand.logo-double img#palermo-logo-mobile {
        padding: 0;
        object-fit: contain;
        background: #cb0038;
    }
}

/* Loghi header – stile card (desktop + mobile) */
.palermo-navbar .navbar-brand.logo-double,
.palermo-navbar-mobile .navbar-brand.logo-double {
    display: flex;
    align-items: center;
    gap: 14px;
    height: auto;
    padding: 0;
    margin-top: 14px;
}

.palermo-navbar .navbar-brand.logo-double img,
.palermo-navbar .navbar-brand.logo-double img.iff-logo,
.palermo-navbar-mobile .navbar-brand.logo-double img,
.palermo-navbar-mobile .navbar-brand.logo-double img.iff-logo {
    height: 66px;
    width: auto;
    max-width: 200px;
    max-height: none;
    object-fit: contain;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.06);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, height .3s ease;
}

.palermo-navbar .navbar-brand.logo-double img#palermo-logo-mobile,
.palermo-navbar-mobile .navbar-brand.logo-double img#palermo-logo-mobile {
    padding: 0;
    object-fit: contain;
    background: #cb0038;
}

.palermo-navbar .navbar-brand.logo-double img:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 0 2px #fdc40a, 0 10px 24px rgba(253,196,10,.35);
}

@media (max-width: 575.98px) {
    .palermo-navbar-mobile .navbar-brand.logo-double {
        gap: 8px;
        margin-top: 12px;
        margin-bottom: 6px;
    }

    .palermo-navbar-mobile .navbar-brand.logo-double img,
    .palermo-navbar-mobile .navbar-brand.logo-double img.iff-logo {
        width: 76px;
        height: 60px;
        max-width: none;
        flex: 0 0 76px;
        align-self: center;
        padding: 4px;
        border-radius: 10px;
    }
}

/* =========================================================
   Palermo Japan Week – restyling form di ricerca + risultati
   Ambito: solo form di ricerca, tab, contatore, card, paginazione.
   Colori originali invariati (navy #021f3c, badge background-*).
   ========================================================= */

/* ---------- Form di ricerca ---------- */
.search-container {
    border: 1px solid #dcdfe4 !important;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(2,31,60,.04), 0 4px 16px rgba(2,31,60,.06);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.search-container:focus-within {
    border-color: #021f3c !important;
    box-shadow: 0 0 0 4px rgba(2,31,60,.10);
}
.search-container .row { margin: 0; }
.search-container [class*="col-"] { padding: 0; }

.search-container .search-query {
    width: 100%;
    height: 56px;
    padding: 0 22px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    font: 400 1.05rem/1 Montserrat, sans-serif;
    color: #021f3c;
    box-shadow: none !important;
}
.search-container .search-query:focus { outline: none; }
.search-container .search-query::placeholder { color: #8a929c; }

/* riga date (Da / A / reset) */
.search-container .row:has(.date-range-picker) { border-top: 1px solid #eceef1; }
.search-container .date-range-picker { height: 48px; font-size: .95rem; }
.search-container .col-5 + .col-5 .date-range-picker { border-left: 1px solid #eceef1 !important; }
.search-container .row:has(.date-range-picker) > .col-2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* wrapper mobile: campi e bottone affiancati */
div:has(> .search-container + .search-btn) {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
div:has(> .search-container + .search-btn) > .search-container { flex: 1 1 auto; }
.search-container + .search-btn { flex: 0 0 auto; display: flex; }
.search-container + .search-btn .row,
.search-container + .search-btn [class*="col-"] {
    margin: 0; padding: 0; width: auto; max-width: none; flex: 1; display: flex;
}

/* desktop: colonna del bottone */
.search-container .row > .col-2:has(.btn-palermo-primary) { padding-left: 10px; }

/* bottone Cerca */
.search-container .btn-palermo-primary,
.search-btn .btn-palermo-primary {
    width: auto !important;
    min-width: 120px;
    min-height: 56px;
    height: auto;
    padding: 0 28px;
    border: 0;
    border-radius: 16px;
    font: 600 .95rem/1 Montserrat, sans-serif;
    letter-spacing: .02em;
    text-transform: none;
    transition: filter .15s, transform .15s;
}
.search-container .btn-palermo-primary:hover,
.search-btn .btn-palermo-primary:hover { filter: brightness(1.25); }
.search-container .btn-palermo-primary:active,
.search-btn .btn-palermo-primary:active { transform: scale(.98); }

/* ---------- Tab ---------- */
.search-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 8px;
    padding: 0 0 8px;
    list-style: none;
}
.search-tabs li { margin: 0; }
.palermo-search-tab {
    display: inline-block;
    margin: 0;
    padding: 8px 18px;
    border: 1px solid #dcdfe4;
    border-radius: 999px;
    background: #fff;
    font: 500 .95rem/1.2 Montserrat, sans-serif;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.palermo-search-tab input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.palermo-search-tab:hover { border-color: #021f3c; }
.palermo-search-tab:has(input:checked) {
    background: #021f3c;
    border-color: #021f3c;
    color: #fff;
}
.palermo-search-tab:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(2,31,60,.25); }

/* ---------- Contatore risultati ---------- */
.results-counter .block-search-results-counter {
    margin: 24px 0 8px;
    font: 600 1.4rem/1.3 Montserrat, sans-serif;
}

/* ---------- Card risultati ---------- */
.search-result { margin-bottom: 28px; }
.search-result > .row { height: 100%; margin: 0; }
.search-result .card {
    position: relative;
    height: 100%;
    min-height: 0 !important; /* il tema impone 457px */
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(2,31,60,.05), 0 4px 16px rgba(2,31,60,.07);
    transition: transform .25s ease, box-shadow .25s ease;
}
.search-result .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(2,31,60,.06), 0 12px 32px rgba(2,31,60,.14);
}
.search-result .card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.search-result .card-img-top {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    transition: transform .5s ease;
}
.search-result .card:hover .card-img-top { transform: scale(1.04); }

/* badge: colore dalla classe background-*, cambia solo forma */
.search-result .badge {
    position: absolute;
    top: 12px; left: 12px; right: auto;
    width: auto !important;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    font: 600 .7rem/1 Montserrat, sans-serif !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* corpo card centrato */
.search-result .card-body {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    flex: 1;
    padding: 22px 20px 20px;
    text-align: center;
    background: #fff;
}
.search-result .card-title {
    margin: 0 0 10px;
    padding: 0 !important;
    font: 600 1.1rem/1.3 Montserrat, sans-serif;
    color: #021f3c;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.search-result .card-text {
    margin: 0;
    padding: 0 !important;
    font: 400 .9rem/1.55 Montserrat, sans-serif;
    color: #5f6670;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.search-result .card-text:empty { display: none; }

/* eventi: la card-text è la data → etichetta con icona calendario */
.search-result .card-body:has(.card-search-footer:not(:empty)) .card-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px !important;
    border-radius: 999px;
    background: #f1f3f6;
    color: #021f3c;
    font: 600 .8rem/1 Montserrat, sans-serif;
    letter-spacing: .02em;
}
.search-result .card-body:has(.card-search-footer:not(:empty)) .card-text::before {
    content: "";
    width: 13px; height: 13px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* footer luogo: nel flusso, in fondo, centrato, con icona pin */
.search-result .card-search-footer {
    position: static !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    margin: auto 0 0 !important;
    padding: 16px 0 0 !important;
    background: linear-gradient(#e2e5ea, #e2e5ea) top center / 40px 2px no-repeat;
    font: 600 .9rem/1.35 Montserrat, sans-serif !important;
    color: #1b1b1b !important;
    text-align: center;
    text-wrap: balance;
}
.search-result .card-search-footer:empty { display: none !important; }
.search-result .card-search-footer::before {
    content: "";
    display: inline-block;
    margin-right: 6px;
    vertical-align: -2px;
    width: 14px; height: 14px;
    background: #021f3c;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Paginazione ---------- */
.palermo-pagination,
.palermo-pagination-mobile {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 24px 0 48px;
}
.btn-expand-results {
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    border-radius: 999px !important;
    font: 500 .9rem/1 Montserrat, sans-serif;
    text-transform: none;
}

/* ---------- Mobile ---------- */
@media (max-width: 575px) {
    div:has(> .search-container + .search-btn) { flex-direction: column; }
    .search-container .btn-palermo-primary,
    .search-btn .btn-palermo-primary { width: 100% !important; min-height: 48px; }
    .search-tabs { flex-wrap: nowrap; overflow-x: auto; }
}

.credits .conditions:empty { display: none; }
.credits .sponsorships { flex: 0 0 100%; max-width: 100%; }

.sponsorships > .row {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    margin-left: 0; margin-right: 0;
}
.sponsorships .logo { flex: 0 0 auto; width: auto; max-width: none; padding: .5rem 2rem; }
.sponsorships .logo img { width: auto; max-width: 100%; object-fit: contain; }

/* sponsor: più grandi, perché i PNG 600x300 hanno molto margine bianco */
.sponsorships > .row:first-child .logo img { height: 80px; max-height: 80px; }
/* loghi istituzionali */
.sponsorships > .row:nth-child(2) .logo img { height: 60px; max-height: 60px; }

.sponsorships > .row:first-child {
    padding-bottom: 1.5rem; margin-bottom: 1.5rem !important;
    border-bottom: 1px solid #e8e8e8;
}
.sponsorships p { text-align: center; font-size: 11px; margin-top: 1.25em; color: #666; }

@media (max-width: 767px) {
    .sponsorships .logo { border-right: 0 !important; padding: .5rem 1rem; flex: 0 0 50%; max-width: 50%; }
    .sponsorships > .row:first-child .logo { flex: 0 0 33.33%; max-width: 33.33%; }
    .sponsorships > .row:first-child .logo img { height: auto; max-height: 60px; }
}

.cards-wrapper {
    margin-left: 0;
    margin-right: 0;
}