/* Dashboard top section: the offer banner and the inspiration wall.
   Kept in its own file because dashboard.html is Tailwind-utility heavy and these
   two blocks need real layout (overlay text on video, aspect boxes, scroll rows). */

/* ---------------------------------------------------------------- offer */
.offer-banner {
  margin-bottom: 26px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(112deg, #6C63FF 0%, #8B5CF6 48%, #EC4899 100%);
  box-shadow: 0 14px 34px rgba(108, 99, 255, 0.32);
}
.offer-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  color: #fff;
}
.offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.offer-copy { flex: 1 1 250px; min-width: 0; }
.offer-headline {
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.offer-sub {
  margin: 4px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.offer-code {
  border: 1px dashed rgba(255, 255, 255, 0.75);
  border-radius: 7px;
  padding: 2px 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.offer-actions { display: flex; align-items: center; gap: 8px; }
.offer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 11px;
  background: #fff;
  color: #5A52D5;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.offer-cta:hover { background: rgba(255, 255, 255, 0.9); }
.offer-close {
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
}
.offer-close:hover { background: rgba(255, 255, 255, 0.3); }

/* ----------------------------------------------------------- inspiration */

/* Don't inherit layout from another file. Tailwind's preflight normally supplies
   border-box through the CDN; if that CDN is slow or blocked, the overlay's own
   padding would be ADDED to its width instead of inside it, and the panel would
   widen past its tile. The wall must render correctly on its own. */
.insp-section, .insp-section *,
.insp-section *::before, .insp-section *::after { box-sizing: border-box; }

.insp-section { margin-bottom: 30px; }
.insp-head { margin-bottom: 14px; }
.insp-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6C63FF;
}
.insp-title {
  margin: 0;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.insp-lede {
  margin: 7px 0 0;
  font-size: 15px;
  color: #6B7280;
  max-width: 62ch;
}
.insp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 14px;
}
.insp-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.insp-chip {
  border: 1px solid #E5E7EB;
  background: #fff;
  color: #6B7280;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.insp-chip:hover { border-color: #8B83FF; color: #6C63FF; }
.insp-chip.is-active { background: #6C63FF; border-color: #6C63FF; color: #fff; }
.insp-shuffle {
  border: 1px solid #E5E7EB;
  background: #fff;
  color: #6C63FF;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.insp-shuffle:hover { border-color: #6C63FF; }

.insp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 720px) { .insp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.insp-card {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  background: #14132b;
  aspect-ratio: 9 / 16;
  box-shadow: 0 8px 22px rgba(15, 14, 23, 0.16);
}
@media (min-width: 720px) { .insp-card { aspect-ratio: 3 / 4; } }
.insp-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Bottom-anchored panel over the video. Three guards keep it inside its tile:
   1. `max-height:100%` caps the panel at the tile height;
   2. `overflow:hidden` makes that cap real — without it a capped box still
      paints its overflow, and `inset:auto 0 0 0` grows the box UPWARD, out of
      the tile and onto the row above;
   3. flex-end + `min-width:0` pin the stack to the bottom and let children
      shrink instead of forcing the panel wider than the card. */
.insp-over {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-height: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 30px 12px 12px;
  background: linear-gradient(to top, rgba(9, 8, 20, 0.92) 12%, rgba(9, 8, 20, 0));
  color: #fff;
  pointer-events: none;
}
.insp-over > * { pointer-events: auto; }
.insp-meta {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #C9C6F0;
  min-width: 0;
}
.insp-cap {
  margin: 3px 0 9px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  min-width: 0;
  /* Deliberately NOT line-clamped: clamping would hide words, and the caption
     is the message. The panel's max-height plus the narrow-width sizing below
     keep the stack inside the tile without deleting anything. */
  overflow-wrap: break-word;
}
.insp-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  flex: 0 0 auto;
  max-width: 100%;
  border-radius: 9px;
  background: #6C63FF;
  color: #fff;
  padding: 9px 13px;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  /* The label WRAPS instead of being ellipsized: an ellipsis would change the
     words the visitor reads. `.insp-over`'s max-height is what bounds the stack. */
  white-space: normal;
  overflow-wrap: break-word;
}
.insp-cta:hover { background: #5A52D5; }

/* Narrow tiles: the grid is 2-up below 720px, so each card is roughly half the
   viewport. Tighten the panel and the button so the stack still fits a real
   phone instead of relying on the cap above to clip it. */
@media (max-width: 430px) {
  .insp-over { padding: 20px 10px 10px; }
  .insp-cap { font-size: 13px; margin: 2px 0 7px; }
  .insp-cta { padding: 7px 10px; font-size: 11.5px; gap: 5px; }
}
@media (max-width: 300px) {
  .insp-over { padding: 14px 8px 8px; }
  .insp-meta { font-size: 10px; letter-spacing: 0.05em; }
  .insp-cap { font-size: 12px; }
  .insp-cta { padding: 6px 8px; font-size: 11px; }
}
/* Below ~260px the tile is ~90px wide and the three-line stack no longer fits
   a 9:16 tile at the sizes above; shrink the type rather than let the panel's
   max-height clip the meta line. No real phone viewport is this narrow. */
@media (max-width: 260px) {
  .insp-over { padding: 10px 7px 7px; }
  .insp-meta { font-size: 9.5px; letter-spacing: 0.02em; }
  .insp-cap { font-size: 10.5px; margin: 2px 0 5px; }
  .insp-cta { padding: 5px 7px; font-size: 10px; gap: 4px; }
}
/* Last resort for a 72px tile, which no shipping device has: tighten line
   spacing so the stack still fits rather than letting the panel clip it. */
@media (max-width: 205px) {
  .insp-over { padding: 8px 5px 5px; }
  .insp-meta { font-size: 9px; line-height: 1.15; }
  .insp-cap { font-size: 10px; line-height: 1.15; margin: 1px 0 4px; }
  .insp-cta { padding: 4px 6px; font-size: 9.5px; line-height: 1.15; gap: 3px; }
}

.insp-empty {
  grid-column: 1 / -1;
  border: 1px dashed #E5E7EB;
  border-radius: 15px;
  padding: 26px 20px;
  text-align: center;
  color: #6B7280;
  font-size: 14px;
}
.insp-empty p { margin: 0 0 6px; }
.insp-empty-sub { font-size: 13.5px; }
.insp-empty-link { color: #6C63FF; font-weight: 700; }

/* ------------------------------------------------------------ dark mode */
.dark .insp-chip,
.dark .insp-shuffle { background: #1a1a2e; border-color: #2a2a40; color: #C9C6F0; }
.dark .insp-chip.is-active { background: #6C63FF; border-color: #6C63FF; color: #fff; }
.dark .insp-lede { color: #9CA3AF; }
.dark .insp-empty { border-color: #2a2a40; color: #9CA3AF; }
.dark .insp-card { background: #0f0e17; }

/* Touch devices and reduced-motion users get stills, not motion. */
@media (prefers-reduced-motion: reduce) {
  .insp-video { pointer-events: none; }
}

/* ------------------------------------------------------ dashboard toolkit
   Owner: "your tool kit section - the 7 boxes shall be all on one row shrunk
   to fit on the one row with blue borders."

   `.card-grid` is defined ONLY in styles.css, and dashboard.html does not link
   styles.css, so #dashToolkit had no layout rule at all and each card stacked
   as a block. The grid is rebuilt here and scoped to the toolkit id, so the
   other `.card-grid` sections on this page (stat cards, content counters) keep
   exactly the rendering they have today. */
#dashToolkit {
  --dash-toolkit-border: #1E5BFF;   /* the deliberate blue; matches the studio toolkit */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 0.75rem;
  max-width: 100%;
}
/* (1,0,1) beats the Tailwind arbitrary-hex border utilities, incl. the
   `html .border-[#E5E7EB]` override in nibvok-theme.css, so the blue wins. */
#dashToolkit > a {
  border: 2px solid var(--dash-toolkit-border);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* The blue needs one step up on the dark card so it still reads blue. */
.dark #dashToolkit { --dash-toolkit-border: #4C7DFF; }

/* One row, shrunk to fit. Flex (not `repeat(8, …)`) keeps *every* rendered card
   on the row and shrinks them equally, so the row stays correct if the card
   list ever changes. min-width:0 + overflow-wrap let a card shrink below its
   text's intrinsic width instead of pushing the row past the container. */
@media (min-width: 1200px) {
  #dashToolkit {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
  }
  #dashToolkit > a {
    flex: 1 1 0;
    padding: 10px;
  }
  #dashToolkit > a > i { font-size: 0.95rem; margin-bottom: 6px; }
  #dashToolkit > a > h3 { font-size: 0.78rem; line-height: 1.25; margin-bottom: 4px; }
  #dashToolkit > a > p { font-size: 0.68rem; line-height: 1.3; }
}