/* ==========================================================================
   Quem somos — "o registo"
   A record kept by the group, not a brochure about it. Cream page, one
   drenched green plate carrying 28 years of data, three archive photographs.
   ========================================================================== */

.qs {
  --qs-plate:        #14301F;   /* the drenched band */
  --qs-plate-ink:    #E8F2EA;
  --qs-plate-muted:  #9DBFA9;
  --qs-plate-rule:   rgba(232, 242, 234, 0.18);
  --qs-barra:        #52B788;   /* 5.76:1 vs plate */
  --qs-barra-extremo: #D49550;

  --qs-ridge-h: clamp(9rem, 17vw, 14.5rem);
}

:root[data-theme="dark"] .qs {
  --qs-plate: #17372A;          /* lifted so the plate still reads as an object */
}

/* Shared -------------------------------------------------------------- */

.qs-h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--t-2xl), 3.2vw, var(--t-4xl));
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-5);
}

.qs-h2--claro { color: var(--qs-plate-ink); }

.qs figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  text-align: left;
  margin-top: var(--s-3);
}

/* 1. Abertura ----------------------------------------------------------
   The shared .abertura--dupla (main.css) carries the measure, the padding and
   the entrance. This page keeps one deliberate difference from the other six:
   its h1 is the opening sentence itself, not a page label, because /quemsomos
   is the front door and "Quem somos?" set above the sentence that answers it
   would say the same thing twice. So .qs-lead replaces .abertura-titulo here
   and nothing else changes. */

.qs .abertura { --abertura-pb: clamp(3rem, 8vw, 7rem); }

.qs-lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--c-text);
  margin: 0 0 var(--s-6);
  text-wrap: balance;
}

.qs-link-forte {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  margin-top: var(--s-8);
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--c-primary);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}

.qs-link-forte svg { transition: transform var(--dur) var(--ease); }
.qs-link-forte:hover svg { transform: translateX(4px); }

.qs-abertura-foto img {
  width: 100%;
  aspect-ratio: 1200 / 676;   /* the photo's own ratio — nothing gets cropped */
  object-fit: cover;
  border-radius: 2px;
}

/* 2. Perguntas --------------------------------------------------------- */

.qs-perguntas {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.qs-perguntas-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
}

.qs-qa {
  margin: 0;
  border-top: 1px solid var(--c-border);
}

.qs-qa-item {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(0.5rem, 3vw, 3rem);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--c-border);
}

.qs-qa dt {
  font-family: var(--font-display);
  font-size: clamp(var(--t-lg), 1.8vw, var(--t-2xl));
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
}

.qs-qa dd {
  margin: 0;
  font-size: var(--t-lg);
  line-height: 1.8;
  color: var(--c-text);
  max-width: 60ch;
}

.qs-qa dd a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.qs-qa dd a:hover { color: var(--c-primary-2); }

/* 3. O registo --------------------------------------------------------- */

.qs-registo {
  background: var(--qs-plate);
  color: var(--qs-plate-ink);
}

.qs-registo-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter);
}

/* The claim and the scale of it sit side by side, so the band reads across
   its full width instead of stacking down one edge. */
.qs-registo-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.qs-registo-intro {
  font-size: clamp(var(--t-lg), 1.7vw, var(--t-xl));
  line-height: 1.75;
  color: var(--qs-plate-ink);
  max-width: 40ch;
  margin: 0;
}

.qs-grafico { margin: 0 0 clamp(2.5rem, 6vw, 4rem); }

.qs-grafico-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--qs-plate-muted);
  text-align: left;
  margin: 0 0 var(--s-6);
}

.qs-grafico-nota {
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.75;
}

.qs-barra-tooltip em {
  display: block;
  font-style: normal;
  font-size: var(--t-xs);
  opacity: 0.7;
}

/* Plot = y-axis column + chart column, two rows (bars, then the year axis). */
.qs-plot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-4);
}

.qs-eixo-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: var(--qs-ridge-h);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--qs-plate-muted);
  font-variant-numeric: tabular-nums;
}

/* Each label centres on its gridline rather than sitting below it. */
.qs-eixo-y > span { transform: translateY(-50%); }
.qs-eixo-y > span:first-child { transform: translateY(-0.5em); }
.qs-eixo-y > span:last-child { transform: translateY(0.1em); }

