/**
 * Section pattern — shared basic structure for page sections (all D18 viewports).
 *
 * Spec: site/SECTION-PATTERN.md · Machine: site/page-skeleton.json → sectionPattern
 * Load after layout-bridge.css (base.html).
 *
 * Markup:
 * <div class="lf-section-stack">
 *   <section class="lf-section" aria-labelledby="…">
 *     <header class="lf-section__head">
 *       <div class="lf-section__copy">
 *         <h2 class="lf-section__title" id="…">…</h2>
 *         <p class="lf-section__desc">…</p>        optional
 *       </div>
 *       <div class="lf-section__actions">…</div>     optional
 *     </header>
 *     <div class="lf-section__body">
 *       <div class="lf-section__grid">…</div>        optional
 *     </div>
 *   </section>
 * </div>
 *
 * Variants: .lf-section--band | --card | --compact
 * Empty:    .lf-section__empty inside body
 * Own shell: .lf-section__inner (only outside .page-container)
 *
 * Owns --layout-section-* rhythm tokens (overrides layout-bridge phone default).
 */

:root {
  /* Phone (D18 ≤479) — defaults; largePhone keeps same rhythm */
  --layout-section-gap: var(--section-gap-mobile, var(--section-gap-min, 48px));
  --layout-section-block-gap: 16px;
  --layout-section-head-gap: 8px;
  --layout-section-title-size: 17px;
  --layout-section-desc-size: 13px;
  --layout-section-card-padding: 16px;
  --layout-section-card-radius: 12px;
  --layout-section-grid-gap: 12px;
  --layout-section-grid-min: 100%;
}

/* largePhone 480–639 — same gap as phone; slightly roomier card pad */
@media (min-width: 480px) {
  :root {
    --layout-section-card-padding: 18px;
    --layout-section-grid-gap: 14px;
  }
}

/* tablet 640–1023 */
@media (min-width: 640px) {
  :root {
    --layout-section-gap: var(--section-gap-tablet, 64px);
    --layout-section-block-gap: 20px;
    --layout-section-title-size: 18px;
    --layout-section-card-padding: 20px;
    --layout-section-grid-gap: 16px;
    --layout-section-grid-min: 280px;
  }
}

/* desktop 1024–1279 */
@media (min-width: 1024px) {
  :root {
    --layout-section-gap: var(--section-gap-desktop, var(--section-gap-max, 80px));
    --layout-section-block-gap: 24px;
    --layout-section-title-size: 20px;
    --layout-section-desc-size: 14px;
    --layout-section-card-padding: 20px;
    --layout-section-grid-gap: 16px;
    --layout-section-grid-min: 280px;
  }
}

/* wide ≥1280 — same gap as desktop; wider grid tiles allowed */
@media (min-width: 1280px) {
  :root {
    --layout-section-grid-min: 260px;
  }
}

/* ── Stack: vertical list of sections on a page ───────────────────────── */
.lf-section-stack {
  display: flex;
  flex-direction: column;
  gap: var(--layout-section-gap);
  min-inline-size: 0;
  width: 100%;
}

/* ── Section root ─────────────────────────────────────────────────────── */
.lf-section {
  display: flex;
  flex-direction: column;
  gap: var(--layout-section-block-gap);
  min-inline-size: 0;
  width: 100%;
}

/* Full-bleed / tonal band: half gap top+bottom → adjacent bands = one section-gap */
.lf-section--band {
  padding-block: calc(var(--layout-section-gap) / 2);
}

/* Card surface variant (settings-like blocks) */
.lf-section--card {
  background: var(--bg-surface, var(--bg-card, #fff));
  border: 1px solid var(--border-default, var(--border, #e5e5e5));
  border-radius: var(--layout-section-card-radius);
  padding: var(--layout-section-card-padding);
}

/* Dense app sections (lists, tool panels) — tighter than marketing rhythm */
.lf-section--compact {
  gap: 12px;
}

.lf-section--compact + .lf-section--compact,
.lf-section-stack--compact {
  gap: 24px;
}

.lf-section-stack--compact {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  width: 100%;
}

@media (min-width: 640px) {
  .lf-section--compact + .lf-section--compact,
  .lf-section-stack--compact {
    gap: 28px;
  }
}

@media (min-width: 1024px) {
  .lf-section--compact + .lf-section--compact,
  .lf-section-stack--compact {
    gap: 32px;
  }
}

.lf-section__inner {
  width: 100%;
  max-width: var(--layout-page-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-page-padding-x);
  box-sizing: border-box;
  min-inline-size: 0;
}

/* When section already sits inside a padded page-container, skip double inset */
.page-container .lf-section__inner,
.app-container .lf-section__inner,
.inbox-page .lf-section__inner,
.settings-page .lf-section__inner,
.lf-section--card .lf-section__inner {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* ── Head: title + optional desc + actions ────────────────────────────── */
.lf-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--layout-section-head-gap) 16px;
  min-inline-size: 0;
}

.lf-section__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-inline-size: 0;
  flex: 1 1 12rem;
}

.lf-section__title {
  margin: 0;
  font-size: var(--layout-section-title-size);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary, #0a0a0a);
  text-transform: none;
}

.lf-section__desc {
  margin: 0;
  font-size: var(--layout-section-desc-size);
  line-height: 1.5;
  color: var(--text-muted, var(--text-secondary, #737373));
  max-width: 42rem;
}

.lf-section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-inline-size: 0;
}

/* ── Body ─────────────────────────────────────────────────────────────── */
.lf-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--layout-section-block-gap);
  min-inline-size: 0;
}

.lf-section__body > * {
  min-inline-size: 0;
}

/* Responsive content grid inside body */
.lf-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-section-grid-min)), 1fr));
  gap: var(--layout-section-grid-gap);
  min-inline-size: 0;
  width: 100%;
}

