/* TC008 Web Image Flow — page compositions */
@layer tenant {
  .tenant-body--website-image-platform .wif-hero--agency {
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--wif-border);
    background:
      repeating-linear-gradient(
        0deg,
        color-mix(in srgb, var(--wif-accent) 4%, transparent) 0 1px,
        transparent 1px 20px
      ),
      repeating-linear-gradient(
        90deg,
        color-mix(in srgb, var(--wif-accent) 4%, transparent) 0 1px,
        transparent 1px 20px
      ),
      var(--wif-surface);
  }

  .tenant-body--website-image-platform .wif-breakpoint-viz {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
    margin: 1rem 0 1.25rem;
    max-width: 320px;
    font-family: var(--wif-font-mono);
  }

  .tenant-body--website-image-platform .wif-breakpoint-viz__col {
    text-align: center;
  }

  .tenant-body--website-image-platform .wif-breakpoint-viz__bar {
    height: 6px;
    background: color-mix(in srgb, var(--wif-accent) 20%, var(--wif-border));
    border-radius: 1px;
    margin-bottom: 0.25rem;
  }

  .tenant-body--website-image-platform .wif-breakpoint-viz__col:nth-child(1) .wif-breakpoint-viz__bar {
    width: 35%;
    margin-left: auto;
    margin-right: auto;
  }
  .tenant-body--website-image-platform .wif-breakpoint-viz__col:nth-child(2) .wif-breakpoint-viz__bar {
    width: 55%;
    margin-left: auto;
    margin-right: auto;
  }
  .tenant-body--website-image-platform .wif-breakpoint-viz__col:nth-child(3) .wif-breakpoint-viz__bar {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
  .tenant-body--website-image-platform .wif-breakpoint-viz__col:nth-child(4) .wif-breakpoint-viz__bar {
    width: 100%;
    background: var(--wif-accent);
  }

  .tenant-body--website-image-platform .wif-breakpoint-viz__label {
    font-size: 0.62rem;
    color: var(--wif-text-muted);
  }

  .tenant-body--website-image-platform .wif-migration-spec h2,
  .tenant-body--website-image-platform .wif-dev-resources h2 {
    font-family: var(--wif-font-mono);
    font-size: 0.88rem;
    margin: 0 0 0.65rem;
  }

  .tenant-body--website-image-platform .wif-manifest-note {
    font-family: var(--wif-font-mono);
    font-size: 0.72rem;
    color: var(--wif-text-muted);
    margin-top: 0.5rem;
    padding: 0.45rem 0.55rem;
    background: var(--wif-surface-2);
    border-left: 3px solid var(--wif-accent-2);
  }

  .tenant-body--website-image-platform .wif-dev-resources ul {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.85rem;
  }

  .tenant-body--website-image-platform .wif-dev-resources a {
    color: var(--wif-accent);
    font-family: var(--wif-font-mono);
    font-size: 0.8rem;
  }
}