/* ==========================================================================
   Seção 09 — Encontre o formato que faz sentido para sua organização
   Figma: node 357:3688 (1512 × 2048)
   Animação (expand.js, mesmo padrão da seção 05), um grupo por bloco: o
   quadrado verde, a foto e os botões nascem como quadrados e crescem com o
   scroll; o quadrado e a foto crescem a partir do canto em que se tocam. Os títulos não animam; o número, o texto e os rótulos dos botões
   entram quando a expansão do bloco passa de 70%.
   ========================================================================== */

.formats {
  padding: calc(102 * var(--fp)) 0 0;
  background: var(--c-cream);
  color: var(--c-wine);
}

.formats__title {
  width: calc(881 * var(--fp));
  max-width: calc(100% - 2 * var(--pad));
  margin: 0 var(--pad);
  font-family: var(--font-display);
  font-size: calc(64 * var(--fp));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--c-wine);
}

/* ---------- Blocos (posições do Figma) ---------- */
.format {
  position: relative;
}
.format--1 {
  height: calc(1018 * var(--fp));
  margin-top: calc(59 * var(--fp));
}
.format--2 {
  height: calc(711 * var(--fp));
  margin-top: calc(-1 * var(--fp)); /* o 02 começa exatamente no fim da foto 01 */
}

/* Quadrado verde com o número */
.format__badge {
  --expand-origin: center;
  --expand-size: 0.6;
  position: absolute;
  top: 0;
  left: calc(415 * var(--fp));
  width: calc(351 * var(--fp));
  height: calc(346 * var(--fp));
  background: var(--c-lime);
}
.format__badge span {
  position: absolute;
  font-family: var(--font-display);
  font-size: calc(84.905 * var(--fp));
  font-weight: 400;
  line-height: 1;
  color: var(--c-wine);
}
.format--1 .format__badge span {
  top: calc(32 * var(--fp));
  left: calc(224 * var(--fp));
}
.format--2 .format__badge span {
  top: calc(24 * var(--fp));
  left: calc(28 * var(--fp));
}

/* Texto (acima do quadrado verde, como no Figma) */
.format__content {
  position: absolute;
  z-index: 1;
}
/* Com os títulos maiores (11/11/2026), o texto sobe para o título (duas
   linhas) continuar terminando dentro da altura do quadrado verde, como no
   Figma (antes, o bloco 01 começava em 256 e o 02, em 254) */
.format--1 .format__content {
  top: calc(236 * var(--fp));
  left: calc(68 * var(--fp));
  width: calc(501 * var(--fp));
}
.format--2 .format__content {
  top: calc(236 * var(--fp));
  left: calc(731 * var(--fp));
  width: calc(448 * var(--fp));
}

/* Títulos dos blocos: o tamanho e o peso dos títulos dos cards de
   "Palestras disponíveis" (T3 da página de palestras, .t-talk .t-h3):
   Plus Jakarta semibold 40/1.3, -0.02em no frame de 1512, mínimo de 28px
   (11/11/2026, a pedido; antes, 32/1.35, -0.01em, e 1.15 de entrelinha
   no bloco 02) */
.format__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: max(28px, calc(40 * var(--fp)));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--c-wine);
}
/* No máximo duas linhas (11/11/2026, a pedido): o título do bloco 02 passa
   da largura do texto (448) e vai a 580 no frame de 1512, o bastante para
   "Minha necessidade ainda não / tem formato definido" */
.format--2 .format__title {
  width: calc(580 * var(--fp));
  max-width: none;
}

.format__text {
  margin: calc(25 * var(--fp)) 0 0;
  font-family: var(--font-text);
  font-size: max(15px, calc(17 * var(--fp)));
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-wine);
}
.format--2 .format__text {
  margin-top: calc(49 * var(--fp));
  color: #240000;
}

.format__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--fp));
  margin-top: calc(112 * var(--fp));
}
.format--2 .format__actions {
  flex-wrap: nowrap;
  width: max-content; /* no Figma os botões passam da largura do texto */
  gap: calc(24 * var(--fp));
  margin-top: calc(36 * var(--fp));
}

