/* Shared mobile rhythm for category detail pages. */
@media (max-width: 768px) {
  .category-detail-page .directory-page--category .breadcrumb {
    margin-bottom: .65rem;
  }

  .category-detail-page .directory-page--category .cat-hero {
    display: block;
    position: relative;
    isolation: isolate;
    min-height: 0;
    margin: 0 0 1rem;
    padding: .2rem 0 1rem;
    overflow: hidden;
  }

  .category-detail-page .directory-page--category .cat-hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--hero-brand-mobile-veil) 68%, transparent), transparent 82%);
    pointer-events: none;
  }

  .category-detail-page .directory-page--category .cat-hero__text {
    position: relative;
    z-index: 2;
    min-width: 0;
    max-width: none;
    padding: 0 .25rem;
  }

  .category-detail-page .directory-page--category .cat-hero__h1 {
    font-size: clamp(1.5rem, 6.2vw, 2rem);
    line-height: 1.16;
    letter-spacing: -.035em;
    text-align: center;
    text-wrap: balance;
  }

  .category-detail-page .directory-page--category .cat-hero__h1 > span {
    display: block;
  }

  .category-detail-page .directory-page--category .cat-hero__badges {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: .2rem .65rem;
    margin-top: .55rem;
  }

  .category-detail-page .directory-page--category .cat-hero__badge {
    position: static;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: .7rem;
    line-height: 1.45;
    white-space: normal;
    box-shadow: none;
  }

  .category-detail-page .directory-page--category .cat-hero__badge + .cat-hero__badge::before {
    content: "·";
    margin-right: .65rem;
    color: var(--hero-brand-muted);
  }

  .category-detail-page .directory-page--category .cat-hero__desc {
    max-width: none;
    margin-top: .7rem;
    color: var(--hero-brand-ink);
    font-size: clamp(.8rem, 3.2vw, .9rem);
    line-height: 1.5;
    letter-spacing: -.005em;
    text-align: left;
    text-wrap: pretty;
    text-shadow: 0 1px 2px var(--hero-brand-mobile-veil);
  }

  .category-detail-page .directory-page--category .cat-hero .directory-hero__actions {
    justify-content: flex-start;
    margin-top: .85rem;
  }

  .category-detail-page .directory-page--category .cat-hero .directory-btn {
    min-height: 42px;
  }

  .category-detail-page .directory-page--category .cat-hero__visual {
    display: block;
    position: absolute;
    z-index: 0;
    top: 2.4rem;
    right: -.75rem;
    width: min(78%, 330px);
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    opacity: .28;
    pointer-events: none;
  }

  .category-detail-page .directory-page--category .cat-hero__visual-image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    filter: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%);
    mask-image: linear-gradient(90deg, transparent, #000 32%);
  }

  .category-detail-page .directory-page--category .cat-section-label {
    margin-bottom: .8rem;
  }

  .category-detail-page .directory-page--category .cat-tools__grid {
    gap: .75rem;
  }

  .category-detail-page .directory-page--category :is(.cat-what, .cat-popular, .cat-benefits, .cat-audience, .cat-tool-picker, .cat-more) {
    margin: 1.35rem 0;
    padding: 1rem;
    border-radius: 18px;
  }

  .category-detail-page .directory-page--category :is(.cat-section-label__text, .cat-what__h2, .cat-benefits__h2, .cat-more__h2, .cat-audience h2, .cat-tool-picker h2) {
    font-size: clamp(1.125rem, 4.8vw, 1.35rem);
    line-height: 1.3;
    text-align: left;
    text-wrap: pretty;
  }

  .category-detail-page .directory-page--category :is(.cat-what__body, .cat-audience__copy p, .cat-tool-picker__intro p) {
    font-size: .875rem;
    line-height: 1.6;
    text-align: left;
  }

  .category-detail-page .directory-page--category .cat-tool-picker {
    gap: .75rem;
  }

  .category-detail-page .directory-page--category .cat-tool-picker__grid {
    gap: .65rem;
  }

  .category-detail-page .directory-page--category .cat-tool-picker__item {
    gap: .6rem;
    padding: .85rem;
  }

  .category-detail-page .directory-page--category .cat-audience {
    gap: .9rem;
  }

  .category-detail-page .directory-page--category .cat-audience__roles {
    gap: .5rem;
  }

  .category-detail-page .directory-page--category :is(.cat-text-content, .cat-pdf-content, .cat-image-content, .cat-video-content, .cat-seo-content, .cat-developer-content, .cat-audio-content, .cat-social-content, .cat-utility-content, .cat-ai-content) {
    gap: .8rem;
    margin-block: 1.35rem;
  }

  .category-detail-page .directory-page--category :is(.cat-text-content, .cat-pdf-content, .cat-image-content, .cat-video-content, .cat-seo-content, .cat-developer-content, .cat-audio-content, .cat-social-content, .cat-utility-content, .cat-ai-content) .tool-editorial > h2 {
    margin-bottom: .75rem;
    font-size: clamp(1.125rem, 4.8vw, 1.35rem);
    line-height: 1.35;
    text-align: left;
    text-wrap: pretty;
  }

  .category-detail-page .directory-page--category :is(.cat-text-content, .cat-pdf-content, .cat-image-content, .cat-video-content, .cat-seo-content, .cat-developer-content, .cat-audio-content, .cat-social-content, .cat-utility-content, .cat-ai-content) .tool-editorial :is(p, li) {
    font-size: .9rem;
    line-height: 1.55;
    text-align: left;
  }

  .category-detail-page .directory-page--category :is(.cat-text-content, .cat-pdf-content, .cat-image-content, .cat-video-content, .cat-seo-content, .cat-developer-content, .cat-audio-content, .cat-social-content, .cat-utility-content, .cat-ai-content) .tool-editorial__grid {
    gap: .7rem;
  }

  .category-detail-page .directory-page--category :is(.cat-text-content, .cat-pdf-content, .cat-image-content, .cat-video-content, .cat-seo-content, .cat-developer-content, .cat-audio-content, .cat-social-content, .cat-utility-content, .cat-ai-content) .tool-editorial__item {
    padding: .85rem;
  }
}

@media (max-width: 360px) {
  .category-detail-page .directory-page--category .cat-hero__h1 {
    font-size: 1.5rem;
  }

  .category-detail-page .directory-page--category .cat-hero__visual {
    width: 82%;
    right: -1rem;
  }
}