/* tips.css — BandGigz Quick Tips sidebar card + Need-Tips/Contact-Support pills.
   Loaded on the 6 action pages (applications, bookings, messages, post-gig, gigs, my-gigs)
   plus /activity.html and /public-profile.html. Pairs with tips.js (BandGigzTips module).

   Layout model:
   - Wide viewports (>= 1240px): page content and tips sit side-by-side in a grid shell.
     The existing .container keeps its own max-width and centers inside the left grid cell,
     the tips card is sticky in the right cell.
   - Narrow viewports (< 1240px): tips stack above the main content, full-width.

   Mount states (rendered by tips.js renderMount):
   - Active tips, not collapsed → .bgz-tips-card + .bgz-support-pill (Contact Support)
   - Active tips, collapsed     → .bgz-support-pill (Need Tips) + .bgz-support-pill (Contact Support)
   - No active tips (all graduated) → .bgz-support-pill (Contact Support) only

   Naming uses the bgz- prefix to namespace against anything on the page. Colors, radii,
   and typography mirror the rest of the BandGigz design system (teal #1eb89a,
   off-white bg #f4f3ef, card #ffffff, border #deded8, DM Serif Display for titles).
*/

/* ── LAYOUT SHELL ───────────────────────────────────────────────────────── */

.bgz-page-shell {
  position: relative;
}

.bgz-tips-wrap {
  padding: 18px 1rem 0;
  /* On narrow viewports the tips card sits above the main .container content.
     Matches the mobile mockup: tips at the top, page content below. */
}

@media (min-width: 1240px) {
  .bgz-page-shell {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 28px;
    align-items: start;
  }
  /* Cancel the container's own horizontal padding and centering so it fills
     the left grid cell naturally. We keep its max-width so content never gets
     wider than the page was designed for — it just sits in the grid cell.
     width: 100% is needed because inside a grid cell, a block element with
     only max-width set can collapse to intrinsic content width. Forcing
     width: 100% makes it stretch, then max-width clamps the upper bound. */
  .bgz-page-shell > .container {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .bgz-tips-wrap {
    padding: 40px 0 0;
    position: sticky;
    top: 88px;
    /* 64px nav height + 24px breathing room */
  }
}

/* ── CARD ───────────────────────────────────────────────────────────────── */

.bgz-tips-card {
  background: #ffffff;
  border: 1px solid #deded8;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #1a1a1a;
  /* Animates in subtly on first paint */
  animation: bgz-tips-fade-in 0.25s ease-out;
}

@keyframes bgz-tips-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bgz-tips-card.bgz-tips-hidden {
  display: none;
}

/* ── HEADER ─────────────────────────────────────────────────────────────── */

.bgz-tips-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}

.bgz-tips-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1;
}

.bgz-tips-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.05rem;
  color: #1a1a1a;
  margin-top: 4px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.bgz-tips-close {
  background: none;
  border: none;
  color: #8a8a8a;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  font-family: inherit;
  transition: color 0.15s;
  flex-shrink: 0;
}

.bgz-tips-close:hover {
  color: #1a1a1a;
}

/* ── TIP ITEMS ──────────────────────────────────────────────────────────── */

.bgz-tips-item {
  padding: 12px 0 10px;
  border-top: 1px solid #deded8;
  margin-top: 10px;
}

.bgz-tips-item:first-of-type {
  margin-top: 12px;
}

.bgz-tips-item-inner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.bgz-tips-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(30, 184, 154, 0.12);
  color: #1eb89a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.bgz-tips-body {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #1a1a1a;
  flex: 1;
}

.bgz-tips-body strong {
  font-weight: 600;
  color: #1a1a1a;
}

.bgz-tips-item-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.bgz-tips-graduate {
  background: none;
  border: none;
  color: #1eb89a;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
  font-family: inherit;
  transition: color 0.15s;
}

.bgz-tips-graduate:hover {
  color: #189e84;
}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */

.bgz-tips-footer {
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid #deded8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bgz-tips-progress {
  font-size: 0.72rem;
  color: #8a8a8a;
}

.bgz-tips-more {
  background: none;
  border: none;
  color: #1eb89a;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
  font-family: inherit;
  transition: color 0.15s;
}

.bgz-tips-more:hover {
  color: #189e84;
}

/* ── SUPPORT / EXPAND PILLS ─────────────────────────────────────────────
   Two pill variants share the same .bgz-support-pill base:
   - .bgz-tips-expand (the "Need tips?" pill, shown when card is collapsed)
   - .bgz-support-link (the Contact Support pill, always visible)
   Pills stack vertically below the card (or alone, when there's no card).
   Tap target is 44px high on mobile per a11y guidance.
*/

.bgz-support-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: #ffffff;
  border: 1px solid #deded8;
  border-radius: 12px;
  padding: 11px 14px;
  margin-top: 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  text-align: left;
  /* Match card subtle shadow */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.bgz-support-pill:hover {
  border-color: #1eb89a;
  background: #fafaf7;
  color: #1eb89a;
}

.bgz-support-pill:focus-visible {
  outline: 2px solid #1eb89a;
  outline-offset: 2px;
}

.bgz-support-pill-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(30, 184, 154, 0.12);
  color: #1eb89a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.bgz-support-pill:hover .bgz-support-pill-icon {
  background: #1eb89a;
  color: #ffffff;
}

.bgz-support-pill-label {
  flex: 1;
  line-height: 1.2;
}

/* ── MOBILE — single tip visible at a time ─────────────────────────────── */

@media (max-width: 600px) {
  .bgz-tips-card {
    padding: 14px 16px;
  }
  .bgz-tips-title {
    font-size: 1rem;
  }
  /* tips.js shows only 1 tip on mobile; CSS only styles what JS renders */
}