/* ==========================================================
   Home (index.html), só o layout das seções
   Os componentes vêm de components.css (catálogo em design-system.html).
   As seções usam o grid de 6 colunas (.ez-grid), medido na referência
   de estilo neiden.framer.media.
   ========================================================== */


/* ---------- 01. Serviços (layout "Who we are" da referência) ----------
   Grid de 3 colunas visível, frase pautada no centro, fotos soltas nas
   laterais e accordion na coluna central. Medidas tiradas da referência
   em 1440px: foto esquerda 280x315, foto direita 315x364.
   Nada aqui pode ter transform/opacity nos pais do título, senão o
   mix-blend-mode do título para de inverter as fotos. */
.ez-solutions { overflow: clip; }
.ez-solutions__inner {
  /* Largura das fotos laterais (medidas da referência a 1440). As mesmas
     medidas definem as margens do accordion, que vai da borda da foto
     da esquerda até a borda da foto da direita. */
  --sol-img-left: 280px;
  --sol-img-right: 315px;
  position: relative;
  padding-block: var(--section-pad);
  /* As linhas verticais do meio acompanham a borda das fotos (e do accordion),
     em vez dos terços: esquerda, borda da foto esquerda, borda da foto direita, direita.
     As linhas vão do topo ao fim da seção: passam por cima do respiro de cima e de baixo */
  --sol-line-y: calc(var(--section-pad) * -1);
  background-size: 1px calc(100% + 2 * var(--section-pad));
  background-position: 0 var(--sol-line-y), var(--sol-img-left) var(--sol-line-y), calc(100% - var(--sol-img-right)) var(--sol-line-y), 100% var(--sol-line-y);
}
.ez-solutions__title { margin-block: var(--space-40) 0; } /* o accordion encosta na última linha do título */

/* Fotos soltas com sticky (mesma lógica do bloco central da hero).
   O trilho é uma coluna invisível que vai da posição inicial da foto até
   o fim da seção; a foto, dentro dele, é sticky logo abaixo do header. */
.ez-solutions__track--left {
  left: var(--page-gutter);
  top: var(--section-pad); /* começa na linha de cima da seção (a linha acima do label) */
  width: var(--sol-img-left);
}
.ez-solutions__track--right {
  right: var(--page-gutter);
  top: calc(var(--section-pad) + 220px);
  width: var(--sol-img-right);
}
/* (o sticky vem do componente .ez-sticky-track; aqui só a posição dos trilhos) */
.ez-solutions__track .ez-float-img { position: sticky; } /* vence o "absolute" do .ez-float-img */
.ez-solutions__img-left { width: 100%; aspect-ratio: 280 / 315; }
.ez-solutions__img-right { width: 100%; aspect-ratio: 315 / 364; }
/* Grafismo de pontos no vazio da coluna da direita, acima da foto: 5 fileiras,
   primeira fileira 24px abaixo da linha de cima da seção, 24px para dentro das
   linhas verticais (padrão base; o repeat "space" põe o primeiro e o último
   ponto nesses limites). Só a partir de 1200px, onde as colunas seguem as fotos */
.ez-solutions__dots {
  font-size: var(--fs-display-cases); /* base das medidas em em, como os outros grafismos */
  --half-dot: calc(var(--title-dots-gap) / 2);
  position: absolute;
  z-index: 1;
  top: calc(var(--section-pad) + var(--space-24) - var(--half-dot));
  right: calc(var(--page-gutter) + var(--space-24) - var(--half-dot));
  width: calc(var(--sol-img-right) - 2 * var(--space-24) + var(--title-dots-gap));
  height: calc(var(--title-dots-gap) * 5);
  margin: 0;
  background-repeat: space;
}
@media (max-width: 1199px) { .ez-solutions__dots { display: none; } }
/* Fender Telecaster: enquadra na guitarra (corpo e braço ficam à direita do centro da capa) */
.ez-solutions__img-right img { object-position: 58% 50%; }
/* Fotos da seção com cantos retos */
.ez-solutions__img-left,
.ez-solutions__img-right { border-radius: var(--radius-none); }

/* Accordion: ocupa o espaço entre as duas fotos (da borda direita da foto
   esquerda até a borda esquerda da foto direita) */
