/* ============================================================
   RIAWORKS — Seção Workshop na home (2ª dobra) · 2026-08-06
   Chamada de destaque para /workshop/bmad-15-agosto/. Prefixo
   `hws-` próprio: classe genérica em folha compartilhada é
   colisão esperando (regra do repo). Usa os tokens do site
   (--orange #fa5d19, --line, --ink), não os da landing: a seção
   vive no sistema visual da HOME.
   ============================================================ */

.hws { padding: clamp(3rem, 7vw, 5.5rem) clamp(1.1rem, 5vw, 2.5rem); }

/* Título da seção: GRANDE e laranja de propósito (pedido do dono,
   2026-08-06) — é o marcador que diferencia a seção do workshop do resto
   da home antes de qualquer leitura. A data entra menor, em mono, no
   código visual dos kickers do site. */
.hws-head { max-width: 1180px; margin: 0 auto clamp(1.4rem, 3vw, 2.2rem); }
.hws-titulo {
  color: var(--orange);
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.6rem);
  font-weight: 600; line-height: 1.05; letter-spacing: .01em;
  text-transform: uppercase; text-wrap: balance;
}
.hws-data {
  display: block; margin-top: .55rem;
  color: var(--orange-soft);
  font-family: var(--font-mono);
  font-size: clamp(.85rem, .7rem + .7vw, 1.15rem);
  font-weight: 500; letter-spacing: .22em;
}

/* O card inteiro é UM link: banner de atenção pede alvo de clique
   generoso, não um botãozinho. O glow laranja é o que o destaca
   entre o hero e a jornada, ambos escuros. */
.hws-card {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  max-width: 1180px; margin-inline: auto;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: linear-gradient(135deg, #1a1410 0%, #131517 55%);
  border: 1px solid rgba(250, 93, 25, .45);
  border-radius: 14px;
  box-shadow: 0 18px 60px -28px rgba(250, 93, 25, .55);
  color: inherit; text-decoration: none;
  transition: transform .22s ease, box-shadow .28s ease, border-color .22s ease;
}
.hws-card:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
  box-shadow: 0 24px 70px -26px rgba(250, 93, 25, .75);
}

.hws-frase {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.3rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -.005em;
  max-width: 22ch; text-wrap: balance;
}
.hws-hl { color: var(--orange-soft); }
.hws-sub {
  color: var(--ink-dim); margin-top: .9rem; max-width: 52ch; line-height: 1.6;
  font-size: clamp(.95rem, .9rem + .3vw, 1.05rem);
}

.hws-btn {
  display: inline-flex; align-items: center; gap: .55em;
  margin-top: 1.4rem; padding: .8em 1.4em; border-radius: 8px;
  background: var(--orange); color: #1a0b04;
  font-weight: 600; font-size: .95rem; letter-spacing: .02em;
}
.hws-btn svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; }
.hws-card:hover .hws-btn svg { transform: translateX(3px); }
.hws-btn svg { transition: transform .2s ease; }
.hws-nota {
  margin-top: .9rem; color: var(--ink-dim);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
}
.hws-nota b { color: var(--orange-soft); font-weight: 500; }

.hws-fig { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #0B0F12; }
.hws-fig img { display: block; width: 100%; height: auto; }

/* Empilha no celular; a copy vem antes da imagem (a promessa é o gancho,
   a foto dos mentores confirma). */
@media (max-width: 880px) {
  .hws-card { grid-template-columns: 1fr; }
}

/* Entrada por scroll: só onde o browser suporta timeline de view e o
   usuário não pediu menos movimento. Sem suporte, a seção simplesmente
   aparece: nunca opacity 0 sem quem a revele. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hws-card {
      animation: hws-subir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes hws-subir {
      from { opacity: .25; transform: translateY(28px); }
      to   { opacity: 1; transform: none; }
    }
  }
}