/* YG3 Hub – Layout Shell (desktop; 4 icons per row; heart visuals untouched) */

@media (min-width: 1024px){
  /* 2-column card: ~1/3 media (square) + 2/3 content */
  .yg3-hub .yg3-card{
    display: grid !important;
    grid-template-columns: 1fr 2fr !important; /* ~1/3 : 2/3 */
    gap: 16px !important;
    align-items: start !important;
  }

  /* Left: square media */
  .yg3-hub .yg3-card .yg3-card__media{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #00000012 !important;
    border-radius: 12px !important;
    grid-column: 1 !important;
  }
  .yg3-hub .yg3-card .yg3-card__media > img,
  .yg3-hub .yg3-card .yg3-card__media > picture img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  /* Right: content */
  .yg3-hub .yg3-card .yg3-card__body{
    grid-column: 2 !important;
    align-self: start !important;
  }

  /* Actions row: exactly 4 columns on desktop */
  .yg3-hub .yg3-card .yg3-card__actions{
    display: grid !important;
    grid-template-columns: repeat(4, max-content) !important; /* 4 per row, variable width */
    column-gap: 6px !important;
    row-gap: 6px !important;
    margin-top: 6px !important;
    align-items: center !important;
  }

  /* Make NON-HEART action buttons compact (icons only).
     DO NOT touch heart visuals here. */
  .yg3-hub .yg3-card .yg3-card__actions :is(button, a, .yg3-btn, .button):not(.yg3-sf-heart):not(.yg365-fav-btn):not(.yg365-fav-btn.is-heart){
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* compact sizing so 4 fit neatly */
    padding: 4px 6px !important;
    min-height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;

    /* hide any stray text labels on non-heart buttons */
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
  }

  /* Hide common inner text wrappers inside non-heart buttons */
  .yg3-hub .yg3-card .yg3-card__actions :is(button, a, .yg3-btn, .button):not(.yg3-sf-heart):not(.yg365-fav-btn):not(.yg365-fav-btn.is-heart)
  :is(span, strong, em, .elementor-button-text){
    display: none !important;
  }

  /* Size the non-heart icon glyphs */
  .yg3-hub .yg3-card .yg3-card__actions :is(button, a, .yg3-btn, .button):not(.yg3-sf-heart):not(.yg365-fav-btn):not(.yg365-fav-btn.is-heart)
  :is(svg, .yg3-icon){
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* Heart: only control ordering — visuals come from yg3-heart-icons.css */
  .yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart,
  .yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart{
    order: 99 !important; /* keep favourite last */
  }
}