.ez-solutions__accordion {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  margin-left: var(--sol-img-left);
  margin-right: var(--sol-img-right);
  padding-inline: var(--space-24); /* respiro entre as linhas e o conteúdo */
}

/* As linhas entre os serviços vão de uma linha vertical à outra (encostam e
   recebem o ponto bege no encontro); o conteúdo continua com os 24px de respiro */
.ez-solutions__accordion .ez-accordion__item {
  margin-inline: calc(var(--space-24) * -1);
  padding-inline: var(--space-24);
}
/* A linha embaixo do último serviço vai até as linhas verticais das bordas
   do grid (como as linhas das outras seções), passando por baixo das fotos */
.ez-solutions__accordion .ez-accordion__item:last-child { position: relative; border-bottom: 0; }
.ez-solutions__accordion .ez-accordion__item:last-child::after {
  content: "";
  position: absolute;
  left: calc(var(--sol-img-left) * -1);
  right: calc(var(--sol-img-right) * -1);
  bottom: 0;
  height: 1px;
  background: var(--color-line);
  pointer-events: none;
}
/* Sem a linha de cima do accordion: a última linha do título já faz essa divisão */
.ez-solutions__accordion.ez-accordion { border-top: 0; }

/* Label da seção: mesma faixa do accordion, centralizado em relação a ele */
.ez-solutions__label {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-left: var(--sol-img-left);
  margin-right: var(--sol-img-right);
  padding-inline: var(--space-24);
}
/* ---------- Itens de serviço (todos abertos) ----------
   Uma coluna só, com um único sistema de espaçamento:
   - cada item: 32px em cima e embaixo
   - título (número + nome); abaixo, o texto; abaixo, as tags
   - texto e tags alinhados com o início do título, 16px entre cada bloco
   Os invólucros do accordion (__panel, __body, .ez-service__info) usam
   display: contents para texto e tags entrarem direto no grid do item. */
.ez-solutions__accordion {
  --svc-pad: var(--space-56);   /* respiro em cima e embaixo do item */
  --svc-num: 52px;              /* largura do número "001.///" */
  --svc-num-gap: var(--space-12);
  --svc-indent: calc(var(--svc-num) + var(--svc-num-gap)); /* recuo que alinha texto e tags ao título */
}
.ez-solutions__accordion .ez-accordion__item {
  display: grid;
  grid-template-columns: 1fr;
  padding-block: var(--svc-pad);
}
.ez-solutions__accordion .ez-accordion__panel,
.ez-solutions__accordion .ez-accordion__body,
.ez-solutions__accordion .ez-service__info { display: contents; }

/* Título */
.ez-solutions__accordion .ez-accordion__header {
  gap: var(--svc-num-gap);
  margin: 0;
  padding: 0;
  cursor: default;
  color: var(--color-text-primary);
}
.ez-solutions__accordion .ez-accordion__num { min-width: var(--svc-num); }
.ez-solutions__accordion .ez-h3 { font-size: var(--fs-h4); letter-spacing: var(--tracking-h4); }

/* Texto: alinhado com o título, 16px abaixo */
.ez-solutions__accordion .ez-service__text {
  padding: var(--space-16) 0 0 var(--svc-indent);
}

/* Tags: abaixo do texto, alinhadas com ele, 16px abaixo */
.ez-solutions__accordion .ez-service__tags {
  border-left: 0;
  padding: var(--space-16) 0 0 var(--svc-indent);
}


/* ---------- Cases: 2 por linha, 10px entre eles (como a referência) ---------- */
.ez-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-10);
}


/* ---------- Galeria Dribbble: 3 por linha (as 3 colunas do grid) ---------- */
.ez-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
}


/* ---------- Sobre (layout "Steps" da referência) ----------
   Esquerda (1/3): label, título grande e texto em cima; depoimento embaixo.
   Direita (2/3): grade 2x2 de cards (.ez-steps). */
.ez-about { align-items: stretch; }
/* Os cards começam na linha acima do título (a da .ez-head-rule): sobem os
   56px do respiro e não repetem a linha de cima (evita linha dupla) */
