/* ==========================================================================
   07-suite.css — "Um kit de ferramentas" (título + rabisco) e 2 cards 3D
   Refs: DESIGN_SPEC §3/§4/§5 · BUILD_PLAN 07-suite · 02 §4.7/§4.8 · 05 §7 · 06 §4.6/§6.5
   Fatias: desktop-slice-3 (y 0→866) · mobile-slice-2 (630→) + mobile-slice-3 (0→520)
   ========================================================================== */

/* ---------- 1. Linha do título (célula do trilho fixo, 375px em 1440) ----- */
.suite__head{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--sp-9);                                   /* 36px */
  padding:var(--sp-16) var(--sp-8);                  /* 64px 32px */
}

.suite__title{
  flex:1;
  font:var(--fw-semibold) var(--fs-h3-section)/var(--lh-h3-suite) var(--font-display);
  letter-spacing:var(--ls-h3-section);
  color:var(--c-ink-900);
}

.suite__p{
  flex:1;
  font:var(--fw-medium) var(--fs-body)/var(--lh-body) var(--font-body);
  letter-spacing:var(--ls-body-md);
  color:var(--c-ink-600);
}

/* palavra destacada + rabisco oval lime (D8) */
.suite__hl{position:relative;display:inline-flex}
.suite__hl-w{position:relative;z-index:var(--z-content)}

/* geometria medida na referência: elipse = largura da palavra + ~31px de tinta
   (folga de ~16px de cada lado), ~68px de altura e inclinação de −5,4° (centro
   de tinta y3148 na extremidade esquerda contra y3129 na direita). A nossa
   palavra é mais longa (247px contra 182px), então cada décimo de grau conta:
   a −6° o arco superior derrubava a ponta esquerda e cruzava o topo de caixa
   alta só ~93px depois do início da palavra (na referência, ~26px).
   O rotate fica no elemento (não no path) para o ângulo não variar com o
   esticamento horizontal do preserveAspectRatio="none". */