.btn.format__btn {
  --expand-origin: center;
  --expand-size: 1;
  width: auto;
  height: calc(80 * var(--fp));
  min-height: 56px;
  padding: 0 calc(24 * var(--fp));
  font-size: max(15px, calc(16 * var(--fp)));
  font-weight: 500; /* medium em todas as larguras */
  line-height: 1.2;
}

/* Foto: Iona de vestido vermelho (hero/iona-palco.jpg, 2400 × 1600, a mesma da
   abertura da home; 06/11/2026, a pedido). Recorte em porcentagem da moldura,
   medido no layout enviado: no 01, Iona inteira até o quadril, à direita do
   meio; no 02, mais perto, rosto e microfone. Até 06/11/2026, a foto provisória
   do Figma (formatos/palestra.webp; ver versoes-anteriores/formatos-foto-provisoria/). */
.format__media {
  --expand-origin: center;
  --expand-size: 0.6;
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #d9d9d9;
}
.format__media img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}
/* Medida a partir da esquerda, como o quadrado verde: com a barra de rolagem
   visível (Mac com mouse, Windows), 100vw inclui a barra e "right: 0" não,
   então ancorar pela direita desalinhava a foto do quadrado. */
.format--1 .format__media {
  top: calc(346 * var(--fp));
  left: calc(766 * var(--fp));
  right: 0;
  height: calc(671 * var(--fp));
}
.format--1 .format__media img {
  top: 0;
  left: -18.39%;
  width: 154.3%;
  height: 114.37%;
}
.format--2 .format__media {
  top: calc(346 * var(--fp));
  left: 0;
  width: calc(415 * var(--fp));
  height: calc(365 * var(--fp));
}
.format--2 .format__media img {
  top: -19.25%;
  left: -93.07%;
  width: 272.7%;
  height: 206.7%;
}

/* Os blocos se tocam pelos cantos (quadrado → foto → quadrado → foto).
   Cada um cresce a partir do canto que encosta no vizinho, para as bordas
   ficarem alinhadas durante toda a expansão. */
.format--1 .format__badge {
  --expand-origin: bottom-right; /* encosta no topo da foto */
}
.format--1 .format__media {
  --expand-origin: top-left;
}
.format--2 .format__badge {
  --expand-origin: top-right; /* nasce no fim da foto 01 */
}
.format--2 .format__media {
  --expand-origin: top-right;
}

/* ---------- Tablet e mobile: blocos empilhados ---------- */
@media (max-width: 1199px) {
  .formats {
    --fp: 1px;
    padding: clamp(64px, 9vw, 102px) 0 0;
  }
  .formats__title {
    width: auto;
    max-width: 18ch;
    font-size: clamp(34px, 5.4vw, 56px);
    text-wrap: balance;
  }
  .format,
  .format--1,
  .format--2 {
    display: flex;
    flex-direction: column;
    height: auto;
    margin-top: 56px;
  }
  .format__badge {
    position: relative;
    left: auto;
    width: clamp(140px, 30vw, 240px);
    height: clamp(138px, 29.6vw, 236px);
    margin-left: var(--pad);
  }
  .format--1 .format__badge,
  .format--2 .format__badge,
  .format--1 .format__media,
  .format--2 .format__media {
    --expand-origin: center;
  }
  .format__badge span,
  .format--1 .format__badge span,
  .format--2 .format__badge span {
    top: 16px;
    left: auto;
    right: 18px;
    font-size: clamp(48px, 8vw, 72px);
  }
  .format__content,
  .format--1 .format__content,
  .format--2 .format__content {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: 640px;
    margin: 32px var(--pad) 40px;
  }
  /* Como nos cards de palestras no tablet e no celular: 40 no frame de
     1512, proporcional à largura da tela, com mínimo de 28px (aqui o --fp
     da seção é 1px, então a conta usa a largura da tela) */
  .format__title {
    font-size: max(28px, calc(40 * 100vw / var(--frame)));
  }
  .format--2 .format__title {
    width: auto;
  }
  .format__text,
  .format--2 .format__text {
    margin-top: 20px;
  }
  .format__actions,
  .format--2 .format__actions {
    flex-wrap: wrap;
    width: auto;
    gap: 10px;
    margin-top: 32px;
  }
  .format__media,
  .format--1 .format__media,
  .format--2 .format__media {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    order: 3;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .format__media img,
  .format--1 .format__media img,
  .format--2 .format__media img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 42% 50%; /* Iona no meio da moldura 4:3 */
  }
}

