:root {
    --qg-primary: #1a4231;
    --qg-primary-strong: #132f24;
    --qg-accent: #c6ef2e;
    --qg-bg: #f6f8f7;
    --qg-surface: #ffffff;
    --qg-dark: #151d1a;
    --qg-text: #22322b;
    --qg-text-soft: #5d6d66;
    --qg-line: #aeb8b2;
    --qg-shadow-sm: 0 10px 30px rgba(19, 47, 36, 0.08);
    --qg-shadow-md: 0 18px 48px rgba(19, 47, 36, 0.14);
    --qg-radius: 18px;
    --qg-container: 1320px;
    /* V.3.107 UX-8 + V.3.119 (Inter cleanup): font canonico = Plus Jakarta Sans
       (caricato in stitch_head.php). Copre body + display + label uppercase
       (pesi 400-800, geometric + friendly, rendering ottimo anche su maiuscolo
       tracked). Inter rimosso da V.3.119 perché era un secondo font ridondante
       (~50-70 KB peso fonts) usato solo in 7 selettori legacy quiz_*.
       Valori storici "Source Sans 3" + "Poppins" rimossi in V.3.107. */
    --qg-font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --qg-font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.qg-modern-body {
    background: var(--qg-bg);
    color: var(--qg-text);
    font-family: var(--qg-font-body);
}

body.qg-sidebar-layout {
    min-height: 100vh;
}

.qg-sidebar-layout .qg-shell-header {
    display: none;
}

.qg-shell-container {
    max-width: var(--qg-container);
    margin: 0 auto;
    padding: 0 24px;
}

.qg-shell-topbar {
    background: rgba(246, 248, 247, 0.92);
    border-bottom: 1px solid var(--qg-line);
}

.qg-shell-topbar .qg-shell-container {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.qg-shell-topline,
.qg-shell-mini-link {
    color: var(--qg-text-soft);
    font-size: 0.88rem;
    margin: 0;
}

.qg-shell-mini-link {
    font-weight: 700;
    text-decoration: none;
}

.qg-shell-nav-wrap {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(246, 248, 247, 0.84);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--qg-line);
}

.qg-shell-nav {
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.qg-shell-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--qg-primary);
}

.qg-shell-brand img,
.qg-footer-brand img {
    width: 76px;
    height: auto;
    display: block;
}

.qg-shell-brand strong,
.qg-footer-grid h3,
.qg-section-title,
.qg-hero-copy h1,
.qg-tools-card h3,
.qg-feature-card h3,
.qg-daily-content h2,
.qg-daily-quiz-card h3 {
    font-family: "Montserrat", sans-serif;
}

.qg-shell-brand strong {
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    display: block;
    text-transform: uppercase;
}

.qg-shell-brand small {
    display: block;
    color: var(--qg-text-soft);
    font-size: 0.8rem;
    font-weight: 700;
}

.qg-shell-links {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

.qg-shell-links a {
    color: var(--qg-text);
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    transition: color 0.2s ease;
}

.qg-shell-links a:hover,
.qg-shell-links a.is-active {
    color: var(--qg-primary);
}

.qg-shell-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 12px;
    background: var(--qg-primary);
    color: #fff;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    box-shadow: var(--qg-shadow-sm);
    transition: transform 0.2s ease, background 0.2s ease;
}

.qg-shell-cta:hover {
    color: #fff;
    background: var(--qg-primary-strong);
    transform: translateY(-1px);
}

.qg-shell-toggle,
.qg-mobile-close {
    display: none;
    border: 0;
    background: transparent;
    color: var(--qg-primary);
    font-size: 1.3rem;
}

.qg-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
}

