/*
 * Panels
 *
 * Shared BEM-style panel component classes for common card shells,
 * compact containers, selectable panels, and panel rows.
 *
 * Usage:
 *   class="panel"                                  <- default padded card
 *   class="panel panel--compact"                   <- no padding, always rounded
 *   class="panel panel--selectable
 *          panel--selectable-indigo"               <- clickable card
 *   class="panel__header"                          <- header bar inside a panel
 *
 * Spacing utilities (mt-6, mb-6, mt-8) intentionally stay at the call
 * site for now; they will migrate when we tackle layout utilities.
 *
 * Cascade order: base first, then modifiers, then BEM elements.
 *
 * Adding new modifiers (per design doc):
 *   - <3 sites: fold into the closest existing modifier (accept ≤3
 *     sites of minor visual drift to keep the surface small).
 *   - ≥3 sites: add a new modifier or BEM element and document it
 *     here.
 */

.panel {
  padding: 1.25rem 1rem;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

@media (min-width: 640px) {
  .panel {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
  }
}

/* ------------------------------------------------------------------ */
/* Modifiers                                                          */
/* ------------------------------------------------------------------ */

/* Compact — no padding, always-rounded, overflow hidden. */
.panel--compact {
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 640px) {
  .panel--compact {
    padding: 0;
    border-radius: var(--radius-lg);
  }
}

/* Modern — larger radius with a subtle ring instead of a drop shadow. */
.panel--modern {
  padding: 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-ring-subtle), var(--shadow-sm);
}

@media (min-width: 640px) {
  .panel--modern {
    padding: 0;
    border-radius: var(--radius-2xl);
  }
}

/* Selectable — clickable card with a hover border colour.
 * Pair with one of the colour modifiers below. */
.panel--selectable {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  box-shadow: none;
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.panel--selectable:hover {
  box-shadow: var(--shadow-md);
}

@media (min-width: 640px) {
  .panel--selectable {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
  }
}

.panel--selectable-indigo:hover {
  border-color: var(--color-brand);
}

.panel--selectable-green:hover {
  border-color: var(--color-success);
}

.panel--selectable-teal:hover {
  border-color: rgb(var(--palette-teal-500));
}

.panel--selectable-purple:hover {
  border-color: var(--color-accent);
}

/* ------------------------------------------------------------------ */
/* BEM elements                                                       */
/* ------------------------------------------------------------------ */

/* Header bar inside a panel. */
.panel__header {
  padding: 1.25rem 1rem;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 640px) {
  .panel__header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Definition-list-style row inside a panel. */
.panel__row {
  padding: 1.25rem 1rem;
  background-color: var(--color-surface);
}

@media (min-width: 640px) {
  .panel__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}