.lf-section__grid--2 {
  grid-template-columns: 1fr;
}

.lf-section__grid--3 {
  grid-template-columns: 1fr;
}

.lf-section__grid--kpi {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

@media (min-width: 640px) {
  .lf-section__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lf-section__grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lf-section__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Empty state shell — reserved geometry, no layout jump */
.lf-section__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  min-block-size: 8rem;
  padding: var(--layout-section-card-padding);
  color: var(--text-muted, var(--text-secondary, #737373));
  background: var(--bg-secondary, var(--bg-page, #f5f5f5));
  border: 1px dashed var(--border-default, var(--border, #e5e5e5));
  border-radius: var(--layout-section-card-radius);
  box-sizing: border-box;
}

.lf-section__empty-title {
  margin: 0;
  font-size: var(--layout-section-title-size);
  font-weight: 600;
  color: var(--text-primary, #0a0a0a);
}

.lf-section__empty-desc {
  margin: 0;
  font-size: var(--layout-section-desc-size);
  line-height: 1.5;
  max-width: 28rem;
}

/* Phone + largePhone: actions full-width under title */
@media (max-width: 639px) {
  .lf-section__head {
    flex-direction: column;
    align-items: stretch;
  }

  .lf-section__actions {
    width: 100%;
  }

  .lf-section__actions > * {
    max-width: 100%;
  }

  .lf-section__actions .btn,
  .lf-section__actions button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Tablet+: keep title | actions on one row when space allows */
@media (min-width: 640px) {
  .lf-section__head {
    flex-wrap: nowrap;
    align-items: center;
  }

  .lf-section__actions {
    flex-shrink: 0;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .lf-section__head {
    flex-wrap: wrap;
  }
}

/* ── Form fields + Adresseingabe (Packstation vs normal) ─────────────────
 * Spec: SECTION-PATTERN.md § Formular / Adresseingabe
 * Machine: page-skeleton.json → sectionPattern.formFieldPattern / address-form
 */

:root {
  --layout-field-gap: 10px;
  --layout-field-label-size: 12px;
  --layout-field-input-height: 42px;
  --layout-field-input-radius: 8px;
  --layout-field-hint-size: 11px;
}

.lf-addr {
  display: flex;
  flex-direction: column;
  gap: var(--layout-field-gap);
  min-inline-size: 0;
  width: 100%;
}

.lf-addr--read {
  gap: 6px;
}

.lf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-inline-size: 0;
  margin: 0;
}

.lf-field__label {
  font-size: var(--layout-field-label-size);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-secondary, #525252);
  text-transform: none;
  letter-spacing: 0;
}

.lf-field__input {
  display: block;
  width: 100%;
  height: var(--layout-field-input-height);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  color: var(--text-primary, #0a0a0a);
  background: var(--bg-input, var(--bg-card, #fff));
  border: 1px solid var(--border-default, var(--border, #e5e5e5));
  border-radius: var(--layout-field-input-radius);
  box-sizing: border-box;
  min-inline-size: 0;
}

.lf-field__input:focus {
  outline: 2px solid var(--accent, #0071e3);
  outline-offset: 1px;
}

.lf-field__hint {
  margin: 0;
  font-size: var(--layout-field-hint-size);
  line-height: 1.4;
  color: var(--text-muted, var(--text-tertiary, #737373));
}

.lf-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-inline-size: 0;
  width: 100%;
}

@media (min-width: 480px) {
  .lf-field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Segment toggle — Adresstyp Standard | Packstation | Postfiliale */
.lf-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-secondary, #f5f5f5);
  border: 1px solid var(--border-default, var(--border, #e5e5e5));
  border-radius: 8px;
  min-block-size: 40px;
  box-sizing: border-box;
}

.lf-seg__btn {
  flex: 1 1 0;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-muted, var(--text-tertiary, #737373));
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  min-inline-size: 0;
}

.lf-seg__btn--on,
.lf-seg__btn[aria-pressed="true"] {
  background: var(--bg-card, #fff);
  color: var(--text-primary, #0a0a0a);
  font-weight: 600;
  box-shadow: var(--shadow-tab, 0 1px 2px rgba(0, 0, 0, 0.06));
}

/* Auto-detect banner */
.lf-detected {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--accent-text, var(--accent, #0071e3));
  background: var(--bg-hover, rgba(0, 113, 227, 0.06));
  border: 1px solid var(--accent, #0071e3);
  border-radius: 10px;
  box-sizing: border-box;
  min-block-size: 40px;
}

.lf-detected b {
  font-weight: 700;
}

/* Read rows inside lf-addr--read */
.lf-addr--read .lf-addr__line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.lf-addr--read .lf-addr__k {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #737373);
  text-transform: none;
}

.lf-addr--read .lf-addr__v {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #0a0a0a);
  overflow-wrap: anywhere;
}