/* ==========================================================================
   Kaars | Schlichtmann — shared components
   --------------------------------------------------------------------------
   Buttons, section wrapper + heading block, project card, hero.
   Page-specific sections live with their phase (home, referenzen, …).
   ========================================================================== */

@layer components {
  /* ----- Section wrapper ------------------------------------------------ */

  .section {
    padding-block: var(--section-space);
  }

  .section--tinted {
    background-color: var(--color-bg-subtle);
  }

  /* ----- Buttons -------------------------------------------------------
     Pill-shaped, slight scale on hover (live identity).
     .btn--primary (indigo) · .btn--secondary (white, for dark backgrounds)
     · .btn--text (inline arrow link) · .btn--sm (header CTA size). */

  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.625rem 1.5625rem;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-snug);
    text-decoration: none;
    border: 0;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: transform var(--duration-fast) ease-out,
                background-color var(--duration-normal) var(--ease-standard);
  }

  .btn:hover {
    transform: scale(1.02);
  }

  .btn:focus-visible {
    outline-offset: 3px;
    border-radius: var(--radius-full);
  }

  .btn--primary {
    color: var(--color-accent-fg);
    background-color: var(--color-accent);
  }

  .btn--primary:hover {
    color: var(--color-accent-fg);
    background-color: var(--color-accent-hover);
  }

  .btn--secondary {
    color: var(--black);
    background-color: var(--white);
  }

  .btn--secondary:hover {
    color: var(--black);
  }

  .btn--sm {
    padding: 0.75rem 1.5rem;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
  }

  .btn--text {
    padding: 0.3125rem 0;
    color: var(--color-text);
    font-weight: var(--font-normal);
    letter-spacing: 0.03em;
    border-radius: var(--radius-sm);
  }

  .btn--text:hover {
    color: var(--color-text);
    transform: translateX(2px);
  }

  .btn--text .icon {
    --icon-size: 1.125em;
    stroke-width: 1.5;
  }

  /* Button row (hero CTAs etc.) */
  .btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-5) 1.875rem;
  }

  /* ----- Section heading block -----------------------------------------
     Uppercase Alumni title + centred lead (live .h2-wrap / .h2-caps). */

  .section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    max-inline-size: 43.75rem;
    margin-inline: auto;
    text-align: center;
  }

  .section-head__title {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    text-transform: uppercase;
  }

  .section-head__lead {
    font-size: var(--text-sm);
    line-height: 2;
  }

  /* Headings inside a section-head block push the following grid down. */
  .section-head + * {
    margin-block-start: var(--space-6);
  }

  /* ----- Project card ---------------------------------------------------
     templates/partials/project-card.php. The title link is stretched over
     the whole card (one link per card, one tab stop). */

  .project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) 2.5rem;
  }

  @media (max-width: 61.99rem) {
    .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 29.99rem) {
    .project-grid { grid-template-columns: minmax(0, 1fr); }
  }

  .project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .project-card__media {
    block-size: 21.875rem;   /* 350px, as on live */
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-muted);
    transition: transform 200ms ease-in-out;
  }

  .project-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .project-card:hover .project-card__media,
  .project-card:focus-within .project-card__media {
    transform: scale(1.02);
  }

  .project-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding-inline: 0.625rem;
  }

  .project-card__title {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
  }

  .project-card__link {
    color: inherit;
    text-decoration: none;
  }

  .project-card__link:hover {
    color: inherit;
  }

  .project-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
  }

  .project-card__link:focus-visible {
    outline: none;
  }

  .project-card__link:focus-visible::after {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 4px;
  }

  .project-card:hover .btn--text {
    transform: translateX(2px);
  }

  /* ----- Hero -----------------------------------------------------------
     Full viewport, media behind a 50 % black overlay, centred content.
     The header (overlay variant) sits on top of it. */

  .hero {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: 100vh;
    min-block-size: 100svh;
    padding-block: calc(var(--header-height) + var(--space-7)) var(--space-8);
    color: var(--color-text-on-dark);
    background-color: var(--neutral-800);
    isolation: isolate;
  }

  /* Wrapper for the background image/video (carries the edit marker) */
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .hero__media > :is(img, video) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* Inner-page variant (reference detail): 80 vh, smaller title */
  .hero--page {
    min-block-size: 80vh;
    min-block-size: 80svh;
  }

  .hero__title--page {
    font-size: var(--text-4xl);
    hyphens: auto;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-overlay);
    pointer-events: none;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    max-inline-size: 68.75rem;
    text-align: center;
    overflow-wrap: break-word;
  }

  .hero__title {
    color: inherit;
    font-size: var(--text-5xl);
    line-height: var(--leading-none);
    text-transform: uppercase;
  }

  /* Wordmark set in ChicagoFLF: "KAARS" indigo, the rest white */
  .hero__title--wordmark {
    font-family: var(--font-wordmark);
    font-weight: var(--font-normal);
  }

  .hero__title-accent {
    color: var(--color-brand);
  }

  .hero__subtitle {
    display: block;
    margin-block-start: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    text-transform: none;
  }

  .hero__lead {
    max-inline-size: 50rem;
    font-size: var(--text-xl);
  }

  .hero :focus-visible {
    outline-color: var(--color-focus-ring-on-dark);
  }

  /* ----- Job list ------------------------------------------------------
     templates/partials/job-list.php (home + /jobs). */

  .job-list {
    padding: 0;
    margin: 0;
  }

  .job-list__item {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    justify-content: space-between;
    padding-block: 2.5rem;
    border-block-end: 1px solid var(--color-border);
  }

  .job-list__item .btn {
    flex-shrink: 0;
  }

  .job-list__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-inline-size: 70%;
  }

  .job-list__title {
    font-size: var(--text-3xl);
    text-transform: uppercase;
  }

  .job-list--page .job-list__title {
    text-transform: none;
  }

  .job-list__empty {
    padding-block: var(--space-6);
  }

  @media (max-width: 47.99rem) {
    .job-list__item {
      flex-direction: column;
      align-items: flex-start;
    }

    .job-list__text {
      max-inline-size: none;
    }
  }

  /* ----- 404 ------------------------------------------------------------ */

  .not-found {
    display: grid;
    align-content: center;
    min-block-size: 60vh;
  }

  .not-found__code {
    font-family: var(--font-display);
    font-size: clamp(5rem, 3rem + 10vw, 10rem);
    font-weight: var(--font-semibold);
    line-height: var(--leading-none);
    color: var(--color-brand);
  }
}