/* ==========================================================
   AYW DESIGN SYSTEM
   LAYOUT / CONTAINERS

   Responsabilidades:
   - limitar a largura horizontal do conteúdo;
   - centralizar conteúdo;
   - aplicar respiro lateral responsivo;
   - oferecer larguras estruturais;
   - oferecer larguras para leitura e formulários;
   - oferecer container fluido.

   Não inclui:
   - grid de página;
   - espaçamento vertical entre seções;
   - alinhamento interno de componentes;
   - estrutura da sidebar ou da topbar;
   - estilos específicos de páginas.

   Dependências:
   - tokens.css.
   ========================================================== */


/* ==========================================================
   BASE COMPARTILHADA

   Cada container define apenas sua largura máxima.
   O espaçamento lateral é controlado por uma variável interna.
   ========================================================== */

   .ayw-container,
   .ayw-container-sm,
   .ayw-container-md,
   .ayw-container-lg,
   .ayw-container-xl,
   .ayw-container-narrow,
   .ayw-container-reading,
   .ayw-container-fluid {
       --ayw-container-max-width: var(--ayw-container-lg);
       --ayw-container-gutter: var(--ayw-space-4);
   
       width: 100%;
       min-width: 0;
       max-width: var(--ayw-container-max-width);
   
       margin-right: auto;
       margin-left: auto;
   
       padding-right: var(--ayw-container-gutter);
       padding-left: var(--ayw-container-gutter);
   }
   
   
   /* ==========================================================
      CONTAINER PADRÃO
      ========================================================== */
   
   .ayw-container {
       --ayw-container-max-width: var(--ayw-container-lg);
   }
   
   
   /* ==========================================================
      LARGURAS ESTRUTURAIS
      ========================================================== */
   
   .ayw-container-sm {
       --ayw-container-max-width: var(--ayw-container-sm);
   }
   
   .ayw-container-md {
       --ayw-container-max-width: var(--ayw-container-md);
   }
   
   .ayw-container-lg {
       --ayw-container-max-width: var(--ayw-container-lg);
   }
   
   .ayw-container-xl {
       --ayw-container-max-width: var(--ayw-container-xl);
   }
   
   
   /* ==========================================================
      CONTEÚDO ESTREITO
   
      Indicado para:
      - formulários;
      - autenticação;
      - configurações simples;
      - fluxos com foco em uma única coluna.
      ========================================================== */
   
   .ayw-container-narrow {
       --ayw-container-max-width: 680px;
   }
   
   
   /* ==========================================================
      CONTEÚDO DE LEITURA
   
      Indicado para:
      - artigos;
      - textos longos;
      - políticas;
      - ajuda;
      - documentação.
      ========================================================== */
   
   .ayw-container-reading {
       --ayw-container-max-width: 760px;
   }
   
   
   /* ==========================================================
      CONTAINER FLUIDO
   
      Ocupa toda a largura disponível, mantendo os gutters.
      ========================================================== */
   
   .ayw-container-fluid {
       --ayw-container-max-width: none;
   }
   
   
   /* ==========================================================
      MODIFICADORES DE GUTTER
      ========================================================== */
   
   /*
      Remove completamente o respiro lateral.
   
      Exemplo:
   
      <div class="ayw-container ayw-container-flush">
   */
   
   .ayw-container-flush {
       --ayw-container-gutter: 0px;
   }
   
   
   /*
      Mantém um gutter compacto em qualquer breakpoint.
   */
   
   .ayw-container-compact {
       --ayw-container-gutter: var(--ayw-space-3);
   }
   
   
   /*
      Aplica um gutter mais amplo.
   
      Em telas pequenas, o valor continua limitado para evitar
      perda excessiva de espaço útil.
   */
   
   .ayw-container-spacious {
       --ayw-container-gutter: var(--ayw-space-5);
   }
   
   
   /* ==========================================================
      ALINHAMENTO
   
      Por padrão, containers são centralizados.
      Estes modificadores permitem alinhamento estrutural quando
      necessário sem criar CSS específico de página.
      ========================================================== */
   
   .ayw-container-start {
       margin-left: 0;
   }
   
   .ayw-container-end {
       margin-right: 0;
   }
   
   
   /* ==========================================================
      LARGURA PERSONALIZADA
   
      Permite definir uma largura pontual por variável sem criar
      uma nova classe permanente.
   
      Exemplo:
   
      <div
          class="ayw-container ayw-container-custom"
          style="--ayw-container-custom-width: 900px;"
      >
      ========================================================== */
   
   .ayw-container-custom {
       --ayw-container-max-width:
           var(
               --ayw-container-custom-width,
               var(--ayw-container-lg)
           );
   }
   
   
   /* ==========================================================
      TABLET
      ========================================================== */
   
   @media (min-width: 768px) {
       .ayw-container,
       .ayw-container-sm,
       .ayw-container-md,
       .ayw-container-lg,
       .ayw-container-xl,
       .ayw-container-narrow,
       .ayw-container-reading,
       .ayw-container-fluid {
           --ayw-container-gutter: var(--ayw-space-6);
       }
   
       .ayw-container-flush {
           --ayw-container-gutter: 0px;
       }
   
       .ayw-container-compact {
           --ayw-container-gutter: var(--ayw-space-4);
       }
   
       .ayw-container-spacious {
           --ayw-container-gutter: var(--ayw-space-8);
       }
   }
   
   
   /* ==========================================================
      DESKTOP AMPLO
      ========================================================== */
   
   @media (min-width: 1200px) {
       .ayw-container,
       .ayw-container-sm,
       .ayw-container-md,
       .ayw-container-lg,
       .ayw-container-xl,
       .ayw-container-fluid {
           --ayw-container-gutter: var(--ayw-space-8);
       }
   
       .ayw-container-narrow,
       .ayw-container-reading {
           --ayw-container-gutter: var(--ayw-space-6);
       }
   
       .ayw-container-flush {
           --ayw-container-gutter: 0px;
       }
   
       .ayw-container-compact {
           --ayw-container-gutter: var(--ayw-space-4);
       }
   
       .ayw-container-spacious {
           --ayw-container-gutter: var(--ayw-space-10);
       }
   }