/* Design experiment arm C — the create page only.
   Loaded after design_c.css by list/templates/list/exps/create_wish_list_page_c.html.
   Arm A's create form is dark glass on the themed background; arm C lifts it
   onto a light card and gives the background <select> a face. */

/* #main-content already clears the toolbar (design_c.css); this is the gap
   between it and the heading. */
.design-c #hero { padding-top: 0 !important; }

.design-c .c-eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-brand-deep);
  margin-bottom: .4rem;
}
.design-c .c-create-title { font-size: clamp(1.75rem, 4vw, 2.4rem); font-weight: 700; margin: 0; }
.design-c .c-create-sub { color: var(--c-ink-2); margin: .6rem 0 0; max-width: 46ch; }

/* The form card: light instead of rgba(17,19,24,.72) dark glass. */
.design-c #hero .card {
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: var(--c-r-lg) !important;
  box-shadow: var(--c-shadow-md) !important;
}
/* "Zurück zu deiner Liste" (back from a new list): arm A writes it in
   .text-white / .text-white-50 for the dark card, which are !important. */
.design-c #hero #ws-return-panel p { color: var(--c-ink) !important; }
.design-c #hero #ws-return-panel #ws-return-new { color: var(--c-ink-2) !important; }
/* Arm A paints these labels white for the dark card. */
.design-c #hero .form-label,
.design-c #hero label { color: var(--c-ink) !important; font-weight: 700; }
.design-c #hero .text-light,
.design-c #hero small { color: var(--c-ink-3) !important; opacity: 1 !important; }
.design-c #hero .form-control,
.design-c #hero .form-select {
  background: #FFF;
  color: var(--c-ink);
  border: 1.5px solid var(--c-line);
  border-radius: var(--c-r-sm);
  padding: .8rem .9rem;
}
.design-c #hero .form-control:focus,
.design-c #hero .form-select:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 4px rgba(254,166,77,.22);
}
.design-c #submit-button-lead {
  background-image: none !important;
  background: var(--c-brand) !important;
  color: var(--c-ink) !important;
  border-radius: var(--c-r-sm) !important;
  font-weight: 800;
  padding: .95rem 1rem;
  box-shadow: 0 8px 20px rgba(254,166,77,.45);
}

/* The select stays in the DOM (it is the field that submits and the one the
   background preview listens to) — the swatches are its visible face.

   Progressive enhancement: the swap is gated on the `c-swatches-ready` class
   that design_c.js adds once it has actually wired the two together. Hiding
   the select unconditionally meant that if design_c.js failed to load or threw,
   an arm-C visitor had NO way to choose a background at all, while arm A
   degrades to a plain working <select>. Until the class lands, the select is
   visible and the (inert) swatches are hidden. */
.design-c .c-swatches { display: none; }

.design-c.c-swatches-ready #template-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.design-c.c-swatches-ready .c-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.design-c .c-swatch {
  border: 2px solid var(--c-line);
  border-radius: 12px;
  background: #FFF;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}
.design-c .c-swatch.is-selected {
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px rgba(38,25,31,.09);
}
.design-c .c-swatch:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 2px; }
.design-c .c-swatch-img { display: block; aspect-ratio: 4/3; }
.design-c .c-swatch small {
  display: block;
  padding: 6px 8px 7px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-ink-2);
  /* Let a long name wrap instead of running out of the tile. "Weihnachten" is
     wider than a swatch on a phone, and the overflow:hidden on .c-swatch was
     simply cutting it off mid-word. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Fewer, larger swatches as the screen narrows.
 *
 * These selectors must match the specificity of the rule that sets the grid
 * above — `.design-c.c-swatches-ready .c-swatches`, two classes on the same
 * element. Written as `.design-c .c-swatches` this block silently lost the
 * cascade and every phone kept four columns: at 390px that is a 63px swatch,
 * too narrow for its own label, so "Weihnachten" was cut to "Weihna…".
 *
 * It goes down to TWO columns rather than stopping at three because the point
 * of a picture picker is seeing the picture. Measured at 390px: three columns
 * gives an 89px swatch whose longest labels wrap to three lines, two gives
 * 138px and clean labels. Two columns costs about 220px of extra scrolling in
 * a form that is scrolled anyway — a cheap price for a swatch you can judge. */
@media (max-width: 575.98px) {
  .design-c.c-swatches-ready .c-swatches {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}
@media (max-width: 400px) {
  .design-c.c-swatches-ready .c-swatches { grid-template-columns: repeat(2, 1fr); }
  .design-c .c-swatch small { font-size: .74rem; padding: 7px 9px 8px; }
}