/* Swiss Art Gallery — descriptif dans la colonne des photographies. 2026-10-19. */

main#app .art-primary {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

@media screen and (min-width: 901px) {
  /* Deux piles indépendantes : la hauteur du cartel ne dimensionne aucune
   * ligne située entre les photographies et le descriptif. */
  main#app .art-primary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  main#app .art-primary > .gallery-panel,
  main#app .art-primary > .description-card,
  main#app .art-primary > .work-artist-stories {
    min-width: 0;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  /* Conserver une notice confortable dans une colonne plus étroite.
   * Ces sélecteurs dépassent les surcharges sag-decor-20260927.css. */
  main#app .art-primary > .description-card {
    padding: 48px clamp(24px, 3vw, 40px) 36px;
  }

  main#app .art-primary > .description-card::after {
    top: 18px;
    right: 24px;
    font-size: .54rem;
    letter-spacing: .16em;
  }

  main#app .art-primary > .description-card .section-title {
    max-width: 100%;
    margin: 8px 0 22px;
    font-size: clamp(2rem, 3.1vw, 2.8rem);
    line-height: 1.12;
  }

  main#app .art-primary > .description-card .description {
    width: 100%;
    max-width: none;
    font-size: clamp(1.125rem, 1.55vw, 1.275rem);
    line-height: 1.8;
  }

  /* Six boutons en deux rangées ; le viewport desktop ne signifie plus
   * que le conteneur de partage est lui-même très large. */
  main#app .art-primary .share-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  main#app .art-primary .share-row > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media screen and (max-width: 900px) {
  /* Préserver le parcours mobile/tablette : photos, achat, puis description. */
  main#app .art-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  main#app .art-primary {
    display: contents;
  }

  main#app .art-primary > .gallery-panel {
    order: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  main#app .art-layout > .info-panel {
    order: 2;
    margin: 0;
  }

  main#app .art-primary > .description-card {
    order: 3;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* artwork-journey.js peut insérer ce bloc juste après la notice. */
  main#app .art-primary > .work-artist-stories {
    order: 4;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}

@media screen and (max-width: 560px) {
  main#app .art-layout {
    gap: 0;
  }

  /* Neutraliser le width:100%!important de sag-decor sur les enfants
   * directs de .art-layout : avec 10px de marge il dépasserait à droite. */
  main#app .art-layout > .info-panel {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 13px 10px 0;
  }

  main#app .art-primary > .description-card,
  main#app .art-primary > .work-artist-stories {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin: 16px 10px 0;
  }
}

@media print {
  main#app .art-primary {
    display: contents !important;
  }

  main#app .art-primary > .gallery-panel {
    order: 1 !important;
  }

  main#app .art-layout > .info-panel {
    order: 2 !important;
  }

  main#app .art-primary > .description-card {
    order: 3 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}