/* ==========================================================================
   PROPOSTAS — índice editorial claro, 4 categorias numeradas em acordeão.
   Aberta: título + texto | ilustração | lista de propostas (mockup aprovado).
   ========================================================================== */

.props {
  --c1: 43%;                               /* coluna do título (fechado e aberto) */
  --row-pad-x: clamp(20px, 2.6vw, 44px);
  --row-pad-y: clamp(16px, 2.4svh, 26px);
  --title-closed: clamp(22px, min(2.2vw, 5svh), 38px);
  --title-open: clamp(38px, min(4.2vw, 9svh), 72px);
  padding: clamp(72px, 12vh, 150px) var(--margin) clamp(56px, 9vh, 110px);
  border-top: 1px solid var(--line);
}

.props__head,
.props__index,
.props__note { max-width: var(--max); margin-inline: auto; }

/* ---------- Cabeçalho ---------- */
.props__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 640;
  font-variation-settings: "wdth" 108;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.props__eyebrow > span:first-child { color: var(--muted); font-weight: 500; }
.props__eyebrow-sep { color: var(--muted); font-weight: 400; }
.props__eyebrow-rule { width: 76px; height: 1px; background: currentColor; margin-left: 24px; }

.props__title {
  margin-top: clamp(18px, 3svh, 34px);
  font-size: clamp(38px, min(5.6vw, 11svh), 120px);
  font-weight: 900;
  font-variation-settings: "wdth" 96;
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.props__intro {
  margin-top: clamp(10px, 1.6svh, 18px);
  color: var(--muted);
  font-size: clamp(16px, .45vw + 13px, 21px);
  font-weight: 380;
}

/* ---------- Índice ---------- */
.props__index {
  margin-top: clamp(28px, 5svh, 56px);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.prop {
  position: relative;
  display: grid;
  grid-template-columns: var(--c1) minmax(0, 1fr);
  transition: background-color .4s;
}
.prop + .prop { border-top: 1px solid var(--line); }
.prop:not(.is-open):hover { background: rgba(21, 22, 24, .025); }

.prop__h { grid-column: 1 / -1; grid-row: 1; font: inherit; }
.prop.is-open .prop__h { grid-column: 1; }

.prop__head {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: [num] auto [dash] auto [title] minmax(0, 1fr) [lede] calc(100% - var(--c1));
  grid-template-rows: auto;
  align-items: center;
  align-content: start;
  column-gap: clamp(14px, 1.6vw, 26px);
  padding: var(--row-pad-y) var(--row-pad-x);
  text-align: left;
}
.prop__num {
  grid-column: num;
  min-width: 2ch;
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 520;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
}
.prop__dash { grid-column: dash; width: 30px; height: 1px; background: var(--muted); }
.prop__title {
  grid-column: title;
  justify-self: start;
  white-space: nowrap;
  font-size: var(--title-closed);
  font-weight: 820;
  font-variation-settings: "wdth" 100;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--ink);
  transform-origin: 0 50%;
  transition: transform .5s var(--ease-out);
}
.prop__lede {
  grid-column: lede;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-left: calc(-1 * clamp(14px, 1.6vw, 26px));
  padding: 4px 76px 4px clamp(28px, 4vw, 64px);
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: clamp(15px, .3vw + 13px, 18px);
  font-weight: 400;
}
.prop__toggle {
  position: absolute;
  right: var(--row-pad-x);
  top: 50%;
  margin-top: -22px;
  width: 44px; height: 44px;
  pointer-events: none;
}
.prop__toggle i {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 1.5px;
  margin: -.75px 0 0 -9px;
  background: var(--ink);
  transition: transform .6s var(--ease-io);
}
.prop__toggle i:last-child { transform: rotate(90deg); }

/* Repouso → hover (só com mouse; no toque o hover ficaria preso) */
.prop__toggle { transition: transform .6s var(--ease-out); }
.prop:not(.is-open) .prop__head:focus-visible .prop__title { transform: translateX(10px); }
@media (hover: hover) and (pointer: fine) {
  .prop:not(.is-open) .prop__head:hover .prop__title { transform: translateX(10px); }
  .prop:not(.is-open) .prop__head:hover .prop__dash { background: var(--blue); }
  .prop:not(.is-open) .prop__head:hover .prop__toggle { transform: rotate(90deg); }
}
.prop__head:focus-visible { outline-offset: -4px; }

/* ---------- Estado aberto ---------- */
.prop.is-open .prop__head {
  grid-template-columns: [num] auto [dash] auto [title] minmax(0, 1fr);
  grid-template-rows: auto auto;
  padding-top: calc(var(--row-pad-y) + 14px);
  padding-bottom: calc(var(--row-pad-y) + 14px);
  cursor: pointer;
}
.prop.is-open .prop__title { font-size: var(--title-open); line-height: 1; white-space: normal; }
/* “Sustentabilidade” é a palavra mais longa: o título se ajusta à coluna */
.prop__h { container-type: inline-size; }
.prop[data-prop="saude"].is-open .prop__title {
  font-size: min(var(--title-open), calc((100cqi - 2 * var(--row-pad-x) - 116px) / 8.2));
}
.prop.is-open .prop__lede {
  grid-column: title;
  grid-row: 2;
  display: block;
  margin: clamp(14px, 2.4svh, 26px) 0 0;
  padding: 0;
  border: 0;
  max-width: 26ch;
  font-size: clamp(17px, .5vw + 14px, 22px);
  font-weight: 340;
  line-height: 1.38;
}
.prop.is-open .prop__toggle { top: calc(var(--row-pad-y) + 14px + var(--title-open) * .5); }
.prop.is-open .prop__toggle i:last-child { transform: rotate(0deg); }

.prop__body { display: none; }
.prop.is-open .prop__body,
.prop.is-closing .prop__body {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.08fr);
}
.prop.is-closing .prop__body {
  position: absolute;
  top: 0;
  left: var(--c1);
  right: 0;
  pointer-events: none;
}

