/*
 * Product pages (products/index.php, products/detail.php).
 *
 * Additive rules only — things the compiled Tailwind stylesheet (style.css)
 * has no class for. Every colour comes from the theme tokens and hue variables
 * in theme.css, so light and dark themes both work with no extra rules. Loaded
 * on product pages only, via $page_styles in includes/header.php.
 */

/* ---- Detail hero ------------------------------------------------------- */
.pd-hero-title {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.08;
}
.pd-tagline {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.3;
}

/* ---- Category color-coding ---------------------------------------------
 * Every product inherits a hue from its category group (.hue-* on the card or
 * page wrapper; see theme.css). Blue = Business, teal = Industry, orange =
 * Retail & Communication, violet = Learning.
 */
.pd-badge {
  color: color-mix(in oklab, var(--hue, var(--accent)) 78%, #000);
  background: color-mix(in oklab, var(--hue, var(--accent)) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--hue, var(--accent)) 30%, transparent);
}
.dark .pd-badge {
  color: var(--hue, var(--accent-3));
}

/* Detail hero picks up a soft wash of the product's own hue. */
.pd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46% 62% at 86% 18%, color-mix(in oklab, var(--hue, var(--accent)) 20%, transparent), transparent 70%);
}

/* Tinted icon tiles on feature cards and the overview panel. */
.pd-cards span.bg-surface-2.text-accent-3,
.pd-aside span.bg-surface-2.text-accent-3 {
  color: var(--hue, var(--accent-3));
  background: color-mix(in oklab, var(--hue, var(--accent)) 13%, var(--surface));
  border-color: color-mix(in oklab, var(--hue, var(--accent)) 28%, transparent);
}
.pd-aside svg.text-accent-2,
.pd-aside .text-accent-2 {
  color: var(--hue, var(--accent-2));
}

/* ---- Listing toolbar: search, count, and filter chips ------------------ */
.pd-toolbar {
  display: grid;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--surface) 95%, transparent);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
@media (min-width: 48rem) {
  /* Search + categories stay in reach while scrolling the grid (topic chips scroll away);
   * on phones the bar scrolls with the page to save screen space. */
  .pd-toolbar {
    position: sticky;
    top: 4.75rem;
    z-index: 30;
  }
}
.pd-toolbar__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.pd-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
}
.pd-toolbar__label {
  flex: none;
  width: 4.5rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 47.99rem) {
  .pd-toolbar__label {
    width: 100%;
  }
}
.pd-topics {
  margin-top: 0.875rem;
  padding-inline: 1rem;
}
.pd-toolbar input[type="search"] {
  padding-right: 2.5rem;
}
.pd-kbd {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.3rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  pointer-events: none;
}
@media (hover: none) {
  .pd-kbd {
    display: none;
  }
}

.pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}
.pd-chip:hover {
  border-color: color-mix(in oklab, var(--hue, var(--accent)) 55%, transparent);
  color: var(--text-primary);
}
.pd-chip:focus-visible {
  outline: 2px solid var(--c-violet);
  outline-offset: 2px;
}
.pd-chip__n {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-tertiary);
  font-size: 0.6875rem;
}
.pd-chip[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--hue, var(--accent)) 62%, transparent);
  background: color-mix(in oklab, var(--hue, var(--accent)) 14%, var(--surface));
  color: color-mix(in oklab, var(--hue, var(--accent-3)) 70%, var(--text-primary));
  box-shadow: 0 8px 18px -10px color-mix(in oklab, var(--hue, var(--accent)) 70%, transparent);
}
.pd-chip[aria-pressed="true"] .pd-chip__n {
  background: color-mix(in oklab, var(--hue, var(--accent)) 24%, var(--surface));
  color: inherit;
}

/* ---- Listing card ------------------------------------------------------ */
.pd-tags {
  align-content: flex-start;
}
.pd-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.pd-card__cta svg {
  flex: none;
  transition: transform 0.25s;
}
/* A colored top edge tells you the category before you read a word. */
.pd-card > div {
  position: relative;
  overflow: hidden;
}
.pd-card > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hue, var(--accent)), color-mix(in oklab, var(--hue, var(--accent)) 35%, transparent));
}
.pd-card:hover .pd-card__cta,
.pd-card:focus-visible .pd-card__cta {
  border-color: color-mix(in oklab, var(--hue, var(--accent)) 60%, transparent);
  background: color-mix(in oklab, var(--hue, var(--accent)) 10%, var(--surface));
  color: color-mix(in oklab, var(--hue, var(--accent-3)) 75%, var(--text-primary));
}
.pd-card:hover .pd-card__cta svg,
.pd-card:focus-visible .pd-card__cta svg {
  transform: translateX(3px);
}

/* ---- Card grids with a centered last row ---------------------------------
 * Feature and module counts vary per product (9-12), so a fixed grid leaves a
 * lone card hanging on the left. Wrapping flex with centered rows keeps
 * partial last rows balanced at any count.
 */
