/* ==========================================================
   YG3 Hub — Layout V2 (Clean)
   - Desktop: 1/3 + 2/3 grid, image left
   - Actions pinned bottom (heart last)
   - Heart visuals live in yg3-heart-icons.css
   ========================================================== */

/* Card shell */
.yg3-hub .yg3-card{
  display:grid !important;
  grid-template-columns:1fr 2fr !important;
  gap:16px !important;
  align-items:stretch !important;
  background:var(--yg3-bg,#fff) !important;
  border:1px solid var(--yg3-border,#e5e7eb) !important;
  border-radius:16px !important;
  box-shadow:0 2px 10px rgba(0,0,0,.06) !important;
  overflow:hidden !important;
  padding:14px !important;
}

/* Media */
.yg3-hub .yg3-card .yg3-card__media{
  grid-column:1 !important;
  aspect-ratio:var(--yg3-media-ratio,5/4) !important;
  width:100% !important;
  background:#0b0b0b10 !important;
  border-radius:14px !important;
  overflow:hidden !important;
}
.yg3-hub .yg3-card .yg3-card__media > img,
.yg3-hub .yg3-card .yg3-card__media > picture img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

/* Body */
.yg3-hub .yg3-card .yg3-card__body{
  grid-column:2 !important;
  display:flex !important;
  flex-direction:column !important;
  row-gap:8px !important;
  align-self:stretch !important;
  height:100% !important;
  padding:2px 0 !important;
}

/* Pill / Title / Desc */
.yg3-hub .yg3-card .yg3-card__pill{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  max-width:max-content !important;
  background:var(--yg3-pill,#eef2f6) !important;
  color:var(--yg3-muted,#6b7280) !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1 !important;
  margin:0 !important;
}
.yg3-hub .yg3-card .yg3-card__title{
  margin:0 !important;
  font-size:20px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  color:var(--yg3-text,#111827) !important;
}
.yg3-hub .yg3-card .yg3-card__desc{
  margin:0 !important;
  color:var(--yg3-muted,#6b7280) !important;
  font-size:15px !important;
  line-height:1.45 !important;
}

/* Actions (pinned bottom) */
.yg3-hub .yg3-card .yg3-card__actions{
  display:grid !important;
  grid-template-columns:repeat(4,32px) !important; /* desktop chip width */
  column-gap:8px !important;
  row-gap:8px !important;
  align-items:center !important;
  margin-top:auto !important;
}

/* Non-heart chip frame */
.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;
  width:32px !important; height:32px !important;
  min-width:32px !important; min-height:32px !important;
  border:1px solid var(--yg3-border,#e5e7eb) !important;
  border-radius:10px !important;
  background:#fff !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:visible !important;          /* prevent stroke clipping */
  font-size:0 !important; line-height:0 !important;
  white-space:nowrap !important;
  text-indent:-9999px !important;
}

/* SVG / icon wrappers (glyph size desktop) */
.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) svg{
  width:16px !important; height:16px !important; display:block !important; overflow:visible !important;
}
.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(.yg3-icon,[class*="icon-"]){
  width:16px !important; height:16px !important; display:block !important; line-height:0 !important;
  background-size:16px 16px !important; background-position:center !important; background-repeat:no-repeat !important;
}

/* Heart = last (visuals live elsewhere) */
.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; }

/* ---------------- Tablet ---------------- */
@media (min-width:640px) and (max-width:1023.98px){
  .yg3-hub .yg3-card{ gap:14px !important; padding:12px !important; }
  .yg3-hub .yg3-card .yg3-card__media{ border-radius:14px !important; }
  .yg3-hub .yg3-card .yg3-card__title{ font-size:18px !important; }
}

/* ---------------- Mobile ---------------- */
@media (max-width:639.98px){
  /* Card grid + no card padding (we add gutters on children) */
  .yg3-hub .yg3-card{
    grid-template-columns:1fr 2fr !important;
    gap:16px !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  /* Image gutters (T R B L) and rounding */
  .yg3-hub .yg3-card > .yg3-card__media{
    margin:12px 0 12px 12px !important;
    border-radius:12px !important;
    overflow:hidden !important;
  }

  /* Text column gutters (your tuned values) */
  .yg3-hub .yg3-card > .yg3-card__body{
    margin:12px 12px 0 10px !important;
    padding:2px 16px 28px 0 !important; /* extra bottom for icons */
    display:flex !important;
    flex-direction:column !important;
    box-sizing:border-box !important;
  }

  /* Actions pinned bottom + 40px chips to match heart */
  .yg3-hub .yg3-card .yg3-card__actions{
    margin-top:auto !important;
    grid-template-columns:repeat(4,40px) !important;
    column-gap:8px !important; row-gap:8px !important;
  }
  .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){
    width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important;
    border-radius:10px !important; overflow:visible !important;
  }
  /* Bigger glyphs on mobile to match heart presence */
  .yg3-hub .yg3-card .yg3-card__actions
    .yg3-btn[data-icon]:not(.yg3-sf-heart):not(.yg365-fav-btn):not(.yg365-fav-btn.is-heart){
    background-position:center !important; background-repeat:no-repeat !important; background-size:22px 22px !important;
    -webkit-mask-position:center !important; mask-position:center !important;
    -webkit-mask-size:22px 22px !important; mask-size:22px !important;
  }

  .yg3-hub .yg3-card .yg3-card__title{ font-size:17px !important; }
}

/* ==========================================================
   NOTE:
   This layout file intentionally does not paint icons.
   Icons are rendered by the icon layer (yg3-icons.css) or by
   real icon elements (<span class="dashicons…"> / <img.yg3-ico> / inline <svg>).
   ========================================================== */