/* PPCI: new preview features drawn in the published page's language.
   ppci-page.css, ppci-details.css and ppci-scope.css keep the look; this file
   adds the back link, the labelled drawing thumbnails, the shortcut strip,
   "Seu momento" and the guided contact sheet adjustments for this page. */

/* ── Palette: inside the PPCI sheet `a` and `h2 em` inherit the text colour;
   links and heading accents keep the brand green. ── */
.ppci-preview .text-link { color: var(--green); }
.ppci-preview section:not(.dark) h2 em { color: var(--green); }

/* ── Hero ── */
.ppci-preview .ppci-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -12px 0 12px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.ppci-preview .ppci-back span { font-family: var(--sans); font-size: 0.9rem; letter-spacing: 0; }
@media (hover: hover) { .ppci-preview .ppci-back:hover { color: var(--green); } }
.ppci-preview .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }

/* Thumbnails keep the sheet's square frame and gain a short mono label. */
.ppci-preview .drawing .svc-figure-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ppci-preview .drawing .svc-figure-thumb { display: flex; align-items: center; gap: 12px; width: 100%; height: auto; padding: 3px 12px 3px 3px; text-align: left; color: var(--ink-soft); }
.ppci-preview .drawing .svc-figure-thumb img { width: 52px; height: 52px; flex-shrink: 0; }
.ppci-preview .drawing .svc-figure-thumb span { min-width: 0; font-family: var(--mono); font-size: 0.6rem; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; }
.ppci-preview .drawing .svc-figure-thumb.active { color: var(--green); background: var(--green-tint); }

/* ── Shortcut strip: the credential cells, now pointing to each section ── */
.ppci-preview .ppci-shortcuts .credential { position: relative; display: block; padding-right: 48px; color: inherit; text-decoration: none; transition: background 0.18s ease; }
.ppci-preview .ppci-shortcuts .credential:last-child { padding-right: 40px; }
.ppci-preview .ppci-shortcuts .credential-label { text-transform: uppercase; }
.ppci-preview .ppci-shortcuts .credential-arrow { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.05rem; color: var(--gold-text); transition: transform 0.2s ease; }
.ppci-preview .ppci-shortcuts .credential:last-child .credential-arrow { right: 4px; }
@media (hover: hover) {
  .ppci-preview .ppci-shortcuts .credential:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(184,145,58,0.55); text-underline-offset: 6px; }
  .ppci-preview .ppci-shortcuts .credential:hover .credential-arrow { transform: translate(3px, calc(-50% - 3px)); }
}
.ppci-preview .ppci-shortcuts .credential:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ── Seu momento: rows in the same square, ruled language as the FAQ ── */
.ppci-preview .ppci-moments { border-bottom: 1px solid var(--rule); }
.ppci-moments-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
.ppci-preview .ppci-moments-intro > p { max-width: 36ch; }
.ppci-preview .ppci-moments-intro .text-link { margin-top: -6px; }
.ppci-moment-list { border: 1px solid var(--rule); background: rgba(247,244,238,0.55); }
.ppci-preview .ppci-moment { padding: 0; border: 0; border-bottom: 1px solid var(--rule); background: transparent; transition: background 0.2s ease; }
.ppci-preview .ppci-moment:last-child { border-bottom: 0; }
.ppci-preview .ppci-moment summary { display: flex; align-items: center; gap: 20px; min-height: 96px; padding: 24px 28px; list-style: none; cursor: pointer; font-size: inherit; line-height: inherit; }
.ppci-preview .ppci-moment summary::-webkit-details-marker { display: none; }
.ppci-preview .ppci-moment summary:focus-visible { outline: 2px solid var(--gold-text); outline-offset: -4px; }
.ppci-preview .moment-num { align-self: flex-start; padding-top: 9px; flex-shrink: 0; font-family: var(--mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.1em; color: var(--gold-text); }
.ppci-preview .moment-title { flex: 1; min-width: 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 400; line-height: 1.2; color: var(--green); }
.ppci-preview .moment-title small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); }
.ppci-preview .moment-toggle { position: relative; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid rgba(28,78,67,0.2); background: rgba(255,255,255,0.58); box-shadow: 0 6px 16px rgba(18,47,41,0.045); }
.ppci-preview .moment-toggle::before,
.ppci-preview .moment-toggle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 11px; height: 1px; background: var(--gold-text); transform: translate(-50%, -50%); }
.ppci-preview .moment-toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.2s ease; }
.ppci-preview .ppci-moment[open] { background: var(--white); box-shadow: inset 3px 0 0 var(--gold); }
.ppci-preview .ppci-moment[open] .moment-toggle { background: var(--white); }
.ppci-preview .ppci-moment[open] .moment-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.ppci-preview .moment-body { padding: 0 28px 28px 70px; }
.ppci-preview .moment-body p { margin: 0 0 18px; font-size: 0.9rem; line-height: 1.75; color: var(--ink-mid); }
.ppci-preview .moment-body .ppci-gather { padding-left: 14px; border-left: 2px solid rgba(184,145,58,0.45); font-size: 0.86rem; }
.ppci-preview .moment-body .ppci-gather strong { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); }
@media (hover: hover) { .ppci-preview .ppci-moment:not([open]) summary:hover { background: rgba(255,255,255,0.7); } }

/* ── Regional: the extra link sits between the intro and the three states ── */
.ppci-preview .ppci-coverage > .text-link { margin-top: -10px; }

/* ── Contact: this page's dark sheet resets p/h3/details colours; restore them ── */
#contato .contact-sheet-intro > .contact-direct-label { margin-top: 28px; font-size: 0.8rem; color: rgba(255,255,255,0.7); }
#contato .contact-direct { margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.14); }
#contato .contact-sheet-intro > .contact-office { margin-top: 18px; font-size: 0.78rem; line-height: 1.7; color: rgba(255,255,255,0.6); }
#contato .contact-guide .guide-head h3 { color: var(--white); }
#contato .contact-guide .guide-intro,
#contato .contact-guide .guide-note { color: rgba(255,255,255,0.62); }
#contato .contact-guide .guide-preview { border-bottom: 0; }
#contato .contact-guide .guide-preview summary { padding-right: 0; min-height: 28px; font-size: inherit; line-height: normal; }
#contato .contact-guide .guide-preview p { max-width: none; color: rgba(255,255,255,0.82); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .ppci-moments-layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .ppci-preview .hero-ctas { flex-direction: column; align-items: stretch; gap: 4px; }
  .ppci-preview .hero-ctas .text-link { align-self: flex-start; }
  .ppci-preview .ppci-shortcuts .credential,
  .ppci-preview .ppci-shortcuts .credential:first-child,
  .ppci-preview .ppci-shortcuts .credential:last-child { padding-right: 40px; }
  .ppci-preview .ppci-shortcuts .credential-arrow,
  .ppci-preview .ppci-shortcuts .credential:last-child .credential-arrow { right: 4px; }
  .ppci-preview .ppci-moment summary { gap: 14px; min-height: 84px; padding: 20px 18px; }
  .ppci-preview .moment-title { font-size: 1.4rem; }
  .ppci-preview .moment-toggle { width: 30px; height: 30px; }
  .ppci-preview .moment-body { padding: 0 18px 22px; }
}
@media (max-width: 380px) {
  .ppci-preview .drawing .svc-figure-thumbs { grid-template-columns: 1fr; }
}