/* ==========================================================================
   Flexopack — Shared Components
   --------------------------------------------------------------------------
   Vocabulary used across every section partial. Section-specific styles
   live in their own files under public/assets/css/sections/.

   Conventions:
   - BEM. Block: `.section-header`. Element: `__title`. Modifier: `--narrow`.
   - Container queries for component-internal breakpoints; @media only for
     page-shell / a11y states.
   - Color via semantic tokens (--primary, --text-body); never raw OKLCH.
   ========================================================================== */

@layer components {

  /* ====================================================================
     .container — page-width wrapper
     ==================================================================== */
  .container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--section-padding-x);
  }

  .container--narrow {
    max-width: var(--container-narrow);
  }

  /* ====================================================================
     .section — generic section frame
     ==================================================================== */
  .section {
    padding-block: var(--section-padding-y);
  }

  .section--tight  { padding-block: var(--space-3xl); }
  .section--flush  { padding-block: 0; }

  /* ====================================================================
     .section-header — eyebrow badge + title + description
     Pattern repeated across nearly every section.
     ==================================================================== */
  .section-header {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-m);
    margin-bottom: var(--space-3xl);
  }

  .section-header--left {
    align-items: flex-start;
    text-align: left;
  }

  .section-header__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-s);
    background: var(--primary-10);
    color: var(--primary-d-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
  }

  .section-header__badge .icon {
    width: 1.4rem;
    height: 1.4rem;
  }

  .section-header__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    color: var(--text-title);
    max-width: 24ch;
  }

  .section-header--left .section-header__title {
    max-width: 32ch;
  }

  .section-header__description {
    font-size: var(--text-ml);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    max-width: 60ch;
  }

  /* ====================================================================
     .btn — primary CTA. Variants via modifiers.
     ==================================================================== */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-s) var(--space-xl);
    font-family: inherit;
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    border-radius: var(--radius-s);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard);
    white-space: nowrap;
  }

  .btn:active {
    transform: translateY(1px);
  }

  .btn .icon {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
  }

  /* Primary — solid gold */
  .btn--primary {
    background: var(--primary);
    color: var(--text-body);
    border-color: var(--primary);
  }

  .btn--primary:hover {
    background: var(--primary-l-1);
    border-color: var(--primary-l-1);
    color: var(--text-body);
  }

  /* Outline — neutral. Used on light surfaces. Hover sharpens the outline. */
  .btn--outline {
    background: transparent;
    color: var(--text-body);
    border-color: var(--border-primary);
  }

  .btn--outline:hover {
    background: transparent;
    color: var(--text-body);
    border-color: var(--text-body);
  }

  /* Ghost outline on dark surfaces (e.g. video hero overlay) */
  .btn--ghost-light {
    background: var(--light-5);
    color: var(--always-light);
    border-color: var(--light-30);
    backdrop-filter: blur(4px);
  }

  .btn--ghost-light:hover {
    background: var(--light-20);
    border-color: var(--light-50);
    color: var(--always-light);
  }

  .btn--lg {
    padding: var(--space-m) var(--space-2xl);
    font-size: var(--text-m);
  }

  /* ====================================================================
     .badge — small inline label / pill
     ==================================================================== */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-3xs) var(--space-s);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.2;
    letter-spacing: 0.02em;
    border-radius: var(--radius-full);
    background: var(--bg-muted);
    color: var(--text-body);
  }

  .badge .icon {
    width: 1.4rem;
    height: 1.4rem;
  }

  /* Primary chip — soft gold tint (mirrors badge--success-soft).
     The solid-gold treatment lives in section-specific glasmorphic hero
     badges (e.g. .ka-hero__badge); keep this one consistent across pages. */
  .badge--primary,
  .badge--primary-soft {
    background: var(--primary-10);
    color: var(--primary-d-1);
  }

  /* Success-tinted soft chip — used on the Nachhaltigkeit page. */
  .badge--success-soft {
    background: var(--success-10);
    color: var(--success-d-1);
  }

  .badge--outline {
    background: transparent;
    border: 1px solid var(--border-primary);
  }

  .badge--dark {
    background: var(--secondary);
    color: var(--always-light);
  }

  /* Pill variant — neutral border, no caps. For inline tag-like chips. */
  .badge--pill {
    padding: var(--space-3xs) var(--space-s);
    background: var(--bg-muted);
    color: var(--text-body);
    border-radius: var(--radius-full);
    text-transform: none;
    letter-spacing: 0;
  }

  /* ====================================================================
     .hero-badge — glasmorphic pill for image / video hero overlays.
     Sits on dark imagery: tinted primary fill, light hairline border,
     light text, primary-colored icon. Use --success on nature/eco heroes.
     ==================================================================== */
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-s);
    background: var(--primary-20);
    border: 1px solid var(--light-20);
    border-radius: var(--radius-full);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--always-light);
    letter-spacing: 0.02em;
  }

  .hero-badge .icon {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--primary);
  }

  .hero-badge--success {
    background: var(--success-20);
  }

  .hero-badge--success .icon {
    color: var(--success);
  }

  /* ====================================================================
     .link-arrow — inline "Mehr erfahren →" link with hover-shift arrow
     Used across content sections.
     ==================================================================== */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-weight: var(--weight-semibold);
    color: var(--primary);
    text-decoration: none;
    transition: gap var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
  }

  .link-arrow::after {
    content: "→";
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .link-arrow:hover {
    color: var(--primary-d-1);
    gap: var(--space-xs);
  }

  /* ====================================================================
     .text-primary — inline highlight (often for one word in a headline)
     ==================================================================== */
  .text-primary { color: var(--primary); }
  /* Client request: bold the highlight keyword inside headlines only — body
     uses of these utilities are already wrapped in <strong>, so scope to
     headings to avoid bolding inline highlights that should read normal.
     .text-success covers the green keyword marks on /nachhaltigkeit. */
  :is(h1, h2, h3, h4, h5, h6) :is(.text-primary, .text-success) { font-weight: 700; }
  .text-success { color: var(--success); }
  .text-muted   { color: var(--text-muted); }
  .text-light   { color: var(--always-light); }
  .text-dark    { color: var(--always-dark); }

  /* ====================================================================
     .icon — sized inline SVG icon (use with /assets/icons.svg sprite)
     Usage: <svg class="icon"><use href="/assets/icons.svg#name"/></svg>
     ==================================================================== */
  .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    vertical-align: -0.125em;
  }

  .icon--sm { width: 1.4rem; height: 1.4rem; }
  .icon--md { width: 1.8rem; height: 1.8rem; }
  .icon--lg { width: 2.4rem; height: 2.4rem; }
  .icon--xl { width: 3.2rem; height: 3.2rem; }

  /* ====================================================================
     .icon-box — flex wrapper that renders its icon in primary color.
     No background by default (the icon itself is the visual). Use the
     --dark modifier when you want a near-black tile with a gold icon.
     ==================================================================== */
  .icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    color: var(--primary);
    flex-shrink: 0;
  }

  .icon-box .icon {
    width: 3.6rem;
    height: 3.6rem;
  }

  .icon-box--lg {
    width: 6.4rem;
    height: 6.4rem;
  }

  .icon-box--lg .icon {
    width: 4.8rem;
    height: 4.8rem;
  }

  .icon-box--dark {
    border-radius: var(--radius-s);
    background: var(--secondary);
    color: var(--primary);
  }

  .icon-box--dark.icon-box--lg {
    border-radius: var(--radius-m);
  }

  /* ====================================================================
     Forms — shared vocabulary (.label, .input, .textarea, .link).
     Used by the Anfrage + Bewerbung form sections. Section-specific
     layout / radio / file / checkbox styling lives in af-form-split.css
     and the analogous Bewerbung partial.
     ==================================================================== */
  .label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-title);
    margin-bottom: var(--space-2xs);
    letter-spacing: 0.01em;
  }

  .input {
    width: 100%;
    padding: var(--space-s) var(--space-m);
    font: inherit;
    font-size: var(--text-s);
    line-height: 1.4;
    color: var(--text-body);
    background: var(--bg-body);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-s);
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
  }

  .input::placeholder {
    color: var(--text-muted);
    opacity: 0.75;
  }

  .input:hover {
    border-color: var(--text-muted);
  }

  .input:focus,
  .input:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-20);
  }

  .input[aria-invalid="true"] {
    border-color: var(--error);
  }

  .input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px var(--error-20);
  }

  .textarea {
    min-height: 12rem;
    resize: vertical;
    font-family: inherit;
  }

  .link {
    color: var(--primary-d-1);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .link:hover {
    color: var(--primary);
  }

  /* ====================================================================
     .visually-hidden — accessible-only text (preserves SR access)
     ==================================================================== */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ====================================================================
     .img-cover / .img-rounded — image utilities
     ==================================================================== */
  .img-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .img-rounded { border-radius: var(--radius-m); }
  .img-pill    { border-radius: var(--radius-full); }
}