/* ============================================================================
   pricing.css — the pricing section: packages in a compact grid (stacked on
   mobile) with a closed disclosure each, then the single-services list.
   Rendered by js/pricing.js from window.PRICING. No prices are written here.
   ========================================================================== */

.pricing__packages {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px dotted var(--client-line);
  background: var(--client-line);
}

.pricing__index {
  margin-top: clamp(4rem, 8vw, 8rem);
}

.pricing__index .section__index {
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
}

.pkg {
  background: var(--bg);
  padding: var(--client-box-pad, 1.35rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.pkg__cat {
  font-family: var(--font-client-mono);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.pkg__name {
  font-family: var(--font-client-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.pkg__scope {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--fg);
  max-width: 32ch;
}

.pkg__price {
  margin-top: 0.15rem;
  font-family: var(--font-client-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fg);
}
/* Otto, 09.09.26: "Allgemein vor jeden preis 'from' hinzufuegen in kursiver
   Schrift." The word is a real <em>, so it italicises for a screen reader too,
   and it is set smaller and quieter than the figure it qualifies — the number
   has to stay the thing the eye lands on. */
.pkg__price-from {
  font-style: italic;
  font-weight: 500;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--muted);
}

.pkg__price--request {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Disclosure (native <details>) ----------------------------------------
   Otto, 09.09.26: "Der specs button muss etwas groesser und unmittelbar unter
   dem preis markiert sein."
   It used to be pushed to the foot of the card by `margin-top: auto`, which is
   what put a gap of whatever the tallest card needed between the price and it.
   It now sits half a line under the price and is drawn as a filled control
   instead of a bare mono label, so it reads as the thing you press. The fill is
   the only new surface in this section; it is --fg at 7%, the same near-black
   the type already uses, so no colour enters the palette. */
.pkg__disc {
  margin-top: 0.5rem;
  padding-top: 0;
}
.pkg__disc-summary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0.8rem;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  font-family: var(--font-client-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  transition: background var(--dur-ui, 0.2s) var(--ease-spring, ease),
              color var(--dur-ui, 0.2s) var(--ease-spring, ease);
}
.pkg__disc-summary:hover,
.pkg__disc[open] > .pkg__disc-summary {
  background: var(--fg);
  color: var(--bg);
}
.pkg__disc-summary::-webkit-details-marker { display: none; }
.pkg__disc-summary:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}
.pkg__disc-icon {
  font-family: var(--font-client-mono);
  font-weight: 400;
  transition: transform var(--dur-ui, 0.2s) var(--ease-spring, ease);
}
.pkg__disc[open] .pkg__disc-icon { transform: rotate(45deg); }

/* Four labelled spec rows, replacing the old bullet list on 04.09.26. The label
   is the same mono caps as the disclosure summary so the block reads as one
   spec sheet; the value carries the technical detail and wraps freely, which is
   why label and value stack rather than sitting in two columns — "Grade &
   sound" next to "Brand-matched master grade, mixed SFX & music (-14 LUFS)" in
   a half-width card would leave the value on three ragged lines. */
.pkg__specs {
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.pkg__spec-label {
  font-family: var(--font-client-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pkg__spec-value {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--fg);
}

/* --- The two variants inside the disclosure --------------------------------
   Otto, 09.09.26: "Innerhalb der einzelnen specs wollen wir zwei verschiedene
   Varianten ... sie muessen beide qualitativ hochwertig klingen aber sich
   steigern."
   Two tiers side by side once the card is wide enough to hold them, stacked
   below that. There is no rule between the tier head and its specs on purpose:
   --client-line is transparent in this theme by design, so the separation is
   space and weight, never a hairline. */
.pkg__tiers {
  margin-top: 0.9rem;
  display: grid;
  gap: 1.6rem;
}

@media (min-width: 760px) {
  .pkg__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
}

.pkg__tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.15rem;
}

.pkg__tier-name {
  font-family: var(--font-client-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
}

.pkg__tier-price {
  font-family: var(--font-client-mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fg);
}

.pkg__tier-price--request {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Single services list -------------------------------------------------- */
.pricing__singles {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.singles {
  list-style: none;
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  padding: 0;
  border-top: 1px dotted var(--client-line);
}
.single {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px dotted var(--client-line);
}
.single__name {
  font-family: var(--font-client-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.single__scope {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--muted);
}
.single__price {
  justify-self: end;
  font-family: var(--font-client-mono);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.single__price--request {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 860px) {
  .pricing__packages { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .single {
    grid-template-columns: 1fr auto;
    gap: 0.3rem 1rem;
  }
  .single__scope { grid-column: 1 / -1; order: 3; }
}

/* --- The foot of the offer block -------------------------------------------
   Otto, 09.09.26: "make a little more space between black and white in picture
   one." #pricing is a .step, and a .step carries no vertical padding of its own
   — the sections it usually wraps bring their own. This one mounts its packages
   straight into .shell, so the grid ended flush against the black client wall
   while the black side had its full padding above the label: white stopped
   mid-sentence, black started with room. This is the missing half. */
.step--pricing {
  padding-bottom: clamp(4.5rem, 9vw, 8rem);
}