/**
 * Shared editorial rhythm for TNStack custom pages.
 */

body.tnstack-custom-gradient-page {
  --tnstack-section-space: clamp(80px, 7.6vw, 100px);
  --tnstack-section-space-compact: clamp(64px, 6vw, 84px);
  --tnstack-heading-gap: clamp(36px, 4.4vw, 52px);
}

body.tnstack-custom-gradient-page :where(h1, h2, h3) {
  overflow-wrap: break-word;
  text-wrap: balance;
}

body.tnstack-custom-gradient-page :where(
  .tnstack-services-overview__hero h1,
  .tnstack-service__title,
  .tnstack-hosting__title,
  .tnstack-resources__title,
  .tnstack-projects__title,
  .tnstack-project-single__title
) {
  font-size: clamp(2.65rem, 5vw, 4rem);
  font-weight: 850;
  line-height: 1.2;
}

body.tnstack-custom-gradient-page :where(
  .tnstack-services-overview__section-heading h2,
  .tnstack-services-overview__finder-copy h2,
  .tnstack-services-overview__difference-copy h2,
  .tnstack-services-overview__final-cta h2,
  .tnstack-service__section-head h2,
  .tnstack-service__benefit-copy h2,
  .tnstack-service__cta h2,
  .tnstack-hosting__plans-title,
  .tnstack-hosting__comparison-title
) {
  letter-spacing: 1px;
  line-height: 1.3;
}

body.tnstack-custom-gradient-page :where(
  .tnstack-services-overview__service-top h3,
  .tnstack-services-overview__problem-grid h3,
  .tnstack-services-overview__process-list h3,
  .tnstack-service h3,
  .tnstack-hosting__card-title,
  .tnstack-resources__card-title,
  .tnstack-projects__card-title,
  .tnstack-project-single__content h2,
  .tnstack-project-single__related-title
) {
  letter-spacing: -0.012em;
  line-height: 1.35;
}

.tnstack-services-overview__section {
  padding-block: var(--tnstack-section-space);
}

.tnstack-services-overview__services-section {
  padding-top: var(--tnstack-section-space);
}

.tnstack-services-overview__section-heading {
  margin-bottom: var(--tnstack-heading-gap);
}

.tnstack-service {
  padding-bottom: var(--tnstack-section-space);
}

.tnstack-service__section {
  padding-top: var(--tnstack-section-space);
}

.tnstack-service__section-head {
  margin-bottom: var(--tnstack-heading-gap);
}

.tnstack-hosting__plans {
  padding-top: var(--tnstack-section-space);
}

.tnstack-hosting,
.tnstack-resources,
.tnstack-projects,
.tnstack-project-single {
  padding-bottom: var(--tnstack-section-space);
}

.tnstack-hosting__hero,
.tnstack-resources__hero,
.tnstack-projects__hero {
  padding-top: clamp(176px, 14vw, 204px);
  padding-bottom: clamp(82px, 7vw, 100px);
}

.tnstack-resources__body,
.tnstack-projects__body {
  padding-top: var(--tnstack-section-space-compact);
}

.tnstack-hosting__plans-head {
  margin-bottom: var(--tnstack-heading-gap);
}

.tnstack-hosting__comparison {
  margin-top: var(--tnstack-section-space);
  padding-top: var(--tnstack-section-space-compact);
}

.tnstack-project-single__description,
.tnstack-project-single__results,
.tnstack-project-single__gallery {
  margin-bottom: var(--tnstack-section-space-compact);
}

.tnstack-project-single__content h2 {
  margin-bottom: 18px;
}

@media (max-width: 767px) {
  body.tnstack-custom-gradient-page {
    --tnstack-section-space: 68px;
    --tnstack-section-space-compact: 52px;
    --tnstack-heading-gap: 32px;
  }

  body.tnstack-custom-gradient-page :where(
    .tnstack-services-overview__hero h1,
    .tnstack-service__title,
    .tnstack-hosting__title,
    .tnstack-resources__title,
    .tnstack-projects__title,
    .tnstack-project-single__title
  ) {
    font-size: clamp(2.2rem, 10vw, 3.15rem);
    letter-spacing: -0.025em;
    line-height: 1.1;
  }

  body.tnstack-custom-gradient-page :where(
    .tnstack-services-overview__section-heading h2,
    .tnstack-services-overview__finder-copy h2,
    .tnstack-services-overview__difference-copy h2,
    .tnstack-services-overview__final-cta h2,
    .tnstack-service__section-head h2,
    .tnstack-service__benefit-copy h2,
    .tnstack-service__cta h2,
    .tnstack-hosting__plans-title,
    .tnstack-hosting__comparison-title
  ) {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    letter-spacing: -0.018em;
    line-height: 1.2;
  }

  .tnstack-hosting__comparison {
    margin-top: var(--tnstack-section-space);
  }

  .tnstack-hosting__hero,
  .tnstack-resources__hero,
  .tnstack-projects__hero {
    padding-top: 150px;
    padding-bottom: 68px;
  }
}

@media (max-width: 420px) {
  body.tnstack-custom-gradient-page :where(
    .tnstack-services-overview__hero h1,
    .tnstack-service__title,
    .tnstack-hosting__title,
    .tnstack-resources__title,
    .tnstack-projects__title,
    .tnstack-project-single__title
  ) {
    font-size: clamp(2.05rem, 10.5vw, 2.75rem);
  }
}