.scribble{
  display:none;                                      /* só ≥769 (D8) */
  position:absolute;
  top:-12px;                                         /* Sora tem caixa mais baixa que a Fustat: */
                                                     /* a elipse abraça a palavra pela altura da linha */
  left:50%;
  /* folga de ~16px de cada lado da palavra, como na referência.
     max-width:none anula o `img,svg{max-width:100%}` do reset (base.css:14) —
     sem ele o calc() era truncado em 100% e a elipse encostava nas letras */
  max-width:none;
  width:calc(100% + 30px);
  height:calc(100% + 24px);
  transform:translateX(-47%) rotate(-3deg);
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
@media (min-width:769px){ .scribble{display:block} }

.scribble path{
  stroke-dasharray:var(--len,730);
  stroke-dashoffset:var(--len,730);
}
/* desenha uma única vez quando o bloco do título entra na viewport */
.suite__head.is-visible .scribble path{
  animation:draw-underline var(--dur-draw-underline) var(--ease-in-out) forwards;
}

/* ---------- 2. Linha dos cards 3D --------------------------------------- */
/* a célula externa só existe para arredondar/recortar: o fundo precisa ser a
   hairline para os gaps de 1px do .row/.stack aparecerem */
.suite__cards-cell{background:var(--c-hairline)}

.suite__cards{
  display:flex;
  flex-direction:column;
  gap:var(--sp-hairline);
}

.suite__card{flex:1;min-width:0}

/* 2.1 célula da ilustração */
.suite__art{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  /* era `height:100vh; max-height:320px`, que resolve em 320px em qualquer viewport ALTA
     mas encolhe junto com a janela abaixo disso (celular deitado, 320–375px de altura):
     ali a arte 3D perdia os 80px de padding e era cortada. A altura sempre foi 320 — agora
     está declarada como tal, sem depender de vh. */
  height:320px;
  padding:80px 30px;
}

/* pontilhado isométrico (06 §6.5). O skewY(-30deg) do token cisalha o ladrilho:
   as colunas derivam ~1px por linha e o olho lê estrias diagonais contínuas.
   A referência é uma treliça isométrica ESTÁVEL, de duas fases: passo 18,3px na
   horizontal, 5,2px na vertical e defasagem de meio passo (9,15 / 5,2) — que é
   exatamente a união de dois ladrilhos 18,3×10,4 deslocados.
   Ponto: a referência tem ~5px de largura por ~3 linhas de altura, com forte
   moiré (posições alternando entre cheias e quase apagadas). O raio é calibrado
   pela TINTA MÉDIA do platô (x560–719, y3390–3460 → 0,86 de 255 por px); um
   ponto pequeno e escuro bate a média mas lê como grade fina uniforme, por isso
   o par é largo (2,7px de raio) e claro (#F1EDF8). */
/* A borda do campo desce da direita para a esquerda conforme se desce na célula,
   a 18° da vertical: fronteira de 50% de densidade em x≈443 no topo (y3380) e
   x≈358 na base (y3640) do card 1 (x≈1067 / x≈982 no card 2) → máscara a 288°.
   (Os 302° anteriores davam ~31° e deixavam uma diagonal nítida, visível na
   comparação, que a referência não tem.) */
.suite__art .dots--iso{
  inset:0;
  width:auto;
  height:calc(100% + 24px);
  transform:none;
  background-image:
    radial-gradient(2.7px 1.15px at 50% 50%, #F1EDF8 0 78%, transparent 100%),
    radial-gradient(2.7px 1.15px at 50% 50%, #F1EDF8 0 78%, transparent 100%);
  background-size:18.3px 10.4px;
  background-position:0 0, 9.15px 5.2px;
  -webkit-mask-image:linear-gradient(288deg,#000 0 40%,rgba(0,0,0,.5) 52%,transparent 82%);
          mask-image:linear-gradient(288deg,#000 0 40%,rgba(0,0,0,.5) 52%,transparent 82%);
}

.suite__icon{
  position:relative;
  z-index:var(--z-content);
  width:fit-content;
  margin-inline:auto;
  --icon-dx:0px;
  transform:translateX(var(--icon-dx));
  transition:transform var(--dur-slow) var(--ease-drawer);
}
.suite__svg{display:block;height:auto}

/* tamanhos de render (medidos no screenshot: 210×136 escudo / 208×142 moeda).
   O viewBox do escudo tem 230 de largura para 210 de desenho (o desenho fica
   ~10px à direita do centro da caixa, como na referência) — daí a largura da
   caixa ser ~4,5% maior que a do desenho. */
.suite__icon--shield .suite__svg{width:216px}
.suite__icon--coin   .suite__svg{width:159px}
/* na referência a moeda fica ~10px abaixo do centro óptico da célula */
.suite__icon--coin{top:10px}
@media (min-width:390px){
  .suite__icon--shield .suite__svg{width:320px}
  .suite__icon--coin   .suite__svg{width:208px}
}
/* no mobile as artes não são centradas: a referência as desloca 53px para a
   direita (centro de tinta x≈262 no escudo e x≈250 na moeda, contra 209/194,5
   se centradas), a ponto de a placa do escudo ser cortada pela borda direita
   da célula — daí o overflow:hidden de .suite__art. */
@media (max-width:768px){
  .suite__icon{--icon-dx:53px}
}
@media (min-width:769px){
  .suite__icon--shield .suite__svg{width:230px}
}

/* 04-motion §7: o alvo do hover é a célula inteira (.group), não só a arte */
@media (hover:hover) and (pointer:fine){
  .suite__card:hover .suite__icon{transform:translate(var(--icon-dx),-8px)}
}

/* 2.2 célula do texto (124px em 1440 · 150px em mobile) */
.suite__txt{
  padding:var(--sp-7) var(--sp-6) var(--sp-6);       /* 28px 24px 24px */
  display:grid;
  gap:var(--sp-2);
  align-content:start;
}

/* ---------- 3. Desktop (≥1440): título em linha, cards lado a lado ------- */
@media (min-width:1440px){
  .suite__head{
    flex-direction:row;
    align-items:center;
    padding:var(--sp-30) var(--cell-px);             /* 120px 64px */
  }
  .suite__cards{flex-direction:row}
}

@media (min-width:1698px){
  .suite__art{height:450px}   /* idem: era max-height sobre o 100vh */
}

/* ---------- 4. Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .scribble path{animation:none;stroke-dashoffset:0}
  .suite__icon{transition:none}
}