/* ============================================================================
   Montesino — mobile.css
   Caricato dopo style.css. Attivo solo sotto 768px.
   ============================================================================ */

@media (max-width: 768px) {

    /* ============ 0) HEADER MOBILE — search nascosta, logo full su menu open ============ */
    .header__search {
        display: none !important;
    }
    /* Quando menu mobile aperto: header sticky e logo word sempre visibile */
    body.mobile-menu-open .header {
        z-index: 1100 !important;
    }
    body.mobile-menu-open .header__logo-word {
        opacity: 1 !important;
        transform: translate(0, -50%) !important;
    }
    /* Burger sopra il menu (per consentire toggle) */
    .header__burger {
        z-index: 1101 !important;
    }
    /* Mobile-menu header: nascondo logo + close interni (ne abbiamo già nel header globale e burger) */
    .mobile-menu__header {
        display: none !important;
    }
    .mobile-menu {
        padding-top: var(--header-height, 72px) !important;
    }

    /* ============ 0B) MOBILE-MENU COLLAPSABLE GROUPS ============ */
    .mobile-menu__group--collapsable .mobile-menu__group-label {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        cursor: pointer !important;
        padding: 0.85rem 0 !important;
        position: relative !important;
        user-select: none;
    }
    /* Chevron a destra: icon di "+" che diventa "−" quando aperto */
    .mobile-menu__group--collapsable .mobile-menu__group-label::after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FF6633' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transition: transform 0.25s ease;
        flex-shrink: 0;
        margin-left: 1rem;
    }
    .mobile-menu__group--collapsable.is-open .mobile-menu__group-label::after {
        transform: rotate(180deg);
    }
    /* Group content: hidden by default, shown when is-open */
    .mobile-menu__group--collapsable .mobile-menu__group-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }
    .mobile-menu__group--collapsable.is-open .mobile-menu__group-content {
        max-height: 800px;
    }

    /* ============ 1) PADDING & SPACING UNIFORMI ============ */
    .section__container,
    .header__container,
    .practice-hero__container,
    .practice-hub__container,
    .uhnwi-hero__container,
    .uhnwi-hub__container,
    .insights-hero__container,
    .insight-article__container,
    .footer__container,
    .tr-hero__container,
    .practice-subnav__container,
    .credibility-band__container,
    .tall-cards-section__container,
    .hero__container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        max-width: 100% !important;
    }
    .section,
    .section--alt {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    .section__header,
    .section__header-main,
    .tall-cards-section__header {
        padding: 0 !important;
        margin-left: 0 !important;
        grid-template-columns: 1fr !important;
        display: block !important;
    }
    .section__header > *,
    .tall-cards-section__header > * {
        margin-left: 0 !important;
    }
    .section__title,
    .tall-cards-section__title {
        font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
        margin: 0.5rem 0 1rem !important;
    }
    .section__intro,
    .section__lead {
        font-size: 1rem !important;
        line-height: 1.55 !important;
        margin-bottom: 2rem !important;
    }
    .hero__title {
        font-size: clamp(2.5rem, 11vw, 4rem) !important;
        line-height: 0.95 !important;
    }
    .hero__lead {
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }

    /* ============ 2) TALL-CARDS GRID (homepage practice + insights) ============ */
    /* Container .tall-cards ospita sia .practice-tile che .insight-card */
    .tall-cards,
    .tall-cards--list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.08);
    }

    /* ============ 2A) PRACTICE-TILE → GRID VISUALE 2×4 ============ */
    .tall-cards--8 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        border-top: 0 !important;
        counter-reset: practice-tile-counter;
    }
    .practice-tile {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: #0a0a0a !important;
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 4px !important;
    }
    /* Background image visibile su mobile, full cover, leggermente scurita */
    .practice-tile__bg {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        background-size: cover !important;
        background-position: center !important;
        opacity: 0.5 !important;
    }
    /* Overlay scuro per leggibilità del testo */
    .practice-tile__overlay {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.85) 100%) !important;
        opacity: 1 !important;
    }
    /* Canvas e glyph SVG nascosti su mobile (overhead inutile) */
    .practice-tile__canvas,
    .practice-tile__glyph {
        display: none !important;
    }
    /* Content posizionato in basso, padding interno */
    .practice-tile__content {
        position: absolute !important;
        inset: 0 !important;
        padding: 0.875rem !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        z-index: 2 !important;
    }
    /* Numero progressivo in alto a sinistra della card (specificità alzata per sovrascrivere style.css) */
    .tall-cards--8 .practice-tile::before {
        content: counter(practice-tile-counter, decimal-leading-zero) !important;
        counter-increment: practice-tile-counter !important;
        position: absolute !important;
        inset: auto !important;
        top: 0.875rem !important;
        left: 0.875rem !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        font-family: var(--font-display) !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        color: var(--color-accent) !important;
        letter-spacing: 0.12em !important;
        opacity: 1 !important;
        z-index: 3 !important;
        pointer-events: none !important;
    }
    .practice-tile__title {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.01em !important;
        color: #fff !important;
        margin: 0 !important;
        position: static !important;
    }
    /* Descrizione e CTA testuale nascoste nelle card visuali (la pagina dettaglio le mostra) */
    .practice-tile__desc,
    .practice-tile__cta {
        display: none !important;
    }
    /* Niente freccia ::after nelle card visuali (ridondante con tap target completo) */
    .practice-tile::after {
        content: none !important;
    }

    /* ============ 2B) INSIGHT-CARD → LISTA COMPATTA ============ */
    /* Override .insights-page (parent diretto delle card) da grid 2-col a singola colonna */
    .insights-page {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        row-gap: 0 !important;
    }
    .insight-card {
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 1.25rem 0 !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        overflow: visible !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    .insight-card__bg,
    .insight-card__canvas,
    .insight-card__glyph {
        display: none !important;
    }
    .insight-card__content {
        position: static !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.4rem !important;
    }
    .insight-card__tag {
        display: inline-block !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        color: var(--color-accent) !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    .insight-card__title {
        font-size: 1rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: -0.005em !important;
        color: #fff !important;
        margin: 0 !important;
    }
    .insight-card__desc,
    .insight-card__cta {
        display: none !important;
    }
    /* Freccia → a destra di ogni card insight */
    .insight-card::after {
        content: '→' !important;
        color: var(--color-accent) !important;
        font-size: 1.1rem !important;
        opacity: 0.7 !important;
        align-self: center !important;
    }
    /* Border-top sulla prima card per chiusura visiva sopra */
    .insights-page .insight-card:first-child {
        border-top: 1px solid rgba(255,255,255,0.08) !important;
    }

    /* ============ 3) TR-CARD (track record) ============ */
    .tr-grid-v2,
    .tr-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .tr-card {
        min-height: 0 !important;
        padding: 1.5rem 0 !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        border-left: 0 !important;
        gap: 0.5rem !important;
    }
    .tr-card::before { display: none !important; }
    .tr-card__title {
        font-size: 1rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: #fff !important;
    }
    .tr-card__desc {
        opacity: 1 !important;
        font-size: 0.85rem !important;
        line-height: 1.55 !important;
        color: rgba(255,255,255,0.65) !important;
        margin-top: 0.25rem !important;
    }
    .tr-card__meta {
        margin-top: 0.5rem !important;
        padding-top: 0.5rem !important;
        border-top: 0 !important;
    }
    .tr-card__meta-info {
        font-size: 0.7rem !important;
    }
    .tr-card__meta-logo {
        display: none !important;
    }
    .tr-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .tr-card:hover .tr-card__title {
        color: #fff !important;
    }
    .tr-card:hover .tr-card__desc {
        color: rgba(255,255,255,0.65) !important;
    }

    /* TR Hero */
    .tr-hero__title {
        font-size: clamp(2.25rem, 9vw, 3.5rem) !important;
        line-height: 1.05 !important;
    }
    .tr-hero__eyebrow {
        font-size: 0.75rem !important;
    }
    .tr-hero__lead {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
    }

    /* ============ 3B) CASE-CARD (sezione "Casi" delle pagine practice) ============ */
    .cases-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .case-card {
        padding: 1.5rem 0 !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .case-card__visual,
    .case-card__canvas {
        display: none !important;
    }
    .case-card__body {
        padding: 0 !important;
    }
    .case-card__sector {
        font-size: 0.7rem !important;
        margin-bottom: 0.25rem !important;
    }
    .case-card__title {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }
    .case-card__desc {
        font-size: 0.85rem !important;
        line-height: 1.55 !important;
        margin-top: 0.25rem !important;
    }
    .case-card__meta {
        font-size: 0.7rem !important;
        margin-top: 0.5rem !important;
    }

    /* ============ 4) PEOPLE GRID ============ */
    .people-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .person-card {
        text-align: left !important;
        display: grid !important;
        grid-template-columns: 80px 1fr !important;
        grid-template-rows: auto auto auto !important;
        align-items: center !important;
        column-gap: 1rem !important;
        row-gap: 0.25rem !important;
    }
    .person-card__avatar,
    .person-card__portrait,
    .person-card__photo {
        width: 80px !important;
        height: 80px !important;
        margin: 0 !important;
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
    }
    .person-card__name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        text-align: left !important;
        align-self: end !important;
    }
    .person-card__role {
        grid-column: 2 !important;
        grid-row: 2 !important;
        text-align: left !important;
        align-self: start !important;
    }
    .person-card__bio {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        margin-top: 0.5rem !important;
        font-size: 0.9rem !important;
        text-align: left !important;
    }

    /* ============ 5) PRACTICE/UHNWI GRIDS ============ */
    .practice-grid,
    .sector-card-grid,
    .uhnwi-grid,
    .practice-hub-grid,
    .corporate-finance-hub__grid,
    .uhnwi-hub__grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .practice-card,
    .sector-card,
    .uhnwi-card {
        padding: 1.25rem !important;
    }

    /* ============ 6) FOOTER ============ */
    .footer__grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .footer__bottom {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: flex-start !important;
    }

    /* ============ 7) PRACTICE/UHNWI HERO TITLES ============ */
    .practice-hero__title,
    .uhnwi-hero__title,
    .insights-hero__title {
        font-size: clamp(2rem, 9vw, 3rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.025em !important;
    }
    .practice-hero__lead,
    .uhnwi-hero__lead {
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }
    .practice-hero__tagline,
    .uhnwi-hero__tagline {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }

    /* ============ 8) SUBNAV INTERNA PRACTICE ============ */
    .practice-subnav__nav {
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 1.25rem !important;
        scrollbar-width: none !important;
    }
    .practice-subnav__nav::-webkit-scrollbar { display: none; }
    .practice-subnav__link {
        font-size: 0.7rem !important;
        flex-shrink: 0 !important;
    }

    /* ============ 9) METHOD PILLARS ============ */
    .method-grid,
    .method-pillars {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* ============ 10) PRACTICE-TEAM-CARD ============ */
    .practice-team-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .practice-team-card {
        display: grid !important;
        grid-template-columns: 70px 1fr !important;
        align-items: center !important;
        gap: 1rem !important;
        text-align: left !important;
    }
    .practice-team-card__portrait {
        width: 70px !important;
        height: 70px !important;
        margin: 0 !important;
    }
    .practice-team-card__name,
    .practice-team-card__role {
        text-align: left !important;
    }
    .practice-team-card__bio {
        grid-column: 1 / -1 !important;
        margin-top: 0.5rem !important;
        font-size: 0.85rem !important;
        text-align: left !important;
    }

    /* ============ 11) CREDIBILITY BAND (homepage) ============ */
    .credibility-band {
        padding: 3rem 0 !important;
    }
    .credibility-band__grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .credibility-band__title {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    .credibility-band__lead {
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }

    /* ============ 13) DEAL-DETAIL (pagina singolo deal) ============ */
    .deal-detail__container {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .deal-detail__logo-card {
        max-width: 200px !important;
        margin: 0 auto !important;
    }
    .deal-detail__logo-placeholder {
        font-size: 3rem !important;
        padding: 2rem !important;
    }
    .deal-detail__meta-row {
        grid-template-columns: 80px 1fr !important;
    }

    /* ============ 14) CORPORATE FINANCE / UHNWI HUB PAGES ============ */
    .practice-hub-hero,
    .uhnwi-hub-hero {
        padding-top: calc(var(--header-height) + 1.5rem) !important;
        padding-bottom: 2rem !important;
    }
    .practice-hub-hero__title,
    .uhnwi-hub-hero__title {
        font-size: clamp(2.25rem, 9vw, 3rem) !important;
        line-height: 1.05 !important;
    }
    .practice-hub-client-card,
    .uhnwi-hub-client-card {
        padding: 1.25rem !important;
    }
    .practice-hub-client-card__title,
    .uhnwi-hub-client-card__title {
        font-size: 1.1rem !important;
    }
    .practice-hub-client-card__desc,
    .uhnwi-hub-client-card__desc {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    .practice-hub-principle,
    .uhnwi-hub-principle {
        padding: 1rem !important;
    }
    .practice-hub-principle__title,
    .uhnwi-hub-principle__title {
        font-size: 1rem !important;
    }
    .practice-hub-principle__desc,
    .uhnwi-hub-principle__desc {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    .practice-hub-sector,
    .uhnwi-hub-sector {
        padding: 1rem !important;
    }
    /* ============ 15) PEOPLE-HERO ============ */
    .people-hero {
        min-height: 0 !important;
        padding: calc(var(--header-height) + 2rem) 1.25rem 2rem !important;
    }
    .people-hero__title {
        font-size: clamp(2.25rem, 9vw, 3rem) !important;
        line-height: 1.05 !important;
    }
    .people-hero__lead {
        font-size: 1rem !important;
        line-height: 1.55 !important;
        margin-top: 1.5rem !important;
    }
    .people-hero__head {
        display: block !important;
    }
    .people-hero__values {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        margin-top: 2.5rem !important;
    }
    .people-hero__value-num {
        font-size: 0.85rem !important;
    }
    .people-hero__value-title {
        font-size: 1.05rem !important;
    }
    .people-hero__value-desc {
        font-size: 0.9rem !important;
    }



    
    /* ============ MOBILE-MENU LEGAL FOOTER (Note Legali / Privacy / Cookie) ============ */
    .mobile-menu__legal {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--color-border);
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.25rem;
    }
    .mobile-menu__legal-link {
        font-size: 0.75rem;
        color: var(--color-text-dim);
        text-decoration: none;
        padding: 0.25rem 0;
        font-family: var(--font-body);
    }
    .mobile-menu__legal-link:hover {
        color: var(--color-accent);
    }

/* ============ 18) HEADER: logo intero quando mobile menu aperto ============ */
    body.mobile-menu-open .header__logo-word {
        opacity: 1 !important;
        transform: translate(0, -50%) !important;
    }
    /* Header rimane sticky/visibile sopra il drawer (z-index più alto del menu) */
    body.mobile-menu-open .header {
        z-index: 2100 !important;
    }
    /* Nascondiamo il logo dentro il drawer perché ora lo mostriamo nell'header */
    body.mobile-menu-open .mobile-menu__logo {
        display: none !important;
    }
    /* Spostiamo il pulsante chiudi al posto giusto */
    .mobile-menu__header {
        justify-content: flex-end !important;
    }

}