/*
 * Integration layer for the 2026 redesign.
 *
 * style.css is the file delivered by the designer and is kept untouched (apart
 * from the image path). Everything the Twig integration needs on top of it
 * lives here: inline styles moved out of the static mock-up and rules for the
 * elements that became links / dynamic content.
 */

/* Header wrapper (was an inline style in the mock-up) */
.v2-header-container {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Mobile menu top bar (was an inline style in the mock-up) */
.mobile-menu-bar {
    position: fixed;
    top: 30px;
    left: 2rem;
    width: calc(100% - 4rem);
}

/* Login / register shortcuts inside the mobile menu (inline styles in the mock-up).
   display here, not with the d-* utilities: on the pages with the Bootstrap 3 stack the
   shim declares .d-block after .d-flex, so the row lost its flex alignment there */
.mobile-menu-actions {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

@media (min-width: 576px) {
    .mobile-menu-actions {
        display: none !important;
    }
}

.mobile-menu-actions .link-register {
    gap: 12px;
}

/* Hero badge inner group (inline style in the mock-up) */
.hero-badge-inner {
    gap: .6rem;
    margin-right: .5rem;
}

/* "Accedi" / "Esci" are links, not buttons */
a.btn-login {
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

/* Psychologists carousel: active slide name links to the profile */
a.psy-name {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.psy-name:hover {
    color: var(--blue);
}

.psy-photo-link {
    display: block;
}

.psy-info:empty {
    display: none;
}

/* Blog cards */
.blog-card-title a,
.blog-author-name a {
    color: inherit;
    text-decoration: none;
}

.blog-card-title a:hover {
    color: var(--blue);
}

a.btn-read-more {
    text-align: center;
    text-decoration: none;
}

.blog-like-btn.is-fav svg {
    fill: currentColor;
}

.blog-like-btn.processing {
    opacity: .6;
    pointer-events: none;
}

.blog-author img,
.avatar-stack img {
    object-fit: cover;
}

/* Footer: "Iscriviti" inside the circled word is a link */
.footer-links .circled-word a {
    color: inherit;
    text-decoration: none;
}

.footer-logo a {
    display: inline-block;
}

/* Hero search form: the form element carries the .search-card styling */
form.search-card {
    margin: 0;
}

#v2-search-location-wrap[hidden] {
    display: none;
}

/* ---------- Autocomplete fields (js/v2/autocomplete.js) ---------- */
.v2-ac {
    position: relative;
}

.v2-ac .v2-ac-input {
    display: block;
    width: 100%;
    padding: 1rem 3rem 1rem 1.3rem;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #F7F6F4;
    font-family: 'Poppins', sans-serif;
    font-size: 1.02rem; /* >= 16px: no zoom on focus on iOS */
    color: var(--text-dark);
    outline: none;
    text-overflow: ellipsis;
    transition: border-color .2s ease, background .2s ease;
}

.v2-ac .v2-ac-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.v2-ac .v2-ac-input:focus {
    border-color: var(--blue);
    background: #fff;
}

/* the chevron of .search-select-wrap becomes the clear button once a value is chosen */
.v2-ac.has-value::after {
    display: none;
}

.v2-ac-clear {
    position: absolute;
    top: 50%;
    right: .8rem;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    transform: translateY(-50%);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.v2-ac-clear:hover {
    background: var(--blue-light);
    color: var(--blue);
}

.v2-ac-clear svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    fill: none;
}

.v2-ac-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 372px;
    margin: 0;
    padding: 8px;
    list-style: none;
    overflow: hidden auto;
    border: 1px solid #ededed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .28);
    text-align: left;
}

.v2-ac-heading,
.v2-ac-message {
    padding: 8px 10px;
    font-family: 'Inter', sans-serif;
    font-size: .82rem;
    color: var(--text-muted);
}

.v2-ac-heading {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
}

.v2-ac-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
    line-height: 1.3;
    color: var(--text-dark);
    cursor: pointer;
}

.v2-ac-option:hover,
.v2-ac-option.is-active {
    background: var(--blue-light);
}

.v2-ac-media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--blue);
    overflow: hidden;
}

.v2-ac-option.is-active .v2-ac-media,
.v2-ac-option:hover .v2-ac-media {
    background: #fff;
}

