carhop__dynamiques-theme__PROD-DEV/resources/css/components/post-header.css

.post-header {
  @apply bg-primary text-white py-8 2xl:py-16 px-2 lg:px-4 md:px-8 overflow-x-hidden;

  h1.post-header__title,
  h2.post-header__title {
    @apply uppercase font-medium text-4xl md:text-5xl lg:text-5xl text-white;
    line-height: 1.2;
  }
  &__inner {
    @apply mx-auto  grid  gap-24;
    @screen xl {
      @apply container;
    }
    &--has-thumbnail {
      @screen lg {
        grid-template-columns: 4fr 1fr;
      }
    }
    &--no-thumbnail {
      grid-template-columns: 1fr;
    }
  }
  .content-meta__revue-issue {
    @apply bg-white text-primary;
  }
  .thumbnail-wrapper {
    @apply order-2 lg:order-1 relative z-20 h-fit;
    width: calc(100% - 40px);
    padding: 1.2rem;
    /* max-width: calc(70% - 40px);
    @apply mx-auto; */

    @screen lg {
      /* transform: translateX(-10px); */
    }

    &:before {
      content: '';
      @apply bg-white block absolute top-0 left-0 border border-carhop-green-700 w-full h-full  z-10;
    }

    img {
      aspect-ratio: 4/5;
      /* max-height: 200px; */
      @apply max-h-[200px] lg:max-h-full  h-full relative z-10;
      @apply object-cover;

      /* width: calc(100% - 2rem);
      height: calc(100% - 2rem);
      margin: 0 auto; */
    }
    .thumbnail-overlay {
      @apply absolute z-0 rotate-3 top-6 left-6 w-full h-full border border-primary bg-white flex items-center justify-center;
      transform: translate(2px, 2px) rotate(2deg);
      /* transform: translate(12px, 12px) rotate(3deg); */
      background-image: linear-gradient(#efe8ff, #efe8ff);
      background-size: calc(100% - 12px) calc(100% - 12px);
      background-repeat: no-repeat;
      background-position: center;
      background-blend-mode: color-burn;
      &:after {
        content: '';
        @apply bg-carhop-purple-200;
        width: calc(100% - 2rem);
        height: calc(100% - 2rem);
      }
    }
  }

  .post-details {
    @apply flex flex-col xl:flex-row  xl:justify-between gap-x-4 gap-y-8 mt-12;
    grid-template-columns: 1fr 1fr;

    &__label {
      @apply uppercase font-bold text-lg text-white;
      letter-spacing: 0.2em;
    }
  }

  .socials-buttons {
    @apply flex flex-wrap justify-start xl:justify-end gap-4 h-fit shrink-0;
    @screen xl {
      min-width: 570px;
    }

    &__button {
      @apply bg-white text-carhop-green-700 px-4 lg:px-6 md:px-8 !py-3 lg:!py-4 font-normal rounded-full w-max flex items-center gap-2;
      transition: transform 0.3s ease-in-out;
      &:hover {
        transform: scale(1.05);
      }

      &[disabled] {
        @apply opacity-50 cursor-not-allowed;
      }
      img {
        @apply w-7 h-7 filter-primary;
      }

      &--like {
        transition: all 0.3s ease-in-out;

        .button-action-text {
          max-width: 0;
          overflow: hidden;
          white-space: nowrap;
        }

        .likes-count {
          max-width: 200px;
          overflow: hidden;
          /* transition: max-width 0.3s ease-in-out; */
          white-space: nowrap;
        }

        &[data-likes-count='0'] {
          .button-action-text {
            max-width: 200px;
          }
          .likes-count {
            max-width: 0;
          }
        }

        &:hover {
          .button-action-text {
            max-width: 200px;
            transition: max-width 0.3s ease-in-out;
          }
          .likes-count {
            max-width: 0;
          }
        }

        &.is-disabled {
          @apply opacity-100 cursor-not-allowed hover:opacity-80;

          .likes-count {
            @apply block;
          }
          .button-action-text {
            @apply max-w-0;
          }
        }

        &.is-disabled:hover {
          .button-action-text {
            @apply max-w-[200px];
          }
          .likes-count {
            @apply max-w-0;
          }
        }
      }

      &--share {
        .socials-buttons__share-links {
          @apply max-w-0 opacity-0 overflow-hidden max-h-7;
          transition: all 0.3s ease-in-out;
        }
        &.is-open .socials-buttons__share-links {
          @apply max-w-[200px] opacity-100;
        }

        .share-icon {
          @apply max-w-[200px];
        }

        &.is-open {
          .share-icon {
            @apply max-w-0 overflow-hidden;
          }
          .socials-buttons__share-links {
            overflow: visible;
          }
          .share-button {
            transform: scale(1) !important;
            transition: transform 0.2s ease-in-out !important;
          }
          .share-button:hover {
            transform: scale(1.02) !important;
          }

          .share-link {
            @apply block w-7 h-7;

            &:hover {
            }
          }
        }

        .share-link {
          display: inline-block;
          transition: transform 0.2s ease-in-out !important;

          &:hover {
            transform: scale(1.2) !important;
          }
        }
      }
    }

    &__share-links {
      @apply flex flex-wrap gap-2;
    }

    .share-link {
      @apply transition-all duration-300;
      &:after {
        content: none;
      }
      img {
        @apply w-7 h-7 filter-none;
      }
    }
  }
}
.article-meta__related-revue {
  flex-shrink: 1;
}
.article-meta__related-revue a {
  @apply hover:underline underline-offset-8 text-white;
  text-decoration-color: #fff;
  text-decoration-thickness: 1px;
}

.article-meta__value {
  @apply text-white font-light tracking-wide;
  letter-spacing: 0.0015em;
}