/* ==========================================================================
   ATHENE3D · RESPONSIVIDADE (responsive.css)
   --------------------------------------------------------------------------
   Grande parte da responsividade já acontece SEM media queries, graças a:
     - clamp() em fontes e espaçamentos (crescem com a tela);
     - grids com minmax(0, 1fr) e auto-fill (colunas se ajustam sozinhas);
     - max-width: 100% em imagens e min() em larguras.

   Este arquivo cuida do que ainda precisa mudar de verdade em cada faixa.
   Os pontos de quebra foram escolhidos pelo CONTEÚDO (quando o layout
   começa a apertar), não por modelos de aparelho:

     01. Telas grandes, 2K, 4K e ultrawide   (min-width: 1680px e acima)
     02. Notebooks pequenos                  (max-width: 1180px)
     03. Tablets e menu mobile               (max-width: 1023px)
     04. Tablets em retrato                  (max-width: 900px)
     05. Celulares grandes                   (max-width: 640px)
     06. Celulares pequenos (até 320 px)     (max-width: 380px)
     07. Celular deitado (pouca altura)      (orientation: landscape)
     08. Container queries (componentes que se adaptam ao próprio espaço)
     09. Telas sem mouse (touch)
   ========================================================================== */

/* ==========================================
   01. TELAS GRANDES, 2K, 4K E ULTRAWIDE
   Em monitores enormes, aumentamos a fonte base. Como quase todas as
   medidas usam rem (relativas à fonte da raiz), o site inteiro cresce
   na mesma proporção, sem distorcer. O contêiner também fica mais largo,
   mas tem limite: em ultrawide o conteúdo continua centralizado e legível.
========================================== */
@media (min-width: 1680px) {
  html {
    font-size: 106.25%; /* 17 px */
  }

  :root {
    --container: 82rem;
  }
}

@media (min-width: 2200px) {
  html {
    font-size: 118.75%; /* 19 px */
  }

  :root {
    --container: 84rem;
  }
}

@media (min-width: 3000px) {
  html {
    font-size: 150%; /* 24 px: 4K com escala 100% */
  }
}

/* ==========================================
   02. NOTEBOOKS PEQUENOS (até 1180 px)
========================================== */
@media (max-width: 1180px) {
  .nav__link {
    padding: 0 0.75rem;
  }

  .nav__item--cta {
    margin-left: 0.375rem;
  }

  /* Canais: de 4 para 2 colunas */
  .channels__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .channel-card {
    min-height: 14rem;
  }
}

