/* ==========================================================================
   ACERVO — layout that only exists on the Acervo page: the two big boxes, the intro row and the tabs row.
   Text, boxes, tabs, photo grid, press list, videos, "Ver mais" and the lightbox come from presets.css / components.css.
   ========================================================================== */

/* two wide rounded boxes (pill 1 + fill-liquid); their content follows the site's container.
   Box 1 is inset from the window edge (~2vw, as in the sketch); box 2 touches both edges of the site, like the footer. */
.acervo-box { padding-block: clamp(1.1rem, 3.8vw, 5rem); }   /* ≈ 73px at 1920 as before; only ~18px on a phone, so the content sits close to the blue edge */
.acervo-intro { margin-inline: clamp(var(--edge), 2vw, 3rem); }
.acervo-main { margin-inline: 0; margin-top: clamp(2.1rem, 5.6vw, 7rem); }   /* 30% closer to box 1 than the default 8vw */

/* intro: title + paragraph on the left, the two social buttons stacked on the right, bottom-aligned */
.acervo-intro__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--marquee-gap); }
.acervo-intro__text { flex: 0 1 86%; display: grid; gap: clamp(1rem, 3vw, 4rem); }
.acervo-intro__text p { max-width: 30em; text-wrap: balance; }   /* the three lines come out about the same length */
.acervo-intro__social { display: flex; flex-direction: column; gap: var(--marquee-gap); }
@media (max-width: 639px) { .acervo-intro__social { flex-direction: row; } }

/* tabs (left) + the text of the current tab (right, right-aligned) */
.acervo-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--marquee-gap); margin-bottom: clamp(1.5rem, 5vw, 6rem); }
.acervo-tabs { flex: 0 1 auto; max-width: 100%; }
.acervo-description { flex: 0 1 35%; min-width: 16rem; margin: 0; max-width: none; }
@media (max-width: 639px) {
  .acervo-tabs { flex-basis: 100%; }
  .acervo-description { flex-basis: 100%; text-align: left; }
}

/* a tab's content fades/rises in when it appears */
.acervo-panel:not([hidden]) { animation: panel-in var(--dur-2) var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .acervo-panel:not([hidden]) { animation: none; } }

/* "Ver mais" under the list of the tab */
.acervo-more { margin-top: clamp(1.25rem, 3vw, 4rem); }
.acervo-more[hidden] { display: none; }