.qg-mobile-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(19, 47, 36, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.qg-mobile-panel {
    position: relative;
    margin-left: auto;
    height: 100%;
    max-width: 360px;
    background: var(--qg-surface);
    box-shadow: var(--qg-shadow-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.qg-mobile-menu.is-open {
    pointer-events: auto;
}

.qg-mobile-menu.is-open .qg-mobile-backdrop {
    opacity: 1;
}

.qg-mobile-menu.is-open .qg-mobile-panel {
    transform: translateX(0);
}

.qg-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.qg-mobile-head strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
}

.qg-mobile-head small {
    color: var(--qg-text-soft);
}

.qg-mobile-links {
    display: grid;
    gap: 14px;
}

.qg-mobile-links a {
    color: var(--qg-text);
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

.qg-modern-main {
    overflow: hidden;
}

.qg-app-shell {
    display: flex;
    min-height: 100vh;
}

.qg-app-sidebar {
    width: 272px;
    flex: 0 0 272px;
    background: #fff;
    border-right: 1px dotted var(--qg-line);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.qg-app-sidebar-inner {
    min-height: 100%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qg-app-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 0;
    text-decoration: none;
    color: var(--qg-primary);
}

.qg-app-brand img {
    width: 256px;
    max-width: 100%;
    height: auto;
    display: block;
}

.qg-app-brand strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.qg-app-brand span {
    display: block;
    color: var(--qg-text-soft);
    font-size: 0.8rem;
    font-weight: 700;
}

.qg-app-nav {
    display: grid;
    gap: 15px;
}

.qg-app-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-radius: 14px;
    border: 1px solid transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    outline: none;
    color: var(--qg-text-soft);
    text-decoration: none;
    text-decoration-line: none;
    font-family: "Montserrat", sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.qg-app-nav a i {
    width: 18px;
    text-align: center;
    color: currentColor;
    transition: transform 0.2s ease;
}

.qg-app-nav a span {
    color: currentColor;
}

.qg-app-nav a:hover {
    background: rgba(26, 66, 49, 0.06);
    border-color: rgba(26, 66, 49, 0.08);
    color: var(--qg-primary);
    transform: translateX(2px);
    box-shadow: 0 10px 24px rgba(19, 47, 36, 0.06);
}

.qg-app-nav a:hover i {
    transform: translateX(1px);
}

.qg-app-nav a.is-active {
    background: var(--qg-primary);
    border-color: var(--qg-primary);
    color: #fff;
    transform: translateX(2px);
    box-shadow: 0 14px 26px rgba(19, 47, 36, 0.16);
}

.qg-app-nav a:focus,
.qg-app-nav a:focus-visible,
.qg-app-nav a:active,
.qg-app-nav a:visited {
    text-decoration: none;
    outline: none;
    border-bottom-color: transparent;
}

.qg-app-sidebar-kicker {
    margin: 0;
    color: var(--qg-primary);
    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.qg-app-sidebar-pill {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(26, 66, 49, 0.12);
    color: var(--qg-primary);
    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
}

.qg-sidebar-actions {
    display: grid;
    gap: 15px;
}

.qg-sidebar-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-radius: 16px;
    text-decoration: none;
    font-family: var(--qg-font-display);
    font-size: 0.88rem;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.qg-sidebar-cta i {
    width: 18px;
    text-align: center;
}

.qg-sidebar-cta:hover {
    transform: translateY(-1px);
}

.qg-sidebar-cta--primary {
    background: var(--qg-primary);
    color: #fff;
    box-shadow: 0 14px 24px rgba(19, 47, 36, 0.16);
}

.qg-sidebar-cta--primary:hover {
    color: #fff;
    background: var(--qg-primary-strong);
}

.qg-sidebar-cta--accent {
    background: #d08f32;
    color: #fff;
    box-shadow: 0 14px 24px rgba(208, 143, 50, 0.16);
}

.qg-sidebar-cta--accent:hover {
    color: #fff;
    background: #b87922;
}

.qg-sidebar-cta--secondary {
    background: rgba(26, 66, 49, 0.08);
    color: var(--qg-primary);
    border: 1px solid rgba(26, 66, 49, 0.1);
}

.qg-sidebar-footer {
    display: grid;
    gap: 10px;
    padding-top: 15px;
    margin-top: auto;
}

.qg-sidebar-footer-links {
    display: grid;
    gap: 15px;
}

.qg-sidebar-footer-links a {
    color: var(--qg-text-soft);
    text-decoration: none;
    font-size: 0.88rem;
}

.qg-sidebar-footer-links a:hover {
    color: var(--qg-primary);
}

.qg-sidebar-copyright {
    margin: 0;
    color: var(--qg-text-soft);
    font-size: 0.78rem;
    line-height: 1.6;
}

.qg-sidebar-powered {
    display: grid;
    gap: 10px;
    padding-top: 8px;
}

.qg-sidebar-powered-label {
    color: var(--qg-text-soft);
    font-family: "Montserrat", sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.qg-sidebar-powered-link {
    display: inline-flex;
    width: fit-content;
}

.qg-sidebar-powered-logo {
    width: 132px;
    max-width: 100%;
    height: auto;
    display: block;
}

@media (min-width: 1025px) and (max-height: 750px) {
    .qg-app-sidebar-inner {
        padding: 8px;
        gap: 4px;
    }

    .qg-app-brand {
        padding: 2px 0 0;
    }

    .qg-app-brand img {
        width: 172px;
    }

    .qg-app-nav {
        gap: 2px;
    }

    .qg-app-nav a {
        gap: 8px;
        padding: 6px 10px;
        border-radius: 10px;
        font-size: 0.74rem;
    }

    .qg-app-nav a i {
        width: 14px;
        font-size: 0.76rem;
    }

    .qg-sidebar-actions {
        gap: 5px;
    }

    .qg-sidebar-cta {
        gap: 8px;
        padding: 8px 10px;
        border-radius: 12px;
        font-size: 0.7rem;
    }

    .qg-sidebar-cta i {
        width: 14px;
        font-size: 0.76rem;
    }

    .qg-sidebar-footer {
        gap: 4px;
        padding-top: 6px;
    }

    .qg-sidebar-footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    .qg-sidebar-footer-links a {
        font-size: 0.68rem;
    }

    .qg-sidebar-copyright {
        font-size: 0.61rem;
        line-height: 1.22;
    }

    .qg-sidebar-powered {
        gap: 4px;
        padding-top: 1px;
    }

    .qg-sidebar-powered-label {
        font-size: 0.53rem;
        letter-spacing: 0.14em;
    }

    .qg-sidebar-powered-logo {
        width: 92px;
    }
}

.qg-app-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.qg-app-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 0;
    padding: 48px 32px 36px;
    background: rgba(246, 248, 247, 0.84);
    backdrop-filter: blur(14px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.qg-app-topbar::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: -2px;
    border-bottom: 1px dotted var(--qg-line);
}

.qg-app-topbar h1 {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--qg-primary);
    line-height: 1.08;
}

.qg-app-topbar-kicker {
    margin: 0;
    color: var(--qg-text-soft);
    font-family: "Montserrat", sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.1;
    text-transform: uppercase;
}

.qg-app-topbar-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.qg-app-topbar-meta span {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(26, 66, 49, 0.08);
    color: var(--qg-primary);
    font-family: "Montserrat", sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
}

.qg-home-utility-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 18px 0 6px;
}

.qg-home-utility-card {
    background: var(--qg-surface);
    border: 1px solid rgba(26, 66, 49, 0.08);
    border-radius: 22px;
    box-shadow: var(--qg-shadow-sm);
    padding: 24px;
    display: grid;
    gap: 12px;
}

.qg-home-utility-card h3 {
    margin: 0;
    color: var(--qg-primary);
    font-size: 1.25rem;
    font-weight: 800;
}

.qg-home-utility-card p {
    margin: 0;
    color: var(--qg-text-soft);
    line-height: 1.7;
}

.qg-home-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 10px;
}

.qg-home-search input {
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid #d9e2dd;
    padding: 0 14px;
    background: #fff;
}

.qg-home-search button {
    border: 0;
    border-radius: 14px;
    background: var(--qg-primary);
    color: #fff;
}

.qg-home-text-link {
    color: var(--qg-primary);
    text-decoration: none;
    font-family: var(--qg-font-display);
    font-weight: 700;
}

.qg-home-text-link:hover {
    color: var(--qg-primary-strong);
}

.qg-section--tight {
    padding-top: 0;
}

.qg-content-intro-card,
.qg-content-surface {
    background: var(--qg-surface);
    border: 1px solid rgba(26, 66, 49, 0.08);
    border-radius: 24px;
    box-shadow: var(--qg-shadow-sm);
}

.qg-content-intro-card {
    padding: 28px 30px;
    margin-bottom: 16px;
}

.qg-content-intro-card h2,
.qg-content-surface-head h2 {
    margin: 6px 0 10px;
    color: var(--qg-primary);
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 800;
}

.qg-content-intro-card p:last-child {
    margin: 0;
    color: var(--qg-text-soft);
    line-height: 1.75;
}

.qg-content-surface {
    padding: 22px 24px 26px;
}

.qg-content-surface-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.qg-definition-browser {
    width: 100%;
}

.qg-definition-alpha {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.qg-definition-alpha a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(26, 66, 49, 0.08);
    background: rgba(26, 66, 49, 0.04);
    color: var(--qg-primary);
    text-decoration: none;
    font-family: var(--qg-font-display);
    font-size: 0.82rem;
    font-weight: 800;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.qg-definition-alpha a:hover {
    background: var(--qg-primary);
    color: #fff;
    transform: translateY(-1px);
}

.qg-definition-groups {
    display: grid;
    gap: 22px;
}

.qg-definition-group {
    scroll-margin-top: 110px;
}

.qg-definition-group-head {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(26, 66, 49, 0.08);
}

.qg-definition-group-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--qg-primary);
    color: #fff;
    font-family: var(--qg-font-display);
    font-size: 1rem;
    font-weight: 800;
}

.qg-definition-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.qg-definition-link {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(26, 66, 49, 0.08);
    background: linear-gradient(180deg, #ffffff, #f8faf8);
    color: var(--qg-text);
    text-decoration: none;
    font-family: var(--qg-font-display);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.4;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.qg-definition-link:hover {
    color: var(--qg-primary);
    border-color: rgba(26, 66, 49, 0.16);
    box-shadow: 0 12px 26px rgba(19, 47, 36, 0.08);
    transform: translateY(-1px);
}

.qg-definition-modal {
    display: none;
    width: min(760px, 92vw);
    padding: 28px 30px;
    border-radius: 24px;
    background: #fff;
}

.qg-definition-modal-kicker {
    margin: 0 0 10px;
    color: var(--qg-text-soft);
    font-family: var(--qg-font-display);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.qg-definition-modal h2 {
    margin: 0 0 8px;
    color: var(--qg-primary);
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
}

.qg-definition-modal-term {
    margin: 0 0 18px;
    color: var(--qg-text-soft);
    font-size: 1rem;
    font-style: italic;
}

.qg-definition-modal-body {
    color: var(--qg-text);
    font-size: 1rem;
    line-height: 1.8;
}

.qg-definition-modal-body p:last-child {
    margin-bottom: 0;
}

.qg-definition-modal-body a {
    color: var(--qg-primary);
    font-weight: 700;
}


.qg-app-main {
    padding: 0 32px 32px;
}

.qg-section--app {
    padding: 0 0 28px;
}

.qg-quiz-page .qg-app-main {
    padding-top: 8px !important;
}

.qg-quiz-page .qg-section--quiz {
    padding: 0 0 28px !important;
}

.qg-quiz-page .qg-app-content {
    gap: 0;
}

.qg-quiz-page .qg-app-topbar {
    margin-bottom: 0;
}

.qg-quiz-page .qg-app-main > .qg-section--quiz,
.qg-quiz-page .qg-quiz-dashboard,
.qg-quiz-page .qg-quiz-main,
.qg-quiz-page .qg-quiz-filter-card {
    margin-top: 0 !important;
}

.qg-quiz-page .qg-app-topbar + .qg-app-main {
    margin-top: 0;
}

.qg-quiz-page .qg-section.qg-section--quiz.qg-section--app {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.qg-quiz-page .qg-quiz-filter-card {
    position: static;
    top: auto;
}

.qg-home-hero-card {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    border-radius: 30px;
    box-shadow: var(--qg-shadow-md);
    margin-bottom: 18px;
}

.qg-home-hero-media {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(21, 29, 26, 0.84) 0%, rgba(21, 29, 26, 0.48) 55%, rgba(21, 29, 26, 0.3) 100%),
        url("/img/user/phg/real/panogolf.jpg") center/cover no-repeat;
}

.qg-home-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 740px;
    padding: 72px 56px;
}

.qg-home-hero-copy h2 {
    margin: 24px 0 20px;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(2.2rem, 4vw, 4.4rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.qg-home-hero-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.1rem;
    line-height: 1.75;
    max-width: 640px;
}

.qg-hero-secondary--dark {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
}

.qg-hero-secondary--dark:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.qg-hero-section {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.qg-hero-media {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(21, 29, 26, 0.82) 0%, rgba(21, 29, 26, 0.46) 52%, rgba(21, 29, 26, 0.26) 100%),
        url("/img/user/phg/real/panogolf.jpg") center/cover no-repeat;
}

.qg-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 84px 24px 100px;
}

.qg-hero-copy {
    max-width: 760px;
}

.qg-hero-kicker {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(198, 239, 46, 0.16);
    border: 1px solid rgba(198, 239, 46, 0.3);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.qg-hero-copy h1 {
    margin: 24px 0 20px;
    color: #fff;
    font-size: clamp(2.4rem, 4vw, 4.5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.qg-hero-copy h1 .qg-underline {
    text-decoration: underline;
    text-decoration-thickness: 5px;
    text-decoration-color: var(--qg-primary);
    text-underline-offset: 12px;
}

.qg-hero-copy p {
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.16rem;
    line-height: 1.7;
    max-width: 640px;
    margin: 0;
}

.qg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 32px;
}

.qg-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
}

.qg-hero-secondary:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.qg-section {
    padding: clamp(56px, 8vw, 100px) 0;
}

.qg-section--dark {
    background: var(--qg-primary);
    color: #fff;
}

.qg-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    margin-bottom: 46px;
}

.qg-section-title {
    margin: 0;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 900;
    color: var(--qg-primary);
    text-transform: uppercase;
}

.qg-section--dark .qg-section-title,
.qg-section--dark .qg-section-lead,
.qg-section--dark .qg-section-link {
    color: #fff;
}

.qg-section-lead {
    margin: 0;
    color: var(--qg-text-soft);
    font-weight: 700;
}

.qg-section-link {
    color: var(--qg-primary);
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.qg-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.qg-tools-card,
.qg-feature-card,
.qg-daily-quiz-card {
    background: var(--qg-surface);
    border: 1px solid rgba(26, 66, 49, 0.06);
    border-radius: var(--qg-radius);
    box-shadow: var(--qg-shadow-sm);
}

.qg-tools-card {
    padding: 30px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.qg-tools-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--qg-shadow-md);
}

.qg-tools-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: rgba(26, 66, 49, 0.08);
    color: var(--qg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    font-size: 1.6rem;
}

.qg-tools-card h3,
.qg-feature-card h3,
.qg-daily-quiz-card h3 {
    margin: 0 0 10px;
    font-size: 1.28rem;
    font-weight: 800;
}

.qg-tools-card p,
.qg-feature-card p,
.qg-daily-quiz-card p,
.qg-footer-brand p,
.qg-footer-bottom p {
    margin: 0;
    color: var(--qg-text-soft);
    font-size: 0.98rem;
    line-height: 1.7;
}

.qg-daily-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.9fr);
    gap: 48px;
    align-items: center;
}

.qg-daily-content h2 {
    font-size: clamp(2.2rem, 3.2vw, 3.2rem);
    font-weight: 900;
    margin: 0 0 18px;
    color: #fff;
}

.qg-daily-content p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.06rem;
    line-height: 1.8;
}

.qg-daily-stats {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
}

.qg-daily-avatars {
    display: flex;
}

.qg-daily-avatars span {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 2px solid var(--qg-primary);
    background: linear-gradient(135deg, #eef3f0, #bdc8c1);
    margin-left: -10px;
}

.qg-daily-avatars span:first-child {
    margin-left: 0;
}

.qg-daily-quiz-card {
    padding: 34px;
    position: relative;
}

.qg-daily-badge {
    display: inline-block;
    margin-bottom: 20px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(26, 66, 49, 0.68);
}

.qg-daily-quiz-card h3 {
    color: var(--qg-text);
    line-height: 1.55;
    font-size: 1.26rem;
    margin-bottom: 24px;
}

.qg-option-list {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.qg-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #dfe6e2;
    border-radius: 14px;
    font-size: 0.98rem;
    color: var(--qg-text);
}

.qg-option--selected {
    border-color: rgba(26, 66, 49, 0.24);
    background: rgba(26, 66, 49, 0.05);
}

.qg-option input {
    accent-color: var(--qg-primary);
}

.qg-btn-block {
    width: 100%;
    justify-content: center;
}

.qg-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.qg-feature-card {
    padding: 28px;
}

.qg-feature-card i {
    color: var(--qg-primary);
    font-size: 1.3rem;
    margin-bottom: 18px;
}

.qg-shell-footer {
    background: var(--qg-bg);
    border-top: 1px solid var(--qg-line);
    padding-top: 64px;
    padding-bottom: 32px;
}

.qg-footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 54px;
}

.qg-footer-grid h3 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 22px;
    color: var(--qg-text);
}

.qg-footer-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.qg-footer-grid a,
.qg-footer-bottom a {
    color: var(--qg-text-soft);
    text-decoration: none;
    transition: color 0.2s ease;
}

.qg-footer-grid a:hover,
.qg-footer-bottom a:hover {
    color: var(--qg-primary);
}

.qg-footer-bottom {
    padding-top: 28px;
    border-top: 1px solid var(--qg-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.qg-quiz-hero {
    background:
        linear-gradient(90deg, rgba(19, 47, 36, 0.9) 0%, rgba(19, 47, 36, 0.68) 56%, rgba(19, 47, 36, 0.48) 100%),
        url("/img/user/phg/real/marcosimone.jpg") center/cover no-repeat;
    padding: 88px 0 94px;
}

.qg-quiz-hero-copy {
    max-width: 820px;
}

.qg-quiz-hero-copy h1 {
    margin: 22px 0 16px;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(2.2rem, 3.4vw, 3.8rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.qg-quiz-hero-copy p {
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.08rem;
    max-width: 62ch;
    line-height: 1.75;
    margin: 0;
}

.qg-section--quiz {
    padding-top: 8px;
}

.qg-quiz-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 28px;
    align-items: start;
}

.qg-quiz-dashboard--single {
    grid-template-columns: minmax(0, 1fr);
}

.qg-quiz-sidebar,
.qg-quiz-rightbar {
    position: sticky;
    top: 118px;
}

.qg-quiz-sidebar {
    background: var(--qg-surface);
    border: 1px solid rgba(26, 66, 49, 0.08);
    border-radius: 22px;
    padding: 24px 18px;
    box-shadow: var(--qg-shadow-sm);
}

.qg-quiz-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 20px;
}

.qg-quiz-sidebar-brand img {
    width: 54px;
    height: auto;
    display: block;
}

.qg-quiz-sidebar-brand strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 900;
    color: var(--qg-text);
}

.qg-quiz-sidebar-brand span {
    display: block;
    color: var(--qg-text-soft);
    font-size: 0.8rem;
    font-weight: 700;
}

.qg-quiz-side-nav {
    display: grid;
    gap: 8px;
    margin-bottom: 22px;
}

.qg-quiz-side-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--qg-text-soft);
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}

.qg-quiz-side-nav a:hover,
.qg-quiz-side-nav a.is-active {
    background: var(--qg-primary);
    color: #fff;
}

.qg-quiz-main {
    min-width: 0;
}

.qg-quiz-hero--app {
    padding: 26px 30px;
    border-radius: 28px;
    box-shadow: var(--qg-shadow-md);
}

.qg-quiz-hero--app .qg-quiz-hero-copy {
    max-width: 760px;
}

.qg-quiz-hero--app .qg-quiz-hero-copy h1 {
    margin: 14px 0 10px;
    font-size: clamp(2rem, 3vw, 3rem);
}

