/* ==========================================================================
   11 - HOMEPAGE (caricato solo su is_front_page)
   Dipende da: 01-global.css (variabili), 06-hero.css (hero + cards + btn)
   NON ridefinire classi già in 06-hero.css
   ========================================================================== */

/* ─── Etichetta sezione e titolo ─────────────────────────────────────────── */

.tf-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--tf-green);
    text-align: center;
    margin-bottom: 8px;
}
.tf-fh .tf-label,
.tf-cth .tf-label {
  color: var(--tf-green);
}

.tf-h2 {
    font-family: var(--tf-font-h);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    color: var(--tf-dark);
    text-align: center;
    margin: 0 0 1rem;
    line-height: 1.25;
}

/* ─── Trust Bar (widget below-content) ──────────────────────────────────── */

.tf-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border-bottom: 1px solid var(--tf-green-border);
}

.tf-trust-i {
    padding: 14px 18px;
    border-right: 1px solid var(--tf-green-border);
}

.tf-trust-i:last-child {
    border-right: none;
}

.tf-trust-t {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tf-dark);
    margin-bottom: 2px;
}

.tf-trust-d {
    font-size: 11.5px;
    color: var(--tf-muted);
    line-height: 1.45;
}

/* ─── Sezioni prodotti ───────────────────────────────────────────────────── */

.tf-pw {
    padding: 52px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background: #fff;
}

.tf-pw--pale {
    background: var(--tf-green-light);
}

.tf-seo-intro {
    text-align: center;
    color: var(--tf-muted);
    font-size: 15px;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 32px;
}

.tf-vaw {
    text-align: center;
    margin-top: 24px;
}

.tf-va {
    display: inline-block;
    border: 2px solid var(--tf-green);
    color: var(--tf-green);
    border-radius: var(--tf-radius-sm);
    padding: 11px 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--tf-transition);
}

.tf-va:hover {
    background: var(--tf-green);
    color: #fff;
}

/* ─── Separatore ─────────────────────────────────────────────────────────── */

.tf-sep {
    text-align: center;
    padding: 4px 0;
}

.tf-sep hr {
    border: none;
    border-top: 3px solid var(--tf-green);
    max-width: 60px;
    margin: 8px auto;
    border-radius: 2px;
}

/* ─── Sezione "I Nostri Punti di Forza" ──────────────────────────────────── */
/*
 * ATTENZIONE: usa .tf-strength-card, NON .tf-feat
 * .tf-feat è già usato in 07-blog-section.css per l'articolo in evidenza
 */

.tf-fw {
    background: var(--tf-green-light);
    padding: 60px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.tf-fh {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 36px;
}

.tf-fh h2 {
    font-family: var(--tf-font-h);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    color: var(--tf-dark);
    margin: 0 0 10px;
}

.tf-fh p {
    color: var(--tf-muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.tf-fgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.tf-strength-card {
    background: #fff;
    border-radius: var(--tf-radius);
    padding: 28px 22px;
    text-align: center;
    border: 1px solid var(--tf-green-border);
}

.tf-strength-card img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 16px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.tf-strength-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--tf-dark);
    margin: 0 0 10px;
}

.tf-strength-card p {
    font-size: 13.5px;
    color: var(--tf-muted);
    line-height: 1.6;
    margin: 0;
}

/* ─── Sezione contatti ───────────────────────────────────────────────────── */

.tf-ctw {
    background: #fff;
    padding: 60px 0;
}

.tf-cti {
    max-width: 700px;
    margin: 0 auto;
}

.tf-cth {
    text-align: center;
    margin-bottom: 28px;
}

.tf-cth h2 {
    font-family: var(--tf-font-h);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    color: var(--tf-dark);
    margin: 0 0 12px;
}

.tf-cth p {
    color: var(--tf-muted);
    line-height: 1.7;
    font-size: 15px;
    margin: 0;
}

.tf-ctb {
    padding: 0;
}

/* ─── Mobile (tutto in 1 colonna come richiesto) ─────────────────────────── */

@media (max-width: 767px) {

    /* Trust bar: 2x2 su mobile */
    .tf-trust {
        grid-template-columns: 1fr 1fr;
    }
    .tf-trust-i:nth-child(2) { border-right: none; }
    .tf-trust-i:nth-child(3) { border-top: 1px solid var(--tf-green-border); }
    .tf-trust-i:nth-child(4) { border-top: 1px solid var(--tf-green-border); border-right: none; }

    /* Sezioni */
    .tf-pw  { padding: 36px 0; }
    .tf-fw  { padding: 40px 0; }
    .tf-ctw { padding: 40px 0; }

    /* Features: 1 colonna */
    .tf-fgrid { grid-template-columns: 1fr; }

    /* Contact */
    .tf-ctb { padding: 20px 16px; }

    /* WooCommerce prodotti: 2 colonne su mobile */
    .woocommerce ul.products.columns-4,
    .woocommerce-page ul.products.columns-4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}