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

   Responsabilidades:
   - estrutura das publicações;
   - cabeçalho e identificação do autor;
   - metadados e visibilidade;
   - menu de ações;
   - conteúdo e edição;
   - resumo das interações;
   - painel de curtidas;
   - ações sociais;
   - estados específicos das publicações.

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

   Comentários pertencem a:
   - pages/social/comments.css

   Mídias pertencem a:
   - pages/social/media.css

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


/* ==========================================================
   PUBLICAÇÃO
   ========================================================== */

   .ayw-post {
    --ayw-post-padding-x: var(--ayw-space-4);
    --ayw-post-padding-y: var(--ayw-space-3);
  
    position: relative;
  
    width: 100%;
    min-width: 0;
    max-width: 100%;
  
    padding-top: var(--ayw-post-padding-y);
  
    overflow: visible;
  }
  
  .ayw-post[aria-busy="true"] {
    cursor: progress;
  }
  
  .ayw-post.is-removing {
    pointer-events: none;
  
    opacity: 0.55;
  }
  
  
  /* ==========================================================
     CABEÇALHO
     ========================================================== */
  
  .ayw-post-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  
    width: auto;
    min-width: 0;
  
    gap: var(--ayw-space-3);
  
    margin:
      0
      var(--ayw-post-padding-x)
      var(--ayw-space-2);
  }
  
  
  /* ==========================================================
     AUTOR
     ========================================================== */
  
  .ayw-post-author {
    display: flex;
    align-items: center;
  
    flex: 1 1 auto;
  
    min-width: 0;
  
    gap: var(--ayw-space-3);
  }
  
  .ayw-post-avatar {
    flex: 0 0 auto;
  }
  
  .ayw-post-author-main {
    flex: 1 1 auto;
  
    min-width: 0;
  
    overflow: hidden;
  }
  
  .ayw-post-author-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  
    min-width: 0;
  
    gap:
      var(--ayw-space-1)
      var(--ayw-space-2);
  }
  
  .ayw-post-author-name {
    display: inline-block;
  
    min-width: 0;
    max-width: 100%;
  
    overflow: hidden;
  
    color: var(--ayw-text);
  
    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: var(--ayw-line-height-tight);
  
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  a.ayw-post-author-name:hover {
    color: var(--ayw-primary);
  
    text-decoration: none;
  }
  
  a.ayw-post-author-name:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
  
    border-radius: var(--ayw-radius-xs);
  }
  
  
  /* ==========================================================
     METADADOS
     ========================================================== */
  
  .ayw-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  
    min-width: 0;
  
    gap: 0.25rem;
  
    margin-top: var(--ayw-space-1);
  
    color: var(--ayw-text-muted);
  
    font-size: var(--ayw-font-size-xs);
    line-height: var(--ayw-line-height-normal);
  }
  
  .ayw-post-author-handle {
    min-width: 0;
    max-width: 100%;
  
    overflow: hidden;
  
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .ayw-post-meta-separator {
    flex: 0 0 auto;
  }
  
  .ayw-post-time {
    color: inherit;
  
    text-decoration: none;
    white-space: nowrap;
  }
  
  a.ayw-post-time:hover {
    color: var(--ayw-primary);
  
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  
  a.ayw-post-time:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
  
    border-radius: var(--ayw-radius-xs);
  }
  
  
  /* ==========================================================
     VISIBILIDADE
     ========================================================== */
  
  .ayw-post-visibility {
    display: inline-flex;
    align-items: center;
  
    flex: 0 0 auto;
  
    gap: 0.25rem;
  
    white-space: nowrap;
  }
  
  .ayw-post-visibility-icon {
    display: grid;
    place-items: center;
  
    flex: 0 0 auto;
  
    width: 0.875rem;
    height: 0.875rem;
  
    font-size: 0.75rem;
    line-height: 1;
  }
  
  
  /* ==========================================================
     MENU NATIVO
     ========================================================== */
  
  .ayw-post-menu {
    position: relative;
  
    flex: 0 0 auto;
  }
  
  .ayw-post-menu > summary {
    cursor: pointer;
  
    list-style: none;
  
    -webkit-tap-highlight-color: transparent;
  }
  
  .ayw-post-menu > summary::-webkit-details-marker {
    display: none;
  }
  
  .ayw-post-menu > summary::marker {
    content: "";
  }
  
  .ayw-post-menu-button {
    flex: 0 0 auto;
  }
  
  .ayw-post-menu-panel {
    position: absolute;
  
    top:
      calc(
        100% +
        var(--ayw-space-1)
      );
  
    right: 0;
  
    z-index: var(--ayw-z-dropdown);
  
    display: flex;
    flex-direction: column;
  
    min-width: 10rem;
  
    gap: var(--ayw-space-1);
  
    padding: var(--ayw-space-2);
  
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-md);
  
    background: var(--ayw-surface);
  
    box-shadow: var(--ayw-shadow-lg);
  }
  
  .ayw-post-menu-panel form {
    width: 100%;
  
    margin: 0;
  }
  
  .ayw-post-menu-action {
    justify-content: flex-start;
  
    width: 100%;
  }
  
  
  /* ==========================================================
     CONTEÚDO
     ========================================================== */
  
  .ayw-post-content {
    width: auto;
    min-width: 0;
  
    margin-inline: var(--ayw-post-padding-x);
  
    color: var(--ayw-text-soft);
  
    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-relaxed);
  
    overflow-wrap: anywhere;
  }
  
  .ayw-post-content > :first-child {
    margin-top: 0;
  }
  
  .ayw-post-content > :last-child {
    margin-bottom: 0;
  }
  
  .ayw-post-content p {
    margin:
      0
      0
      var(--ayw-space-2);
  }
  
  .ayw-post-content ul,
  .ayw-post-content ol {
    margin:
      var(--ayw-space-2)
      0;
  
    padding-left: var(--ayw-space-5);
  }
  
  .ayw-post-content li + li {
    margin-top: var(--ayw-space-1);
  }
  
  .ayw-post-content blockquote {
    margin:
      var(--ayw-space-2)
      0;
  
    padding:
      var(--ayw-space-2)
      var(--ayw-space-3);
  
    border-left: 3px solid var(--ayw-primary);
  
    background: var(--ayw-bg-soft);
    color: var(--ayw-text-muted);
  }
  
  .ayw-post-content blockquote > :first-child {
    margin-top: 0;
  }
  
  .ayw-post-content blockquote > :last-child {
    margin-bottom: 0;
  }
  
  .ayw-post-content a {
    color: var(--ayw-primary);
  
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  
  .ayw-post-content a:hover {
    color: var(--ayw-primary-hover);
  }
  
  .ayw-post-content a:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
  
    border-radius: var(--ayw-radius-xs);
  }
  
  
  /* ==========================================================
     MÍDIA DENTRO DO POST
     ========================================================== */
  
  .ayw-post > .ayw-post-media,
  .ayw-post > .ayw-post-media-swipe {
    width:
      calc(
        100% -
        var(--ayw-post-padding-x) -
        var(--ayw-post-padding-x)
      );
  
    margin-right: var(--ayw-post-padding-x);
    margin-left: var(--ayw-post-padding-x);
  }

  @media (min-width: 48rem) {
    .ayw-post > .ayw-post-media[data-count="1"] {
      width: min(
        calc(
          100% -
          var(--ayw-post-padding-x) -
          var(--ayw-post-padding-x)
        ),
        42rem
      );

      margin-right: auto;
      margin-left: auto;
    }

    .ayw-post > .ayw-post-media[data-count="2"] {
      width: min(
        calc(
          100% -
          var(--ayw-post-padding-x) -
          var(--ayw-post-padding-x)
        ),
        52rem
      );

      margin-right: auto;
      margin-left: auto;
    }
  }
  
  
  /* ==========================================================
     TEXTO RECOLHIDO
     ========================================================== */
  
  .ayw-post-content.is-collapsed {
    display: -webkit-box;
  
    overflow: hidden;
  
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
  }
  
  .ayw-post-expand {
    margin-top: var(--ayw-space-2);
  }
  
  
  /* ==========================================================
     EDIÇÃO
     ========================================================== */
  
  .ayw-post-editor {
    width: auto;
    min-width: 0;
  
    margin:
      var(--ayw-space-3)
      var(--ayw-post-padding-x)
      0;
  
    padding: var(--ayw-space-3);
  
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-md);
  
    background: var(--ayw-bg-soft);
  }
  
  .ayw-post-editor[hidden] {
    display: none;
  }
  
  .ayw-post-editor-textarea {
    min-height: 5.5rem;
    max-height: 20rem;
  
    resize: vertical;
  }
  
  .ayw-post-editor-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-2);
  
    margin-top: var(--ayw-space-2);
  }
  
  .ayw-post-editor-counter {
    flex: 0 0 auto;
  
    color: var(--ayw-text-muted);
  
    font-size: var(--ayw-font-size-xs);
    line-height: 1;
  
    white-space: nowrap;
  }
  
  .ayw-post-editor-counter.is-warning {
    color: var(--ayw-warning);
  }
  
  .ayw-post-editor-counter.is-danger {
    color: var(--ayw-danger);
  }
  
  .ayw-post-editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  
    min-width: 0;
  
    gap: var(--ayw-space-2);
  }
  
  
  /* ==========================================================
     RESUMO DAS INTERAÇÕES
     ========================================================== */
  
  .ayw-post-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  
    width: auto;
    min-width: 0;
  
    gap: var(--ayw-space-2);
  
    margin:
      var(--ayw-space-2)
      var(--ayw-post-padding-x)
      0;
  
    color: var(--ayw-text-muted);
  
    font-size: var(--ayw-font-size-xs);
    line-height: var(--ayw-line-height-normal);
  }
  
  .ayw-post-comments-summary {
    flex: 0 0 auto;
  
    white-space: nowrap;
  }
  
  
  /* ==========================================================
     CURTIDAS
     ========================================================== */
  
  .ayw-post-likes-details {
    position: relative;
  
    min-width: 0;
  }
  
  .ayw-post-likes-details > summary {
    cursor: pointer;
  
    list-style: none;
  
    -webkit-tap-highlight-color: transparent;
  }
  
  .ayw-post-likes-details > summary::-webkit-details-marker {
    display: none;
  }
  
  .ayw-post-likes-details > summary::marker {
    content: "";
  }
  
  .ayw-post-summary-link {
    display: inline-flex;
    align-items: center;
  
    min-width: 0;
    max-width: 100%;
  
    gap: var(--ayw-space-1);
  
    overflow: hidden;
  
    color: var(--ayw-text-muted);
  
    cursor: pointer;
  
    text-decoration: none;
  }
  
  .ayw-post-summary-link > span:last-child {
    min-width: 0;
  
    overflow: hidden;
  
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .ayw-post-summary-link:hover {
    color: var(--ayw-primary);
  
    text-decoration: none;
  }
  
  .ayw-post-summary-link:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
  
    border-radius: var(--ayw-radius-xs);
  }
  
  .ayw-post-summary-icon {
    flex: 0 0 auto;
  
    line-height: 1;
  }
  
  
  /* ==========================================================
     PAINEL DE CURTIDAS
     ========================================================== */
  
  .ayw-post-likes-panel {
    position: absolute;
  
    top:
      calc(
        100% +
        var(--ayw-space-2)
      );
  
    left: 0;
  
    z-index: var(--ayw-z-dropdown);
  
    width:
      min(
        19rem,
        calc(
          100vw -
          var(--ayw-space-8)
        )
      );
  
    max-height: 20rem;
  
    padding: var(--ayw-space-3);
  
    overflow-x: hidden;
    overflow-y: auto;
  
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-lg);
  
    background: var(--ayw-surface);
  
    box-shadow: var(--ayw-shadow-lg);
  
    overscroll-behavior: contain;
  
    scrollbar-width: thin;
    scrollbar-color:
      var(--ayw-border-strong)
      transparent;
  }
  
  .ayw-post-likes-panel::-webkit-scrollbar {
    width: 0.375rem;
  }
  
  .ayw-post-likes-panel::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .ayw-post-likes-panel::-webkit-scrollbar-thumb {
    border-radius: var(--ayw-radius-full);
  
    background: var(--ayw-border-strong);
  }
  
  .ayw-post-likes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-3);
  
    margin-bottom: var(--ayw-space-3);
  }
  
  .ayw-post-likes-count {
    flex: 0 0 auto;
  
    color: var(--ayw-text-muted);
  
    font-size: var(--ayw-font-size-xs);
    line-height: 1;
  
    white-space: nowrap;
  }
  
  .ayw-post-likes-list {
    display: flex;
    flex-direction: column;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-2);
  }
  
  
  /* ==========================================================
     PESSOA QUE CURTIU
     ========================================================== */
  
  .ayw-post-liker {
    display: grid;
  
    grid-template-columns:
      auto
      minmax(0, 1fr);
  
    align-items: center;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-2);
  }
  
  .ayw-post-liker-avatar {
    flex: 0 0 auto;
  }
  
  .ayw-post-liker-name {
    min-width: 0;
  
    overflow: hidden;
  
    color: var(--ayw-text);
  
    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-tight);
  
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  a.ayw-post-liker-name:hover {
    color: var(--ayw-primary);
  
    text-decoration: none;
  }
  
  a.ayw-post-liker-name:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
  
    border-radius: var(--ayw-radius-xs);
  }
  
  .ayw-post-likes-note {
    margin:
      var(--ayw-space-3)
      0
      0;
  
    color: var(--ayw-text-muted);
  
    font-size: var(--ayw-font-size-xs);
    line-height: var(--ayw-line-height-relaxed);
  }
  
  
  /* ==========================================================
     AÇÕES SOCIAIS
     ========================================================== */
  
  .ayw-post-actions {
    display: grid;
  
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  
    align-items: center;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-1);
  
    margin-top: var(--ayw-space-2);
  
    padding:
      var(--ayw-space-2)
      var(--ayw-post-padding-x)
      var(--ayw-space-3);
  
    border-top: 1px solid var(--ayw-border);
  }
  
  .ayw-post-actions form {
    width: 100%;
    min-width: 0;
  
    margin: 0;
  }
  
  .ayw-post-action {
    justify-content: center;
  
    width: 100%;
    min-width: 0;
  
    padding-inline: var(--ayw-space-2);
  }
  
  .ayw-post-action-icon {
    display: grid;
    place-items: center;
  
    flex: 0 0 auto;
  
    width: 1.125rem;
    height: 1.125rem;
  
    line-height: 1;
  }
  
  .ayw-post-action-label,
  .ayw-post-action-count {
    flex: 0 0 auto;
  
    min-width: 0;
  
    white-space: nowrap;
  }
  
  .ayw-post-action-count {
    max-width: 3rem;
  
    overflow: hidden;
  
    text-overflow: ellipsis;
  }
  
  
  /* ==========================================================
     COMENTÁRIOS DENTRO DO POST
     ========================================================== */
  
  .ayw-post > .ayw-comments {
    width: auto;
  
    margin-right: var(--ayw-post-padding-x);
    margin-left: var(--ayw-post-padding-x);
  }
  
  
  /* ==========================================================
     ESTADOS ESPECÍFICOS
     ========================================================== */
  
  .ayw-post.is-pinned {
    border-color: var(--ayw-primary-border);
  }
  
  .ayw-post-pinned-label {
    display: inline-flex;
    align-items: center;
  
    gap: var(--ayw-space-1);
  
    margin:
      0
      var(--ayw-post-padding-x)
      var(--ayw-space-2);
  }
  
  .ayw-post.is-highlighted {
    background:
      linear-gradient(
        180deg,
        var(--ayw-primary-soft),
        var(--ayw-surface)
      );
  }
  
  
  /* ==========================================================
     MENSAGEM DO POST
     ========================================================== */
  
  .ayw-post-message {
    width: auto;
  
    margin:
      var(--ayw-space-2)
      var(--ayw-post-padding-x)
      0;
  }
  
  .ayw-post-message[hidden] {
    display: none;
  }
  
  
  /* ==========================================================
     NOTEBOOK E TABLET
     ========================================================== */
  
  @media (
    min-width: 48rem
  ) and (
    max-width: 74.999rem
  ) {
    .ayw-post {
      --ayw-post-padding-x: var(--ayw-space-3);
    }
  
    .ayw-post-author {
      gap: var(--ayw-space-2);
    }
  
    .ayw-post-action {
      padding-inline: var(--ayw-space-1);
    }
  
    .ayw-post-action-label {
      font-size: var(--ayw-font-size-xs);
    }
  }
  
  
  /* ==========================================================
     CELULAR
     ========================================================== */
  
  @media (max-width: 35.999rem) {
    .ayw-post {
      --ayw-post-padding-x: var(--ayw-space-3);
      --ayw-post-padding-y: var(--ayw-space-3);
    }
  
    .ayw-post-header,
    .ayw-post-author {
      gap: var(--ayw-space-2);
    }
  
    .ayw-post-author-line {
      gap: var(--ayw-space-1);
    }
  
    .ayw-post-menu-panel {
      min-width: 9rem;
    }
  
    .ayw-post-summary {
      align-items: flex-start;
      flex-direction: column;
  
      gap: var(--ayw-space-1);
    }
  
    .ayw-post-comments-summary {
      white-space: normal;
    }
  
    .ayw-post-action-label {
      display: none;
    }
  
    .ayw-post-action {
      padding-inline: var(--ayw-space-2);
    }
  
    .ayw-post-action-count {
      max-width: 2.5rem;
    }
  }
  
  
  /* ==========================================================
     CELULAR COMPACTO
     ========================================================== */
  
  @media (max-width: 23.4375rem) {
    .ayw-post {
      --ayw-post-padding-x: var(--ayw-space-2);
    }
  
    .ayw-post-author-line {
      align-items: flex-start;
      flex-direction: column;
    }
  
    .ayw-post-meta {
      gap: 0.25rem;
    }
  
    .ayw-post-editor-footer {
      align-items: stretch;
      flex-direction: column;
    }
  
    .ayw-post-editor-actions {
      width: 100%;
    }
  
    .ayw-post-editor-actions .ayw-btn {
      flex: 1 1 auto;
    }
  
    .ayw-post-likes-panel {
      position: fixed;
  
      top: auto;
      right: var(--ayw-space-3);
      bottom:
        calc(
          var(--ayw-space-3) +
          env(safe-area-inset-bottom)
        );
      left: var(--ayw-space-3);
  
      width: auto;
      max-height: 60dvh;
    }
  
    .ayw-post-action {
      padding-inline: var(--ayw-space-1);
    }
  }
  
  
  /* ==========================================================
     MOVIMENTO REDUZIDO
     ========================================================== */
  
  @media (prefers-reduced-motion: reduce) {
    .ayw-post {
      scroll-behavior: auto;
    }
  }