/* ============================================================================
   PARTNER DI CONTENUTO — verde9.com e Takadotoki
   Segnalazione Federico #33. Estratto da homepage-v2.css il 09/09/2026, quando
   la sezione e' passata dalla sola home a tutte le pagine di contenuto: il CSS
   della home e' caricato solo dalla home, questo invece serve ovunque.
   Caricato da includes/meta.php. Il markup sta in includes/riga_partner.php.
   ============================================================================ */

/* ---------- verde9.com — fascia a tutta larghezza, colori del loro marchio ----------
   I colori NON vengono dal CSS del loro tema (li avevo presi da li' la prima volta e
   erano secondari): sono campionati dal LORO LOGO e dalla loro icona social —
   verde #009540 e oro #f0a000, le due tinte del marchio "VERDE 9".
   Lo sfondo e' una loro illustrazione (la tavola degli schemi mimetici della
   Luftwaffe), ritagliata sotto il titolo e portata a 1400px in webp: 37 KB.
   Sopra ci va un velo verde scuro, altrimenti il testo non si legge. */
.v9-section {
    --v9:       #009540;
    --v9-scuro: #05421f;
    --v9-oro:   #f0a000;
    position: relative;
    isolation: isolate;
    padding: 52px 0;
    margin: 34px 0 0;
    overflow: hidden;
    background: var(--v9-scuro);
}
/* Lo sfondo sta in un elemento suo e non in background della section: cosi' la
   trama puo' essere velata senza toccare l'opacita' del testo. */
.v9-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(105deg, rgba(5,66,31,.94) 0%, rgba(5,66,31,.80) 46%, rgba(0,149,64,.62) 100%),
        url('/media/images/homepage/banners/verde9_sfondo.webp');
    background-size: cover;
    background-position: center;
}

.v9-inner {
    display: flex;
    align-items: center;
    gap: 44px;
}
.v9-main { flex: 1 1 auto; min-width: 0; }
.v9-side { flex: 0 0 auto; }

/* Targa chiara sotto il logo: il "9" del marchio e' verde e sul fondo verde sparirebbe. */
.v9-nome {
    display: inline-block;
    margin: 0 0 12px;
    line-height: 0;
    background: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.v9-logo { width: 158px; height: auto; max-width: 100%; display: block; }

.v9-tagline {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--v9-oro);
    letter-spacing: .2px;
}
.v9-desc {
    margin: 0 0 16px;
    font-size: 15.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .93);
    max-width: 76ch;
}

/* Le quattro sezioni del loro menu: dicono in un colpo d'occhio di cosa si occupano. */
.v9-temi { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v9-temi li {
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    padding: 5px 13px;
}

/* Bottone nell'oro del logo: e' l'altra tinta del loro marchio. */
.v9-btn {
    display: inline-block;
    background: var(--v9-oro);
    color: #2b1c00;
    font-weight: 800;
    font-size: 15.5px;
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.v9-btn:hover, .v9-btn:focus-visible {
    background: #ffb520;
    color: #2b1c00;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
}

/* ---------- Takadotoki — stessa fascia di verde9, colori suoi ----------
   Colori campionati dal LORO logo (l'aquila): nero dominante e arancione #e8480c.
   Sfondo: una loro copertina video gia' presente nel sito da prima
   (media/images/homepage/video_takadotoki_anteprima.webp, il diorama del Vampire
   svizzero), ritagliata nella sola fascia centrale — sopra e sotto c'erano i testi
   sovrimpressi "AIRPLANE MODELS" e "SHOWCASE MAY 2025", e una data del 2025 su una
   pagina del 2026 invecchia male. Da 82 KB a 52 KB in webp.
   NB: quello che NON torna sono il video incorporato e i contatori di follower —
   Andrea li ha fatti togliere il 09/09 e non rientrano da questa porta. */
.tk-section {
    --tk:       #e8480c;
    --tk-scuro: #14100e;
    position: relative;
    isolation: isolate;
    padding: 46px 0;
    margin: 0 0 34px;
    overflow: hidden;
    background: var(--tk-scuro);
}
.tk-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        /* Il velo resta scuro anche a destra: la foto li' e' chiara e il bottone
           arancione ci si perdeva sopra. L'arancione del marchio e' un'unghiata, non un lavaggio. */
        linear-gradient(100deg, rgba(20,16,14,.96) 0%, rgba(20,16,14,.90) 52%, rgba(60,26,10,.86) 100%),
        url('/media/images/homepage/banners/takadotoki_sfondo.webp');
    background-size: cover;
    background-position: center 42%;
}

.tk-inner { display: flex; align-items: center; gap: 44px; }
.tk-main  { flex: 1 1 auto; min-width: 0; }
.tk-side  { flex: 0 0 auto; }

.tk-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
/* Il logo e' un tondo dentro un quadrato bianco: senza il ritaglio circolare, sul
   fondo scuro si vedrebbe il quadrato. */
.tk-logo {
    flex: 0 0 auto;
    width: 92px; height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, .9);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .38);
}
.tk-heading { min-width: 0; }
.tk-nome {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: .3px;
}
.tk-tagline {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--tk);
}
.tk-desc {
    margin: 0 0 16px;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
    max-width: 76ch;
}

.tk-social { display: flex; gap: 10px; }
.tk-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.tk-link:hover, .tk-link:focus-visible {
    background: var(--tk);
    border-color: var(--tk);
    color: #fff;
    transform: translateY(-2px);
}

.tk-btn {
    display: inline-block;
    background: var(--tk);
    color: #fff;
    font-weight: 800;
    font-size: 15.5px;
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.tk-btn:hover, .tk-btn:focus-visible {
    background: #ff5a1a;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .36);
}

@media (max-width: 991px) {
    .v9-inner, .tk-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
    .v9-side,  .tk-side  { width: 100%; }
    .v9-btn,   .tk-btn   { display: block; text-align: center; }
}
@media (max-width: 575px) {
    .v9-section { padding: 34px 0; }
    .v9-logo    { width: 132px; }
    .v9-desc    { font-size: 14.5px; }
    .tk-section { padding: 32px 0; }
    .tk-logo    { width: 68px; height: 68px; }
    .tk-nome    { font-size: 24px; }
    .tk-desc    { font-size: 14.5px; }
}