/* ==========================================================
   AYW DESIGN SYSTEM
   PAGES / SOCIAL / HOME

   Responsabilidades:
   - estrutura geral da home social;
   - cabeçalho da página;
   - grid entre perfil e conteúdo;
   - largura e ritmo visual;
   - comportamento da coluna lateral;
   - responsividade específica da home social.

   Aparência compartilhada vem de:
   - components/cards.css
   - components/buttons.css
   - components/forms.css
   - components/badges.css
   - components/avatars.css

   Estruturas internas pertencem a:
   - pages/social/profile.css
   - pages/social/composer.css
   - pages/social/feed.css
   - pages/social/posts.css
   - pages/social/comments.css
   - pages/social/media.css

   Não utiliza Bootstrap.
   ========================================================== */


/* ==========================================================
   PÁGINA
   ========================================================== */

   .ayw-social-home {
    width: min(100%, 80rem);
    min-width: 0;
  
    margin-inline: auto;
  
    padding:
      var(--ayw-space-3)
      var(--ayw-space-4)
      var(--ayw-space-8);
  }
  
  
  /* ==========================================================
     CABEÇALHO
     ========================================================== */
  
  .ayw-social-home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-4);
  
    margin-bottom: var(--ayw-space-3);
  }
  
  .ayw-social-home-heading {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  
    min-width: 0;
  
    gap: var(--ayw-space-1);
  }
  
  .ayw-social-home-eyebrow {
    display: inline-flex;
    align-items: center;
  
    width: max-content;
  
    margin: 0;
  
    color: var(--ayw-primary);
  
    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-bold);
    line-height: 1;
    letter-spacing: 0.08em;
  
    text-transform: uppercase;
  }
  
  .ayw-social-home-title {
    max-width: 100%;
  
    margin: 0;
  
    color: var(--ayw-text);
  
    font-size:
      clamp(
        1.625rem,
        2vw,
        2rem
      );
  
    font-weight: var(--ayw-font-weight-bold);
    line-height: 1.1;
    letter-spacing: -0.025em;
  
    overflow-wrap: anywhere;
  }
  
  .ayw-social-home-description {
    max-width: 42rem;
  
    margin: 0;
  
    color: var(--ayw-text-muted);
  
    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-normal);
  
    overflow-wrap: anywhere;
  }
  
  .ayw-social-home-header-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
  
    min-width: 0;
  
    gap: var(--ayw-space-2);
  }
  
  .ayw-social-home-header-actions form {
    margin: 0;
  }
  
  
  /* ==========================================================
     GRID PRINCIPAL
     ========================================================== */
  
  .ayw-social-home-layout {
    display: grid;
  
    grid-template-columns:
      minmax(17.5rem, 18.75rem)
      minmax(0, 1fr);
  
    align-items: start;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-4);
  }
  
  
  /* ==========================================================
     COLUNA LATERAL
     ========================================================== */
  
  .ayw-social-home-sidebar {
    width: 100%;
    min-width: 0;
  }
  
  .ayw-social-home-sidebar-inner {
    display: flex;
    flex-direction: column;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-3);
  }
  
  
  /* ==========================================================
     CONTEÚDO PRINCIPAL
     ========================================================== */
  
  .ayw-social-home-main {
    display: flex;
    flex-direction: column;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-3);
  }
  
  .ayw-social-home-main:focus {
    outline: none;
  }
  
  .ayw-social-home-main:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: var(--ayw-space-2);
  }
  
  
  /* ==========================================================
     CONTENÇÃO DOS COMPONENTES
     ========================================================== */
  
  .ayw-social-home-sidebar-inner > *,
  .ayw-social-home-main > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  
  .ayw-social-home-sidebar-inner > .ayw-card,
  .ayw-social-home-main > .ayw-card {
    width: 100%;
  }
  
  .ayw-social-home img,
  .ayw-social-home video,
  .ayw-social-home iframe {
    max-width: 100%;
  }
  
  
  /* ==========================================================
     DESKTOP AMPLO
     ========================================================== */
  
  @media (min-width: 75rem) {
    .ayw-social-home-sidebar-inner {
      position: sticky;
  
      top:
        calc(
          var(--ayw-topbar-height, 4.5rem) +
          var(--ayw-space-3)
        );
  
      max-height: none;

      padding-right: 0;

      overflow: visible;
    }
  }
  
  
  /* ==========================================================
     NOTEBOOK E TABLET HORIZONTAL
  
     Mantém duas colunas até 768px.
     ========================================================== */
  
  @media (max-width: 74.999rem) {
    .ayw-social-home {
      width: min(100%, 72rem);
  
      padding:
        var(--ayw-space-3)
        var(--ayw-space-4)
        var(--ayw-space-7);
    }
  
    .ayw-social-home-layout {
      grid-template-columns:
        minmax(16.5rem, 17.5rem)
        minmax(0, 1fr);
  
      gap: var(--ayw-space-3);
    }
  
    .ayw-social-home-sidebar-inner {
      gap: var(--ayw-space-3);
    }
  }
  
  
  /* ==========================================================
     FAIXA INTERMEDIÁRIA
     ========================================================== */
  
  @media (
    min-width: 48rem
  ) and (
    max-width: 61.999rem
  ) {
    .ayw-social-home {
      padding-inline: var(--ayw-space-3);
    }
  
    .ayw-social-home-header {
      gap: var(--ayw-space-3);
    }
  
    .ayw-social-home-layout {
      grid-template-columns:
        minmax(15.5rem, 16.5rem)
        minmax(0, 1fr);
  
      gap: var(--ayw-space-3);
    }
  }
  
  
  /* ==========================================================
     CELULAR E TABLET VERTICAL
     ========================================================== */
  
  @media (max-width: 47.999rem) {
    .ayw-social-home {
      width: 100%;
  
      padding:
        var(--ayw-space-3)
        var(--ayw-space-3)
        calc(
          var(--ayw-space-8) +
          env(safe-area-inset-bottom)
        );
    }
  
    .ayw-social-home-header {
      align-items: stretch;
      flex-direction: column;
  
      gap: var(--ayw-space-2);
  
      margin-bottom: var(--ayw-space-3);
    }
  
    .ayw-social-home-heading {
      gap: var(--ayw-space-1);
    }
  
    .ayw-social-home-title {
      font-size: 1.625rem;
    }
  
    .ayw-social-home-description {
      max-width: none;
  
      font-size: var(--ayw-font-size-xs);
      line-height: var(--ayw-line-height-normal);
    }
  
    .ayw-social-home-header-actions {
      align-items: stretch;
      flex-direction: column;
  
      width: 100%;
    }
  
    .ayw-social-home-header-actions > *,
    .ayw-social-home-header-actions form,
    .ayw-social-home-header-actions .ayw-btn {
      width: 100%;
    }
  
    .ayw-social-home-layout {
      grid-template-columns:
        minmax(0, 1fr);
  
      gap: var(--ayw-space-3);
    }
  
    .ayw-social-home-sidebar-inner {
      position: static;
  
      max-height: none;
  
      padding-right: 0;
  
      overflow: visible;
  
      gap: var(--ayw-space-3);
    }
  
    .ayw-social-home-main {
      gap: var(--ayw-space-3);
    }
  }
  
  
  /* ==========================================================
     CELULAR COMPACTO
     ========================================================== */
  
  @media (max-width: 23.4375rem) {
    .ayw-social-home {
      padding-inline: var(--ayw-space-2);
    }
  
    .ayw-social-home-header {
      margin-bottom: var(--ayw-space-2);
    }
  
    .ayw-social-home-title {
      font-size: 1.5rem;
    }
  
    .ayw-social-home-layout {
      gap: var(--ayw-space-3);
    }
  }
  
  
  /* ==========================================================
     MOVIMENTO REDUZIDO
     ========================================================== */
  
  @media (prefers-reduced-motion: reduce) {
    .ayw-social-home-sidebar-inner {
      scroll-behavior: auto;
    }
  }