.prop__art {
  position: relative;
  min-height: clamp(240px, 40svh, 380px);
  overflow: hidden;
  background: #ECE9E1;
}
.prop__art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.prop__content {
  padding: calc(var(--row-pad-y) + 18px) var(--row-pad-x) calc(var(--row-pad-y) + 14px) clamp(28px, 3.4vw, 60px);
  align-self: center;
}
.prop__kicker {
  padding-right: 56px;
  font-size: 12px;
  font-weight: 640;
  font-variation-settings: "wdth" 110;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.prop__list { margin-top: clamp(12px, 2svh, 22px); }
.prop__list li {
  position: relative;
  padding: clamp(5px, .9svh, 9px) 0 clamp(5px, .9svh, 9px) 54px;
  font-size: clamp(15px, .45vw + 12.5px, 19px);
  line-height: 1.38;
  max-width: 46ch;
}
.prop__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(clamp(5px, .9svh, 9px) + .7em);
  width: 30px;
  height: 1.5px;
  background: var(--blue);
}

.props__note {
  margin-top: clamp(20px, 3svh, 32px);
  font-size: var(--t-small);
  color: var(--muted);
}

/* Sem JS: tudo aberto, em leitura direta */
html:not(.js) .prop .prop__body { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .props { --c1: 42%; }
  .prop__content { padding-right: calc(var(--row-pad-x) + 8px); }
  .prop.is-open .prop__body, .prop.is-closing .prop__body { grid-template-columns: minmax(0, 1fr); }
  .prop__art { min-height: 0; aspect-ratio: 16 / 9; }
  .prop__content { padding-top: 22px; }
}

/* ---------- Celular: uma coluna, mesma lógica ---------- */
@media (max-width: 760px) {
  .props { --row-pad-x: 18px; --title-closed: 24px; --title-open: clamp(32px, 9vw, 44px); }
  .props__eyebrow-rule { width: 44px; margin-left: 12px; }
  .prop { display: block; }
  .prop__head,
  .prop.is-open .prop__head {
    grid-template-columns: [num] auto [dash] auto [title] minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    padding-right: 64px;
  }
  .prop__dash { width: 18px; }
  .prop__title { white-space: normal; }
  .prop__lede,
  .prop.is-open .prop__lede {
    grid-column: title;
    grid-row: 2;
    display: block;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 1.4;
  }
  .prop.is-open .prop__lede { margin-top: 10px; font-size: 16px; }
  .prop.is-open .prop__head { padding-top: var(--row-pad-y); padding-bottom: 20px; }
  .prop[data-prop="saude"].is-open .prop__title { font-size: min(var(--title-open), calc((100cqi - var(--row-pad-x) - 64px - 70px) / 7.1)); }
  .prop__toggle { top: calc(var(--row-pad-y) + var(--title-closed) * .52); }
  .prop.is-open .prop__toggle { top: calc(var(--row-pad-y) + var(--title-open) * .5); }
  .prop.is-closing .prop__body { position: static; }
  .prop__art { aspect-ratio: 4 / 3; }
  .prop__content { padding: 20px var(--row-pad-x) 26px; }
  .prop__list li { padding-left: 40px; }
  .prop__list li::before { width: 22px; }
}