.pd-cards {
  --pd-gap: 1.25rem;
  --pd-cols: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pd-gap);
  list-style: none;
  padding: 0;
}
.pd-cards > * {
  flex: 0 1 calc((100% - (var(--pd-cols) - 1) * var(--pd-gap)) / var(--pd-cols));
  min-width: 0;
}
.pd-cards--tight {
  --pd-gap: 0.75rem;
}
@media (min-width: 40rem) {
  .pd-cards {
    --pd-cols: 2;
  }
}
@media (min-width: 64rem) {
  .pd-cards {
    --pd-cols: 3;
  }
  .pd-cards--four {
    --pd-cols: 4;
  }
}

/* ---- Benefits: five cards fill a 3 + 2 layout on wide screens ---------- */
.pd-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 40rem) {
  .pd-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .pd-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pd-benefits--five {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .pd-benefits--five > * {
    grid-column: span 2;
  }
  .pd-benefits--five > *:nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* ---- Modules ----------------------------------------------------------- */
.pd-module {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
  transition: border-color 0.25s, transform 0.25s;
}
.pd-module:hover {
  border-color: color-mix(in oklab, var(--hue, var(--accent)) 50%, transparent);
  transform: translateY(-1px);
}
.pd-module__n {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

/* ---- Illustrative interface preview ------------------------------------
 * Skeleton-style wireframes: labels are real product vocabulary, everything
 * else is a neutral placeholder, so the preview never implies real data.
 */
.pd-mock-side {
  flex: none;
  width: 30%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd-mock-side li {
  overflow: hidden;
  margin-bottom: 0.25rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.375rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-mock-side li[aria-current] {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent-3);
}

/* Bordered panels, KPI tiles, list rows, and board cards */
.pd-box {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--surface-2) 40%, transparent);
}
.pd-box--tight {
  padding: 0.5rem;
}
.pd-box--tile {
  padding: 0.625rem;
  background: color-mix(in oklab, var(--surface-2) 60%, transparent);
}
.pd-box--flat {
  background: var(--bg-elevated);
}
.pd-kpis,
.pd-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.pd-table {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}
.pd-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--surface-2) 40%, transparent);
}
.pd-item--flat {
  background: var(--bg-elevated);
}
.pd-note {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface);
}

.pd-sk {
  display: block;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: color-mix(in oklab, var(--text-tertiary) 30%, transparent);
}
.pd-sk--lg {
  height: 0.875rem;
}
.pd-sk--accent {
  background: color-mix(in oklab, var(--accent) 38%, transparent);
}

.pd-label {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-tertiary);
}

.pd-avatar {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--hue, var(--accent)), color-mix(in oklab, var(--hue, var(--accent)) 60%, #000));
  opacity: 0.85;
}
.pd-pill {
  display: block;
  width: 2.4rem;
  height: 0.9rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--success) 32%, transparent);
}
.pd-pill--wait {
  background: color-mix(in oklab, var(--warning) 38%, transparent);
}

.pd-tag {
  flex: none;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
}
.pd-tag--danger {
  background: color-mix(in oklab, var(--danger) 16%, transparent);
  color: var(--danger);
}
.pd-tag--warning {
  background: color-mix(in oklab, var(--warning) 18%, transparent);
  color: var(--warning);
}
.pd-tag--success {
  background: color-mix(in oklab, var(--success) 16%, transparent);
  color: var(--success);
}

/* Table rows (three columns) */
.pd-mock-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--border);
}
.pd-mock-row--head {
  border-top: 0;
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
}

/* Timetable */
.pd-tt {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.375rem;
}
.pd-tt__cell {
  height: 1.6rem;
  border-radius: 0.375rem;
  background: color-mix(in oklab, var(--surface-2) 90%, transparent);
}
.pd-tt__cell--a {
  background: color-mix(in oklab, var(--accent) 24%, transparent);
}
.pd-tt__cell--b {
  background: color-mix(in oklab, var(--accent-2) 28%, transparent);
}
.pd-tt__cell--c {
  background: color-mix(in oklab, var(--success) 24%, transparent);
}

/* Course cards */
.pd-thumb {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, var(--hue, var(--accent)), color-mix(in oklab, var(--hue, var(--accent)) 60%, #000));
  color: #fff;
}
.pd-progress {
  display: block;
  height: 0.35rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in oklab, var(--text-tertiary) 22%, transparent);
}
.pd-progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gradient-aurora);
}

/* Checklist */
.pd-check {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.3rem;
  color: #fff;
}
.pd-check--done {
  border-color: transparent;
  background: var(--gradient-aurora);
}

/* POS */
.pd-pos {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 0.75rem;
}
.pd-pos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.pd-pos__tile {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--surface-2) 60%, transparent);
}
.pd-pos__swatch {
  display: block;
  height: 1.4rem;
  margin-bottom: 0.4rem;
  border-radius: 0.3rem;
  background: color-mix(in oklab, var(--accent) 20%, transparent);
}
.pd-bill {
  display: flex;
  flex-direction: column;
}
.pd-bill__foot {
  margin-top: auto;
  padding-top: 1rem;
}
.pd-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--border);
}
.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.9rem;
  border-radius: 0.4rem;
  background: var(--gradient-aurora);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 500;
}
.pd-btn--block {
  display: flex;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .pd-card__cta,
  .pd-card__cta svg,
  .pd-module {
    transition: none;
  }
}