/**
 * sinopak/capacity-note block styles
 *
 * Prototype: machines/beverage-filling-machines/index.html "Filling
 * Technology" section — two-column section head, then a 4-up bordered strip
 * (.technology-grid / .tech-card): orange tag pushed away from the title by
 * a tall gap, copy, bottom text link.
 */
@layer spk-block {
  .spk-x-capacity-note__head {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.72fr);
    gap: clamp(28px, 6vw, 92px);
    align-items: end;
    margin-bottom: clamp(34px, 4.8vw, 64px);
  }
  .spk-x-capacity-note .spk-x-eyebrow {
    display: block;
    margin: 0 0 15px;
    color: var(--wp--preset--color--orange);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.22em;
  }
  .spk-x-capacity-note .spk-x-section-title {
    margin: 0;
    color: var(--wp--preset--color--navy);
    font-size: clamp(42px, 5.1vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.065em;
    font-weight: 900;
  }
  .spk-x-capacity-note .spk-x-capacity-note__lead {
    margin: 0;
    color: var(--wp--preset--color--muted);
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.65;
  }

  .spk-x-capacity-note__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--wp--preset--color--line);
    border-right: 0;
  }

  .spk-x-capacity-note__card {
    min-height: 310px;
    display: flex;
    flex-direction: column;
    padding: clamp(25px, 3vw, 38px);
    border-right: 1px solid var(--wp--preset--color--line);
  }

  .spk-x-capacity-note__tag {
    margin-bottom: 70px;
    color: var(--wp--preset--color--orange);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .spk-x-capacity-note__title {
    margin: 0 0 14px;
    color: var(--wp--preset--color--navy);
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1.03;
    letter-spacing: -0.055em;
  }

  .spk-x-capacity-note .spk-x-capacity-note__text {
    margin: 0 0 22px;
    color: var(--wp--preset--color--muted);
    font-size: 16px;
    line-height: 1.58;
  }

  .spk-x-capacity-note__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    color: var(--wp--preset--color--navy);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .spk-x-capacity-note__link::after {
    content: "→";
    color: var(--wp--preset--color--orange);
    transition: transform 0.18s ease;
  }
  .spk-x-capacity-note__link:hover::after {
    transform: translateX(4px);
  }
}

@layer spk-responsive {
  @media (max-width: 1180px) {
    .spk-x-capacity-note__head {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 720px) {
    .spk-x-capacity-note__grid {
      grid-template-columns: 1fr;
      border-right: 1px solid var(--wp--preset--color--line);
    }
    .spk-x-capacity-note__card {
      border-right: 0;
      border-bottom: 1px solid var(--wp--preset--color--line);
    }
    .spk-x-capacity-note__card:last-child {
      border-bottom: 0;
    }
    .spk-x-capacity-note__card {
      min-height: auto;
    }
    .spk-x-capacity-note__tag {
      margin-bottom: 34px;
    }
  }
}