/* ============================================
   DRUKARNIA DPI — Layout
   Grid, Sections, Responsive
   ============================================ */

@layer layout {
  /* --- Container --- */
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  /* --- Section base --- */
  .section {
    padding-block: var(--space-section);
    position: relative;
    overflow: hidden;
  }

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

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

  .section--light {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
  }

  .section--light h2,
  .section--light h3,
  .section--light h4 {
    color: var(--color-text-dark);
  }

  .section--light p {
    color: #4A4A5A;
  }

  .section--pink {
    /* ciemniejszy róż — biały tekst paska ma na nim 5.08:1 zamiast 4.18:1 */
    background-color: var(--color-primary-deep);
    padding-block: var(--space-xl);
  }

  /* --- Section Header --- */
  .section-header {
    margin-bottom: var(--space-2xl);
  }

  .section-header p {
    max-width: 600px;
    margin-top: var(--space-sm);
    font-size: 1.0625rem;
  }

  /* --- Two-column layouts --- */
  .grid-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
  }

  /* --- Hero layout --- */
  .hero {
    min-height: auto;
    display: flex;
    align-items: center;
    /* zero paddingu na sekcji — obrazek ma wchodzic pod nawigacje
       i dotykac rozowego paska; odstepy bierze na siebie kolumna z tekstem */
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
  }

  .hero__content {
    padding-top: calc(var(--nav-height) + var(--space-lg));
    padding-bottom: var(--space-xl);
  }

  .hero .grid-2col {
    gap: var(--space-xl);
  }

  .hero__content {
    position: relative;
    z-index: 2;
  }

  .hero__image {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
  }

  .hero__image img {
    max-height: 520px;
    width: auto;
    object-fit: contain;
  }

  /* --- Capabilities Grid --- */
  .capabilities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* --- About photo grid --- */
  .photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .photo-grid__item {
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4/3;
  }

  .photo-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out-expo);
  }

  .photo-grid__item:hover img {
    transform: scale(1.05);
  }

  /* --- Contact layout --- */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* --- Pink strip layout --- */
  .strip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    text-align: center;
  }

  /* --- Footer --- */
  .footer {
    background-color: var(--color-bg-darker);
    padding-block: var(--space-lg);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
  }

  /* Dane rejestrowe — drobniejsze niż reszta stopki, ale kolorem
     text-secondary (6.3:1 na #121220), nie muted, który nie zdaje AA. */
  .footer__legal {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    max-width: 62ch;
    margin-inline: auto;
  }

  .footer a {
    color: var(--color-primary-on-dark);
    transition: color var(--duration-fast);
  }

  .footer a:hover {
    color: #FF6BB0;
  }

  /* ============================================
     RESPONSIVE — Tablet (768px+)
     ============================================ */
  @media (min-width: 768px) {
    :root {
      --nav-height: 72px;
    }

    .strip-grid {
      grid-template-columns: repeat(3, 1fr);
      text-align: left;
    }

    .capabilities-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
      grid-template-columns: 4fr 8fr;
    }
  }

  /* ============================================
     RESPONSIVE — Desktop (1024px+)
     ============================================ */
  @media (min-width: 1024px) {
    .grid-2col {
      grid-template-columns: 55fr 45fr;
    }

    .grid-2col--about {
      grid-template-columns: 5fr 7fr;
    }

    .grid-2col--tagatic {
      grid-template-columns: 1fr 1fr;
    }

    .capabilities-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    /* Hero: obrazek dostaje więcej miejsca i schodzi na pełny spad —
       w prawo, pod nawigację u góry i do różowego paska u dołu */
    .hero .grid-2col {
      grid-template-columns: 47fr 53fr;
      align-items: stretch;
      gap: 0;
    }

    .hero__content {
      align-self: center;
      padding-top: calc(var(--nav-height) + var(--space-2xl));
      padding-bottom: var(--space-3xl);
    }

    .hero__image {
      align-self: stretch;
      justify-content: flex-end;
      /* wyjście poza kontener = margines centrujący + padding kontenera,
         plus 20px zapasu, żeby paralaksa nie odsłoniła szczeliny przy krawędzi */
      margin-right: calc(-1 * (
        max(0px, (100vw - var(--container-max)) / 2)
        + var(--container-padding)
        + 20px
      ));
    }

    .hero__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      max-width: none;
      max-height: none;
    }
  }
}