.v2-ac-media svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.v2-ac-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-ac-text {
    flex: 1 1 auto;
    min-width: 0;
}

.v2-ac-text small {
    display: block;
    font-size: .75rem;
    color: var(--text-muted);
}

.v2-ac-text strong {
    font-weight: 600;
}

.v2-ac-text em {
    font-style: normal;
    color: var(--text-muted);
}

.v2-ac-caption {
    flex: 0 0 auto;
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* "Cerchi uno psicologo in presenza?" grid (inline max-width in the mock-up) */
.city-grid {
    max-width: 900px;
}

/* ---------- Psychologists carousel: focus on the centred profile ---------- */
/* Side photos fade out with the distance from the centre */
.psyCarousel .swiper-slide {
    opacity: .45;
}

.psyCarousel .swiper-slide.swiper-slide-prev,
.psyCarousel .swiper-slide.swiper-slide-next {
    opacity: .75;
}

.psyCarousel .swiper-slide.swiper-slide-active {
    opacity: 1;
}

/* On small screens only the neighbours are visible: the fade is barely there */
@media (max-width: 767px) {
    .psyCarousel .swiper-slide,
    .psyCarousel .swiper-slide.swiper-slide-prev,
    .psyCarousel .swiper-slide.swiper-slide-next {
        opacity: .88;
    }

    .psyCarousel .swiper-slide.swiper-slide-active {
        opacity: 1;
    }
}

/* ---------- Decorative dots between the homepage sections ---------- */
/* A few circles, as in the hero and in the psychologists section, so that the page
   does not feel empty while scrolling. Each section is its own stacking context
   (z-index: 10), so z-index: -1 keeps the dots behind the content of the section. */
.v2-city-section {
    position: relative;
    z-index: 10;
}

.v2-dot {
    position: absolute;
    z-index: -1;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.v2-dot--steps-blue {
    left: 6%;
    bottom: -90px;
    width: 150px;
    height: 150px;
    background: var(--blue-light);
    animation: float1 4s ease-in-out infinite alternate;
}

.v2-dot--steps-gold {
    right: 9%;
    bottom: -10px;
    width: 64px;
    height: 64px;
    background: var(--gold);
    animation: float3 3s ease-in-out infinite alternate;
}

/* In the empty area below the title of the FAQ (left column), off to the left: it keeps
   the empty space company instead of sitting right under the text */
.v2-dot--faq-blue {
    top: 20rem;
    left: 3%;
    width: 130px;
    height: 130px;
    background: var(--blue-light);
    animation: float2 4s ease-in-out infinite alternate;
}

/* Peeks out from behind the questions */
.v2-dot--faq-gold {
    right: 4%;
    bottom: 7rem;
    width: 60px;
    height: 60px;
    background: var(--gold);
    animation: float1 3s ease-in-out infinite alternate;
}

/* beside the "Blog" title, not against the edge of the page */
.v2-dot--blog-gold {
    top: 2.25rem;
    left: 12%;
    width: 72px;
    height: 72px;
    background: var(--gold);
    animation: float3 4s ease-in-out infinite alternate;
}

/* Above the title (not on its line): the city cards have the same light blue */
.v2-dot--city-blue {
    top: .25rem;
    right: 6%;
    width: 110px;
    height: 110px;
    background: var(--blue-light);
    animation: float2 4s ease-in-out infinite alternate;
}

/* (removed on every width: the only gold dot of the city block, beside the grid) */
.v2-dot--city-gold {
    display: none;
    left: 9%;
    top: 320px;
    bottom: auto;
    width: 60px;
    height: 60px;
    background: var(--gold);
    animation: float1 3s ease-in-out infinite alternate;
}

@media (min-width: 768px) and (max-width: 991px) {
    .v2-dot--faq-blue {
        top: 3rem;
        right: 6%;
        left: auto;
        width: 100px;
        height: 100px;
    }
}

/* Mobile only (the desktop version of these sections already has its circles) */
.v2-dot--topics-gold,
.v2-dot--topics-white,
.v2-dot--qa-blue,
.v2-dot--qa-gold {
    display: none;
}

@media (max-width: 767px) {
    .v2-dot--steps-blue {
        left: 4%;
        bottom: -50px;
        width: 84px;
        height: 84px;
    }

    /* Phones: fewer dots than on desktop, the page is narrow and they crowded it.
       Gone: the gold one under "Prenota il colloquio", the blue one under the search card,
       the gold one at the top of the blog (cut by the edge of the section), the blue one
       above "Cerchi uno psicologo in presenza?" and the gold ones next to the "Tutte le
       domande" and "Vedi tutte le città" buttons. */
    .v2-dot--steps-gold,
    .v2-dot--blog-gold,
    .v2-dot--city-blue,
    .v2-dot--faq-gold,
    .v2-dot--city-gold,
    .deco-blue-small {
        display: none;
    }

    /* FAQ "Prima di iniziare": smaller and white (a blue one of the same kind is just
       above, in the questions section), a little away from the title */
    .v2-dot--faq-blue {
        top: .75rem;
        right: 9%;
        left: auto;
        width: 52px;
        height: 52px;
        background: #fff;
    }


}

@media (max-width: 576px) {
    /* (the gold one near "Scrivi la tua domanda" stays hidden: with the three above it the
       area between the topics and the FAQ was too crowded) */
    .v2-dot--topics-gold,
    .v2-dot--topics-white,
    .v2-dot--qa-blue {
        display: block;
    }

    .v2-dot--topics-gold {
        left: 12%;
        bottom: -18px;
        width: 56px;
        height: 56px;
        background: var(--gold);
        animation: float1 3s ease-in-out infinite alternate;
    }

    .v2-dot--topics-white {
        right: 10%;
        bottom: -34px;
        width: 78px;
        height: 78px;
        background: #fff;
        animation: float3 4s ease-in-out infinite alternate;
    }

    .v2-dot--qa-blue {
        top: .5rem;
        right: 6%;
        width: 74px;
        height: 74px;
        background: var(--blue-light);
        animation: float2 4s ease-in-out infinite alternate;
    }

    .v2-dot--qa-gold {
        left: 7%;
        bottom: 1.5rem;
        width: 34px;
        height: 34px;
        background: var(--gold);
        animation: float1 3s ease-in-out infinite alternate;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v2-dot {
        animation: none;
    }
}

/* ---------- Header, small screens: avatar of the logged-in user ---------- */
.v2-avatar-link {
    text-decoration: none;
}

.v2-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.v2-avatar-online {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2ecc71;
}

/* ---------- Popup (js/v2/homepage.js) ---------- */
.v2-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.v2-modal[hidden] {
    display: none;
}

.v2-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 45, .45);
    opacity: 0;
    transition: opacity .25s ease;
}

.v2-modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 2.6rem 2rem 2.2rem;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .35);
    text-align: center;
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transition: opacity .25s ease, transform .25s ease;
}