@media (max-width: 767px) {
  /* No máximo duas linhas também nos celulares estreitos (11/11/2026, a
     pedido): até 28px (o dos cards de palestras), e menos quando a largura
     não dá (abaixo de uns 390px de tela; 26.6px em 375, 22px em 320). A
     conta vale para os títulos atuais: com outro texto, rever o 12.6 */
  .format__title {
    font-size: min(28px, calc((100vw - 2 * var(--pad)) / 12.6));
  }
  .btn.format__btn {
    flex: 1 1 100%;
    height: 64px;
  }

  /* Celular (12/11/2026, a pedido): sem as fotos de Iona. Cada formato é
     um cartão verde-limão dentro das duas margens do site, com o número no
     alto e, embaixo, título, texto e botões (todo o conteúdo no verde).
     O cartão é o quadrado verde (.format__badge): nasce como um quadrado
     num canto de cima (o 01 na esquerda, o 02 na direita) e se abre até o
     tamanho real, dentro das margens (expand.js).
     Grade: o bloco do conteúdo sai da caixa (display: contents) e o
     retângulo ocupa todas as linhas da grade, então acompanha a altura do
     conteúdo.
     Versões anteriores em versoes-anteriores/: retângulo só atrás do número
     e do título (mobile-formatos-retangulo-titulo/), em degrau
     (mobile-formatos-retangulo-degrau/), cartão inteiro com linha fina
     (mobile-formatos-cartao-degrau/, mobile-formatos-cartao-margens/,
     mobile-formatos-cartao-largura-toda/) e quadrados em zigue-zague
     (mobile-formatos-ziguezague/). */
  .formats {
    --format-in: 20px; /* respiro interno do retângulo (o mesmo dos cards azuis) */
    padding: 72px 0; /* o mesmo das seções de clientes e depoimentos */
  }
  /* Título no mesmo desenho do título de Depoimentos e dos banners
     (12/11/2026, a pedido; antes, 34px, 1.25 de entrelinha, -0.025em e
     no máximo 18 caracteres por linha) */
  .formats__title {
    max-width: none;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .format__media,
  .format--1 .format__media,
  .format--2 .format__media {
    display: none;
  }
  .format,
  .format--1,
  .format--2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 108px auto auto auto;
    isolation: isolate;
    margin-right: var(--pad);
    margin-left: var(--pad);
  }
  .format,
  .format--1 {
    margin-top: 40px;
  }
  /* Mais separados (12/11/2026, a pedido; antes, 16) */
  .format--2 {
    margin-top: 32px;
  }
  .format__content,
  .format--1 .format__content,
  .format--2 .format__content {
    display: contents;
  }
  /* Cartão: atrás de todas as linhas (número, título, texto e botões) */
  .format__badge,
  .format--1 .format__badge,
  .format--2 .format__badge {
    --expand-origin: top-left;
    --expand-size: 0.4;
    position: relative;
    grid-row: 1 / -1;
    grid-column: 1;
    z-index: 0;
    width: auto;
    height: auto;
    margin: 0;
  }
  .format--2 .format__badge {
    --expand-origin: top-right;
  }
  .format__badge span,
  .format--1 .format__badge span,
  .format--2 .format__badge span {
    top: 32px; /* respiro de cima do cartão (antes, 24) */
    right: auto;
    left: var(--format-in);
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .format__title,
  .format--2 .format__title {
    position: relative;
    z-index: 1;
    grid-row: 2;
    grid-column: 1;
    padding: 0 var(--format-in);
    /* no máximo duas linhas (pedido de 11/11/2026), com a largura de dentro do retângulo */
    font-size: min(28px, calc((100vw - 2 * var(--pad) - 2 * var(--format-in)) / 12.6));
  }
  .format__text,
  .format--2 .format__text {
    grid-row: 3;
    grid-column: 1;
    position: relative;
    z-index: 1;
    margin: 20px 0 0;
    padding: 0 var(--format-in);
  }
  .format__actions,
  .format--2 .format__actions {
    grid-row: 4;
    grid-column: 1;
    position: relative;
    z-index: 1;
    margin-top: 28px;
    padding: 0 var(--format-in) 32px; /* respiro de baixo do cartão (antes, 24) */
  }
}