/* ──────────────────────────────────────────────────────────────────
   book-page-layout.css  —  Layout condiviso pagine IT + EN del libro
   Caricato da: it/suono-elettronico/index.html
               en/play-with-sound/index.html
   Regole page-specific (flip-gif size, hero mobile, bonus title)
   restano in un piccolo <style> inline in ciascuna pagina.
   ────────────────────────────────────────────────────────────────── */

    html {
      scroll-behavior: smooth;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Montserrat', sans-serif;
      background: #ffffff;
      color: #333;
      line-height: 1.6;
    }

    /* Prevent scroll when mobile menu is open */
    body.open-menu { overflow: hidden; }

    /* Hero Section */
    .hero {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 60px;
      padding: 80px 40px;
      min-height: 80vh;
      flex-wrap: wrap;
    }

    .hero-book {
      flex-shrink: 0;
    }

    .hero-book img {
      max-height: 500px;
      width: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      /* margin-top per pagina: rimane inline in IT e EN separatamente */
    }

    .hero-text {
      max-width: 550px;
      position: relative;
    }

    .hero-text h1 {
      font-size: 3.5rem;
      font-weight: 900;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      margin-bottom: 25px;
      line-height: 1.1;
    }

    .hero-text .flip-gif {
      position: fixed;
      right: 0;
      top: 0;
      max-width: 140px;
      z-index: 50;
      transition: opacity 0.3s ease;
    }

    .hero-text .flip-gif.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .hero-text .subtitle {
      font-size: 1.1rem;
      color: #444;
      margin-bottom: 20px;
      line-height: 1.8;
      font-weight: 400;
    }

    .hero-text .book-info {
      font-size: 0.95rem;
      color: #777;
    }

    /* Flip GIF Section */
    .flip-section {
      text-align: center;
      background: #ffffff;
    }

    .flip-section img {
      max-width: 400px;
      padding: 60px 40px;
    }

    /* Section Styles - with color bar */
    .section {
      display: flex;
      min-height: 300px;
    }

    .section-color-bar {
      width: 10%;
      min-width: 80px;
      max-width: 120px;
      flex-shrink: 0;
    }

    .section-main {
      flex: 1;
      display: flex;
      gap: 50px;
      padding: 120px 50px 70px 0;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .section-image {
      flex-shrink: 0;
      width: 280px;
    }

    .section-image img {
      width: 100%;
      height: auto;
      display: block;
    }

    .section-content {
      flex: 1;
      min-width: 300px;
    }

    .section-title {
      font-size: 2.2rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: -0.01em;
      margin-bottom: 15px;
      line-height: 1.2;
    }

    .section-page {
      font-size: 1rem;
      font-weight: 400;
      opacity: 0.4;
    }

    .section-description {
      font-size: 1rem;
      color: #555;
      line-height: 1.9;
      font-weight: 400;
      margin-bottom: 25px;
    }

    .section-links {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .section-links a {
      color: #e84393;
      text-decoration: none;
      font-weight: 800;
      font-size: 1.2rem;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      transition: opacity 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .section-links a:not(.ig-card):hover {
      opacity: 1;
      text-decoration: underline;
    }

    .section-links .interactive-label {
      color: #aaa;
      font-weight: 500;
    }

    .section-links a img {
      width: 32px;
      height: 32px;
      object-fit: contain;
      flex-shrink: 0;
    }

    .section-links a img.interactive-icon {
      width: 36px;
      height: 36px;
    }

    /* Color themes */
    .section.blue .section-color-bar { background: #3498db; }
    .section.blue .section-title     { color: #3498db; }

    .section.green .section-color-bar { background: #27ae60; }
    .section.green .section-title     { color: #27ae60; }

    .section.orange .section-color-bar { background: #e67e22; }
    .section.orange .section-title     { color: #e67e22; }

    .section.purple .section-color-bar { background: #9b59b6; }
    .section.purple .section-title     { color: #9b59b6; }

    .section.red .section-color-bar { background: #e74c3c; }
    .section.red .section-title     { color: #e74c3c; }

    .section.teal .section-color-bar { background: #1abc9c; }
    .section.teal .section-title     { color: #1abc9c; }

    .section.pink .section-color-bar { background: #e84393; }
    .section.pink .section-title     { color: #e84393; }

    .section.navy .section-color-bar { background: #2c3e50; }
    .section.navy .section-title     { color: #2c3e50; }

    .section.cyan .section-color-bar { background: #00bcd4; }
    .section.cyan .section-title     { color: #00bcd4; }

    /* Interactive Graphics Section */
    .interactive-section {
      padding: 50px 0px 0px 0px;
      background: #ffffff;
      text-align: center;
    }

    .interactive-section h2 {
      font-size: 2.2rem;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 0px;
      color: #e84393;
    }

    .interactive-section a img {
      max-width: 100%;
      max-height: 450px;
      border-radius: 8px;
    }

    /* Software Section */
    .software-section {
      display: flex;
      min-height: 200px;
    }

    .software-section .software-color-bar {
      width: 10%;
      min-width: 80px;
      max-width: 120px;
      flex-shrink: 0;
      background: #666;
    }

    .software-section .software-main {
      flex: 1;
      padding: 60px 50px 60px 40px;
    }

    .software-section h2 {
      font-size: 2.2rem;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 30px;
      color: #666;
    }

    .software-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .software-card {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .software-card img {
      width: 40px;
      height: 40px;
      object-fit: contain;
      flex-shrink: 0;
    }

    .software-card-content {
      display: flex;
      align-items: baseline;
      gap: 15px;
    }

    .software-card-content h3 {
      font-size: 1rem;
      font-weight: 700;
    }

    .software-card-content h3 a {
      color: #e84393;
      text-decoration: none;
      text-transform: uppercase;
    }

    .software-card-content h3 a:hover {
      text-decoration: underline;
    }

    .software-card-content p {
      font-size: 0.85rem;
      color: #666;
    }

    .software-disclaimer {
      font-size: 0.8rem;
      color: #888;
      font-style: italic;
      margin-top: 25px;
    }

    .tutorial-link {
      display: inline-flex;
      align-items: center;
      margin-left: 12px;
      flex-shrink: 0;
      vertical-align: middle;
    }

    .tutorial-link img {
      height: 32px;
      width: auto;
      opacity: 1;
      transition: transform 0.2s;
    }

    .tutorial-link:hover img {
      opacity: 1;
      transform: scale(1.05);
    }

    /* Ear Training Separator */
    .ear-training-section {
      position: relative;
      height: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      margin: 0;
      overflow: visible;
      background: #d9d9d9;
    }

    .ear-training-band {
      display: none;
    }

    /* ear-training-section eredita --accent dalla section precedente */
    .section.green + .ear-training-section  { --accent: #27ae60; }
    .section.red   + .ear-training-section  { --accent: #e74c3c; }
    .section.teal  + .ear-training-section  { --accent: #1abc9c; }

    .ear-training-link {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      transform: translate(-50%, -50%);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 26px;
      background: var(--accent, #3498db);
      color: #fff;
      text-decoration: none;
      font-weight: 800;
      font-size: 1.02rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      border-radius: 20px;
      transition: background 0.2s;
      line-height: 1.4;
      min-height: 46px;
      min-width: 205px;
    }

    .ear-training-link:hover {
      background: #27ae60;
      text-decoration: none !important;
    }
    /* Acustica è già verde: hover va su rosso per creare contrasto */
    .section.green + .ear-training-section .ear-training-link:hover {
      background: #e74c3c;
    }

    /* Creative Etudes Section */
    .etudes-section {
      display: flex;
      min-height: 300px;
    }

    .etudes-color-bar {
      width: 10%;
      min-width: 80px;
      max-width: 120px;
      flex-shrink: 0;
      background: linear-gradient(180deg, #3498db, #27ae60, #e67e22, #9b59b6, #e74c3c, #1abc9c, #e84393);
    }

    .etudes-main {
      flex: 1;
      display: flex;
      gap: 50px;
      padding: 60px 50px 60px 40px;
      align-items: center;
      flex-wrap: wrap;
      background: #f8f8f8;
    }

    .etudes-content {
      flex: 1;
      min-width: 300px;
    }

    .etudes-content h2 {
      font-size: 2.2rem;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 20px;
      color: #9b59b6;
    }

    .etudes-description {
      font-size: 1rem;
      color: #555;
      line-height: 1.9;
      margin-bottom: 15px;
    }

    .etudes-button {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 15px 35px;
      background: #9b59b6;
      color: white;
      text-decoration: none;
      font-weight: 800;
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-top: 15px;
      transition: all 0.2s;
    }

    .etudes-button:hover {
      background: #8e44ad;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(155, 89, 182, 0.3);
    }

    .etudes-button svg {
      width: 20px;
      height: 20px;
    }

    .etudes-preview {
      flex-shrink: 0;
    }

    .etudes-card {
      background: white;
      padding: 25px 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    .etudes-card-header {
      font-size: 1.2rem;
      font-weight: 800;
      color: #9b59b6;
      margin-bottom: 15px;
      letter-spacing: 0.05em;
    }

    .etudes-card-tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .etudes-card-tags span {
      padding: 5px 12px;
      color: white;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: lowercase;
    }

    @media (max-width: 768px) {
      .etudes-color-bar { width: 12px; min-width: 12px; }
      .etudes-main { padding: 40px 20px; flex-direction: column; }
      .etudes-preview { width: 100%; }
      .etudes-card { width: 100%; }
    }

    /* Bibliography + Interactive Panel */
    .bibliography-section {
      display: flex;
      min-height: 400px;
    }

    .bibliography {
      flex: 1;
      padding: 80px 50px;
      background: #f8f8f8;
    }

    .bibliography h2 {
      font-size: 2.2rem;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 30px;
      color: #2c3e50;
    }

    .bibliography p {
      font-size: 0.75rem;
      color: #555;
      line-height: 2.2;
    }

    .interactive-panel {
      flex: 1;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
    }

    .interactive-panel a img {
      max-width: 100%;
      max-height: 350px;
      border-radius: 8px;
    }

    /* Responsive */
    @media (max-width: 1200px) {
      .section-image { display: none; }
      .section-content {padding-left: 20px;}
    }

    @media (max-width: 768px) {
      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      .hero {
        padding: 40px 20px;
        gap: 30px;
        /* min-height e padding-bottom: page-specific (IT override inline) */
      }

      .hero-text h1 { font-size: 2.2rem; }

      .hero-book img { max-height: 350px; }

      .tutorial-link { display: block; margin-left: 0; margin-top: 8px; }

      .tutorial-link img[alt="Plugin"] { margin-left: -6px; }

      .section-links a { font-size: 0.9rem; }

      .section-main { padding: 50px 0 50px 0; gap: 20px; }

      .section-title { font-size: 1.6rem; }

      .section-color-bar { width: 12px; min-width: 12px; }

      .section-image {
        width: calc(100% + 20px);
        margin-left: 0;
        margin-right: -20px;
      }

      .section-content { padding: 20px 20px; }

      .interactive-section,
      .bibliography { padding: 50px 20px; }

      .bibliography-section { flex-direction: column; }

      .interactive-panel { padding: 30px 20px; }

      .software-section .software-color-bar { width: 12px; min-width: 12px; }

      .software-section .software-main { padding: 40px 20px; }

      .software-grid { gap: 25px; }

      .software-card { flex-direction: column; align-items: flex-start; }

      .software-card-content { flex-direction: column; align-items: flex-start; gap: 5px; }

      .software-card-content p { margin-bottom: 5px; }

      /* .hero-text .flip-gif mobile: page-specific (IT/EN inline, dimensioni diverse) */
      .hero-text .flip-gif {
        position: relative !important;
        right: auto;
        top: auto;
        z-index: 1;
      }

      .ear-training-section { height: 10px; }

      .ear-training-link {
        padding: 11px 24px;
        font-size: 0.96rem;
        min-width: 192px;
        min-height: 43px;
      }
    }

    /* Fixed Back to Site Button */
    .back-to-site {
      position: fixed;
      bottom: 0;
      right: 20px;
      z-index: 100;
      background: white;
      color: black;
      text-decoration: none;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.8rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      padding: 12px 20px;
      border-radius: 0;
      box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s, box-shadow 0.2s;
      white-space: nowrap;
      width: max-content;
      max-width: none;
    }

    .back-to-site:hover { box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); }

    @media (max-width: 768px) {
      .back-to-site { right: 0; padding: 10px 16px; font-size: 0.7rem; }
    }

    /* Language Toggle */
    .lang-toggle {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 100;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.7rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .lang-toggle .lang-links {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-left: 12px;
    }

    .lang-toggle a:not(.buy-btn) { color: #999; text-decoration: none; transition: color 0.2s; }
    .lang-toggle a:hover { color: #333; }
    .lang-toggle a.buy-btn:hover { color: white; }
    .lang-toggle a.active { color: #000; font-weight: 600; }

    @media (max-width: 768px) {
      .lang-toggle { top: 15px; font-size: 0.6rem; }
    }

    .lang-toggle.at-left { left: 65px; right: auto; }

    @media (max-width: 768px) {
      .lang-toggle.at-left { left: 75px; }
    }

    /* Buy Button */
    .buy-btn {
      background: #e84393;
      color: white;
      text-decoration: none;
      padding: 6px 14px;
      border-radius: 0;
      font-weight: 700;
      font-size: 0.7rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      transition: background 0.3s, transform 0.2s;
      order: -1;
    }

    .buy-btn:hover { transform: scale(1.05); color: white; }

    .lang-toggle:not(.at-left) .buy-btn { order: 1; }
    .lang-toggle:not(.at-left) .lang-links { margin-left: 0; margin-right: 12px; }

    @media (max-width: 768px) {
      .buy-btn { padding: 5px 10px; font-size: 0.6rem; }
      .lang-toggle .lang-links { margin-left: 8px; }
      .lang-toggle:not(.at-left) .lang-links { margin-right: 8px; }
    }

    /* ── Chapter List ── */
    .chapter-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 4px 0 12px 11px;
    }
    .chapter-row { position: relative; }
    .chapter-name {
      color: #e84393;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      transition: opacity 0.2s;
    }
    .chapter-name:hover { opacity: 0.7; text-decoration: underline; }
    .chapter-name.chapter-appendix { margin-left: 12px; font-size: 16px; color: #999; }
    .chapter-btns {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
      flex-shrink: 0;
    }
    .btn-slide,
    .btn-interactive,
    .btn-zip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 7px 8px;
      text-decoration: none;
      font-weight: 800;
      font-size: 0.4rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      border-radius: 16px;
      transition: all 0.2s;
      white-space: nowrap;
      line-height: 1.4;
      margin-left:3px;
    }
    .btn-slide { border: 3px solid #e84393; color: #e84393; }
    .btn-slide:hover { background: #e84393; color: #ffffff; text-decoration: none !important; }
    .btn-interactive { border: 3px solid #3498db; color: #3498db; }
    .btn-interactive:hover { background: #3498db; color: white; text-decoration: none !important; }
    .btn-zip { border: 3px solid #999; color: #999; padding:2px !important; }
    .btn-zip:hover { background: rgba(153,153,153,0.10); color: #999; text-decoration: none !important; }
    .chapter-row:has(.chapter-name:hover) .btn-slide { background: #e84393; color: #ffffff; }
    .chapter-row:has(.btn-slide:hover) .chapter-name { opacity: 0.7; text-decoration: underline; }
    .chapter-row:has(.chapter-name.chapter-appendix:hover) .btn-zip { background: rgba(153,153,153,0.10); color: #999; text-decoration: none !important; }
    .chapter-row:has(.btn-zip:hover) .chapter-name.chapter-appendix { opacity: 0.7; text-decoration: underline; }
    @media (min-width: 769px) {
      .chapter-btns { column-gap: 4px; row-gap: 2px; }
      .btn-slide,
      .btn-interactive,
      .btn-zip { gap: 3px; padding: 8px 6px; font-size: 8px; letter-spacing: 0.04em; line-height: 1.2; zoom: 0.88; }
    }

    /* #bonus title — IT usa .bonus-title, EN usa h2 diretta */
    #bonus .bonus-title,
    #bonus > h2 {
      display: inline-flex;
      align-items: center;
      gap: 0.35em;
    }
    @media (max-width: 768px) {
      #bonus .bonus-title,
      #bonus > h2 {
        flex-direction: column;
        gap: 4px;
        letter-spacing: 0.03em !important;
      }
    }

    /* Mobile chapter-row: btn | nome su una riga */
    @media (max-width: 768px) {
      .chapter-row {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 8px;
        align-items: center;
        flex-wrap: nowrap;
      }
      .chapter-name {
        min-width: 0;
        overflow-wrap: break-word;
      }
      .section-links { margin-left: -20px; }
    }

/* ── FAQ Section ──────────────────────────────────────────────────── */
    .faq-section {
      padding: 80px 50px;
      background: #fff;
    }
    .faq-section h2 {
      font-family: Montserrat, sans-serif;
      font-size: 2.2rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: -0.01em;
      color: #1a1a1a;
      margin: 0 0 48px;
    }
    details.faq-item { border-top: 2px solid rgba(0,0,0,0.12); }
    details.faq-item:last-of-type { border-bottom: 2px solid rgba(0,0,0,0.12); }
    details.faq-item summary {
      font-family: Montserrat, sans-serif;
      font-size: 1.1rem;
      font-weight: 800;
      color: #1a1a1a;
      padding: 22px 56px 22px 0;
      cursor: pointer;
      list-style: none;
      position: relative;
      user-select: none;
    }
    details.faq-item summary::-webkit-details-marker { display: none; }
    details.faq-item summary::after {
      content: '+';
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 2rem;
      font-weight: 300;
      color: #bbb;
      line-height: 1;
    }
    details.faq-item[open] > summary::after { content: '×'; color: #555; }
    details.faq-item[data-group="1"] { --faq-color: #27ae60; }
    details.faq-item[data-group="2"] { --faq-color: #e67e22; }
    details.faq-item[data-group="3"] { --faq-color: #3498db; }
    details.faq-item summary:hover { color: var(--faq-color, #e67e22); }
    .faq-keyword {
      background: var(--faq-color, #e67e22);
      color: #fff;
      padding: 0.06em 0.38em;
      border-radius: 3px;
      font-weight: 900;
      transition: background 0.18s, color 0.18s;
    }
    details.faq-item summary:hover .faq-keyword { background: #1a1a1a; color: var(--faq-color, #e67e22); }
    .faq-answer {
      padding: 4px 0 28px;
      font-family: Montserrat, sans-serif;
      font-size: 0.95rem;
      line-height: 1.85;
      color: #444;
    }
    .faq-answer p { margin: 0 0 12px; }
    .faq-answer p:last-child { margin-bottom: 0; }
    .faq-answer a { color: #e67e22; text-decoration: none; border-bottom: 1px solid rgba(230,126,34,0.4); transition: border-color 0.15s; }
    .faq-answer a:hover { border-bottom-color: #e67e22; }
    .faq-book-data {
      margin-top: 16px;
      font-size: 0.88rem;
      background: #f4f4f4;
      border-radius: 8px;
      padding: 16px 20px;
      line-height: 1.9;
      color: #333;
    }
    @media (max-width: 700px) {
      .faq-section { padding: 48px 20px 64px; }
      .faq-section h2 { font-size: 1.6rem; }
      details.faq-item summary { font-size: 0.97rem; }
    }