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

   Responsabilidades:
   - prévia dos anexos do compositor;
   - mídias das publicações;
   - grades de imagens;
   - carrossel;
   - lightbox;
   - estados de carregamento e indisponibilidade;
   - responsividade das mídias.

   Aparência compartilhada vem de:
   - components/buttons.css
   - components/loaders.css

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


/* ==========================================================
   PRÉVIA DE ANEXOS DO COMPOSITOR
   ========================================================== */

   .ayw-composer-media {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  
    margin-top: var(--ayw-space-2);
    padding-top: var(--ayw-space-2);
  
    border-top: 1px solid var(--ayw-border);
  }
  
  .ayw-composer-media[hidden] {
    display: none;
  }
  
  
  /* ==========================================================
     CABEÇALHO DA PRÉVIA
     ========================================================== */
  
  .ayw-composer-media-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-2);
  
    margin-bottom: var(--ayw-space-2);
  }
  
  .ayw-composer-media-title {
    min-width: 0;
  
    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-overflow: ellipsis;
    white-space: nowrap;
  }
  
  
  /* ==========================================================
     GRADE DA PRÉVIA
     ========================================================== */
  
  .ayw-composer-media-grid {
    display: grid;
  
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-2);
  }
  
  
  /* ==========================================================
     ITEM DA PRÉVIA
     ========================================================== */
  
  .ayw-composer-media-item {
    position: relative;
  
    width: 100%;
    min-width: 0;
  
    aspect-ratio: 4 / 3;
  
    overflow: hidden;
  
    border-radius: var(--ayw-radius-md);
  
    background: var(--ayw-bg-muted);
  }
  
  .ayw-composer-media-item img,
  .ayw-composer-media-item video {
    display: block;
  
    width: 100%;
    height: 100%;
  
    object-fit: cover;
  }
  
  .ayw-composer-media-item video {
    background: var(--ayw-bg-muted);
  }
  
  
  /* ==========================================================
     IDENTIFICAÇÃO DA MÍDIA
     ========================================================== */
  
  .ayw-composer-media-type {
    position: absolute;
  
    bottom: var(--ayw-space-2);
    left: var(--ayw-space-2);
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    min-height: 1.5rem;
  
    padding-inline: var(--ayw-space-2);
  
    border-radius: var(--ayw-radius-pill);
  
    background: var(--ayw-overlay);
    color: var(--ayw-text-inverse);
  
    font-size: var(--ayw-font-size-xs);
    line-height: 1;
  
    pointer-events: none;
  }
  
  
  /* ==========================================================
     REMOVER ANEXO
     ========================================================== */
  
  .ayw-composer-media-remove {
    position: absolute;
  
    top: var(--ayw-space-2);
    right: var(--ayw-space-2);
  
    width: 2rem;
    height: 2rem;
  }
  
  
  /* ==========================================================
     ESTADOS DA PRÉVIA
     ========================================================== */
  
  .ayw-composer-media-item.is-loading::after {
    position: absolute;
    inset: 0;
  
    display: grid;
    place-items: center;
  
    padding: var(--ayw-space-3);
  
    background: var(--ayw-overlay);
    color: var(--ayw-text-inverse);
  
    content: "Carregando…";
  
    font-size: var(--ayw-font-size-xs);
    line-height: var(--ayw-line-height-normal);
  
    text-align: center;
  }
  
  .ayw-composer-media-item.is-error {
    display: flex;
    align-items: center;
    justify-content: center;
  
    padding: var(--ayw-space-3);
  
    background: var(--ayw-danger-soft);
    color: var(--ayw-danger);
  
    font-size: var(--ayw-font-size-xs);
    line-height: var(--ayw-line-height-relaxed);
  
    text-align: center;
  }
  
  
  /* ==========================================================
     MÍDIAS DA PUBLICAÇÃO
     ========================================================== */
  
  .ayw-post-media {
    display: grid;
  
    width: 100%;
    min-width: 0;
    max-width: 100%;
  
    gap: 2px;
  
    margin-block: var(--ayw-space-2);
  
    overflow: hidden;

    border: 1px solid var(--ayw-border);
  
    border-radius: var(--ayw-radius-lg);
  }
  
  .ayw-post-media[data-count="1"] {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .ayw-post-media[data-count="2"],
  .ayw-post-media[data-count="3"],
  .ayw-post-media[data-count="4"] {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
  
  .ayw-post-media[data-count="3"]
  .ayw-post-media-item:first-child {
    grid-row: span 2;
  }
  
  
  /* ==========================================================
     ITEM DA PUBLICAÇÃO
     ========================================================== */
  
  .ayw-post-media-item {
    position: relative;
  
    display: block;
  
    width: 100%;
    min-width: 0;
  
    overflow: hidden;
  
    border-radius: var(--ayw-radius-md);
  
    background: var(--ayw-bg-soft);
  
    cursor: zoom-in;
  }
  
  button.ayw-post-media-item {
    margin: 0;
    padding: 0;
  
    border: 0;
  
    font: inherit;
    text-align: inherit;
  
    appearance: none;
  
    -webkit-appearance: none;
  }
  
  
  /* ==========================================================
     PROPORÇÕES POR QUANTIDADE
     ========================================================== */
  
  .ayw-post-media[data-count="1"]
  .ayw-post-media-item {
    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: auto;

    max-height: 28rem;

    border-radius: calc(var(--ayw-radius-lg) - 1px);
  }
  
  .ayw-post-media[data-count="2"]
  .ayw-post-media-item,
  .ayw-post-media[data-count="4"]
  .ayw-post-media-item {
    aspect-ratio: 1 / 1;
  }

  .ayw-post-media[data-count="2"]
  .ayw-post-media-item {
    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 4 / 5;

    max-height: 30rem;
  }
  
  .ayw-post-media[data-count="3"]
  .ayw-post-media-item {
    aspect-ratio: 1 / 1;
  }
  
  .ayw-post-media[data-count="3"]
  .ayw-post-media-item:first-child {
    aspect-ratio: auto;
  
    min-height: 100%;
  }
  
  
  /* ==========================================================
     IMAGEM E VÍDEO
     ========================================================== */
  
  .ayw-post-media-item img,
  .ayw-post-media-item video {
    display: block;
  
    width: 100%;
    height: 100%;
  
    object-fit: cover;
  
    transition:
      transform var(--ayw-transition-base);
  }

  .ayw-post-media[data-count="1"]
  .ayw-post-media-item img {
    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 28rem;

    object-fit: contain;
  }

  .ayw-post-media[data-count="2"]
  .ayw-post-media-item img {
    object-fit: contain;
  }
  
  .ayw-post-media[data-count="1"]
  .ayw-post-media-item video {
    object-fit: contain;
  }
  
  .ayw-post-media-item:hover img,
  .ayw-post-media-item:hover video {
    transform: scale(1.015);
  }
  
  .ayw-post-media-item:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
  }
  
  .ayw-post-media-item.is-contain img,
  .ayw-post-media-item.is-contain video {
    object-fit: contain;
  }
  
  
  /* ==========================================================
     SOBREPOSIÇÕES
     ========================================================== */
  
  .ayw-post-media-label {
    position: absolute;
  
    right: var(--ayw-space-2);
    bottom: var(--ayw-space-2);
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    min-height: 1.625rem;
  
    padding-inline: var(--ayw-space-2);
  
    border-radius: var(--ayw-radius-pill);
  
    background: var(--ayw-overlay);
    color: var(--ayw-text-inverse);
  
    font-size: var(--ayw-font-size-xs);
    line-height: 1;
  
    pointer-events: none;

    opacity: 0;

    transform: translateY(0.25rem);

    transition:
      opacity var(--ayw-transition-fast),
      transform var(--ayw-transition-fast);
  }

  .ayw-post-media-item:hover .ayw-post-media-label,
  .ayw-post-media-item:focus-visible .ayw-post-media-label {
    opacity: 1;

    transform: translateY(0);
  }
  
  .ayw-post-media-more {
    position: absolute;
    inset: 0;
  
    display: grid;
    place-items: center;
  
    background: var(--ayw-overlay);
    color: var(--ayw-text-inverse);
  
    font-size: var(--ayw-font-size-2xl);
    font-weight: var(--ayw-font-weight-bold);
    line-height: 1;
  
    pointer-events: none;
  }
  
  .ayw-post-media-play {
    position: absolute;
  
    top: 50%;
    left: 50%;
  
    display: grid;
    place-items: center;
  
    width: 3rem;
    height: 3rem;
  
    border-radius: 50%;
  
    background: var(--ayw-overlay);
    color: var(--ayw-text-inverse);
  
    font-size: var(--ayw-font-size-xl);
    line-height: 1;
  
    pointer-events: none;
  
    transform: translate(-50%, -50%);
  }
  
  
  /* ==========================================================
     MÍDIA INDISPONÍVEL
     ========================================================== */
  
  .ayw-post-media-unavailable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    width: 100%;
    min-height: 10rem;
  
    gap: var(--ayw-space-2);
  
    padding: var(--ayw-space-4);
  
    color: var(--ayw-text-muted);
  
    text-align: center;
  }
  
  .ayw-post-media-unavailable-icon {
    display: grid;
    place-items: center;
  
    width: 2.5rem;
    height: 2.5rem;
  }
  
  
  /* ==========================================================
     CARROSSEL
     ========================================================== */
  
  .ayw-post-media-swipe {
    width: 100%;
    min-width: 0;
  
    overflow: hidden;
  }
  
  .ayw-post-media-track {
    display: flex;
  
    width: 100%;
    min-width: 0;
  
    overflow-x: auto;
    overflow-y: hidden;
  
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  
    overscroll-behavior-x: contain;
  
    scrollbar-width: none;
  
    -webkit-overflow-scrolling: touch;
  }
  
  .ayw-post-media-track::-webkit-scrollbar {
    display: none;
  }
  
  .ayw-post-media-slide {
    flex: 0 0 100%;
  
    width: 100%;
    min-width: 0;
  
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  
  .ayw-post-media-slide
  .ayw-post-media-item {
    width: 100%;
  
    aspect-ratio: 16 / 10;
  
    max-height: 32rem;
  }
  
  
  /* ==========================================================
     INDICADORES DO CARROSSEL
     ========================================================== */
  
  .ayw-post-media-dots {
    display: flex;
    align-items: center;
    justify-content: center;
  
    min-height: 1rem;
  
    gap: var(--ayw-space-2);
  
    margin-top: var(--ayw-space-1);
  }
  
  .ayw-post-media-dot {
    display: block;
  
    width: 0.4375rem;
    height: 0.4375rem;
  
    padding: 0;
  
    border: 0;
    border-radius: 50%;
  
    background: var(--ayw-border-strong);
  }
  
  button.ayw-post-media-dot {
    cursor: pointer;
  }
  
  .ayw-post-media-dot.is-active,
  .ayw-post-media-dot[aria-current="true"] {
    background: var(--ayw-primary);
  
    transform: scale(1.2);
  }
  
  .ayw-post-media-dot:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 3px;
  }
  
  .ayw-post-media-counter {
    display: flex;
    align-items: center;
    justify-content: center;
  
    margin-top: var(--ayw-space-1);
  
    color: var(--ayw-text-muted);
  
    font-size: var(--ayw-font-size-xs);
    line-height: 1;
  }
  
  
  /* ==========================================================
     LIGHTBOX
     ========================================================== */
  
  .ayw-lightbox {
    position: fixed;
    inset: 0;
  
    z-index: var(--ayw-z-modal);
  
    display: none;
    align-items: center;
    justify-content: center;
  
    padding:
      calc(
        var(--ayw-space-4) +
        env(safe-area-inset-top)
      )
      calc(
        var(--ayw-space-4) +
        env(safe-area-inset-right)
      )
      calc(
        var(--ayw-space-4) +
        env(safe-area-inset-bottom)
      )
      calc(
        var(--ayw-space-4) +
        env(safe-area-inset-left)
      );
  }
  
  .ayw-lightbox[data-open="true"] {
    display: flex;
  }

  html.ayw-lightbox-open {
    overflow: hidden;
  }
  
  
  /* ==========================================================
     FUNDO
     ========================================================== */
  
  .ayw-lightbox-backdrop {
    position: absolute;
    inset: 0;
  
    width: 100%;
    height: 100%;
  
    margin: 0;
    padding: 0;
  
    border: 0;
  
    background: var(--ayw-overlay);
  
    cursor: pointer;
  
    appearance: none;
  
    -webkit-appearance: none;
  }
  
  
  /* ==========================================================
     PAINEL
     ========================================================== */
  
  .ayw-lightbox-panel {
    position: relative;
    z-index: 1;
  
    display: flex;
    flex-direction: column;
  
    width: min(100%, 67.5rem);
  
    max-height:
      calc(
        100dvh -
        var(--ayw-space-8)
      );
  
    overflow: hidden;
  
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-xl);
  
    background: var(--ayw-surface);
  
    box-shadow: var(--ayw-shadow-xl);
  }
  
  
  /* ==========================================================
     CABEÇALHO E RODAPÉ
     ========================================================== */
  
  .ayw-lightbox-top,
  .ayw-lightbox-bottom {
    display: flex;
    align-items: center;
  
    flex: 0 0 auto;
  
    min-width: 0;
  
    gap: var(--ayw-space-3);
  
    padding: var(--ayw-space-3);
  }
  
  .ayw-lightbox-top {
    justify-content: space-between;
  
    border-bottom: 1px solid var(--ayw-border);
  }
  
  .ayw-lightbox-bottom {
    justify-content: flex-end;
  
    border-top: 1px solid var(--ayw-border);
  }
  
  .ayw-lightbox-meta {
    flex: 1 1 auto;
  
    min-width: 0;
  
    overflow: hidden;
  
    color: var(--ayw-text-muted);
  
    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-normal);
  
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .ayw-lightbox-close {
    flex: 0 0 auto;
  }
  
  
  /* ==========================================================
     CORPO
     ========================================================== */
  
  .ayw-lightbox-body {
    position: relative;
  
    display: grid;
    place-items: center;
  
    flex: 1 1 auto;
  
    min-width: 0;
    min-height: 15rem;
  
    overflow: hidden;
  
    background: var(--ayw-bg-muted);
  }
  
  .ayw-lightbox-img,
  .ayw-lightbox-video {
    display: block;
  
    max-width: 100%;
  
    max-height:
      calc(
        100dvh -
        11.25rem
      );
  
    object-fit: contain;
  }
  
  .ayw-lightbox-video {
    width: 100%;
  }
  
  
  /* ==========================================================
     NAVEGAÇÃO
     ========================================================== */
  
  .ayw-lightbox-nav {
    position: absolute;
  
    top: 50%;
  
    display: grid;
    place-items: center;
  
    width: 2.75rem;
    height: 2.75rem;
  
    margin: 0;
    padding: 0;
  
    border: 0;
    border-radius: 50%;
  
    background: var(--ayw-overlay);
    color: var(--ayw-text-inverse);
  
    cursor: pointer;
  
    font: inherit;
    font-size: var(--ayw-font-size-2xl);
    line-height: 1;
  
    appearance: none;
  
    -webkit-appearance: none;
  
    transform: translateY(-50%);
  }
  
  .ayw-lightbox-prev {
    left: var(--ayw-space-3);
  }
  
  .ayw-lightbox-next {
    right: var(--ayw-space-3);
  }
  
  .ayw-lightbox-nav[hidden] {
    display: none;
  }
  
  .ayw-lightbox-nav:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
  }
  
  
  /* ==========================================================
     CARREGAMENTO
     ========================================================== */
  
  .ayw-lightbox-loading {
    position: absolute;
    inset: 0;
  
    display: grid;
    place-items: center;
  
    background: var(--ayw-bg-muted);
  }
  
  .ayw-lightbox-loading[hidden] {
    display: none;
  }
  
  
  /* ==========================================================
     NOTEBOOK E TABLET
     ========================================================== */
  
  @media (
    min-width: 48rem
  ) and (
    max-width: 74.999rem
  ) {
    .ayw-composer-media-grid {
      grid-template-columns:
        repeat(
          3,
          minmax(0, 1fr)
        );
    }
  
    .ayw-post-media[data-count="1"]
    .ayw-post-media-item,
    .ayw-post-media-slide
    .ayw-post-media-item {
      max-height: 28rem;
    }
  }
  
  
  /* ==========================================================
     DESKTOP
     ========================================================== */
  
  @media (min-width: 75rem) {
    .ayw-composer-media-grid {
      grid-template-columns:
        repeat(
          3,
          minmax(0, 1fr)
        );
    }
  
    .ayw-lightbox-nav {
      width: 3rem;
      height: 3rem;
    }
  }
  
  
  /* ==========================================================
     CELULAR
     ========================================================== */
  
  @media (max-width: 35.999rem) {
    .ayw-post-media {
      border-radius: var(--ayw-radius-md);
    }
  
    .ayw-post-media[data-count="1"]
    .ayw-post-media-item,
    .ayw-post-media-slide
    .ayw-post-media-item {
      aspect-ratio: auto;
  
      max-height: 24rem;
    }

    .ayw-post-media[data-count="2"] {
      grid-template-columns: minmax(0, 1fr);
    }

    .ayw-post-media[data-count="2"]
    .ayw-post-media-item {
      aspect-ratio: auto;

      max-height: 24rem;
    }

    .ayw-post-media[data-count="2"]
    .ayw-post-media-item img {
      width: auto;
      max-width: 100%;

      height: auto;
      max-height: 24rem;
    }

    .ayw-post-media[data-count="1"]
    .ayw-post-media-item img {
      max-height: 24rem;
    }
  
    .ayw-post-media-play {
      width: 2.75rem;
      height: 2.75rem;
    }
  }
  
  
  /* ==========================================================
     CELULAR COMPACTO
     ========================================================== */
  
  @media (max-width: 23.4375rem) {
    .ayw-composer-media-grid {
      grid-template-columns:
        minmax(0, 1fr);
    }
  
    .ayw-composer-media-item {
      aspect-ratio: 16 / 10;
    }
  
    .ayw-post-media[data-count="2"],
    .ayw-post-media[data-count="3"],
    .ayw-post-media[data-count="4"] {
      grid-template-columns:
        minmax(0, 1fr);
    }
  
    .ayw-post-media[data-count="3"]
    .ayw-post-media-item:first-child {
      grid-row: auto;
  
      aspect-ratio: 16 / 10;
      min-height: 0;
    }
  
    .ayw-post-media[data-count="2"]
    .ayw-post-media-item,
    .ayw-post-media[data-count="3"]
    .ayw-post-media-item,
    .ayw-post-media[data-count="4"]
    .ayw-post-media-item {
      aspect-ratio: 16 / 10;
    }
  
    .ayw-lightbox {
      padding: 0;
    }
  
    .ayw-lightbox-panel {
      width: 100%;
      height: 100%;
      max-height: none;
  
      border: 0;
      border-radius: 0;
    }
  
    .ayw-lightbox-top {
      padding-top:
        calc(
          var(--ayw-space-3) +
          env(safe-area-inset-top)
        );
    }
  
    .ayw-lightbox-bottom {
      padding-bottom:
        calc(
          var(--ayw-space-3) +
          env(safe-area-inset-bottom)
        );
    }
  
    .ayw-lightbox-img,
    .ayw-lightbox-video {
      max-height:
        calc(
          100dvh -
          8.875rem -
          env(safe-area-inset-top) -
          env(safe-area-inset-bottom)
        );
    }
  
    .ayw-lightbox-nav {
      width: 2.5rem;
      height: 2.5rem;
    }
  
    .ayw-lightbox-prev {
      left: var(--ayw-space-2);
    }
  
    .ayw-lightbox-next {
      right: var(--ayw-space-2);
    }
  }
  
  
  /* ==========================================================
     MOVIMENTO REDUZIDO
     ========================================================== */
  
  @media (prefers-reduced-motion: reduce) {
    .ayw-post-media-item img,
    .ayw-post-media-item video,
    .ayw-post-media-dot {
      transition: none;
    }
  
    .ayw-post-media-item:hover img,
    .ayw-post-media-item:hover video {
      transform: none;
    }
  
    .ayw-post-media-track {
      scroll-behavior: auto;
    }
  }