.qs-ridge {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;                                   /* the surface gap */
  height: var(--qs-ridge-h);
  border-bottom: 1px solid var(--qs-plate-rule);   /* hairline, solid */

  /* Recessive gridlines, one per axis step, drawn behind the bars. */
  background-image: repeating-linear-gradient(
    to top,
    var(--qs-plate-rule) 0 1px,
    transparent 1px calc(100% / var(--qs-linhas))
  );
}

.qs-barra {
  flex: 1 1 0;
  min-width: 0;
  max-width: 24px;                            /* never fill the slot */
  height: 100%;
  display: flex;
  align-items: flex-end;
  position: relative;
  border-radius: 0;
}

.qs-barra-fill {
  display: block;
  width: 100%;
  height: var(--h);
  min-height: 2px;
  background: var(--qs-barra);
  border-radius: 4px 4px 0 0;                 /* rounded data-end, square base */
  transition: background var(--dur-fast) var(--ease);
}

.qs-barra.is-max .qs-barra-fill,
.qs-barra.is-min .qs-barra-fill { background: var(--qs-barra-extremo); }

/* Partial years read as provisional. Never color-alone: the caption names them
   and the tooltip and accessible name both say "ano incompleto". */
.qs-barra.is-parcial .qs-barra-fill { background: rgba(82, 183, 136, 0.42); }

.qs-barra:hover .qs-barra-fill,
.qs-barra:focus-visible .qs-barra-fill { background: var(--qs-plate-ink); }

.qs-barra:focus-visible {
  outline: 2px solid var(--qs-plate-ink);
  outline-offset: 3px;
}

/* Direct labels — the extremes only */
.qs-barra-nota {
  position: absolute;
  left: 50%;
  bottom: calc(var(--h) + 8px);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--qs-barra-extremo);
  pointer-events: none;
}

/* Tooltip — enhances, never gates: every value is in the table below.
   Kept out of the layout entirely while hidden (visibility:hidden would still
   widen the document's scrollable area and break the plate's full-bleed). */
.qs-barra-tooltip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 14rem;
  padding: var(--s-2) var(--s-3);
  background: var(--qs-plate-ink);
  color: var(--qs-plate);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  line-height: 1.45;
  text-align: center;
  box-shadow: var(--shadow);
  pointer-events: none;
  z-index: 4;
}

.qs-barra-tooltip strong { display: block; font-family: var(--font-mono); }

.qs-barra:hover .qs-barra-tooltip,
.qs-barra:focus-visible .qs-barra-tooltip { display: block; }

/* Anchor to the inside at both ends of the series so the tooltip never
   overflows the plate and triggers a horizontal scroll. */
.qs-barra:nth-child(-n + 3) .qs-barra-tooltip {
  left: 0;
  transform: none;
  text-align: left;
}

.qs-barra:nth-last-child(-n + 3) .qs-barra-tooltip {
  left: auto;
  right: 0;
  transform: none;
  text-align: right;
}

.qs-ridge-eixo {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  margin-top: var(--s-3);
}

.qs-eixo-tick {
  flex: 1 1 0;
  min-width: 0;
  max-width: 24px;
  position: relative;
  height: 1.25rem;
}

/* The label is wider than its 24px slot, so it centres over the tick and is
   allowed to spill into the empty slots either side. */
.qs-eixo-tick > span {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.25rem;
  color: var(--qs-plate-muted);
  white-space: nowrap;
}

.qs-eixo-tick > span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.4rem;
  width: 1px;
  height: 0.25rem;
  background: var(--qs-plate-rule);
}

/* The totals, as a sentence rather than three tiles. They lead the section:
   the claim first, the chart below as the evidence for it. */
.qs-totais {
  font-size: clamp(var(--t-lg), 1.8vw, var(--t-2xl));
  line-height: 1.9;
  color: var(--qs-plate-ink);
  max-width: 26ch;
  text-wrap: balance;
  margin: 0;
}

/* A figure never separates from its unit across a line break. */
.qs-facto { white-space: nowrap; }

.qs-num {
  font-family: var(--font-body);              /* never the display serif */
  font-weight: 700;
  font-size: 1.7em;
  line-height: 1;
  color: var(--qs-barra);
  letter-spacing: -0.02em;
}

