@import url("/styles/brand-2026-tokens.css");

.wl2026-category {
  margin: 0;
  background: var(--wl-sem-surface-canvas);
  color: var(--wl-sem-text-primary);
  font-family: var(--wl-sem-font-body);
  font-size: var(--wl-sem-type-body-size);
  line-height: var(--wl-sem-type-body-leading);
}

.wl2026-category * { box-sizing: border-box; }
.wl2026-category img { display: block; max-width: 100%; }
.wl2026-category a { color: inherit; }
.wl2026-category main { overflow: clip; }
.wl2026-category-shell,
.wl2026-category-hero,
.wl2026-category-solutions,
.wl2026-category-next,
.wl2026-category-footer {
  width: min(calc(100% - (var(--wl-sem-space-page) * 2)), var(--wl-sem-layout-container));
  margin-inline: auto;
}

.wl2026-category-skip { position: fixed; z-index: var(--wl-sem-z-overlay); inset: var(--wl-sem-space-inline) auto auto var(--wl-sem-space-inline); display: inline-flex; min-height: var(--wl-sem-touch-target); align-items: center; transform: translateY(-180%); border-radius: var(--wl-sem-radius-control); background: var(--wl-sem-surface-brand); padding: var(--wl-sem-space-inline) var(--wl-sem-space-control); color: var(--wl-sem-text-inverse); }
.wl2026-category-skip:focus { transform: translateY(0); }
.wl2026-category-header { position: relative; z-index: var(--wl-sem-z-raised); border-block-end: 1px solid var(--wl-sem-border-default); background: var(--wl-sem-surface-canvas); }
.wl2026-category-header__row { display: grid; min-height: 84px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--wl-sem-space-card); }
.wl2026-category-brand { display: inline-flex; min-height: var(--wl-sem-touch-target); align-items: center; gap: var(--wl-sem-space-control); color: var(--wl-sem-text-brand); font-weight: 800; letter-spacing: .12em; text-decoration: none; white-space: nowrap; }
.wl2026-category-brand img { width: 44px; height: auto; }
.wl2026-category-primary-nav > div,
.wl2026-category-utility-nav,
.wl2026-category-mobile-menu nav > div { display: flex; align-items: center; gap: var(--wl-sem-space-inline); }
.wl2026-category-primary-nav a,
.wl2026-category-utility-nav a { display: inline-flex; min-width: var(--wl-sem-touch-target); min-height: var(--wl-sem-touch-target); align-items: center; justify-content: center; padding-inline: var(--wl-sem-space-control); color: var(--wl-sem-text-brand); font-weight: 700; text-decoration: none; }
.wl2026-category-utility-nav a { min-width: 88px; border: 1px solid var(--wl-sem-border-default); border-radius: var(--wl-sem-radius-pill); background: var(--wl-sem-surface-functional); }
.wl2026-category-utility-nav a:last-child { border-color: var(--wl-sem-surface-brand); background: var(--wl-sem-surface-brand); color: var(--wl-sem-text-inverse); }
.wl2026-category-mobile-menu { display: none; }
.wl2026-category-mobile-menu > summary { min-width: 64px; min-height: var(--wl-sem-touch-target); border: 1px solid var(--wl-sem-border-default); border-radius: var(--wl-sem-radius-pill); background: var(--wl-sem-surface-functional); color: var(--wl-sem-text-brand); cursor: pointer; font-weight: 800; text-align: center; }
.wl2026-category-mobile-menu > summary::marker { content: ""; }

.wl2026-category-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
  min-height: 37rem;
  padding-block: clamp(4.5rem, 10vw, 8rem);
}

