$friend-link-item-height = 82px
$friend-link-item-height-tablet = 68px
$friend-link-item-interval = 16px
$friend-link-item-border-radius = 9px

@require '../../common/variables'

.page-template-container
  redefine-container(
    false,
    0,
    0,
    30px,
    30px
  )

  +redefine-mobile()
    padding 1.2rem 0.2rem
    box-shadow none

    &:hover
      box-shadow none

  .page-template-content
    color var(--default-text-color)

    h1, h2, h3, h4, h5, h6
      &:first-child
        margin 6px 0 36px 0
        border-bottom none
        line-height 1

  #shuoshuo-content
    img:hover
      cursor zoom-in


  // Masonry layout using CSS columns
  // Preloaders have correct aspect ratios from lazyload-handle.js
  // Layout is stable from page load - no waiting for images
  #masonry-container
    column-count 2
    column-gap 10px
    opacity 1
    
    @media screen and (min-width: 768px)
      column-count 3
    
    @media screen and (min-width: 1200px)
      column-count 4

    &.masonry-ready
      opacity 1

    .masonry-item
      break-inside avoid
      margin-bottom 10px
      display inline-block
      width 100%
      box-sizing border-box

      &:hover
        img, .img-preloader
          box-shadow var(--redefine-box-shadow)

      img, .img-preloader
        width 100%
        height auto
        border-radius $redefine-border-radius-medium
        box-shadow var(--redefine-box-shadow-flat)
        cursor zoom-in
        display block
        margin 0
        
      .img-preloader
        // Override default img-preloader margin for masonry items
        margin 0

  /* Loading placeholder removed - preloaders show immediately */

  .loading
    -webkit-animation gradient-slide 1.1s ease infinite
    animation gradient-slide 1.1s ease infinite
    background 0 0 / 300% 300% linear-gradient(120deg, #9c9c9c20 40%, #83838325 50%, #9c9c9c20 60%)

  .flex-grid
    display grid
    grid-template-columns repeat(auto-fill, minmax(150px, 1fr))
    gap 10px

    @media screen and (min-width: 768px)
      grid-template-columns repeat(auto-fill, minmax(255px, 1fr))

  .card
    border 1px solid var(--border-color)
    border-radius $redefine-border-radius-medium
    box-sizing border-box
    min-height 80vh
    padding 30px

  @keyframes gradient-slide
    0%
      background-position 100% 50%

    to
      background-position 0% 50%

  /* Images */
  .image-container
    position relative

  .image-title
    position absolute
    top 5px
    left 5px
    color var(--default-text-color)
    background-color var(--background-color-transparent-40)
    padding 5px 10px
    font-size 14px
    opacity 0
    backdrop-filter blur(10px)
    -webkit-backdrop-filter blur(10px)
    border-radius $redefine-border-radius-small
    transition opacity 0.2s ease-out

  .image-description
    position absolute
    bottom 11px
    right 5px
    color var(--default-text-color)
    background-color var(--background-color-transparent-40)
    padding 5px 10px
    font-size 14px
    opacity 0
    max-width 80%
    backdrop-filter blur(10px)
    -webkit-backdrop-filter blur(10px)
    border-radius $redefine-border-radius-small
    transition opacity 0.2s ease-out

  figure.image-caption
    $image-caption-style = hexo-config('articles.style.image_caption')

    if $image-caption-style == 'float'
      position relative

      img
        margin-bottom 0

      .img-preloader
        margin-bottom 0

      figcaption
        position absolute
        left 50%
        bottom 10px
        transform translateX(-50%)
        text-align center
        font-size 0.9rem
        color var(--default-text-color)
        background-color var(--background-color-transparent)
        padding 5px 10px
        opacity 0
        max-width 80%
        backdrop-filter blur(10px)
        -webkit-backdrop-filter blur(10px)
        border-radius $redefine-border-radius-small
        transition opacity 0.2s ease-out

      &:hover figcaption
        opacity 1

      &.auto-hover figcaption
        opacity 1

    else
      img
        margin-bottom 0

      .img-preloader
        margin-bottom 0

      figcaption
        margin-top 5px
        margin-bottom 10px
        text-align center
        font-size 0.9rem
        color var(--third-text-color)

  .image-container:hover .image-title, .image-container:hover .image-description
    opacity 1

  // Auto-hover (scroll-triggered) shows title and description
  .image-container.auto-hover .image-title, .image-container.auto-hover .image-description
    opacity 1

  // Masonry title-only mode: no description → title centered at bottom
  .image-container.masonry-title-only
    .image-title
      top auto
      left 50%
      right auto
      bottom 10px
      transform translateX(-50%)
      text-align center
      max-width 90%

  // Masonry compact mode (JS-triggered when description overflows or overlaps title)
  .image-container.masonry-compact
    .image-description
      display none !important

    .image-title
      top auto
      left 50%
      right auto
      bottom 10px
      transform translateX(-50%)
      text-align center
      max-width 90%

  .image-container img
    width 100%
    height auto
    transition box-shadow 0.3s ease-in-out
    overflow hidden

  .image-container:hover img
    box-shadow var(--redefine-box-shadow-hover)

  .image-container.auto-hover img
    box-shadow var(--redefine-box-shadow-hover)

  // ==================== Masonry Reactions Mode ====================
  // When giscus reactions are enabled, show title top-left and heart button bottom-right
  .image-container.masonry-reactions-mode
    .image-title
      // Always top-left in reactions mode
      top 5px
      left 5px
      right auto
      bottom auto
      transform none
      text-align left
      max-width calc(100% - 80px) // Leave room for heart button
      opacity 0
      transition opacity 0.2s ease-out

    &:hover .image-title
      opacity 1

    &.auto-hover .image-title
      opacity 1

    // Hide description in reactions mode (requirements say show title only)
    .image-description
      display none !important

  // Heart button
  .masonry-heart-btn
    position absolute
    bottom 8px
    right 8px
    display flex
    align-items center
    gap 4px
    padding 5px 10px
    border none
    border-radius $redefine-border-radius-small
    background-color var(--background-color-transparent-40)
    backdrop-filter blur(10px)
    -webkit-backdrop-filter blur(10px)
    color var(--default-text-color)
    font-size 14px
    cursor pointer
    opacity 0
    transition opacity 0.2s ease-out, transform 0.15s ease, background-color 0.2s ease
    z-index 2
    user-select none
    -webkit-user-select none
    line-height 1

    .heart-icon
      position relative
      display inline-flex
      align-items center
      justify-content center
      width 16px
      height 16px

      .heart-outline, .heart-filled
        position absolute
        top 0
        left 0
        transition opacity 0.2s ease, transform 0.2s ease

      .heart-filled
        opacity 0
        color #e74c3c
        transform scale(0.5)

      .heart-outline
        opacity 1
        color var(--default-text-color)

    .heart-count
      font-size 13px
      font-weight 600
      min-width 8px
      text-align center

    // Hover effects
    &:hover:not(:disabled)
      background-color var(--background-color-transparent-60)
      transform scale(1.05)

    &:active:not(:disabled)
      transform scale(0.95)

    // Disabled state (not logged in)
    &:disabled:not(.is-enabled)
      cursor default

    // Reacted state (heart filled)
    &.is-reacted
      .heart-icon
        .heart-filled
          opacity 1
          transform scale(1)

        .heart-outline
          opacity 0

    // Loading state
    &.is-loading
      pointer-events none
      opacity 0.6

    // Heart beat animation on react
    &.is-reacted .heart-icon .heart-filled
      animation heartBeat 0.4s ease-in-out

  // Show heart button on hover
  .image-container.masonry-reactions-mode:hover .masonry-heart-btn
    opacity 1

  // Show title and heart button via auto-hover (scroll-triggered)
  .image-container.masonry-reactions-mode.auto-hover
    .image-title
      opacity 1
    .masonry-heart-btn:not(.has-count):not(.is-reacted)
      opacity 1

  // Always show heart button if user has reacted or count > 0
  .image-container.masonry-reactions-mode .masonry-heart-btn
    &.is-reacted, &.has-count
      opacity 0.85

  @keyframes heartBeat
    0%
      transform scale(1)
    25%
      transform scale(1.3)
    50%
      transform scale(0.95)
    75%
      transform scale(1.1)
    100%
      transform scale(1)

  // Login prompt toast
  .masonry-login-prompt
    position fixed
    bottom 20px
    left 50%
    transform translateX(-50%) translateY(20px)
    z-index 9999
    opacity 0
    transition opacity 0.3s ease, transform 0.3s ease
    pointer-events none

    &.is-visible
      opacity 1
      transform translateX(-50%) translateY(0)
      pointer-events auto

    &.is-hiding
      opacity 0
      transform translateX(-50%) translateY(20px)

    .masonry-login-prompt-content
      display flex
      align-items center
      gap 8px
      padding 10px 16px
      background var(--background-color)
      border 1px solid var(--border-color)
      border-radius $redefine-border-radius-medium
      box-shadow var(--redefine-box-shadow)
      font-size 14px
      color var(--default-text-color)
      white-space nowrap

      .fa-github
        font-size 18px

    .masonry-login-prompt-close
      border none
      background none
      cursor pointer
      color var(--third-text-color)
      padding 0 2px
      font-size 14px
      line-height 1

      &:hover
        color var(--default-text-color)