@media (min-width: 810px) {
  .ez-about > .ez-steps { margin-top: calc(var(--space-56) * -1); border-top: 0; }
}
.ez-about__intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-80);
}
.ez-about__title {
  margin-top: 0; /* 24px do rótulo (a margem do rótulo), o mesmo espaço do título para o lead */
  font-size: var(--fs-display-cases);
  font-weight: var(--fw-semibold);
  line-height: 0.95; /* igual ao título "Kind words" */
  letter-spacing: var(--tracking-h2);
}
/* Lead no mesmo padrão do "Kind words": 20px, entrelinha 1,5, 340px, 24px abaixo do título */
.ez-about__lead { margin-top: var(--space-24); max-width: 340px; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--tracking-text); color: var(--color-text-secondary); }

/* Depoimento com aspas grandes vazadas */
.ez-about__quote { display: flex; flex-direction: column; gap: var(--space-24); }
.ez-about__quote-mark {
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 0.6;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-line);
}
.ez-about__quote blockquote {
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-text);
  letter-spacing: var(--tracking-text);
  text-indent: var(--space-80);
}
.ez-about__quote figcaption { display: flex; flex-direction: column; font-size: var(--fs-small); }
.ez-about__quote figcaption strong { font-weight: var(--fw-semibold); }
.ez-about__quote figcaption span { color: var(--color-text-tertiary); }

/* Listas "What I ..." em 2 x 2, alinhadas com o texto (2/3 da direita) */
.ez-skills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-56) var(--space-40);
}
.ez-skills .ez-label { display: block; margin-bottom: var(--space-16); }


/* ---------- Footer: acento manuscrito ao lado do label ---------- */
.ez-footer__label { display: flex; align-items: baseline; gap: var(--space-16); }


/* ---------- Responsivo (breakpoints da referência) ---------- */
@media (max-width: 1199px) {
  /* Tablet: fotos menores (proporcionais) e accordion nas 4 colunas do meio */
  /* Tablet: mesma montagem do desktop (texto entre as fotos e linhas nas
     bordas das fotos), com as fotos proporcionais à tela para não cobrirem
     o texto dos serviços */
  .ez-solutions__inner { --sol-img-left: 18vw; --sol-img-right: 20vw; }
  .ez-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809px) {
  .ez-solutions__accordion .ez-accordion__item { margin-inline: 0; padding-inline: var(--space-16); } /* linhas de borda a borda, texto 16px para dentro delas */
  .ez-solutions__accordion .ez-accordion__item:last-child::after { left: 0; right: 0; }
  .ez-solutions__inner { background-position: 0 var(--sol-line-y), 0 var(--sol-line-y), 100% var(--sol-line-y), 100% var(--sol-line-y); } /* só as bordas */
  .ez-solutions__track { display: none; }
  .ez-solutions__accordion,
  .ez-solutions__label { grid-column: 1 / -1; padding-inline: 0; }
  /* Celular: texto e tags sem recuo, alinhados à esquerda */
  .ez-solutions__accordion { --svc-indent: 0px; }
  .ez-cases,
  .ez-gallery,
  .ez-skills { grid-template-columns: 1fr; }
}


/* ---------- "See more" à direita dos títulos das seções ---------- */
/* Solutions: label e "See more" lado a lado, centralizados */
.ez-solutions__label { grid-row: 1; align-items: center; gap: var(--space-32); }
/* About e Experience: label à esquerda e "See more" à direita da coluna */
.ez-about__intro .ez-section-head,
.ez-heading .ez-section-head,
.ez-cases-head .ez-section-head { align-items: center; margin-bottom: var(--space-24); }
.ez-heading .ez-section-head { margin-bottom: 0; } /* Experience: o bloco já tem 24px entre os itens (rótulo para título = 24px) */
.ez-about__intro .ez-section-head .ez-section-label,
.ez-heading .ez-section-head .ez-section-label,
.ez-cases-head .ez-section-head .ez-section-label { margin-bottom: 0; }


@media (max-width: 809px) {
  .ez-solutions__label { flex-wrap: wrap; gap: var(--space-16); }
}

/* ---------- Páginas internas ---------- */
/* Contact: o bloco de contato ocupa a tela inteira, abaixo do header */
.ez-page--contact .ez-footer { padding-top: var(--header-h); }
.ez-page--contact .ez-footer__inner { min-height: calc(100vh - var(--header-h)); }