.wl2026-category-hero h1,
.wl2026-category-heading h2,
.wl2026-category-next h2 {
  margin: 0;
  font-family: var(--wl-sem-font-display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.055em;
  word-break: keep-all;
}

.wl2026-category-hero h1 { max-width: 12ch; font-size: clamp(3rem, 7vw, 6rem); }
.wl2026-category-hero > div > p:not(.wl2026-eyebrow) { max-width: 44rem; margin: 2rem 0; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.75; }
.wl2026-category-hero aside { display: grid; gap: .75rem; padding: clamp(2rem, 5vw, 4rem); border-radius: 1.5rem; background: var(--wl-sem-surface-brand); color: var(--wl-sem-text-inverse); }
.wl2026-category-hero aside span,
.wl2026-category-hero aside strong { font-family: var(--wl-sem-font-display); font-size: clamp(1.2rem, 3vw, 2.2rem); }
.wl2026-category-hero aside strong { color: var(--wl-sem-action-primary); }
.wl2026-category-solutions { padding-block: clamp(4rem, 8vw, 7rem); }
.wl2026-category-heading { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.wl2026-category-heading h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
.wl2026-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.wl2026-category-card { display: flex; min-height: 21rem; flex-direction: column; border: 1px solid var(--wl-sem-border-default); border-radius: 1.25rem; background: var(--wl-sem-surface-functional); padding: clamp(1.5rem, 4vw, 2.5rem); }
.wl2026-category-card > p:first-child { margin: 0; color: var(--wl-sem-text-brand); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wl2026-category-card h2 { margin: auto 0 1rem; font-family: var(--wl-sem-font-display); font-size: clamp(1.75rem, 3vw, 2.55rem); line-height: 1.08; }
.wl2026-category-card p { line-height: 1.7; }
.wl2026-category-card a { display: inline-flex; min-height: 44px; align-items: center; margin-top: 1rem; color: var(--wl-sem-text-brand); font-weight: 800; }
.wl2026-category-next { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; margin-bottom: 5rem; border-radius: 1.5rem; background: var(--wl-sem-surface-brand); padding: clamp(2rem, 5vw, 4rem); color: var(--wl-sem-text-inverse); }
.wl2026-category-next h2 { max-width: 15ch; font-size: clamp(2rem, 4vw, 3.5rem); }
.wl2026-category-footer { padding-block: 2.5rem; border-top: 1px solid var(--wl-sem-border-default); }
.wl2026-category-footer nav { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1.5rem; }
.wl2026-category-footer a { min-height: 44px; color: inherit; }

@media (max-width: 74rem) {
  .wl2026-category-primary-nav { display: none; }
  .wl2026-category-mobile-menu { display: block; }
  .wl2026-category-mobile-menu nav { position: absolute; inset: 84px var(--wl-sem-space-page) auto; border: 1px solid var(--wl-sem-border-default); border-radius: var(--wl-sem-radius-card); background: var(--wl-sem-surface-functional); padding: var(--wl-sem-space-control); }
  .wl2026-category-mobile-menu nav > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl2026-category-mobile-menu nav a { display: flex; min-height: var(--wl-sem-touch-target); align-items: center; padding-inline: var(--wl-sem-space-control); color: var(--wl-sem-text-brand); text-decoration: none; }
}

@media (max-width: 48rem) {
  .wl2026-category-shell,
  .wl2026-category-hero,
  .wl2026-category-solutions,
  .wl2026-category-next,
  .wl2026-category-footer { width: min(calc(100% - (var(--wl-sem-space-control) * 2)), var(--wl-sem-layout-container)); }
  .wl2026-category-header__row { min-height: 68px; gap: var(--wl-sem-space-inline); }
  .wl2026-category-brand span { display: none; }
  .wl2026-category-brand img { width: 30px; }
  .wl2026-category-mobile-menu nav { inset: 68px var(--wl-sem-space-control) auto; }
  .wl2026-category-hero,
  .wl2026-category-heading,
  .wl2026-category-next { grid-template-columns: 1fr; }
  .wl2026-category-hero { min-height: auto; padding-block: 3.5rem; }
  .wl2026-category-hero h1 { font-size: clamp(2.7rem, 14vw, 4.5rem); }
  .wl2026-category-grid { grid-template-columns: 1fr; }
  .wl2026-category-card { min-height: 16rem; }
  .wl2026-category-next .wl2026-button { width: 100%; }
}