.qg-quiz-hero--app .qg-quiz-hero-copy p {
    font-size: 0.98rem;
    max-width: 68ch;
}

.qg-quiz-wizard-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin: 16px 0 10px;
}

.qg-quiz-wizard-head h2 {
    margin: 4px 0 0;
    font-family: "Montserrat", sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--qg-primary);
}

.qg-quiz-wizard-meta span {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(26, 66, 49, 0.08);
    color: var(--qg-primary);
    font-family: "Montserrat", sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
}

.qg-quiz-progress {
    height: 10px;
    background: rgba(26, 66, 49, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 16px;
}

.qg-quiz-progress-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--qg-primary), #2f6d53);
    transition: width 0.28s ease;
}

.qg-quiz-sidebar-card {
    background: rgba(26, 66, 49, 0.05);
    border: 1px solid rgba(26, 66, 49, 0.08);
    border-radius: 18px;
    padding: 18px;
}

.qg-quiz-sidebar-card + .qg-quiz-sidebar-card {
    margin-top: 14px;
}

.qg-quiz-sidebar-kicker {
    margin: 0 0 10px;
    color: var(--qg-primary);
    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.qg-quiz-sidebar-card strong {
    display: block;
    margin-bottom: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 900;
    color: var(--qg-text);
}

.qg-quiz-sidebar-card span {
    display: block;
    color: var(--qg-text-soft);
    font-size: 0.9rem;
    line-height: 1.65;
}

.qg-quiz-sidebar-pill {
    display: inline-flex;
    margin-top: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--qg-primary);
    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.qg-quiz-filter-card {
    background: linear-gradient(180deg, #1f5a43 0%, #184936 100%);
    border: 1px solid rgba(19, 47, 36, 0.18);
    border-radius: 22px;
    padding: 18px 20px;
    box-shadow: 0 18px 38px rgba(19, 47, 36, 0.18);
    position: sticky;
    top: 104px;
    z-index: 6;
}

.qg-quiz-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.qg-quiz-filter-kicker {
    margin: 0 0 4px;
    color: rgba(255, 255, 255, 0.8);
    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.qg-quiz-filter-head h2 {
    margin: 0;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(0.98rem, 1.25vw, 1.2rem);
    font-weight: 900;
    letter-spacing: -0.03em;
}

.qg-quiz-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 10px;
}

.qg-quiz-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qg-quiz-filter-field label {
    color: rgba(255, 255, 255, 0.84);
    font-family: "Montserrat", sans-serif;
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.qg-quiz-filter-field select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #d9e2dd;
    border-radius: 14px;
    background: #fff;
    color: var(--qg-text);
    font-size: 0.88rem;
    box-shadow: none;
}

.qg-quiz-filter-field input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #d9e2dd;
    border-radius: 14px;
    background: #fff;
    color: var(--qg-text);
    font-size: 0.88rem;
    box-shadow: none;
}

.qg-quiz-filter-field input:focus {
    border-color: rgba(26, 66, 49, 0.35);
    outline: none;
}

.qg-quiz-filter-action {
    display: flex;
    align-items: end;
}

.qg-quiz-filter-grid--single {
    grid-template-columns: minmax(0, 1fr) auto;
}

.qg-quiz-filter-field--wide {
    min-width: 0;
}

.qg-quiz-filter-card .qg-shell-cta {
    min-height: 42px;
    padding: 0 16px;
    justify-content: center;
    width: 100%;
    background: #fff;
    color: var(--qg-primary);
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: none;
}

.qg-quiz-filter-card .qg-shell-cta:hover {
    background: rgba(255, 255, 255, 0.92);
    color: var(--qg-primary-strong);
}

.qg-quiz-filter-field select:focus {
    border-color: rgba(26, 66, 49, 0.35);
    outline: none;
}

.qg-quiz-stack {
    position: relative;
    margin-top: 18px;
    min-height: 720px;
}

.qg-quiz-stack--single {
    min-height: 0;
}

.qg-quiz-card {
    background: var(--qg-surface);
    border: 1px solid rgba(26, 66, 49, 0.08);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--qg-shadow-sm);
    display: none;
}

/* V.3.93 fix Audit Fernando: rimosso `.qg-quiz-step:first-child { display:
   block }`. Causava la sovrapposizione delle domande nel wizard
   (vedi commento in quizgolf-quiz-libero.css). Solo `.is-current` ora
   controlla la visibilita'. */
.qg-quiz-step.is-current {
    display: block;
}

/* V.3.94 fix Audit Fernando: offset di scroll quando `updateQuizWizard`
   chiama `scrollIntoView({block:"start"})` sulla card della domanda
   corrente. La topbar Stitch fissa occupa ~64px in cima, +20px di buffer
   visivo per non incollare la card al bordo. */
.qg-quiz-step {
    scroll-margin-top: 84px;
}

.qg-quiz-card-head {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(26, 66, 49, 0.06);
    background: linear-gradient(180deg, rgba(26, 66, 49, 0.06), rgba(26, 66, 49, 0.025));
}

.qg-quiz-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.qg-quiz-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(26, 66, 49, 0.08);
    color: var(--qg-primary);
    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.qg-quiz-question-wrap {
    padding: 24px 24px 8px;
}

.qg-quiz-layout--with-media {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
    gap: 22px;
    align-items: stretch;
}

.qg-quiz-main-column,
.qg-quiz-media-column {
    min-width: 0;
}

.qg-quiz-question-wrap--with-media {
    padding-right: 0;
}

.qg-quiz-question-body,
.qg-quiz-media-wrap {
    min-width: 0;
}