.v2-modal.is-open .v2-modal-backdrop,
.v2-modal.is-open .v2-modal-card {
    opacity: 1;
}

.v2-modal.is-open .v2-modal-card {
    transform: none;
}

.v2-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-dark);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.v2-modal-close:hover {
    background: var(--blue-light);
    color: var(--blue);
}

.v2-modal-close svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    fill: none;
}

.v2-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    background: var(--blue-light);
    color: var(--blue);
}

.v2-modal-icon svg {
    width: 30px;
    height: 30px;
}

.v2-modal-title {
    margin: 0 0 .6rem;
    line-height: 1.3;
    text-transform: none;
    font-family: 'Poppins', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-dark);
}

.v2-modal-text {
    margin: 0 0 1.6rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-muted);
    /* the texts come from js/v2/login-modal.js as plain text: "\n" starts a new line */
    white-space: pre-line;
}

.v2-modal-actions .btn-login,
.v2-modal-actions .btn-login:hover {
    color: #fff;
    text-decoration: none;
}

.v2-modal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
}

.v2-modal-secondary {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: var(--blue);
    text-decoration: underline;
}

.v2-modal-secondary:hover {
    color: var(--hover, #1A7AC4);
}

/* ---------- Hero, small screens: no horizontal overflow ---------- */
/* The circles behind the search card hang 40-56px outside it: on a phone that is more
   than the page gutter, so the page became wider than the screen (content off-centre,
   empty strip on the right). They now stay inside the gutter. */
@media (max-width: 767px) {
    .search-card-wrap .deco-gold {
        left: -1.25rem;
    }

    .search-card-wrap .deco-blue-big {
        right: -1.25rem;
    }

    .search-card-wrap .deco-gold-small {
        right: -1rem;
    }
}

/* Safety net for the decorations of every section (vertical overflow stays visible) */
@supports (overflow-x: clip) {
    .hero-section,
    .steps-section,
    .psy-section,
    .topics-wrap,
    .faq-section,
    .blog-section,
    .perks-section {
        overflow-x: clip;
    }
}

/* ---------- Hero title: "Non un algoritmo." always on one line ---------- */
.hero-title .blue-text {
    white-space: nowrap;
}

/* At the minimum title size (2.4rem) the sentence is about 9.1em wide: more than a small
   phone offers. Below 480px the title scales with the screen so that it always fits
   (48px = page gutters). */
@media (max-width: 480px) {
    .hero-title {
        font-size: min(2.4rem, calc((100vw - 48px) / 9.3));
    }
}

/* ---------- Psychologists carousel, small screens: long tags ---------- */
/* Two long tags ("Disturbo ossessivo compulsivo") go on two rows: the block below the
   photo was sized for one row, so the role ended up against the button and the page
   moved every time the carousel changed profile. The block now always reserves the
   space of two rows; the tags are a little smaller and never break inside.
   (two rows of tags + name + role = 141px: 150px keeps the button still without a
   large empty band under the role) */
@media (max-width: 767px) {
    .psy-info {
        min-height: 150px;
    }

    .psy-tags {
        gap: .45rem;
        margin-bottom: .75rem;
    }

    .psy-tag {
        max-width: 100%;
        padding: .4rem 1rem;
        font-size: .85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---------- FAQ "Prima di iniziare", small screens ---------- */
.v2-dot--faq-mid {
    display: none;
}

@media (max-width: 991px) {
    /* title and subtitle centred, as in the other sections */
    .faq-title,
    .faq-subtitle {
        text-align: center;
    }

    .faq-subtitle {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: .25rem;
    }

    /* the stacked columns kept the desktop gutter (3rem): less space before the first question */
    .faq-section .row.g-5 {
        --bs-gutter-y: 1.25rem;
    }

    /* a circle behind the middle of the list breaks the scrolling */
    .v2-dot--faq-mid {
        display: block;
        top: 52%;
        left: -34px;
        width: 120px;
        height: 120px;
        background: var(--blue-light);
        animation: float2 4s ease-in-out infinite alternate;
    }
}

@media (max-width: 575px) {
    .v2-dot--faq-mid {
        width: 96px;
        height: 96px;
        left: -28px;
    }
}

/* ---------- Blog section, small screens ---------- */
/* The title shrank to 1.2rem on phones (5vw): same minimum as the other sections */
.blog-title {
    font-size: clamp(2rem, 5vw, 3rem);
}

/* Phones: every card as tall as the tallest one (as on desktop, style.css), so the slider
   keeps one height while swiping; the text keeps its own height and "Leggi di più" sits at
   the bottom of every card */
@media (max-width: 767px) {
    .blog-card-excerpt {
        flex: 0 0 auto;
        margin-bottom: 1.25rem;
    }

    .blog-card .btn-read-more {
        margin-top: auto;
    }
}

/* ---------- Full-screen menu open: the page behind it does not scroll ---------- */
/* on <html> too: style.css sets overflow-x on it, so the body value alone would not
   reach the viewport */
html.v2-menu-open,
body.v2-menu-open {
    overflow: hidden;
    /* iOS Safari ignores overflow: hidden alone */
    touch-action: none;
}

/* the menu itself can scroll when it is taller than the screen (small landscape phones) */
.mobile-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* ---------- Autocomplete, small screens: type label under the text ---------- */
/* Long topics ("Disturbi del controllo degli impulsi") wrap on 2-3 lines next to the
   "Difficoltà" label; on a phone the label goes on its own line under the text. */
@media (max-width: 575px) {
    .v2-ac-option {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    /* basis 0: the text stays on the same line as the icon and wraps inside it */
    .v2-ac-text {
        flex: 1 1 0;
    }

    .v2-ac-caption {
        flex: 0 0 100%;
        padding-left: 44px; /* icon width + gap */
    }
}

/* ---------- Rating stars: gold, not green ---------- */
/* style.css already sets this colour, but the layouts load the bar-rating theme after it */
.br-theme-fontawesome-stars-o .br-widget a.br-active:after,
.br-theme-fontawesome-stars-o .br-widget a.br-selected:after,
.br-theme-fontawesome-stars-o .br-widget a.br-fractional:after,
.br-theme-bootstrap-stars .br-widget a.br-active:after,
.br-theme-bootstrap-stars .br-widget a.br-selected:after {
    color: rgb(242, 186, 56);
}

/* ---------- Autocomplete: clickable chevron (js/v2/autocomplete.js) ---------- */
/* replaces the decorative arrow of the mock-up (.search-select-wrap::after) */
.v2-ac.search-select-wrap::after {
    display: none;
}

.v2-ac-toggle {
    position: absolute;
    top: 50%;
    right: .6rem;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
}

.v2-ac-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 2.2px solid #555;
    border-bottom: 2.2px solid #555;
    transform: translate(-50%, -70%) rotate(45deg);
    transition: transform .2s ease;
}

.v2-ac.is-open .v2-ac-toggle::after {
    transform: translate(-50%, -30%) rotate(-135deg);
}

.v2-ac-toggle[hidden] {
    display: none;
}

/* ==========================================================================
   Homepage, "Lo psicologo risponde": the 3 most recent questions
   (Default/index.html.twig, .qa-swiper). Three cards side by side from 768px;
   on phones a one-card slider (js/v2/layout.js).
   ========================================================================== */
.qa-cards {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0.5rem 0 0.5rem;
}

.qa-card {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: auto;
    padding: 1.75rem 1.75rem 1.5rem;
    background: var(--card-bg, #fff);
    border-radius: 28px;
    box-shadow: 0 10px 30px rgba(42, 42, 42, 0.06);
    overflow: hidden;
    text-align: left;
}

/* category: one line, cut with an ellipsis */
.qa-card__category {
    display: block;
    margin-bottom: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qa-card__category:hover {
    color: var(--hover);
}

/* title and excerpt: at most 2 lines, cut with an ellipsis */
.qa-card__title {
    margin: 0 0 0.75rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qa-card__title a {
    color: inherit;
    text-decoration: none;
}

.qa-card__title a:hover {
    color: var(--accent-blue);
}

.qa-card__excerpt {
    margin: 0 0 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qa-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
}

.qa-card__answers {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.qa-card__answers svg {
    width: 22px;
    height: 22px;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.qa-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.qa-card__link svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.qa-card__link:hover {
    color: var(--hover);
}

.qa-card__link:hover svg {
    transform: translateX(3px);
}

/* phones: one card at a time, the others reachable by swiping (Swiper) */
@media (max-width: 767px) {
    .qa-cards {
        padding: 0.5rem 0 2.25rem;
        overflow: hidden;
    }

    .qa-swiper .swiper-slide {
        width: 100%;
    }

    .qa-swiper-pagination {
        bottom: 0;
    }

    .qa-swiper .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: var(--accent-blue);
        opacity: 0.3;
    }

    .qa-swiper .swiper-pagination-bullet-active {
        opacity: 1;
    }
}

/* from tablets up: a simple grid, Swiper is not started (js/v2/layout.js) */
@media (min-width: 768px) {
    .qa-swiper {
        overflow: visible;
    }

    .qa-swiper .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
        transform: none;
    }

    .qa-swiper .swiper-slide {
        width: auto;
        flex-shrink: 1;
    }

    .qa-swiper-pagination {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .qa-card {
        padding: 1.4rem 1.25rem 1.25rem;
    }

    .qa-card__title {
        font-size: 1.1rem;
    }

    .qa-card__footer {
        flex-wrap: wrap;
    }
}

/* ---------- Homepage, "A cosa può servirti uno psicologo?": no gold dot above the panel ---------- */
/* (.deco-gold is also the class of a circle of the hero search card: scoped to this section) */
.topics-wrap .deco-circle.deco-gold {
    display: none;
}