/* book-home-v2.css — restyling homepage libro IT + EN: software/plugin, interazioni pulsanti, banda grafiche interattive.
   Caricato dopo book-page-layout.css, book-page-ui.css e ig-hint.css (ne sovrascrive alcune regole). */

/* ── Token colore del capitolo Protocolli (viola) ── */
.section.purple { --accent: #9b59b6; --accent-rgb: 155, 89, 182; }

/* ── Software e plugin ── */
    .software-section { background: #f6f6f6; min-height: 0; }
    .software-section .software-color-bar { background: #bdbdbd; }
    .software-section .software-main { padding: 56px 50px 48px 40px; }
    .software-section h2 { font-size: 1.5rem; letter-spacing: .1em; color: #777; margin-bottom: 8px; }
    .software-intro { font-size: 1rem; color: #777; margin-bottom: 32px; }
    .software-section .software-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px 50px; }
    .software-section .software-card { align-items: flex-start; }
    .software-section .software-card-content { flex-direction: column; align-items: flex-start; gap: 2px; }
    .software-section .software-card-content h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 4px; }
    .software-section .software-card-content h3 a:not(.tag-link) { color: #444; padding-bottom: 2px;
      background: linear-gradient(#e84393, #e84393) no-repeat 0 100% / 100% 2px; transition: background-size .25s var(--ease-out, ease); }
    .software-section .software-card-content h3 a:not(.tag-link):hover { background-size: 100% 5px; text-decoration: none; }
    .software-section .software-card-content p { font-size: .92rem; color: #666; line-height: 1.4; }
    .software-section .tutorial-link { margin-left: 8px; }
    .software-section .tutorial-link img { height: 22px; width: auto; opacity: .65; vertical-align: middle; }
    .software-section .tutorial-link:hover img { opacity: 1; }

    .software-section .software-card-content h3 a.tag-link { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px;
      padding: 4px 14px 4px 10px; background: #fff; border: 1.5px solid #4697f7; border-radius: 999px; color: #cc2b85;
      font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; line-height: 1.2; transition: background .15s, color .15s; }
    .software-section .software-card-content h3 a.tag-link svg { width: 20px; height: 20px; color: #4697f7; flex-shrink: 0; transition: color .15s; }
    .software-section .software-card-content h3 a.tag-link:hover { background: #4697f7; color: #fff; text-decoration: none; }
    .software-section .software-card-content h3 a.tag-link:hover svg { color: #fff; }

    .plugin-box { margin-top: 40px; border-top: 1px solid #ddd; padding-top: 20px; }
    .plugin-head { display: flex; align-items: center; justify-content: flex-start; gap: 28px; flex-wrap: wrap; }
    .plugin-toggle { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; display: flex; align-items: center; gap: 10px;
      font-size: 1rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .06em; }
    .plugin-toggle::before { content: "\25B8"; font-size: .9rem; transition: transform .2s; color: #888; }
    .plugin-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
    .plugin-toggle .plugin-count { font-weight: 400; color: #888; text-transform: none; letter-spacing: 0; }
    .plugin-body { padding: 20px 0 4px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 36px; align-items: start; }
    .plugin-body[hidden] { display: none; }
    .plugin-body h4 { font-size: .85rem; letter-spacing: .1em; color: #888; margin-bottom: 6px; }
    .plugin-body ul { list-style: none; padding: 0; margin: 0; font-size: .95rem; color: #555; line-height: 1.7; }
    .plugin-download { display: inline-flex; align-items: center; gap: 7px; padding: 4px 14px 4px 10px; background: #4697f7; color: #fff;
      border: 1.5px solid #4697f7; border-radius: 999px; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
      text-decoration: none; line-height: 1.2; transition: background .15s, color .15s; }
    .plugin-download svg { width: 20px; height: 20px; flex-shrink: 0; }
    .plugin-download:hover { background: #fff; color: #cc2b85; }
    .software-section .software-disclaimer { font-size: .8rem; margin-top: 32px; }
    @media (max-width: 768px) {
      .software-section .software-main { padding: 28px 20px; }
      .software-section .software-card { flex-direction: row; }
      .software-section .software-card-content { flex-direction: column; }
    }
  

/* ── Interazioni desktop dei pulsanti ── */
    :root { --ease-out: cubic-bezier(.22, 1, .36, 1); }

    /* Colori per famiglia di pulsante (--c = colore pieno) */
    .btn-slide { --c: #e84393; }
    .btn-interactive { --c: #3498db; }
    .btn-zip { --c: #999; }
    .software-section .software-card-content h3 a.tag-link,
    .plugin-download { --c: #4697f7; }

    :where(a, button):focus-visible { outline: 3px solid #3498db; outline-offset: 3px; border-radius: 6px; }

    @media (hover: hover) and (min-width: 769px) {

      /* 1. Pillole capitolo (SLIDE / INTERACTIVE / ZIP) e tag software: riempimento da sinistra (::after sul bordo esterno, senza cuciture) + lift */
      .chapter-row .btn-slide, .chapter-row .btn-interactive, .chapter-row .btn-zip { --bw: 3px; }
      .software-section .software-card-content h3 a.tag-link { --bw: 1.5px; }
      .chapter-row .btn-slide,
      .chapter-row .btn-interactive,
      .chapter-row .btn-zip,
      .software-section .software-card-content h3 a.tag-link {
        position: relative;
        isolation: isolate;
        transition: color .22s ease, transform .28s var(--ease-out), box-shadow .28s ease;
      }
      .chapter-row .btn-slide::after,
      .chapter-row .btn-interactive::after,
      .chapter-row .btn-zip::after,
      .software-section .software-card-content h3 a.tag-link::after {
        content: ""; position: absolute; inset: calc(-1 * var(--bw)); z-index: -1; pointer-events: none;
        border-radius: inherit; background: var(--c);
        clip-path: inset(0 100% 0 0);
        transition: clip-path .38s var(--ease-out);
      }
      .chapter-row .btn-slide:hover,
      .chapter-row .btn-interactive:hover,
      .chapter-row .btn-zip:hover,
      .chapter-row:has(.chapter-name:hover) .btn-slide,
      .chapter-row:has(.chapter-name:hover) .btn-interactive,
      .chapter-row:has(.chapter-name:hover) .btn-zip,
      .software-section .software-card-content h3 a.tag-link:hover {
        background: transparent;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px -8px var(--c);
      }
      .chapter-row .btn-slide:hover::after,
      .chapter-row .btn-interactive:hover::after,
      .chapter-row .btn-zip:hover::after,
      .chapter-row:has(.chapter-name:hover) .btn-slide::after,
      .chapter-row:has(.chapter-name:hover) .btn-interactive::after,
      .chapter-row:has(.chapter-name:hover) .btn-zip::after,
      .software-section .software-card-content h3 a.tag-link:hover::after { clip-path: inset(0 0 0 0); }
      .chapter-row .btn-slide:active,
      .chapter-row .btn-interactive:active,
      .chapter-row .btn-zip:active,
      .software-section .software-card-content h3 a.tag-link:active { transform: translateY(0) scale(.95); box-shadow: none; transition-duration: .08s; }

      /* 2. Titoli capitolo: sottolineatura che cresce da sinistra, senza text-decoration */
      .chapter-name, .section-links a:not(.ig-card):not(.btn-slide):not(.btn-interactive):not(.btn-zip) {
        background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 2px;
        padding-bottom: 2px;
        transition: background-size .38s var(--ease-out), color .2s ease, opacity .2s ease;
      }
      .chapter-name:hover, .chapter-row:has(.btn-slide:hover) .chapter-name,
      .chapter-row:has(.btn-interactive:hover) .chapter-name,
      .section-links a:not(.ig-card):not(.btn-slide):not(.btn-interactive):not(.btn-zip):hover {
        background-size: 100% 2px;
        opacity: 1;
        text-decoration: none;
      }
      .section-links a img { transition: transform .35s var(--ease-out); }
      .section-links a:not(.ig-card):not(.btn-slide):not(.btn-interactive):not(.btn-zip):hover img { transform: translateX(4px) scale(1.08); }

      /* 3. Bottoni grandi (Etudes, Ear training, Scarica ZIP): lift, ombra colorata e riflesso diagonale */
      .etudes-button, .plugin-download { position: relative; }
      .etudes-button, .plugin-download, .ear-training-link { overflow: hidden; isolation: isolate; }
      .etudes-button::after, .plugin-download::after, .ear-training-link::after {
        content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
        background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%);
        transform: translateX(-120%);
      }
      .etudes-button:hover::after, .plugin-download:hover::after, .ear-training-link:hover::after {
        transform: translateX(120%); transition: transform .7s var(--ease-out);
      }
      .etudes-button { transition: background .25s ease, transform .3s var(--ease-out), box-shadow .3s ease; }
      .etudes-button:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(155,89,182,.65); }
      .etudes-button:active { transform: translateY(0) scale(.97); box-shadow: none; transition-duration: .08s; }
      .etudes-button svg { transition: transform .35s var(--ease-out); }
      .etudes-button:hover svg { transform: translateY(3px); }

      .ear-training-link { transition: background .25s ease, transform .3s var(--ease-out), box-shadow .3s ease; }
      .ear-training-link:hover { transform: translate(-50%, calc(-50% - 3px)); box-shadow: 0 14px 26px -12px rgba(0,0,0,.45); }
      .ear-training-link:active { transform: translate(-50%, -50%) scale(.97); box-shadow: none; transition-duration: .08s; }

      .plugin-download { transition: background .25s ease, color .25s ease, transform .3s var(--ease-out), box-shadow .3s ease; }
      .plugin-download:hover { background: #fff; color: #cc2b85; transform: translateY(-2px); box-shadow: 0 8px 16px -8px var(--c); }
      .plugin-download:active { transform: translateY(0) scale(.96); box-shadow: none; transition-duration: .08s; }
      .plugin-download svg { transition: transform .35s var(--ease-out); }
      .plugin-download:hover svg { transform: translateY(2px); }

      /* 4. Toggle plugin */
      .plugin-toggle { transition: color .2s ease; }
      .plugin-toggle:hover { color: #cc2b85; }
      .plugin-toggle:hover::before { color: #cc2b85; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: .01ms !important; }
    }
  

/* ── Grafiche interattive: banda attaccata alla barra del capitolo (desktop) ── */
    @media (min-width: 769px) {
      /* Banda a tutta larghezza, attaccata alla barra del capitolo */
      .section-main > .ig-block { flex: none; width: calc(100% + 50px); margin: 0 -50px -70px 0; padding: 44px 50px 46px 40px;
        background: var(--accent); color: #fff; border-radius: 0; }

      /* Titolo della banda: protagonista, come un titolo di sezione */
      .ig-block-label { font-size: 1.7rem; font-weight: 900; letter-spacing: .06em; gap: 16px; margin-bottom: 26px; color: #fff; line-height: 1; }
      .ig-block-label::after { content: ""; order: 2; flex: 1; height: 2px; background: rgba(255,255,255,.4); }
      .ig-block-label .count { order: 3; margin-left: 0; color: var(--accent); background: #fff; opacity: 1;
        font-size: .95rem; font-weight: 800; letter-spacing: 0; padding: 5px 13px; border-radius: 999px; }

      .section-main > .ig-block .ig-grid { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 8px 28px; }

      .ig-block .ig-card {
        flex-direction: row; align-items: center; gap: 22px;
        padding: 9px 56px 9px 9px; border: 0; border-radius: 16px; background: transparent; overflow: visible;
        transition: background .25s ease, transform .35s var(--ease-out, ease);
      }
      .ig-block .ig-card:hover { background: #fff; transform: translateX(6px); box-shadow: 0 18px 32px -16px rgba(0,0,0,.5); }

      .ig-block .ig-card .preview {
        flex: 0 0 168px; width: 168px; aspect-ratio: 16 / 9; border-radius: 11px; background: #fff; overflow: hidden;
        box-shadow: 0 4px 14px -6px rgba(0,0,0,.4);
        transition: box-shadow .25s ease;
      }
      .ig-block .ig-card:hover .preview { box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); }
      .ig-block .ig-card .preview img,
      .ig-block .ig-card:hover .preview img { transform: none !important; object-fit: contain; }
      /* Hover: velo scuro del colore del capitolo + animazione del gesto (ig-hint) sulla miniatura */
      .ig-block .ig-card .preview .wash { background: color-mix(in srgb, var(--accent) 72%, #000); }

      .ig-block .ig-card .label {
        padding: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1.15;
        color: #fff; transition: color .2s ease;
      }
      .ig-block .ig-card:hover .label { color: var(--accent); }

      .ig-block .ig-card::after {
        content: "\2192"; position: absolute; right: 16px; top: 50%; width: 40px; height: 40px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 800; line-height: 1;
        background: var(--accent); color: #fff;
        opacity: 0; transform: translate(-14px, -50%) scale(.7); transition: opacity .25s ease, transform .4s var(--ease-out, ease);
      }
      .ig-block .ig-card:hover::after { opacity: 1; transform: translate(0, -50%) scale(1); }
    }
  

/* ── Titoli capitolo piu grandi e respiro dopo la banda grafiche ── */
    @media (min-width: 769px) {
      .section-title { font-size: 2.6rem; }
      .section-title .section-page { font-size: 1.1rem; }
      .section:has(.ig-block) + .section .section-main,
      .ear-training-section + .section .section-main { padding-top: 150px; }
    }
  

/* ── Grafiche interattive: mobile ── */
    @media (max-width: 768px) {
      .section-main > .ig-block { flex: none; width: 100%; margin: 0 0 -50px 0; padding: 30px 20px 34px 20px;
        background: var(--accent); color: #fff; border-radius: 0; }
      .ig-block-label { font-size: 1.05rem; font-weight: 900; letter-spacing: .06em; gap: 12px; margin-bottom: 16px; color: #fff; line-height: 1; }
      .ig-block-label::after { content: ""; order: 2; flex: 1; height: 2px; background: rgba(255,255,255,.4); }
      .ig-block-label .count { order: 3; margin-left: 0; color: var(--accent); background: #fff; opacity: 1;
        font-size: .8rem; font-weight: 800; letter-spacing: 0; padding: 4px 10px; border-radius: 999px; }

      .ig-block .ig-grid { grid-template-columns: 1fr; gap: 6px; }

      .ig-block .ig-card {
        display: flex; flex-direction: row; align-items: center; gap: 14px; aspect-ratio: auto;
        border: 0; border-radius: 12px; padding: 7px 34px 7px 7px; background: transparent; overflow: visible;
      }
      .ig-block .ig-card:active { background: rgba(255,255,255,.18); }
      .ig-block .ig-card .preview {
        flex: 0 0 104px; width: 104px; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; background: #fff; overflow: hidden;
        box-shadow: 0 4px 12px -6px rgba(0,0,0,.4);
      }
      .ig-block .ig-card .preview img,
      .ig-block .ig-card:hover .preview img { object-fit: contain; transform: none; }
      .ig-block .ig-card .preview .wash,
      .ig-block .ig-card .preview .hint { display: none; }
      .ig-block .ig-card .label,
      .ig-block .ig-card:hover .label {
        position: static; transform: none; display: block; width: auto; max-width: none; min-height: 0; padding: 0;
        background: transparent; text-align: left; color: #fff;
        font-size: .9rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2;
      }
      .ig-block .ig-card::after {
        content: "\2192"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
        font-size: 1.1rem; font-weight: 800; color: #fff; opacity: .8;
      }
    }