.qg-quiz-question-kicker,
.qg-answer-panel-kicker {
    margin: 0 0 8px;
    color: var(--qg-text-soft);
    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.qg-quiz-media {
    background: transparent;
    border: 0;
    border-radius: 18px;
    margin-bottom: 22px;
    padding: 0;
    text-align: center;
    height: 100%;
    overflow: hidden;
}

.qg-quiz-media img {
    border-radius: 18px;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.qg-quiz-card--with-media .qg-quiz-media {
    margin-bottom: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 100%;
}

.qg-quiz-card--with-media .qg-quiz-answer-area {
    grid-template-columns: 1fr;
    gap: 18px;
}

.qg-quiz-media-column {
    padding: 24px 24px 22px 0;
    display: flex;
}

.qg-quiz-media-column .qg-quiz-media-wrap {
    width: 100%;
    display: flex;
}

.qg-quiz-question {
    color: var(--qg-text);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    font-weight: 700;
    line-height: 1.45;
}

.qg-quiz-answer-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    background: linear-gradient(180deg, #fbfcfa, #f5f8f4);
    border-top: 1px solid rgba(26, 66, 49, 0.05);
    padding: 22px;
}

.qg-quiz-answer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.qg-quiz-answer-list li {
    margin: 0;
}

.qg-quiz-answer-list .row {
    --bs-gutter-x: 0;
}

.qg-option-wrap {
    width: 100%;
}

.qg-option-surface {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 72px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 2px solid #e7ede9;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.qg-option-surface:hover {
    border-color: rgba(26, 66, 49, 0.22);
    box-shadow: 0 10px 24px rgba(19, 47, 36, 0.06);
    transform: translateY(-1px);
}

.qg-option-surface input[type="radio"] {
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--qg-primary);
}

.qg-option-input {
    pointer-events: none;
}

.qg-option-surface:has(.qg-option-input:checked) {
    border-color: rgba(26, 66, 49, 0.78);
    background: linear-gradient(180deg, #f4f8f4 0%, #ebf3ee 100%);
    box-shadow: 0 12px 26px rgba(19, 47, 36, 0.1);
}

.qg-option-surface:has(.qg-option-input:checked) .qg-option-label {
    color: var(--qg-primary);
}

.qg-option-label {
    margin: 0;
    color: var(--qg-text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.55;
}

.qg-quiz-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    margin-top: -4px;
}

.qg-btn-block {
    width: 100%;
}

.qg-quiz-actions .button_container {
    width: 100%;
    max-width: none;
}

.qg-answer-panel-wrap {
    padding: 0 22px 22px;
}

.qg-quiz-step-nav {
    padding: 0 22px 22px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.qg-quiz-step-btn {
    border: 0;
    border-radius: 16px;
    padding: 14px 18px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.qg-quiz-step-btn--ghost {
    background: rgba(26, 66, 49, 0.07);
    color: var(--qg-primary);
    border: 1px solid rgba(26, 66, 49, 0.08);
}

.qg-quiz-step-btn--primary {
    background: #d7e2dc;
    color: rgba(19, 47, 36, 0.48);
}

.qg-quiz-step-btn--primary.is-ready,
.qg-quiz-step-btn--primary:not(:disabled) {
    background: var(--qg-primary);
    color: #fff;
    box-shadow: 0 14px 24px rgba(19, 47, 36, 0.16);
}

.qg-quiz-step-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.qg-quiz-step-btn.is-disabled,
.qg-quiz-step-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 991px) {
    .qg-quiz-layout--with-media {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .qg-quiz-question-wrap--with-media {
        grid-template-columns: 1fr;
        padding-right: 24px;
    }

    .qg-quiz-card--with-media .qg-quiz-media {
        min-height: 0;
    }

    .qg-quiz-media-column {
        padding: 0 24px 8px;
    }

    .qg-quiz-media-wrap {
        max-width: 640px;
        width: 100%;
    }

    .qg-option-surface {
        min-height: 68px;
    }
}

.qg-answer-panel {
    margin-top: 18px;
    background: linear-gradient(180deg, #f8fbf8, #eef5f0);
    border: 1px solid rgba(26, 66, 49, 0.12);
    border-radius: 22px;
    padding: 20px 22px;
    font-size: 0.98rem;
    line-height: 1.8;
    position: relative;
}

.qg-answer-panel > *:first-child {
    margin-top: 0;
}

.qg-answer-panel > *:last-child {
    margin-bottom: 0;
}

.qg-answer-panel h1,
.qg-answer-panel h2,
.qg-answer-panel h3,
.qg-answer-panel h4 {
    margin: 1.1rem 0 0.7rem;
    color: var(--qg-primary);
    font-family: var(--qg-font-display);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.qg-answer-panel h1,
.qg-answer-panel h2 {
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}

.qg-answer-panel h3,
.qg-answer-panel h4 {
    font-size: 1rem;
}

.qg-answer-panel p {
    margin: 0 0 0.95rem;
    color: var(--qg-text);
}

.qg-answer-panel strong,
.qg-answer-panel b {
    color: var(--qg-primary);
    font-weight: 700;
}

.qg-answer-panel ul,
.qg-answer-panel ol {
    margin: 0.2rem 0 1rem;
    padding-left: 1.25rem;
}

.qg-answer-panel li {
    margin-bottom: 0.45rem;
}

.qg-answer-panel hr {
    margin: 1.1rem 0;
    border: 0;
    border-top: 1px solid rgba(26, 66, 49, 0.12);
}

.qg-answer-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 22px 0 0 22px;
    background: linear-gradient(180deg, #1f5a43, #2d7859);
}

.qg-answer-panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--qg-primary);
    color: #fff;
    font-family: var(--qg-font-display);
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(19, 47, 36, 0.14);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.qg-answer-panel a:hover {
    background: var(--qg-primary-strong);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(19, 47, 36, 0.18);
}

.qg-answer-panel p + a,
.qg-answer-panel ul + a,
.qg-answer-panel ol + a {
    margin-top: 0.25rem;
}

.qg-answer-panel p:last-child {
    margin-bottom: 0;
}

p.qg-answer-panel-kicker {
    margin-top: 25px;
}

.qg-answer-panel .userinfo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.2rem;
    padding: 0.48rem 0.82rem;
    border: 0;
    border-radius: 999px;
    background: var(--qg-primary);
    color: #fff;
    font-family: var(--qg-font-display);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(19, 47, 36, 0.12);
    appearance: none;
    -webkit-appearance: none;
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.qg-answer-panel .userinfo:hover {
    background: var(--qg-primary-strong);
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(19, 47, 36, 0.16);
}

.qg-rule-modal .modal-dialog {
    max-width: min(1080px, calc(100vw - 48px));
}

.qg-rule-modal .modal-content {
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 28px 80px rgba(19, 47, 36, 0.22);
}

.qg-rule-modal .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 32px 22px;
    border-bottom: 1px solid rgba(26, 66, 49, 0.08);
    background: linear-gradient(180deg, #ffffff, #f6faf7);
}

.qg-rule-modal-head {
    min-width: 0;
}

.qg-rule-modal-kicker {
    margin: 0 0 8px;
    color: var(--qg-text-soft);
    font-family: var(--qg-font-display);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.qg-rule-modal .modal-title {
    margin: 0;
    color: var(--qg-primary);
    font-family: var(--qg-font-display);
    font-size: clamp(1.9rem, 2.3vw, 2.45rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.qg-rule-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(26, 66, 49, 0.12);
    border-radius: 14px;
    background: #fff;
    color: var(--qg-primary);
    font-size: 1.8rem;
    line-height: 1;
}

.qg-rule-modal .modal-body {
    padding: 0;
}

.qg-rule-modal-article {
    padding: 28px 32px 34px;
    background: #fff;
    color: var(--qg-text);
    font-family: var(--qg-font-body);
    font-size: 1.06rem;
    line-height: 1.85;
}

.qg-rule-modal-article > *:first-child {
    margin-top: 0;
}

.qg-rule-modal-article > *:last-child {
    margin-bottom: 0;
}

.qg-rule-modal-article div[id],
.qg-rule-modal-article .block_35,
.qg-rule-modal-article .block_36 {
    background: transparent !important;
}

.qg-rule-modal-article h1,
.qg-rule-modal-article h2,
.qg-rule-modal-article h3,
.qg-rule-modal-article h4,
.qg-rule-modal-article p:first-child {
    color: var(--qg-primary);
    font-family: var(--qg-font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.qg-rule-modal-article h1,
.qg-rule-modal-article h2,
.qg-rule-modal-article h3,
.qg-rule-modal-article p:first-child {
    margin: 0 0 1rem;
    font-size: 20px;
    line-height: 1.25;
}

.qg-rule-modal-article p {
    margin: 0 0 1rem;
    font-family: var(--qg-font-body);
}

.qg-rule-modal-article ul,
.qg-rule-modal-article ol {
    margin: 0.35rem 0 1.15rem;
    padding-left: 1.35rem;
    font-family: var(--qg-font-body);
}

.qg-rule-modal-article li {
    margin-bottom: 0.55rem;
}

.qg-rule-modal-article strong,
.qg-rule-modal-article b {
    color: var(--qg-primary);
    font-weight: 700;
}

.qg-rule-modal .modal-footer {
    justify-content: flex-end;
    padding: 18px 32px 28px;
    border-top: 1px solid rgba(26, 66, 49, 0.08);
    background: #fff;
}

.qg-quiz-scoreboard {
    margin-top: 28px;
    padding: 18px 22px;
    border-radius: 16px;
    background: rgba(26, 66, 49, 0.08);
    color: var(--qg-primary);
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
}

.qg-quiz-scoreboard span {
    color: var(--qg-primary-strong);
}

@media (max-width: 1199.98px) {
    .qg-sidebar-layout .qg-shell-header {
        display: block;
    }

    .qg-app-shell {
        display: block;
    }

    .qg-app-sidebar {
        display: none;
    }

    .qg-app-topbar {
        padding: 20px 24px;
    }

    .qg-app-main {
        padding: 24px;
    }

    .qg-shell-links,
    .qg-shell-cta {
        display: none;
    }

    .qg-shell-toggle,
    .qg-mobile-close {
        display: inline-flex;
    }

    .qg-tools-grid,
    .qg-feature-grid,
    .qg-footer-grid,
    .qg-home-utility-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qg-definition-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qg-quiz-dashboard {
        grid-template-columns: 1fr;
    }

    .qg-quiz-rightbar {
        position: static;
    }

    .qg-quiz-wizard-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .qg-quiz-filter-grid {
        grid-template-columns: 1fr;
    }

    .qg-quiz-filter-card {
        padding: 16px;
        position: static;
    }

    .qg-quiz-filter-action {
        align-items: stretch;
    }

    .qg-daily-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .qg-app-topbar,
    .qg-shell-topbar {
        display: none;
    }

    .qg-shell-nav {
        min-height: 78px;
    }

    .qg-shell-brand img,
    .qg-footer-brand img {
        width: 66px;
    }

    .qg-shell-brand small {
        display: none;
    }

    .qg-hero-section {
        min-height: auto;
    }

    .qg-hero-inner {
        padding: 64px 24px 70px;
    }

    .qg-hero-copy h1 {
        font-size: 2.8rem;
    }

    .qg-section {
        padding: 64px 0;
    }

    .qg-app-main {
        padding: 18px;
    }

    .qg-home-hero-copy {
        padding: 44px 24px;
    }

    .qg-home-hero-card {
        min-height: 460px;
        border-radius: 24px;
    }

    .qg-section-head,
    .qg-footer-bottom,
    .qg-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .qg-tools-grid,
    .qg-feature-grid,
    .qg-footer-grid,
    .qg-home-utility-grid {
        grid-template-columns: 1fr;
    }

    .qg-definition-list {
        grid-template-columns: 1fr;
    }

    .qg-quiz-filter-head,
    .qg-quiz-answer-area {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .qg-quiz-answer-area {
        display: grid;
    }

    .qg-quiz-question-wrap,
    .qg-quiz-question-wrap--with-media,
    .qg-answer-panel-wrap,
    .qg-quiz-step-nav,
    .qg-quiz-answer-area {
        padding-left: 18px;
        padding-right: 18px;
    }

    .qg-quiz-actions .button_container {
        max-width: none;
    }

    .qg-tools-card,
    .qg-feature-card,
    .qg-daily-quiz-card {
        padding: 24px;
    }

    .qg-quiz-hero--app {
        padding: 22px 20px;
    }

    .qg-quiz-filter-card .qg-shell-cta {
        width: 100%;
    }

    .qg-quiz-stack {
        min-height: 0;
    }

    .qg-quiz-step-nav {
        flex-direction: column;
    }

    .qg-quiz-step-btn {
        width: 100%;
    }

    .qg-quiz-answer-area {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .qg-option-surface {
        min-height: 64px;
        padding: 15px 16px;
    }

    .qg-option-label {
        font-size: 0.92rem;
        line-height: 1.45;
    }

    .qg-home-search {
        grid-template-columns: 1fr;
    }
}

body.qg-modern-body,
body.qg-modern-body p,
body.qg-modern-body li,
body.qg-modern-body label,
body.qg-modern-body input,
body.qg-modern-body select,
body.qg-modern-body button,
body.qg-modern-body textarea,
body.qg-modern-body .qg-option-label,
body.qg-modern-body .qg-answer-panel,
body.qg-modern-body .qg-footer-brand p,
body.qg-modern-body .qg-section-lead,
body.qg-modern-body .qg-tools-card p,
body.qg-modern-body .qg-feature-card p,
body.qg-modern-body .qg-daily-content p,
body.qg-modern-body .qg-daily-quiz-card p {
    font-family: var(--qg-font-body);
}

body.qg-modern-body h1,
body.qg-modern-body h2,
body.qg-modern-body h3,
body.qg-modern-body h4,
body.qg-modern-body h5,
body.qg-modern-body h6,
body.qg-modern-body .qg-shell-brand strong,
body.qg-modern-body .qg-shell-links a,
body.qg-modern-body .qg-shell-cta,
body.qg-modern-body .qg-hero-kicker,
body.qg-modern-body .qg-hero-secondary,
body.qg-modern-body .qg-section-title,
body.qg-modern-body .qg-section-link,
body.qg-modern-body .qg-app-brand strong,
body.qg-modern-body .qg-app-nav a,
body.qg-modern-body .qg-app-sidebar-kicker,
body.qg-modern-body .qg-app-sidebar-card strong,
body.qg-modern-body .qg-app-topbar h1,
body.qg-modern-body .qg-app-topbar-kicker,
body.qg-modern-body .qg-app-topbar-meta span,
body.qg-modern-body .qg-font-switcher-label,
body.qg-modern-body .qg-font-switcher-options a,
body.qg-modern-body .qg-tools-card h3,
body.qg-modern-body .qg-feature-card h3,
body.qg-modern-body .qg-daily-content h2,
body.qg-modern-body .qg-daily-badge,
body.qg-modern-body .qg-daily-quiz-card h3,
body.qg-modern-body .qg-quiz-filter-kicker,
body.qg-modern-body .qg-quiz-filter-head h2,
body.qg-modern-body .qg-quiz-question-kicker,
body.qg-modern-body .qg-answer-panel-kicker,
body.qg-modern-body .qg-quiz-question,
body.qg-modern-body .qg-quiz-badge,
body.qg-modern-body .qg-quiz-step-btn,
body.qg-modern-body .qg-quiz-wizard-head h2,
body.qg-modern-body .qg-quiz-wizard-meta span {
    font-family: var(--qg-font-display);
}

.qg-editorial-stack {
    display: grid;
    gap: 18px;
}

.qg-content-intro-card {
    padding: 26px 28px;
    border-radius: 24px;
    border: 1px solid rgba(26, 66, 49, 0.08);
    background: linear-gradient(180deg, #ffffff, #f7faf7);
    box-shadow: 0 16px 34px rgba(17, 41, 31, 0.06);
}

.qg-content-intro-card h2,
.qg-content-intro-card .qg-section-title {
    margin-bottom: 10px;
}

.qg-content-intro-card .qg-section-lead {
    max-width: 72ch;
}

.qg-opinion-card {
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(26, 66, 49, 0.08);
    background: linear-gradient(180deg, #ffffff, #f7faf7);
    box-shadow: 0 16px 34px rgba(17, 41, 31, 0.06);
}

.qg-opinion-card.is-legacy {
    background: linear-gradient(180deg, #fbfbfb, #f4f5f4);
    border-color: rgba(114, 123, 118, 0.18);
}

.qg-opinion-card.is-legacy .qg-opinion-text,
.qg-opinion-card.is-legacy .qg-opinion-byline,
.qg-opinion-card.is-legacy .qg-opinion-label {
    color: #72807a;
}

.qg-opinion-card-head {
    margin-bottom: 16px;
}

.qg-opinion-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}

.qg-opinion-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(26, 66, 49, 0.08);
    color: var(--qg-primary);
    font-family: var(--qg-font-display);
    font-size: 0.72rem;
    font-weight: 700;
}

.qg-opinion-byline {
    color: var(--qg-text-soft);
    font-size: 0.96rem;
    font-weight: 600;
}

.qg-opinion-block + .qg-opinion-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dotted var(--qg-line);
}

.qg-opinion-label {
    margin: 0 0 8px;
    color: var(--qg-primary);
    font-family: var(--qg-font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.qg-opinion-text {
    color: var(--qg-text);
    font-family: var(--qg-font-body);
    font-size: 1rem;
    line-height: 1.75;
}

.qg-curiosity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.qg-curiosity-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(26, 66, 49, 0.08);
    background: linear-gradient(180deg, #ffffff, #f7faf7);
    box-shadow: 0 16px 34px rgba(17, 41, 31, 0.06);
}

.qg-curiosity-card-head {
    display: grid;
    gap: 12px;
}

.qg-curiosity-card h3 {
    margin: 0;
    color: var(--qg-text);
    font-size: 1.35rem;
    line-height: 1.15;
}

.qg-curiosity-pill,
.qg-curiosity-modal-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(26, 66, 49, 0.08);
    color: var(--qg-primary);
    font-family: var(--qg-font-display);
    font-size: 0.72rem;
    font-weight: 700;
}

.qg-curiosity-excerpt,
.qg-curiosity-modal-text {
    color: var(--qg-text);
    font-family: var(--qg-font-body);
    font-size: 1rem;
    line-height: 1.75;
}

.qg-curiosity-card .qg-shell-cta {
    margin-top: auto;
    width: 100%;
    justify-content: center;
}

.qg-shell-cta--ghost {
    background: rgba(26, 66, 49, 0.08);
    color: var(--qg-primary);
    border: 1px solid rgba(26, 66, 49, 0.12);
}

.qg-shell-cta--ghost:hover {
    background: rgba(26, 66, 49, 0.12);
    color: var(--qg-primary-strong);
}

.qg-curiosity-modal-content {
    max-width: 760px;
    padding: 8px;
}

.qg-curiosity-modal-content h2 {
    margin: 12px 0 14px;
    color: var(--qg-primary);
    font-size: 2rem;
    line-height: 1.05;
}

.qg-rules-tree-shell {
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(26, 66, 49, 0.08);
    background: linear-gradient(180deg, #ffffff, #f7faf7);
    box-shadow: 0 16px 34px rgba(17, 41, 31, 0.06);
}

.qg-rules-tree-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
}

.qg-rules-tree,
.qg-rules-tree ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.qg-rules-tree > li + li {
    margin-top: 16px;
}

.qg-rules-tree .nested {
    margin-top: 12px;
    margin-left: 22px;
    padding-left: 18px;
    border-left: 1px dotted var(--qg-line);
}

.qg-rules-tree li {
    margin: 0;
}

.qg-rules-tree .caret {
    display: block;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f6faf7, #eef5f0);
    color: var(--qg-primary);
    font-family: var(--qg-font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.qg-rules-tree .caret:hover {
    background: linear-gradient(180deg, #eef5f0, #e7f0ea);
}

.qg-rules-tree .userinfo {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-radius: 14px;
    background: none;
    border: 0;
    color: var(--qg-text);
    text-align: left;
    font-family: var(--qg-font-body);
    font-size: 1rem;
    line-height: 1.6;
}

.qg-rules-tree .userinfo:hover {
    background: rgba(26, 66, 49, 0.05);
    color: var(--qg-primary);
}

.qg-rules-tree .bullet .userinfo {
    color: var(--qg-text-soft);
    font-size: 0.96rem;
}

@media (max-width: 1199px) {
    .qg-curiosity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .qg-curiosity-grid {
        grid-template-columns: 1fr;
    }

    .qg-rules-tree-shell {
        padding: 18px;
    }

    /* Quiz meta tags: horizontal scroll */
    .qg-quiz-meta {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
        gap: 6px;
    }
    .qg-quiz-meta::-webkit-scrollbar { display: none; }
    .qg-quiz-badge { flex-shrink: 0; font-size: 0.6rem; padding: 5px 9px; }
    .qg-quiz-card-head { padding: 10px 14px; }
    .qg-quiz-question-wrap { padding: 14px 14px 6px; }
}

/* Laptop viewport height optimization (≥1025px wide, ≤750px tall) */
@media (min-width: 1025px) and (max-height: 750px) {
    .qg-hero-section { min-height: auto; }
    .qg-hero-inner { padding-top: 48px; padding-bottom: 56px; }
    .qg-hero-copy h1,
    .qg-home-hero-copy h2 { font-size: clamp(2rem, 3vw, 3.25rem); }
    .qg-quiz-hero-copy h1 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
    .qg-quiz-hero--app .qg-quiz-hero-copy h1 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
    .qg-section { padding: 56px 0; }
    .qg-section-title { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
    .qg-quiz-question { font-size: clamp(0.94rem, 1.2vw, 1.1rem); }
    .qg-daily-content h2 { font-size: clamp(1.6rem, 2.4vw, 2.4rem); }
}

/* ============================================================
   Home v2 — Tool Cards e Daily Quiz (redesign da v0)
   ============================================================ */

/* Hero: CTA buttons più grandi */
.qg-home-hero__content .qg-shell-cta,
.qg-home-hero__content a[href] {
    font-size: 15px;
    padding: 13px 24px;
}

/* Tool cards v2 */
.qg-home-tools-grid-v2 {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
    .qg-home-tools-grid-v2 { grid-template-columns: repeat(4, 1fr); }
}

/* V.3.106 modifier — hub /guida-regole.php: ogni riga occupa il 100%
   dello spazio diviso in parti uguali per il numero di card della sezione.
   Default (no modifier) resta a 2/4 colonne come la home. */
.qg-home-tools-grid-v2--two-cols,
.qg-home-tools-grid-v2--three-cols {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .qg-home-tools-grid-v2--two-cols   { grid-template-columns: repeat(2, 1fr); }
    .qg-home-tools-grid-v2--three-cols { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   V.3.109 (UX-3): bento "I nostri strumenti" sulla home.
   Layout 1 tall + 1 wide + 2 squares. La card Quiz Interattivi
   ottiene trattamento "hero" (foto + overlay + badge + icona
   bianca senza container) per dare prominenza al core product.
   Le altre 3 card riusano lo stile `qg-home-tool-v2` esistente,
   solo collocate in posizioni asimmetriche via grid-area.
   ============================================================ */

.qg-home-bento {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 16px;
}
@media (min-width: 760px) {
    .qg-home-bento {
        grid-template-columns: 0.95fr 1.3fr 1fr;
        grid-template-rows: auto auto;
    }
    .qg-home-bento__tall  { grid-column: 1; grid-row: 1 / span 2; }
    .qg-home-bento__wide  { grid-column: 2 / span 2; grid-row: 1; }
    .qg-home-bento__sq-1  { grid-column: 2; grid-row: 2; }
    .qg-home-bento__sq-2  { grid-column: 3; grid-row: 2; }
}

/* --- Quiz Interattivi card (tall, hero-style) --- */

.qg-home-bento__tall {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #06291d;  /* fallback se l'img non carica */
    color: white;
    text-decoration: none;
    isolation: isolate;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: block;
    min-height: 380px;
}
.qg-home-bento__tall:hover,
.qg-home-bento__tall:focus-visible {
    box-shadow: 0 12px 32px rgba(6, 41, 29, 0.35);
    transform: translateY(-2px);
    outline: none;
}

.qg-home-bento__tall-media {
    position: absolute;
    inset: 0;
    /* V.3.110: foto ottimizzata 1600x1067 quality 80, 134 KB (era 12.7 MB).
       Soggetto: golf player placing ball on tee at sunrise.
       Riservata per la Quiz card bento, separata dalla hero "Domina le Regole"
       che usa marco-simone-quiz-golf-background.jpg. */
    background-image: url('/assets/hero/golf-sunrise-tee-bento.jpg');
    background-size: cover;
    background-position: center;
    transition: transform 0.7s ease;
    z-index: 0;
}
.qg-home-bento__tall:hover .qg-home-bento__tall-media,
.qg-home-bento__tall:focus-visible .qg-home-bento__tall-media {
    transform: scale(1.05);
}

.qg-home-bento__tall-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(6, 41, 29, 0.55) 0%,
        rgba(6, 41, 29, 0.75) 60%,
        rgba(6, 41, 29, 0.90) 100%
    );
    z-index: 1;
}

.qg-home-bento__tall-content {
    position: relative;
    z-index: 2;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 380px;
    height: 100%;
}

.qg-home-bento__tall-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: white;
}

.qg-home-bento__tall-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: white;
    margin-bottom: 4px;
    transition: transform 0.3s ease;
}
.qg-home-bento__tall:hover .qg-home-bento__tall-icon,
.qg-home-bento__tall:focus-visible .qg-home-bento__tall-icon {
    transform: rotate(-6deg) scale(1.08);
}
.qg-home-bento__tall-icon .material-symbols-outlined {
    font-size: 56px;
    font-variation-settings: 'wght' 400;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.qg-home-bento__tall h3 {
    color: white;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 4px 0 6px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

.qg-home-bento__tall p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.55;
    max-width: 32ch;
    margin: 0;
}

.qg-home-bento__tall-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 11px 20px;
    background: white;
    color: #06291d;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    align-self: flex-start;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.qg-home-bento__tall:hover .qg-home-bento__tall-cta,
.qg-home-bento__tall:focus-visible .qg-home-bento__tall-cta {
    background: #16a34a;
    color: white;
    transform: translateX(3px);
}
.qg-home-bento__tall-cta .material-symbols-outlined { font-size: 16px; }

/* Le card chiare (wide / sq-1 / sq-2) ereditano interamente lo stile
   di `.qg-home-tool-v2` già definito sopra. Le classi modifier
   qg-home-bento__wide/sq-1/sq-2 servono SOLO per il grid-positioning
   nel @media >=760px sopra. Nessuna regola di stile aggiuntiva qui. */

@media (max-width: 760px) {
    .qg-home-bento__tall,
    .qg-home-bento__tall-content { min-height: 280px; }
    .qg-home-bento__tall-content { padding: 24px 20px; }
    .qg-home-bento__tall h3 { font-size: 22px; }
    .qg-home-bento__tall-icon { width: 48px; height: 48px; }
    .qg-home-bento__tall-icon .material-symbols-outlined { font-size: 48px; }
}

.qg-home-tool-v2 {
    background: #fff;
    border: 1px solid #E8EDEA;
    border-radius: 14px;
    padding: 20px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.qg-home-tool-v2:hover {
    border-color: rgba(27,77,62,0.28);
    box-shadow: 0 4px 18px rgba(27,77,62,0.09);
}
.qg-home-tool-v2__icon {
    width: 52px; height: 52px;
    background: #F5F7F6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7C74;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.qg-home-tool-v2:hover .qg-home-tool-v2__icon {
    color: #1B4D3E;
    background: rgba(27,77,62,0.08);
}
.qg-home-tool-v2__icon .material-symbols-outlined { font-size: 24px; }
.qg-home-tool-v2__icon svg { width: 24px; height: 24px; }
.qg-home-tool-v2 h4 {
    font-size: 15px;
    font-weight: 700;
    color: #1B4D3E;
    line-height: 1.3;
    margin: 0 0 4px 0;
}
.qg-home-tool-v2 p {
    font-size: 13px;
    color: #6B7C74;
    line-height: 1.5;
    margin: 0;
}

/* Daily quiz v2 — split layout */
.qg-home-daily-v2 {
    /* V.3.113: bg image Pevero Golf Club + gradient overlay verde scuro per
       leggibilita' del testo bianco. Pattern allineato al bento Quiz Libero
       (qg-home-bento__tall): foto in cover + tint coerente con il brand. */
    background:
        linear-gradient(135deg, rgba(27,77,62,0.82) 0%, rgba(15,58,46,0.95) 100%),
        url('/assets/hero/pevero-fairway-daily.jpg') center/cover no-repeat;
    background-color: #1B4D3E; /* fallback */
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .qg-home-daily-v2 { grid-template-columns: 1fr 1fr; }
}

.qg-home-daily-v2__left {
    padding: 32px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 768px) {
    .qg-home-daily-v2__left { padding: 40px 36px; justify-content: center; }
}

.qg-home-daily-v2__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.55);
}
.qg-home-daily-v2__badge .material-symbols-outlined { font-size: 16px; }

.qg-home-daily-v2__left h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin: 0;
}
.qg-home-daily-v2__left p {
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    line-height: 1.65;
    max-width: 320px;
    margin: 0;
}

.qg-home-daily-v2__avatars {
    display: flex;
    align-items: center;
}
.qg-home-daily-v2__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid #1B4D3E;
    background: rgba(255,255,255,0.22);
    margin-left: -8px;
    flex-shrink: 0;
}
.qg-home-daily-v2__avatar:first-child { margin-left: 0; }
.qg-home-daily-v2__stats {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin-left: 12px;
}

.qg-home-daily-v2__right {
    padding: 0 16px 24px;
    display: flex;
    align-items: stretch;
}
@media (min-width: 768px) {
    .qg-home-daily-v2__right { padding: 16px 16px 16px 0; }
}

.qg-home-daily-v2__card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.qg-home-daily-v2__card h4 {
    font-size: 17px;
    font-weight: 600;
    color: #1B4D3E;
    line-height: 1.5;
    margin: 0;
}

.qg-home-daily-v2__options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.qg-home-daily-v2__option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid #E8EDEA;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-size: 14px;
    color: #1a1a1a;
    background: none;
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.qg-home-daily-v2__option:hover {
    border-color: rgba(27,77,62,0.3);
    background: rgba(27,77,62,0.02);
}
.qg-home-daily-v2__option.is-selected {
    border-color: #1B4D3E;
    background: rgba(27,77,62,0.05);
}
.qg-home-daily-v2__radio {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid #E8EDEA;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
}
.qg-home-daily-v2__option.is-selected .qg-home-daily-v2__radio {
    border-color: #1B4D3E;
    background: #1B4D3E;
}
.qg-home-daily-v2__option.is-selected .qg-home-daily-v2__radio::after {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
    display: block;
}

.qg-home-daily-v2__submit {
    background: #E8EDEA;
    color: #8A9B91;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: not-allowed;
    transition: background 0.15s, color 0.15s;
    width: 100%;
    font-family: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.qg-home-daily-v2__submit.is-ready {
    background: #1B4D3E;
    color: #fff;
    cursor: pointer;
}

/* V.3.64: feedback INLINE Quiz del Giorno (no redirect a quiz_singolo).
   Stati post-risposta su .qg-home-daily-v2__option:
   - is-correct: bordo + bg verde (palette QuizGolf)
   - is-incorrect: bordo + bg rosso warning
   Quando .qg-home-daily-v2__options ha .is-answered tutti i bottoni
   sono disabilitati e l'hover non risponde piu'. */
.qg-home-daily-v2__option:disabled {
    cursor: default;
}
.qg-home-daily-v2__options.is-answered .qg-home-daily-v2__option:hover {
    /* niente hover dopo risposta */
    border-color: #E8EDEA;
    background: #fff;
}
.qg-home-daily-v2__option.is-correct {
    border-color: #1B4D3E !important;
    background: rgba(27, 77, 62, 0.10) !important;
    color: #0a3a2a;
}
.qg-home-daily-v2__option.is-correct .qg-home-daily-v2__radio {
    border-color: #1B4D3E;
    background: #1B4D3E;
}
.qg-home-daily-v2__option.is-correct .qg-home-daily-v2__radio::after {
    content: '✓';
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: block;
    line-height: 1;
    width: auto;
    height: auto;
    background: transparent;
}
.qg-home-daily-v2__option.is-incorrect {
    border-color: #c53030 !important;
    background: rgba(197, 48, 48, 0.08) !important;
    color: #8b1d1d;
}
.qg-home-daily-v2__option.is-incorrect .qg-home-daily-v2__radio {
    border-color: #c53030;
    background: #c53030;
}
.qg-home-daily-v2__option.is-incorrect .qg-home-daily-v2__radio::after {
    content: '✗';
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: block;
    line-height: 1;
    width: auto;
    height: auto;
    background: transparent;
}

.qg-home-daily-v2__feedback {
    margin-top: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    background: rgba(27, 77, 62, 0.06);
    border: 1px solid rgba(27, 77, 62, 0.20);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* V.3.89 fix Audit Fernando: `display: flex` sovrascriveva il default
   `[hidden]{display:none}` del browser, quindi il feedback + spiegazione
   restavano visibili PRIMA del click. Reset esplicito qui per garantire
   che il blocco appaia SOLO dopo la risposta (logica JS qgDailyAnswer). */
.qg-home-daily-v2__feedback[hidden] {
    display: none;
}
.qg-home-daily-v2__feedback.is-incorrect {
    background: rgba(197, 48, 48, 0.06);
    border-color: rgba(197, 48, 48, 0.25);
}
.qg-home-daily-v2__feedback-text {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1B4D3E;
}
.qg-home-daily-v2__feedback.is-incorrect .qg-home-daily-v2__feedback-text {
    color: #8b1d1d;
}
.qg-home-daily-v2__feedback-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1B4D3E;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    align-self: flex-start;
    transition: gap 0.15s ease;
}
.qg-home-daily-v2__feedback-link:hover {
    gap: 10px;
    text-decoration: underline;
}
.qg-home-daily-v2__feedback-link .material-symbols-outlined {
    font-size: 16px;
}

/* V.3.86 Audit Fernando Tier 3-A: spiegazione regola INLINE nel feedback
   del Quiz del Giorno. Sostituisce il vecchio link "Vedi la spiegazione
   completa" che rimandava a /quiz_singolo.php. */
.qg-home-daily-v2__explanation {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(27, 77, 62, 0.18);
}
.qg-home-daily-v2__feedback.is-incorrect .qg-home-daily-v2__explanation {
    border-top-color: rgba(197, 48, 48, 0.22);
}
.qg-home-daily-v2__explanation-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    font-family: var(--qg-font-label, "Plus Jakarta Sans", sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1B4D3E;
}
.qg-home-daily-v2__feedback.is-incorrect .qg-home-daily-v2__explanation-kicker {
    color: #8b1d1d;
}
.qg-home-daily-v2__explanation-kicker .material-symbols-outlined {
    font-size: 16px;
}
.qg-home-daily-v2__explanation-body,
.qg-home-daily-v2__explanation-extra {
    font-size: 14px;
    line-height: 1.55;
    color: #1f2933;
}
.qg-home-daily-v2__explanation-body :first-child,
.qg-home-daily-v2__explanation-extra :first-child {
    margin-top: 0;
}
.qg-home-daily-v2__explanation-body :last-child,
.qg-home-daily-v2__explanation-extra :last-child {
    margin-bottom: 0;
}
.qg-home-daily-v2__explanation-extra {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(27, 77, 62, 0.18);
    color: #4a5568;
}

/* V.3.90 Audit Fernando: pillole cliccabili nella spiegazione Regola del
   Quiz del Giorno. Inserite client-side da qgEnrichDailyRefs() (vedi
   script in index.php). Stile coerente con .userinfo dei quiz interni,
   ma sono <a> diretti alla pagina guida (no modale jQuery/Bootstrap). */
.qg-home-daily-v2__ref {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    margin: 0 2px;
    border-radius: 999px;
    background: rgba(27, 77, 62, 0.10);
    color: #1B4D3E;
    font-weight: 600;
    font-size: 0.92em;
    line-height: 1.4;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.qg-home-daily-v2__ref:hover,
.qg-home-daily-v2__ref:focus-visible {
    background: rgba(27, 77, 62, 0.22);
    color: #0f3a2f;
    text-decoration: none;
}
.qg-home-daily-v2__ref--def em {
    font-style: normal;
}
.qg-home-daily-v2__feedback.is-incorrect .qg-home-daily-v2__ref {
    background: rgba(197, 48, 48, 0.10);
    color: #8b1d1d;
}
.qg-home-daily-v2__feedback.is-incorrect .qg-home-daily-v2__ref:hover,
.qg-home-daily-v2__feedback.is-incorrect .qg-home-daily-v2__ref:focus-visible {
    background: rgba(197, 48, 48, 0.22);
    color: #6e1313;
}

/* V.3.91 Audit Fernando Tier 3-B: progress bar a tacche nei wizard quiz
   (quiz_libero, quiz_tematico). Sostituisce la barra continua (bug visivo:
   computed width 0px nonostante inline style). Una tacca per domanda,
   stati: pending (grigio chiaro), current (primary), answered-correct
   (verde golf), answered-wrong (rosso). */
.qg-quiz-progress-ticks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
}
.qg-quiz-progress-tick {
    flex: 1 1 0;
    min-width: 12px;
    height: 8px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.10);
    transition: background 0.2s ease, transform 0.2s ease;
}
.qg-quiz-progress-tick.is-current {
    background: var(--md-sys-color-primary, #1B4D3E);
    transform: scaleY(1.4);
}
.qg-quiz-progress-tick.is-answered-correct {
    background: #1B4D3E;
}
.qg-quiz-progress-tick.is-answered-wrong {
    background: #c53030;
}
/* Se la tacca corrente coincide con una gia' answered (es. l'utente torna
   alla domanda precedente), is-current diventa solo un highlight ring per
   non perdere il colore della risposta data. */
.qg-quiz-progress-tick.is-current.is-answered-correct,
.qg-quiz-progress-tick.is-current.is-answered-wrong {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(15, 23, 42, 0.35);
    transform: scaleY(1.4);
}

/* V.3.87 Audit Fernando Tier 3-C+D: search bar sticky nelle landing
   /quiz_per_regola.php e /quiz_per_definizione.php. Le utility Tailwind
   sticky+top-16 nel template non sono affidabili nella build attuale; CSS
   esplicito per garantire il behavior in entrambi i contesti. La topbar
   Stitch occupa ~64px in cima quindi top: 64px e' il valore corretto. */
.qg-landing-search-bar {
    position: sticky;
    top: 64px;
    z-index: 40;
}
.qg-def-alphabet__item.opacity-40 {
    opacity: 0.4;
}
.qg-def-alphabet__item.pointer-events-none {
    pointer-events: none;
}

/* Newsletter v2 — V.3.50: stesso split layout di qg-home-daily-v2 ma con
   palette inversa (accent caldo invece di green) per distinguere visivamente
   le due section. Il CTA porta a /brevo_form.php (no form inline qui). */
.qg-home-newsletter-v2 {
    /* V.3.116: ripristinato tema beige sabbia originale (#F4EFE5) come overlay
       semi-trasparente sopra la foto bunker. La sabbia del bunker si intravede
       leggermente, dando profondita' visiva senza compromettere la leggibilita'
       del testo verde primary. Il tema chiaro era stato invertito in V.3.113
       (chiaro -> scuro), ma per coerenza con la palette warm dell'iscrizione
       newsletter (action positiva/inviting) torna al beige originale. */
    background:
        linear-gradient(135deg, rgba(244, 239, 229, 0.88) 0%, rgba(244, 239, 229, 0.95) 100%),
        url('/assets/hero/bunker-ball-sand-newsletter.jpg') center/cover no-repeat;
    background-color: #F4EFE5; /* fallback */
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid rgba(27, 77, 62, 0.10);
}
@media (min-width: 768px) {
    .qg-home-newsletter-v2 { grid-template-columns: 1fr 1fr; }
}

.qg-home-newsletter-v2__left {
    padding: 32px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 768px) {
    .qg-home-newsletter-v2__left { padding: 40px 36px; justify-content: center; }
}

.qg-home-newsletter-v2__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    /* V.3.116: ripristinato verde primary su overlay beige (era bianco in V.3.113) */
    color: rgba(27, 77, 62, 0.65);
}
.qg-home-newsletter-v2__badge .material-symbols-outlined { font-size: 16px; }

.qg-home-newsletter-v2__left h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 800;
    /* V.3.116: ripristinato verde primary su overlay beige (era bianco in V.3.113) */
    color: #1B4D3E;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin: 0;
    /* V.3.116: rimosso text-shadow scuro (era per leggibilita' su foto scura
       in V.3.113), ora overlay e' beige chiaro quindi non serve. */
}
.qg-home-newsletter-v2__left p {
    font-size: 15px;
    /* V.3.116: ripristinato verde primary/75% su overlay beige */
    color: rgba(27, 77, 62, 0.75);
    margin: 0;
    line-height: 1.55;
}

.qg-home-newsletter-v2__right {
    padding: 24px 28px 32px;
    display: flex;
    align-items: stretch;
}
@media (min-width: 768px) {
    .qg-home-newsletter-v2__right { padding: 36px; }
}

.qg-home-newsletter-v2__card {
    background: #fff;
    border-radius: 12px;
    padding: 24px 22px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 14px rgba(27, 77, 62, 0.10);
}

.qg-home-newsletter-v2__kicker {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(27, 77, 62, 0.55);
}

.qg-home-newsletter-v2__card h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 700;
    color: #1B4D3E;
}

.qg-home-newsletter-v2__perks {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.qg-home-newsletter-v2__perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.72);
}
.qg-home-newsletter-v2__perks .material-symbols-outlined {
    font-size: 18px;
    color: #1B4D3E;
    flex-shrink: 0;
}

.qg-home-newsletter-v2__submit {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #1B4D3E;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.qg-home-newsletter-v2__submit:hover {
    background: #0F3A2E;
    transform: translateY(-1px);
}
.qg-home-newsletter-v2__submit .material-symbols-outlined { font-size: 18px; }

/* V.3.113: Contatto diretto CTA — pattern foto+overlay come Quiz del giorno
   e Newsletter. Bottone pill con palette accent oro/sunrise, deliberatamente
   contrastante con il verde brand per distinguere l'azione "contatto" dalle
   altre CTA del sito. */
.qg-home-contact-cta {
    background:
        linear-gradient(135deg, rgba(27,77,62,0.78) 0%, rgba(15,58,46,0.92) 100%),
        url('/assets/hero/golf-ball-field-contact.jpg') center/cover no-repeat;
    background-color: #1B4D3E; /* fallback */
}

.qg-home-contact-cta__btn {
    /* Override Tailwind: pill (era rounded-lg) + accent oro (era bianco) */
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    padding: 14px 24px;
    font-weight: 700;
    /* V.3.114: nowrap per evitare che "Invia un quesito" vada a capo su 2 righe
       e trasformi il pill in un ovale verticale (visto in smoke V.3.113). */
    white-space: nowrap;
    /* V.3.115: align-self center + line-height 1 per evitare che il flex parent
       (qg-home-contact-cta__inner con md:items-center) stretchi il bottone a
       124px (visto in smoke V.3.114). Senza, ereditava align-self: auto. */
    align-self: center;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.30);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.qg-home-contact-cta__btn:hover,
.qg-home-contact-cta__btn:focus-visible {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.40);
    outline: none;
}
.qg-home-contact-cta__btn .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 767px) {
    .qg-home-tools-grid-v2 { gap: 12px; }
    .qg-home-tool-v2 { padding: 16px; }
    .qg-home-tool-v2__icon { width: 44px; height: 44px; }
    .qg-home-tool-v2 h4 { font-size: 14px; }
}

/* ── Page Hero (riusabile su pagine interne) ── */
.qg-page-hero {
    background-size: cover;
    background-position: center 35%;
    border-radius: 12px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 768px) {
    .qg-page-hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 36px 48px;
        gap: 32px;
    }
}
.qg-page-hero__kicker {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 6px;
}
.qg-page-hero h1 {
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 0 0 8px 0;
}
.qg-page-hero__desc {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    max-width: 420px;
    margin: 0;
}
.qg-page-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 100px;
    flex-shrink: 0;
    width: fit-content;
}
.qg-page-hero__badge .material-symbols-outlined {
    font-size: 18px;
    color: rgba(255,255,255,0.7);
}

/* Variante quiz_libero / quiz_singolo / quiz_tematico */
.qg-page-hero--quiz {
    background-image:
        linear-gradient(to right, rgba(27,77,62,0.94) 0%, rgba(27,77,62,0.78) 55%, rgba(27,77,62,0.15) 100%),
        url('/assets/hero/marco-simone-quiz-golf-background.jpg');
}
/* Variante regole_tree */
.qg-page-hero--rules {
    background-image:
        linear-gradient(to right, rgba(6,25,50,0.95) 0%, rgba(6,25,50,0.80) 55%, rgba(6,25,50,0.15) 100%),
        url('/assets/hero/marco-simone-quiz-golf-background.jpg');
}
/* Variante definizioni */
.qg-page-hero--glossary {
    background-image:
        linear-gradient(to right, rgba(15,45,35,0.95) 0%, rgba(15,45,35,0.80) 55%, rgba(15,45,35,0.15) 100%),
        url('/assets/hero/marco-simone-quiz-golf-background.jpg');
}
/* Variante pareri */
.qg-page-hero--editorial {
    background-image:
        linear-gradient(to right, rgba(45,18,6,0.95) 0%, rgba(45,18,6,0.80) 55%, rgba(45,18,6,0.15) 100%),
        url('/assets/hero/marco-simone-quiz-golf-background.jpg');
}
/* Variante curiosity */
.qg-page-hero--curiosity {
    background-image:
        linear-gradient(to right, rgba(6,30,50,0.95) 0%, rgba(6,30,50,0.80) 55%, rgba(6,30,50,0.15) 100%),
        url('/assets/hero/marco-simone-quiz-golf-background.jpg');
}
/* Variante ricerca */
.qg-page-hero--search {
    background-image:
        linear-gradient(to right, rgba(20,20,35,0.95) 0%, rgba(20,20,35,0.80) 55%, rgba(20,20,35,0.15) 100%),
        url('/assets/hero/marco-simone-quiz-golf-background.jpg');
}
/* Variante pagine informative (privacy, contatti) */
.qg-page-hero--info {
    background-image:
        linear-gradient(to right, rgba(30,30,30,0.95) 0%, rgba(30,30,30,0.80) 55%, rgba(30,30,30,0.15) 100%),
        url('/assets/hero/marco-simone-quiz-golf-background.jpg');
}

/* C2 (Cluster D, feedback Carlo): pannello risultato finale quiz multi-domanda.
   Iniettato via JS showQuizCompletion() in quiz_libero.php / quiz_tematico.php. */
.qg-quiz-summary {
    margin-top: 32px;
    padding: 32px;
    border-radius: 24px;
    border: 1px solid rgba(22, 54, 41, 0.12);
    background: linear-gradient(135deg, #f6faf6 0%, #ffffff 100%);
    box-shadow: 0 18px 42px rgba(17, 41, 31, 0.08);
}
.qg-quiz-summary__head { margin-bottom: 24px; }
.qg-quiz-summary__kicker {
    margin: 0 0 8px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(65, 72, 68, 0.78);
}
.qg-quiz-summary__head h2 {
    margin: 0;
    color: #06291d;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
}
.qg-quiz-summary__stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    border-radius: 16px;
    background: rgba(6, 41, 29, 0.06);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.qg-quiz-summary__score { display: flex; flex-direction: column; gap: 4px; }
.qg-quiz-summary__score-value {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    color: #06291d;
    line-height: 1;
}
.qg-quiz-summary__score-label {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: #414844;
}
.qg-quiz-summary__percent {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(2.4rem, 4.5vw, 3.2rem);
    font-weight: 800;
    /* V.3.117: consolidamento palette verdi — era #1e3f32 orphan,
       ora var(--qg-primary) per riusare il token canonico (riduce da 4 a 3 verdi). */
    color: var(--qg-primary);
}
.qg-quiz-summary__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* C1 (Cluster E, feedback Carlo): tipografia + image policy quiz.
   Domanda non e' piu un heading visivo gigante; immagini contenute
   con contain (no upscaling forzato che renderebbe sfocate le foto a bassa
   risoluzione, come segnalato da Carlo). */
.qg-quiz-question {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.45;
    color: #06291d;
    margin: 0;
}
.qg-quiz-question p { margin: 0 0 12px; }
.qg-quiz-question p:last-child { margin-bottom: 0; }
.qg-quiz-media img {
    width: 100%;
    max-width: 720px;
    max-height: 480px;
    height: auto;
    object-fit: contain;
    object-position: center center;
    margin-inline: auto;
    background: #f4f4f1;
}

/* C3 (Cluster F, feedback Carlo): counter live durante il quiz.
   "X esatte / Y affrontate (test di N domande)" - corregge il vecchio
   testo "1 errata su 9" che mostrava il totale invece delle domande
   gia affrontate. Aggiornato via JS in quiz_libero.php / showAnswer. */
.qg-quiz-live-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(6, 41, 29, 0.06);
    color: #06291d;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
}
.qg-quiz-live-counter__correct,
.qg-quiz-live-counter__answered { font-weight: 800; }
.qg-quiz-live-counter__total { color: rgba(65, 72, 68, 0.78); font-weight: 500; }

/* U4 (Cluster F, Audit UI/UX): titolo H2 di sezione semantico per pagine
   pareri.php / curiosity.php che avevano solo H1 hero senza H2 di sezione. */
.qg-section-title {
    margin: 0 0 18px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    color: #06291d;
    line-height: 1.1;
}

/* U13 (Cluster F, feedback utente + memoria viewport-guidelines): media query
   verticale per altezze >= 900px (laptop alti + desktop full HD). Evita
   white space sotto la sidebar fissa e distribuisce gli spazi proporzionalmente. */
@media (min-height: 900px) {
    .qg-stitch-sidebar__cta-group { gap: 12px; }
    .qg-page-hero { min-height: clamp(280px, 32vh, 480px); }
    .qg-page-container { padding-block: clamp(40px, 5vh, 80px); }
}

/* U3 (Cluster E): baseline prefers-reduced-motion.
   Per utenti che hanno disattivato animazioni nel sistema operativo,
   tutte le transition/animation/scroll-behavior diventano (quasi) istantanee.
   Risolve a11y issue dall'audit UI/UX (durata animazioni Tailwind 700ms,
   transizioni galleria, slideToggle jQuery non rispettavano prefers-reduced-motion). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* C9 (Carlo, Tier 3): chip-group scope ricerca.
   Usato sopra il form di ricerca in ricerca.php e nel search box homepage.
   Le 5 categorie standard sono: Tutto, Definizioni, Regole, Pareri, Curiosità.
   Default selected: Tutto. */
.qg-search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    align-items: center;
}

.qg-search-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--on-surface, #1f1f1f) 14%, transparent);
    background: var(--surface-container-low, #f4f4f4);
    color: var(--on-surface-variant, #4a4a4a);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
    white-space: nowrap;
}

.qg-search-chip:hover,
.qg-search-chip:focus-visible {
    background: var(--surface-container, #ececec);
    color: var(--on-surface, #1f1f1f);
    border-color: color-mix(in srgb, var(--primary, #06291d) 30%, transparent);
    outline: none;
}

.qg-search-chip--active {
    background: var(--primary, #06291d);
    color: var(--on-primary, #ffffff);
    border-color: var(--primary, #06291d);
    font-weight: 700;
}

.qg-search-chip--active:hover,
.qg-search-chip--active:focus-visible {
    background: color-mix(in srgb, var(--primary, #06291d) 90%, #000);
    color: var(--on-primary, #ffffff);
    border-color: var(--primary, #06291d);
}

/* Variante homepage compatta (chip leggermente più piccoli per non rubare spazio al card). */
.qg-search-chips--home .qg-search-chip {
    padding: 5px 11px;
    font-size: 0.75rem;
}

/* ============================================================
 * Form Contatti (V.3.96 — CONTATTO: site/contatti.php)
 * ============================================================ */

/* Honeypot: nascosto a utenti umani ma compilabile da bot.
 * Off-screen + aria-hidden via PHP. */
.qg-contact-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.qg-contact-form {
    max-width: 640px;
}

.qg-contact-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qg-contact-label {
    font-family: var(--font-headline, "Poppins", sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--qg-on-surface, #1a1c1b);
    letter-spacing: -0.01em;
}

.qg-contact-label span[aria-hidden="true"] {
    color: #d4a017;
    margin-left: 2px;
}

.qg-contact-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e0d9c9;
    border-radius: 10px;
    background: #fff;
    color: var(--qg-on-surface, #1a1c1b);
    font-family: var(--font-body, "Source Sans 3", system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}

.qg-contact-input:hover {
    border-color: #c5bca5;
}

.qg-contact-input:focus {
    outline: none;
    border-color: #06291d;
    box-shadow: 0 0 0 3px rgba(6, 41, 29, 0.12);
}

.qg-contact-input:invalid:not(:placeholder-shown) {
    border-color: #b5402a;
}

/* V.3.117 P2-05: il bordo rosso :invalid si attivava al primo render perché
   gli input required non avevano placeholder, quindi :placeholder-shown non
   matchava mai e :invalid:not(:placeholder-shown) era sempre true. Soluzione:
   aggiunto placeholder=" " agli input (cfr. contatti.php), così
   :placeholder-shown matcha quando vuoto e il rosso si attiva solo dopo che
   l'utente ha scritto qualcosa non valido. Backup moderno via :user-invalid
   (Safari 16.4+, Chrome 119+) per UX più precisa post-blur. */
.qg-contact-input:user-invalid {
    border-color: #b5402a;
}

.qg-contact-textarea {
    min-height: 140px;
    resize: vertical;
    font-family: var(--font-body, "Source Sans 3", system-ui, sans-serif);
}

.qg-contact-help {
    font-size: 0.8125rem;
    color: var(--qg-on-surface-variant, #6b7280);
    margin: 0;
    line-height: 1.5;
}

.qg-contact-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    margin-top: 8px;
}

@media (min-width: 640px) {
    .qg-contact-actions {
        flex-direction: row;
        align-items: center;
        gap: 18px;
    }
}

.qg-contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: #06291d;
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: var(--font-headline, "Poppins", sans-serif);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 2px 8px rgba(6, 41, 29, 0.18);
}

.qg-contact-submit:hover {
    transform: translateY(-1px);
    background: #0a3527;
    box-shadow: 0 4px 14px rgba(6, 41, 29, 0.24);
}

.qg-contact-submit:active {
    transform: translateY(0);
}

.qg-contact-submit:focus-visible {
    outline: 2px solid #06291d;
    outline-offset: 3px;
}

.qg-contact-submit .material-symbols-outlined {
    font-size: 1.125rem;
}

.qg-contact-note {
    font-size: 0.8125rem;
    color: var(--qg-on-surface-variant, #6b7280);
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

/* Banner errore (sopra il form). */
.qg-contact-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.qg-contact-alert .material-symbols-outlined {
    flex-shrink: 0;
    margin-top: 1px;
}

.qg-contact-alert--error {
    background: #fdecec;
    color: #7d2114;
    border: 1px solid #f4c0b6;
}

/* Success card (stato post-invio). */
.qg-contact-success {
    background: linear-gradient(135deg, #fff 0%, #f0f5f2 100%);
    border-left: 4px solid #06291d;
}

/* @media (prefers-reduced-motion) gia' coperto da reduce-motion baseline V.3.6 */

/* ============================================================
 * UX Audit V.3.96 — touch targets + heading hierarchy
 * ============================================================
 *
 * UX-1: touch targets sotto 44x44 (Apple HIG / WCAG 2.5.5).
 * Audit ha trovato 26/77 elementi cliccabili sotto soglia in home
 * (sidebar nav sub-items 38px, user menu items 36px, search chips 24px).
 * Fix: min-height 44px conservando il design visivo (centro verticale).
 */

.qg-search-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Variante home compatta: chip leggermente piu' piccoli ma sempre 44px tap area
   via padding verticale extra. Il visual rimane snello, il tap area cresce. */
.qg-search-chips--home .qg-search-chip {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.qg-stitch-sidebar__nav-subitem {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.qg-user-menu__item {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* UX-2: gerarchia heading nelle 4 card "I nostri strumenti" home.
 * I <h3> ereditavano stile default 16px peso 400 (= un <p> qualunque).
 * Senza visual hierarchy le card si leggono come muro di testo.
 * Fix: 20px peso 700 in linea con la scala headline Stitch. */
.qg-home-tool-v2 h3 {
    font-family: var(--font-headline, "Plus Jakarta Sans", sans-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--qg-on-surface, #1a1c1b);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

/* UX-7: scala H2 — "Cerca tra i contenuti" promosso a h3 in index.php
   (era widget header, non sezione). Le sezioni reali home (Quiz del Giorno,
   Newsletter, Contatto) restano <h2> 35.2px coerenti. */

/* ============================================================
 * UX Audit V.3.98 — H1 home fluid + Breadcrumb visivo
 * ============================================================ */

/* UX-5 + V.3.121 (Modern Platform): H1 home ridotto per variant C scelta da
 * design-shotgun. Era clamp(2.25rem, 4.5vw, 3.75rem) = 36→60px fluid. Ora
 * clamp(1.875rem, 3.5vw, 2.5rem) = 30→40px fluid (-33% max). Razionale:
 * la hero gigante (60px H1 + altezza ~660px) rubava spazio above-the-fold
 * sul laptop standard 1366x768 e imponeva un "claim" bombastico mal calibrato
 * per audience matura content-driven. Hero ora misurata, search pop-out
 * (.qg-home-utility-card--full) prende prominenza compositiva forte. */
body h1.qg-home-hero__h1 {
    font-size: clamp(1.875rem, 3.5vw, 2.5rem); /* 30px → 40px fluid */
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* UX-4: Breadcrumb visivo cliccabile per pagine con $qg_stitch_breadcrumbs.
 * Replaces "section / titlebar" decorativo con vera gerarchia navigabile.
 * Le 10 pagine che gia' definiscono $qg_stitch_breadcrumbs (guida-regole,
 * pareri, ricerca, regole_tree, curiosity, quiz_singolo, quiz_tematico,
 * quiz_per_definizione, regole-del-golf) lo guadagnano automaticamente. */
.qg-stitch-breadcrumb--list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.qg-stitch-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-headline, "Plus Jakarta Sans", sans-serif);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.qg-stitch-breadcrumb__item a {
    color: var(--qg-on-surface-variant, #4c616c);
    text-decoration: none;
    padding: 6px 4px;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.qg-stitch-breadcrumb__item a:hover,
.qg-stitch-breadcrumb__item a:focus-visible {
    color: var(--qg-primary, #06291d);
    background: rgba(6, 41, 29, 0.06);
    outline: none;
}

.qg-stitch-breadcrumb__item strong {
    color: var(--qg-primary, #06291d);
    font-weight: 700;
    padding: 6px 4px;
}

.qg-stitch-breadcrumb__sep {
    margin: 0 4px;
    color: var(--qg-on-surface-variant, #6b7280);
    opacity: 0.5;
    font-weight: 400;
    user-select: none;
}

/* ============================================================
 * V.3.117 P1-04: Touch targets WCAG 2.5.5 (min 44x44 px)
 * Findings design-review:
 * - sidebar nav-item / nav-link → 41px alti
 * - footer link → 17px alti (!)
 * - topbar search/user-menu icon-btn → 24x24 px
 * ============================================================ */

/* Sidebar — main nav item link (top-level) */
.qg-stitch-sidebar__nav-item,
.qg-stitch-sidebar__nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Sidebar — CTA bottoni "Sottoponici un quesito" + "Iscriviti newsletter" */
.qg-stitch-sidebar__cta {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Topbar — icon buttons (search + user menu) */
.qg-stitch-topbar__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* Footer — list link tap area (era 17px alti, ora 44 via padding-block) */
.qg-stitch-footer nav ul a {
    display: inline-block;
    padding-block: 12px;
    min-height: 44px;
    line-height: 1.6;
}

/* ============================================================
 * V.3.121 — Hero "Modern Platform" feel (variant C scelta da design-shotgun)
 * Razionale: hero compatta + search box pop-out come elemento compositivo
 * dominante. Stile editoriale Vercel/Linear/Stripe Docs.
 * ============================================================ */

/* Hero altezza CAPPATA + content centrato verticalmente.
   V.3.124: cap esplicito perché il content cresceva oltre il previsto
   (min-height implicit 607px → hero 703px). Ora hero clamp 380-460px
   responsive con content flex-center per evitare top/bottom whitespace
   eccessivo. */
.qg-home-hero {
    min-height: clamp(360px, 32vw, 420px) !important;
    display: flex !important;
    align-items: center;
    /* V.3.128: padding-bottom esteso per riservare spazio all'overlap della
       search box (margin-top: -100px) ed evitare che copra i CTA della hero. */
    padding-block: 24px 110px;
}
@media (min-width: 768px) {
    .qg-home-hero { padding-block: 32px 120px; }
}
.qg-home-hero__content {
    padding-block: 0;
}

/* Riduzione spaziatura tra elementi della copy (overrides Tailwind space-y-6 = 24px) */
.qg-home-hero__copy > * + * { margin-top: 12px; }
.qg-home-hero__copy h1 + p { margin-top: 14px; }
.qg-home-hero__copy .flex { padding-top: 6px !important; } /* CTA group */

/* Search box pop-out: overlap visivo con la hero (~100px su desktop) +
   width ridotta laterale per effetto card "che fluttua" sulla hero.
   V.3.122: !important su margin-top per battere Tailwind .space-y-12.
   V.3.123: aggiunto inset laterale 48px + shadow drammatica per effetto
   premium tipo Vercel/Stripe (card che "stacca" sia verticalmente sia
   orizzontalmente dalla hero). */
@media (min-width: 768px) {
    .qg-home-utility-card.qg-home-utility-card--full {
        margin-top: -100px !important;
        margin-inline: 48px !important;
        position: relative;
        z-index: 5;
        box-shadow:
            0 30px 60px -18px rgba(0, 0, 0, 0.22),
            0 12px 24px -10px rgba(0, 0, 0, 0.10),
            0 2px 4px rgba(0, 0, 0, 0.04);
    }
}
/* Mobile: niente overlap né inset (occupa full width in stack) */
@media (max-width: 767px) {
    .qg-home-utility-card.qg-home-utility-card--full {
        margin-top: 0 !important;
        margin-inline: 0 !important;
    }
}

/* ===========================================================================
   V.3.155 - Griglia delle foto dei campi (V.3.159: spostata in galleria.php)
   ---------------------------------------------------------------------------
   Griglia delle foto dei circoli (tabella `foto`, tipo 'Immagini dai campi').
   Niente utility Tailwind per le colonne: `stitch.min.css` e' purgato e le
   classi md:grid-cols-* non esistono (vedi stitch_footer.php V.3.138). Le
   colonne sono quindi dichiarate qui con media query esplicite.
   Si usano le miniature 300x225 con aspect-ratio 4/3: width/height sono
   dichiarati anche in HTML per non far ballare il layout mentre caricano.
   =========================================================================== */
.qg-campi-section {
    display: block;
}

.qg-campi-head {
    margin-bottom: 18px;
}

.qg-campi-head__kicker {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(65, 72, 68, 0.6);
}

.qg-campi-head h2 {
    margin: 0 0 8px;
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #06291d;
}

.qg-campi-head__desc {
    margin: 0;
    max-width: 52ch;
    font-size: 0.98rem;
    line-height: 1.5;
    color: rgba(65, 72, 68, 0.85);
}

.qg-campi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 640px) {
    .qg-campi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .qg-campi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.qg-campi-grid__item {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #fff;
    border: 1px solid rgba(27, 77, 62, 0.10);
    border-radius: 14px;
    overflow: hidden;
}

.qg-campi-grid__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: rgba(27, 77, 62, 0.06); /* placeholder mentre carica */
}

.qg-campi-grid__caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 12px;
}

.qg-campi-grid__name {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    color: #06291d;
}

.qg-campi-grid__credit {
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(65, 72, 68, 0.65);
}

/* ---------------------------------------------------------------------------
   V.3.159 - Foto di chiusura della home
   Una sola immagine grande, sorteggiata dal PHP fra quelle ad alta
   risoluzione, con il nome del circolo e il rimando alla galleria completa.
   Nessun JavaScript: niente rotazione, niente slide sovrapposte.
   --------------------------------------------------------------------------- */
.qg-home-campo__figura {
    position: relative;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(27, 77, 62, 0.10);
    background: rgba(27, 77, 62, 0.06);
    aspect-ratio: 21 / 9;
}

@media (max-width: 639px) {
    .qg-home-campo__figura { aspect-ratio: 3 / 2; }
}

.qg-home-campo__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qg-home-campo__didascalia {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 46px 20px 18px;
    background: linear-gradient(to top, rgba(6, 41, 29, 0.82) 0%, rgba(6, 41, 29, 0) 100%);
}

.qg-home-campo__kicker {
    margin: 0 0 2px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.qg-home-campo__nome {
    color: #fff;
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.qg-home-campo__nota {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.74rem;
    line-height: 1.35;
}

.qg-home-campo__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 10px;
    /* V.3.160: 44px di altezza minima, la soglia per i target touch gia'
       adottata dal progetto nell'audit UI (PR #7, tab della galleria).
       Il solo padding portava il bottone a 36px. */
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #06291d;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 160ms ease;
}

.qg-home-campo__cta:hover,
.qg-home-campo__cta:focus-visible {
    background: #fff;
}