/* ═══════════════════════════════════════════════════════════════════
   HUB — a raiz de artacademy.art.br
   Carrega depois de base.css. So o que nao existe no sistema.
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO DO HUB ─────────────────────────────────────────────────────
   As paginas de venda usam foto full-bleed com veu por cima. Aqui nao:
   um indice precisa que o visitante entenda onde caiu e chegue rapido ao
   catalogo. Entao o hero e mais baixo, em duas colunas, e a foto e um
   objeto na pagina em vez de fundo — o que tambem resolve o problema de
   a unica foto boa disponivel ser vertical (853x1280). */
.hero--hub{
  min-height:auto;
  padding-top:clamp(132px,13vw,180px);
  padding-bottom:0;
  background:
    radial-gradient(900px 520px at 78% 22%, rgba(201,168,76,.07), transparent 70%),
    var(--ink);
}
.hub__hero{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(32px,5vw,72px); align-items:center;
  padding-bottom:clamp(48px,6vw,84px);
}
.hub__hero-txt .hero__sub{ max-width:52ch }

.hub__hero-img{
  position:relative; border-radius:3px; overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95), inset 0 0 0 1px var(--line-soft);
}
.hub__hero-img img{
  width:100%; height:100%; object-fit:cover; object-position:50% 30%;
  filter:saturate(.95) contrast(1.04);
}
/* a foto e escura na base e o fundo tambem: sem esta borda de luz as duas
   coisas se fundem e a imagem parece vazar pra fora do quadro */
.hub__hero-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,4,4,0) 62%, rgba(4,4,4,.5) 100%);
}

/* ── CATÁLOGO ────────────────────────────────────────────────────── */
/* 5 cursos em 3 colunas deixariam a segunda linha com 2 cards e um buraco a
   direita — e "nao pode sobrar espaco vazio" e regra cravada pelo cliente.
   Com 6 colunas cada card ocupa 2, e os dois ultimos comecam na coluna 2 e 4:
   a linha fecha centrada, sem furo. */
.catalogo{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(16px,1.8vw,26px);
  margin-top:clamp(20px,2.4vw,32px);
}
.catalogo > .prod{ grid-column:span 2 }
.catalogo > .prod:nth-child(4){ grid-column:2 / span 2 }
.catalogo > .prod:nth-child(5){ grid-column:4 / span 2 }

.catalogo--2{ grid-template-columns:repeat(2,1fr); max-width:840px; margin-inline:auto }
.catalogo--2 > .prod,
.catalogo--2 > .prod:nth-child(4),
.catalogo--2 > .prod:nth-child(5){ grid-column:auto }

.prod{
  display:flex; flex-direction:column;
  border:1px solid var(--line-soft); border-radius:3px; overflow:hidden;
  background:linear-gradient(170deg, rgba(201,168,76,.05), rgba(255,255,255,0) 58%);
  text-decoration:none; color:inherit;
  transition:border-color .5s var(--ease), transform .6s var(--ease);
}
.prod:hover{ border-color:var(--line); transform:translateY(-6px) }

.prod__img{ display:block; overflow:hidden }
.prod__img img{
  width:100%; aspect-ratio:1; object-fit:cover; display:block;
  /* as capas vem de origens diferentes e brigam entre si em cor; dessaturar
     unifica a grade com o preto/ouro e o hover devolve a cor cheia */
  filter:saturate(.74) contrast(1.05) brightness(.9);
  transition:transform 1.1s var(--ease), filter .8s var(--ease);
}
.prod:hover .prod__img img{ transform:scale(1.05); filter:saturate(1) contrast(1.02) brightness(1) }

