/* ──────────────────────────────────────────────────────────────────────────
   Custom program tabs

   One layout, used by both the coach's editor (/app/college/profile.html) and
   the public program page (/colleges/<slug>). It is the ID Camps tab's layout:
   a photo/video carousel on the left and a fixed 340px panel on the right —
   supporting text where the camps tab lists open camps. Same column widths,
   same carousel metrics, same 860px stack point, so the two tabs read as one
   page rather than two designs.

   There used to be three separate tab types — text, image blocks, video — each
   with its own spacing, which is why the panes never lined up. Everything
   normalizes to { media: [{type, url}], text } now; see assets/js/custom-tabs.js.

   Every rule is token-driven, so the sheet reads correctly on the light public
   page and inside the app shell's dark theme.
   ────────────────────────────────────────────────────────────────────────── */

.ctab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-6);
  align-items: start;
}
/* A tab with only one of the two fills the row instead of leaving the other
   side empty. */
.ctab--text-only,
.ctab--media-only { grid-template-columns: minmax(0, 1fr); }
/* Cap the card, not just the copy inside it — a full-bleed panel holding one
   short paragraph reads as a layout that failed to load. */
.ctab--text-only .ctab-panel { max-width: 68ch; }

/* ----- Carousel (mirrors .carousel on the ID Camps tab) ----- */

.ctab-car {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-canvas-deep);
  box-shadow: var(--shadow-floating);
}
.ctab-car__track {
  display: flex;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.ctab-car__slide { min-width: 100%; height: 100%; position: relative; overflow: hidden; }
/* Contain, not cover: a coach uploading a portrait shot of one player should
   see the player, not his shirt. The frame stays 16/10 so the strip keeps one
   rhythm, and the leftover space is filled by the same image blown up and
   blurred behind — the letterbox reads as a designed frame rather than a gap. */
.ctab-car__slide img,
.ctab-car__slide video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
.ctab-car__fill {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(28px) saturate(1.15) brightness(0.72);
  transform: scale(1.15);
  pointer-events: none;
}

.ctab-car__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  color: var(--color-ink-900);
  transition: background-color var(--duration-base), transform var(--duration-base) var(--ease-spring);
  z-index: 2;
}
.ctab-car__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.ctab-car__arrow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ctab-car__arrow:active { transform: translateY(-50%) scale(0.94); }
.ctab-car__arrow--prev { left: 14px; }
.ctab-car__arrow--next { right: 14px; }

.ctab-car__dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.ctab-car__dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgb(255 255 255 / 0.5);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--duration-base), width var(--duration-base) var(--ease-spring);
}
.ctab-car__dots button:hover { background: rgb(255 255 255 / 0.75); }
.ctab-car__dots button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ctab-car__dots button.on { background: var(--color-accent); width: 22px; border-radius: 4px; }

/* Dots sit on whatever the coach uploaded — a bright sideline photo swallows
   them without this. */
.ctab-car::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  background: linear-gradient(to top, rgb(8 20 16 / 0.45), transparent);
  pointer-events: none;
  z-index: 1;
}
/* One slide needs no chrome at all. */
.ctab-car--single .ctab-car__arrow,
.ctab-car--single .ctab-car__dots,
.ctab-car--single::after { display: none; }

/* ----- Text panel (mirrors .camps-panel) ----- */

.ctab-panel {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ctab-panel__head {
  padding: var(--space-5) var(--space-5) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.ctab-panel__head h3 {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent-deep);
  margin: 0;
}
.ctab__body {
  padding: 0 var(--space-5) var(--space-5);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-ink-700);
}
.ctab__body p { margin: 0 0 var(--space-4); }
.ctab__body p:last-child { margin-bottom: 0; }
.ctab__empty { color: var(--color-ink-400); font-style: italic; }

@media (max-width: 860px) {
  .ctab { grid-template-columns: minmax(0, 1fr); }
}

/* ──────────────────────────────────────────────────────────────────────────
   Editor-only affordances (.ctab--edit)
   ────────────────────────────────────────────────────────────────────────── */

/* Thumbnail strip under the carousel: add, remove, reorder. */
.ctab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.ctab-thumb {
  position: relative;
  width: 104px;
  height: 68px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-canvas-deep);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.ctab-thumb img,
.ctab-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The whole tile selects that slide; the controls sit above it. */
.ctab-thumb__pick {
  position: absolute;
  inset: 0;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.ctab-thumb__pick:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.ctab-thumb__bar {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  padding: 4px;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--duration-fast);
  z-index: 2;
}
.ctab-thumb:hover .ctab-thumb__bar,
.ctab-thumb:focus-within .ctab-thumb__bar { opacity: 1; }
.ctab-thumb__moves { display: flex; gap: 4px; }
.ctab-thumb__bar button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: rgb(13 42 34 / 0.78);
  color: #fff;
  font-size: 0.6875rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-fast);
}
.ctab-thumb__bar button:hover { background: var(--color-accent); color: var(--color-canvas-deep); }
.ctab-thumb__bar button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ctab-thumb__bar button:active { transform: scale(0.9); }
.ctab-thumb__bar button[disabled] { opacity: 0.3; pointer-events: none; }
.ctab-thumb__bar .ctab-thumb__del:hover { background: var(--color-danger); color: #fff; }

.ctab-thumb__kind {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgb(13 42 34 / 0.7);
  color: var(--color-accent);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Add tile — same footprint as a thumbnail so the strip stays on one baseline. */
.ctab-add {
  width: 104px;
  height: 68px;
  flex-shrink: 0;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-recessed);
  color: var(--color-ink-500);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  transition: border-color var(--duration-base), background-color var(--duration-base), transform var(--duration-base) var(--ease-spring);
}
.ctab-add:hover { border-color: var(--color-accent); background: var(--color-primary-mist); color: var(--color-primary-text); }
.ctab-add:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ctab-add:active { transform: translateY(1px); }

/* Empty carousel slot — the dropzone stands in for the carousel itself. */
.ctab-drop {
  aspect-ratio: 16 / 10;
  width: 100%;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-recessed);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: center;
  padding: var(--space-6);
  transition: border-color var(--duration-base), background-color var(--duration-base);
}
.ctab-drop:hover { border-color: var(--color-accent); background: var(--color-primary-mist); }
.ctab-drop:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ctab-drop__ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-elevated);
  border: 1px solid var(--border-hairline);
  color: var(--color-accent-deep);
  transition: background-color var(--duration-base), color var(--duration-base);
}
.ctab-drop:hover .ctab-drop__ico { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-canvas-deep); }
.ctab-drop__title { font-size: 0.9375rem; font-weight: 500; color: var(--color-ink-700); }
.ctab-drop__hint { font-size: 0.8125rem; color: var(--color-ink-500); }