/* Ver os números ano a ano — the full tables live on /estatisticas. */
.qs-registo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.05em;
  color: var(--qs-plate-ink);
  border-bottom: 1px solid var(--qs-plate-rule);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.qs-registo-link:hover {
  color: var(--qs-barra);
  border-bottom-color: var(--qs-barra);
}

.qs-registo-link svg { transition: transform var(--dur) var(--ease); }
.qs-registo-link:hover svg { transform: translateX(4px); }

/* 4. A origem ---------------------------------------------------------- */

.qs-origem {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.qs-placa img {
  width: 100%;
  aspect-ratio: 1024 / 662;
  object-fit: cover;
  border-radius: 2px;
}

.qs-origem-texto > p {
  font-size: var(--t-lg);
  line-height: 1.85;
  max-width: 56ch;
  margin-bottom: var(--s-10);
}

.qs-eras {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-border);
}

.qs-era {
  margin: 0;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--c-border);
}

.qs-era-anos {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.07em;
  color: var(--c-warm);
  margin-bottom: var(--s-2);
}

.qs-era-nome {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--s-2);
}

.qs-era-texto {
  margin: 0;
  color: var(--c-text-muted);
  line-height: 1.8;
  max-width: 52ch;
}

/* 5. O terreno --------------------------------------------------------- */

.qs-terreno {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3.5rem, 9vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.qs-terreno-prosa {
  font-family: var(--font-display);
  font-size: clamp(var(--t-xl), 2.3vw, var(--t-3xl));
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-text);
  max-width: 26ch;
  margin: 0;
}

.qs-terreno-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

/* 6. Fecho ------------------------------------------------------------- */

.qs-fecho {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-border);
}

.qs-fecho-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}

.qs-fecho-titulo {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-primary);
  margin: 0 0 var(--s-5);
}

.qs-fecho-texto {
  font-size: var(--t-lg);
  line-height: 1.8;
  color: var(--c-text-muted);
  max-width: 34ch;
  margin: 0 0 var(--s-6);
}

.qs-fecho-proxima {
  font-size: var(--t-lg);
  line-height: 1.7;
  color: var(--c-text);
  max-width: 42ch;
  margin: 0 0 var(--s-6);
}

.qs-fecho-proxima strong { font-weight: 700; }

/* The actions form their own column against the oversize "Aparece!". */
.qs-fecho-accoes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
}

/* Labels are kept short by design: a pill radius only reads correctly on a
   single line, so nothing variable-length goes inside a button. */
.qs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--t-base);
  text-align: center;
  color: var(--c-text);
  background: var(--c-surface);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.qs-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }

.qs-btn--primario {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-primary);
}

.qs-btn--primario:hover {
  background: var(--c-primary-2);
  border-color: var(--c-primary-2);
  color: var(--c-on-primary);
}

/* Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .qs-barra-fill {
    transform-origin: bottom;
    animation: qs-rise var(--dur-entra) var(--ease-out) both;
    /* A quarter-beat apart: at a full beat each, twenty-nine years of bars
       would take two seconds to finish drawing. */
    animation-delay: calc(
      (var(--abertura-beats) + 4) * var(--stagger) + var(--i) * (var(--stagger) / 4)
    );
  }
}

@keyframes qs-rise {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .qs-origem,
  .qs-terreno,
  .qs-registo-topo,
  .qs-fecho-inner { grid-template-columns: 1fr; }

  .qs-registo-topo { gap: var(--s-6); }
  .qs-registo-intro,
  .qs-totais { max-width: 46ch; }

  /* Photo before prose on the two picture-led sections */
  .qs-placa { order: -1; }

  .qs-qa-item { grid-template-columns: 1fr; gap: var(--s-2); }

  .qs-terreno-prosa { max-width: 34ch; }

  /* Below this width the ridge is too narrow for a tooltip to sit beside most
     bars without overflowing the plate. It is an enhancement only: every value
     stays in the table below and in each bar's accessible name. */
  .qs-barra:hover .qs-barra-tooltip,
  .qs-barra:focus-visible .qs-barra-tooltip { display: none; }
}

@media (max-width: 560px) {
  /* Stacked pills of differing widths read as ragged; full width is tidier
     and gives each a comfortable target. */
  .qs-fecho-accoes { flex-direction: column; align-items: stretch; }
  .qs-btn { width: 100%; }


  /* Five-year ticks collide at this width, so drop to decades */
  .qs-eixo-tick > span { font-size: 0.625rem; }
  .qs-tick-meia { display: none; }

}