.prod__txt{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(18px,1.8vw,24px);
  border-top:1px solid var(--line-soft);
}
.prod__tag{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.prod__nome{
  font-family:var(--display); font-weight:400;
  font-size:clamp(20px,2vw,26px); line-height:1.14; color:var(--paper);
  text-wrap:balance;
}
.prod__desc{
  margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--paper-dim);
  /* empurra o preco para a base: com descricoes de tamanhos diferentes, os
     precos ficariam desalinhados de card para card */
  flex:1;
}
.prod__preco{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:13px; color:var(--muted);
  /* Cormorant entrega numeral old-style por padrao: "12x R$ 30,72" sairia
     com algarismos de alturas diferentes, parecendo erro de fonte */
  font-variant-numeric:lining-nums;
}
.prod__preco b{ color:var(--gold-lt); font-weight:600; font-size:15px }

/* ── DESTAQUE: a assinatura ──────────────────────────────────────────
   Linha inteira, foto a esquerda. O PRO nao concorre com os outros cursos,
   ele os contem — se virasse mais um card de mesmo peso, o visitante
   compararia precos de coisas que nao sao comparaveis. */
.prod--destaque{
  flex-direction:row; align-items:stretch;
  border-color:var(--line);
  background:
    radial-gradient(620px 300px at 12% 50%, rgba(201,168,76,.12), transparent 70%),
    linear-gradient(170deg, rgba(201,168,76,.07), rgba(255,255,255,0) 60%);
}
.prod--destaque .prod__img{ flex:0 0 46%; max-width:46% }
.prod--destaque .prod__img img{ height:100%; aspect-ratio:auto; object-position:50% 32% }
.prod--destaque .prod__txt{
  justify-content:center; border-top:0; border-left:1px solid var(--line-soft);
  padding:clamp(26px,3.4vw,52px);
}
.prod--destaque .prod__nome{ font-size:clamp(28px,3.4vw,46px) }
.prod--destaque .prod__desc{ font-size:15px; max-width:46ch; flex:0 1 auto }
.prod--destaque .prod__preco{ font-size:14px }
.prod--destaque .prod__preco b{ font-size:22px }
.prod__link{
  margin-top:20px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-lt);
}
.prod__link i{ font-style:normal; display:inline-block; transition:transform .5s var(--ease) }
.prod--destaque:hover .prod__link i{ transform:translateX(6px) }
/* o destaque ja e grande: subir 6px como os cards pequenos parece tremor */
.prod--destaque:hover{ transform:none; border-color:var(--gold-dk) }

/* ═══ RESPONSIVO ═══════════════════════════════════════════════ */
@media (max-width:980px){
  .hub__hero{ grid-template-columns:1fr; gap:clamp(28px,5vw,40px) }
  /* a foto vem primeiro no HTML depois do texto, mas no empilhado ela
     funciona melhor como abertura visual */
  .hub__hero-img{ order:-1; aspect-ratio:16/10 }
  .hub__hero-img img{ object-position:50% 26% }
  /* volta a 2 colunas de largura igual: as regras de 6 colunas acima nao
     valem mais aqui, entao o nth-child precisa ser neutralizado */
  .catalogo{ grid-template-columns:repeat(2,1fr) }
  .catalogo > .prod,
  .catalogo > .prod:nth-child(4),
  .catalogo > .prod:nth-child(5){ grid-column:auto }
  /* 5 itens em 2 colunas deixam meia linha vazia: o ultimo fecha a grade */
  .catalogo > .prod:last-child{ grid-column:span 2 }
  .catalogo > .prod:last-child .prod__img img{ aspect-ratio:16/9 }
  .catalogo--2 > .prod:last-child{ grid-column:auto }
  .catalogo--2 > .prod:last-child .prod__img img{ aspect-ratio:1 }
  .prod--destaque{ flex-direction:column }
  .prod--destaque .prod__img{ flex:none; max-width:100% }
  .prod--destaque .prod__img img{ aspect-ratio:16/10; height:auto }
  .prod--destaque .prod__txt{ border-left:0; border-top:1px solid var(--line-soft) }
}
@media (max-width:620px){
  .catalogo, .catalogo--2{ grid-template-columns:1fr }
  .catalogo .prod:last-child{ grid-column:span 1 }
  .catalogo .prod:last-child .prod__img img{ aspect-ratio:1 }
}