/* Base section & titles */
.yg3w-section { margin-top: 2rem; }
.yg3w-section__header { margin-bottom: .75rem; }
.yg3w-title { font: 600 1.25rem/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; }

/* Modal inner layout helpers */
.yg3w-modal .yg3w-modal__hd { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:1rem; }
.yg3w-modal .yg3w-modal__bd { max-height: calc(80vh - 4rem); overflow:auto; }
.yg3w-modal .yg3w-modal__ft { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .yg3w-section .yg3w-title { color: var(--yg3-text, #fff); }
}

/* Print tweaks */
@media print {
  .yg3w-modal .yg3w-modal__hd .yg3-btn,
  .yg3w-modal [data-close] { display:none !important; }
  .yg3w-modal .yg3w-modal__bd { max-height:none; overflow:visible; }
}

/* === Compat: Hub-like cards & modal scoped to .yg3w-hub ================== */
/* Grid respecting data-cols */
.yg3w-hub .yg3-cards[data-cols="3"] { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
.yg3w-hub .yg3-cards[data-cols="4"] { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
.yg3w-hub .yg3-cards[data-cols="5"] { grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
@media (max-width: 1024px){ .yg3w-hub .yg3-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){  .yg3w-hub .yg3-cards { grid-template-columns: 1fr; } }

/* Card chrome */
.yg3w-hub .yg3-card{
  display:flex; flex-direction:column; background:var(--yg3-surface,#fff);
  border:1px solid var(--yg3-border,#e5e7eb); border-radius:12px; overflow:hidden;
}
.yg3-hub .yg3-card__media,
.yg3w-hub .yg3-card__media{ position:relative; background:var(--yg3-muted,#f1f5f9); aspect-ratio:16/9; }
.yg3-hub .yg3-card__media--empty,
.yg3w-hub .yg3-card__media--empty{ background:var(--yg3-muted,#f1f5f9); }
.yg3-hub .yg3-card__cover,
.yg3w-hub .yg3-card__cover{ width:100%; height:100%; object-fit:cover; display:block; }
.yg3-hub .yg3-card__body,
.yg3w-hub .yg3-card__body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.yg3-hub .yg3-card__pill,
.yg3w-hub .yg3-card__pill{
  align-self:flex-start; font-size:12px; line-height:1; padding:4px 8px; border-radius:999px;
  background:var(--yg3-chip-bg,#e5e7eb); color:var(--yg3-chip-fg,#374151);
}
.yg3-hub .yg3-card__title,
.yg3w-hub .yg3-card__title{ margin:0; font-weight:600; }
.yg3-hub .yg3-card__desc,
.yg3w-hub .yg3-card__desc{ margin:0; opacity:.85; font-size:.95rem; line-height:1.45; }
.yg3-hub .yg3-card__actions,
.yg3w-hub .yg3-card__actions{ display:flex; gap:8px; margin-top:8px; }

/* Neutral buttons */
.yg3w-hub .yg3-btn{
  appearance:none; background:#fff; border:1px solid var(--yg3-border,#e5e7eb);
  padding:8px 12px; border-radius:8px; cursor:pointer;
}
.yg3w-hub .yg3-btn:hover{ background:#f8fafc; }
.yg3w-hub .yg3-btn--ghost{ background:transparent; }

/* Hero/full width on desktop */
@media (min-width:1024px){
  .yg3w-hub .yg3-cards .yg3-card.is-hero{ grid-column:1 / -1; }
}

/* Modal overlay (scoped) */
.yg3w-hub .yg3-modal{
  position:fixed; inset:0; display:none; min-height:100vh;
  align-items:center; justify-content:center; background:rgba(0,0,0,.45);
  z-index:10000; padding:24px;
}
.yg3w-hub .yg3-modal[aria-hidden="false"]{ display:flex !important; }
.yg3w-hub .yg3-modal__content{
  width:min(960px, 92vw); max-height:85vh; overflow:auto;
  background:var(--yg3-surface,#fff); color:var(--yg3-text,#111827);
  border-radius:12px; padding:16px; box-shadow:0 20px 40px rgba(0,0,0,.18);
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .yg3w-hub .yg3-card{ background:#0b1220; border-color:#22304a; }
  .yg3w-hub .yg3-card__media--empty{ background:#141c2e; }
  .yg3w-hub .yg3-card__pill{ background:#1f2937; color:#cbd5e1; }
  .yg3w-hub .yg3-modal__content{ background:#0b1220; color:#e5e7eb; }
}

/* === Force neutral buttons inside our hub wrapper (cards + modals) === */
.yg3w-hub .yg3-btn,
.yg3w-hub .yg3-btn:link,
.yg3w-hub .yg3-btn:visited {
  color: var(--yg3-text, #111827) !important;
  background: #fff !important;
  border: 1px solid var(--yg3-border, #e5e7eb) !important;
  text-decoration: none !important;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.yg3w-hub .yg3-btn:hover { background: #f8fafc !important; }
.yg3w-hub .yg3-btn--ghost,
.yg3w-hub .yg3-btn--ghost:link,
.yg3w-hub .yg3-btn--ghost:visited {
  background: transparent !important;
  color: var(--yg3-text, #111827) !important;
  border-color: var(--yg3-border, #e5e7eb) !important;
}

/* Make sure modal buttons also stay neutral */
.yg3w-hub .yg3-modal .yg3-btn,
.yg3w-hub .yg3-modal .yg3-btn:link,
.yg3w-hub .yg3-modal .yg3-btn:visited {
  color: var(--yg3-text, #111827) !important;
  background: #fff !important;
  border: 1px solid var(--yg3-border, #e5e7eb) !important;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .yg3w-hub .yg3-btn,
  .yg3w-hub .yg3-modal .yg3-btn {
    background: #0b1220 !important;
    color: #e5e7eb !important;
    border-color: #273043 !important;
  }
  .yg3w-hub .yg3-btn:hover { background: #0f1830 !important; }
  .yg3w-hub .yg3-btn--ghost { background: transparent !important; color: #e5e7eb !important; }
}

/* Rounds card cover: make trend always white */
.yg3-card[data-yg3w="widget:rounds"] .yg3w-cover-trend,
.yg3-card[data-yg3w="widget:rounds"] .yg3w-cover-trend.yg3w-trend--up,
.yg3-card[data-yg3w="widget:rounds"] .yg3w-cover-trend.yg3w-trend--down{
  color:#fff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.35); /* helps on grass background */
}