/* ==========================================
   03. TABLETS E MENU MOBILE (até 1023 px)
   O menu horizontal não cabe mais: vira um painel em tela cheia,
   aberto pelo botão "hambúrguer". O JavaScript usa o MESMO valor
   (min-width: 1024px) para saber quando está no modo desktop.
========================================== */
@media (max-width: 1023px) {
  :root {
    --header-h: 4.25rem;
  }

  .nav-toggle {
    display: block;
  }

  .nav-open .header {
    background: var(--navy);
    border-bottom-color: var(--line-dark);
  }

  /* Painel do menu: ocupa a tela abaixo do header.
     100dvh = altura dinâmica da tela (acompanha a barra do Safari);
     a linha com 100vh antes é o reserva para navegadores antigos. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain; /* a rolagem do menu não "vaza" para a página */
    padding: 0.75rem var(--pad-right) calc(2rem + env(safe-area-inset-bottom)) var(--pad-left);
    background: var(--navy);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease-soft), transform 0.5s var(--ease-out),
      visibility 0s linear 0.3s;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.35s var(--ease-soft), transform 0.5s var(--ease-out), visibility 0s;
  }

  .nav__indicator {
    display: none;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Cada item entra em cascata (--i definido pelo main.js) */
  .nav__item {
    border-bottom: 1px solid var(--line-dark);
    opacity: 0;
    translate: 0 14px;
    transition: opacity 0.5s var(--ease-soft), translate 0.7s var(--ease-out);
  }

  .nav.is-open .nav__item {
    opacity: 1;
    translate: 0 0;
    transition-delay: calc(var(--i, 0) * 60ms + 80ms);
  }

  /* Links grandes, fáceis de tocar (68 px de altura) */
  .nav__link {
    justify-content: space-between;
    width: 100%;
    height: auto;
    min-height: 4.25rem;
    padding: 0 0.25rem;
    border-radius: 0;
    color: var(--white);
    font-stretch: 112%;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .nav__link[aria-current="true"]::after {
    left: auto;
    right: 0.375rem;
    top: 50%;
    bottom: auto;
    margin: -3px 0 0;
    width: 6px;
    height: 6px;
  }

  .nav__trigger[aria-current="true"]::after {
    right: 2.5rem;
  }

  .nav__chevron {
    width: 1.25rem;
    height: 1.25rem;
  }

  .nav__item--cta {
    margin: 1.75rem 0 0;
    border-bottom: 0;
  }

  .nav__cta {
    width: 100%;
    --btn-h: 3.5rem;
    font-size: 1rem;
  }

  /* Dropdown vira acordeão: grid-template-rows 0fr -> 1fr anima a
     altura de "zero" até o tamanho do conteúdo, só com CSS. */
  .dropdown {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    width: auto;
    padding: 0;
    opacity: 1;
    visibility: hidden;
    transform: none;
    transition: grid-template-rows 0.5s var(--ease-out), visibility 0s linear 0.5s;
  }

  .nav__item--dropdown.is-open .dropdown {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.5s var(--ease-out), visibility 0s;
  }

  .dropdown__panel {
    min-height: 0;
    padding-top: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .dropdown__label {
    padding: 0 0.25rem;
  }

  .dropdown__list {
    padding: 0 0 0.75rem;
  }

  .dropdown__link {
    min-height: 3.5rem;
    padding: 0.5rem 0.25rem;
    font-size: 1rem;
  }

  .dropdown__footer {
    padding: 0.875rem 0.25rem 1.125rem;
    min-height: 3.5rem;
    font-size: 1rem;
  }

  /* Sobre: texto em cima, ilustração embaixo */
  .about__grid {
    grid-template-columns: 1fr;
  }

  .print-art {
    width: 100%;
    max-width: 34rem;
    justify-self: center;
  }

  /* Processo: uma coluna, hexágono à esquerda e texto à direita.
     O main.js percebe que os hexágonos estão empilhados e liga o
     trilho na vertical (.is-vertical). */
  .steps {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .step {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: start;
  }

  .step__hex {
    grid-row: span 3;
    margin-bottom: 0;
  }

  .step__code {
    margin-top: 0.25rem;
  }

  /* Rodapé: 2 colunas */
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================
   04. TABLETS EM RETRATO (até 900 px)
========================================== */
@media (max-width: 900px) {
  /* Hero em uma coluna: texto primeiro, fatiador depois */
  .hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 2.5rem;
  }

  .hero__title {
    max-width: 15ch;
  }

  .hero__visual {
    max-width: 30rem;
  }

  .section-head--split {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   05. CELULARES GRANDES (até 640 px)
========================================== */
@media (max-width: 640px) {
  /* Botões ocupam a largura toda: alvos de toque maiores */
  .hero__actions,
  .products__empty .btn-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* Painéis do fatiador mais compactos */
  .slicer__hud {
    font-size: 0.5625rem;
  }

  .slicer__hud--top {
    top: 0.625rem;
    left: 0.75rem;
    right: 0.75rem;
  }

  .slicer__hud--panel {
    right: 0.5rem;
    bottom: 0.5rem;
    width: min(12rem, 62%);
    padding: 0.55rem 0.65rem;
  }

  /* Só o essencial no painel: sai a mesa e a coordenada Z */
  .slicer__mesa,
  .slicer__coords b[data-coord="z"] {
    display: none;
  }

  .print-art {
    padding: 1.25rem 1rem;
  }

  .step {
    column-gap: 1.125rem;
  }

  /* Cantos chanfrados menores no celular */
  :root {
    --cut-lg: 1.25rem;
  }

  /* Botão flutuante um pouco menor */
  .wa-float {
    width: 3.25rem;
    height: 3.25rem;
  }

  /* Canais: uma coluna, cards em formato de linha (mais compactos) */
  .channels__grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .channel-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem 1rem;
    min-height: 0;
    padding: 1rem;
  }

  /* display: contents "dissolve" o contêiner: seus filhos passam a
     participar diretamente da grade do card. */
  .channel-card__top {
    display: contents;
  }

  .channel-card__icon {
    grid-row: 1 / span 2;
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
  }

  .channel-card__icon .icon {
    width: 1.375rem;
    height: 1.375rem;
  }

  .channel-card__status {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }

  .channel-card.is-pending .channel-card__status {
    display: inline-block;
  }

  /* Com link ativo, nome e descrição ocupam as duas linhas da grade;
     no estado "Em breve", a etiqueta fica em cima e o texto embaixo. */
  .channel-card__body {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .channel-card.is-pending .channel-card__body {
    grid-row: 2;
  }

  .channel-card__name {
    font-size: 1.25rem;
  }

  .channel-card__title {
    font-size: 0.875rem;
  }

  .channel-card__cta {
    grid-column: 3;
    grid-row: 1 / span 2;
    padding: 0;
    border: 0;
  }

  /* No formato de linha, o texto "Acessar a loja" sai e fica só a seta.
     O nome do canal continua sendo lido pelo leitor de tela. */
  .channel-card__cta-text {
    display: none;
  }

  .channels__panel {
    border-radius: var(--r-lg);
  }

  /* Rodapé: uma coluna */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer__col a {
    min-height: 2.75rem;
  }
}

/* ==========================================
   06. CELULARES PEQUENOS (até 380 px, inclusive 320 px)
========================================== */
@media (max-width: 380px) {
  .brand {
    gap: 0.625rem;
  }

  .brand__tile {
    width: 2.5rem;
    height: 2.5rem;
  }

  .brand__name {
    font-size: 1.1875rem;
  }

  .step {
    grid-template-columns: 3.25rem minmax(0, 1fr);
  }

  .step__hex {
    width: 3.25rem;
    height: 3.75rem;
  }

  .btn {
    padding-inline: 1.125rem;
  }

  .channel-card {
    column-gap: 0.75rem;
    padding: 0.875rem;
  }

  .channel-card__icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  /* Painel do fatiador ainda menor: as coordenadas saem */
  .slicer__coords {
    display: none;
  }
}

/* ==========================================
   07. CELULAR DEITADO (pouca altura)
   Ex.: iPhone na horizontal (~390 px de altura). Diminui o header e o
   respiro do hero para o conteúdo principal caber na primeira dobra.
========================================== */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --header-h: 3.75rem;
  }

  .hero__grid {
    padding-block: 2rem 2rem;
  }

  .hero__visual {
    max-width: 22rem;
  }

  .nav__link {
    min-height: 3.5rem;
    font-size: 1.375rem;
  }
}

/* ==========================================
   08. CONTAINER QUERIES
   Diferente das media queries (que olham a TELA), aqui o componente
   olha o espaço que ELE recebeu. O mesmo card funciona bem na grade de
   4 colunas, de 2 colunas ou sozinho, sem depender do aparelho.
   Navegadores sem suporte simplesmente ignoram estes blocos.
========================================== */

/* Destaques do "Sobre": lado a lado quando o bloco de texto é largo
   (acontece no tablet, quando o texto ocupa a largura toda). */
@container sobre (min-width: 42rem) {
  .about__features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .feature {
    flex-direction: column;
  }
}

/* Card de canal muito estreito: reduz o nome para não quebrar feio */
@container canal (max-width: 15rem) {
  .channel-card__name {
    font-size: 1.25rem;
  }

  .channel-card__cta {
    font-size: 0.8125rem;
  }
}

/* ==========================================
   09. TELAS SEM MOUSE (touch)
   (hover: none) identifica celulares e tablets. Lá não existe "passar o
   mouse", então removemos efeitos que dependem disso e reforçamos o
   feedback de toque (:active).
========================================== */
@media (hover: none) {
  [data-spotlight]::before {
    display: none;
  }

  .channel-card:not(.is-pending):active {
    border-color: var(--brand);
    background: rgba(255, 255, 255, 0.07);
  }

  a.product-card:active {
    transform: scale(0.99);
  }
}