/*
 * The old theme changed sizes at 640, 768, 1024, 1280 and 1536px; North's tokens have a mobile and a
 * desktop value. Each component below carries its own class and redefines the token it uses at the
 * old breakpoints, so its blocks keep their attributes and the editor shows the same steps.
 * The fluid sizes of the old site (fluid-base, fluid-lg, fluid-xl) are clamp() tokens instead.
 */

/* Home: news slider height. The vertical slider needs the same height on its frame as on each slide. */
.news-slider {
  --news-slide-height: 240px;
}

.news-slider .content-slider.swiper,
.news-slide.ensoul-group {
  height: var(--news-slide-height) !important;
}

@media (width >= 640px) {
  .news-slider {
    --news-slide-height: 320px;
  }
}

@media (width >= 768px) {
  .news-slider {
    --news-slide-height: 480px;
  }
}

@media (width >= 1024px) {
  .news-slider {
    --news-slide-height: 640px;
  }
}

@media (width >= 1280px) {
  .news-slider {
    --news-slide-height: 720px;
  }
}

/* Home: the two-column studio text. */
.about-text {
  --text-paragraph-2xl: 16px;
  --text-paragraph-2xl--line-height: 22px;
  padding-inline: 48px;
}

@media (width >= 768px) {
  .about-text {
    --text-paragraph-2xl: 24px;
    --text-paragraph-2xl--line-height: 33px;
    padding-inline: 80px;
  }
}

@media (width >= 1024px) {
  .about-text {
    padding-inline: 32px;
  }
}

@media (width >= 1280px) {
  .about-text {
    --text-paragraph-2xl: 32px;
    --text-paragraph-2xl--line-height: 44px;
  }
}

/* Home: project cards. */
.project-tags {
  --text-paragraph-xs: 12px;
  --text-paragraph-xs--line-height: 15px;
  letter-spacing: 0.025em;
}

.project-title {
  --text-heading-sm: 20px;
  --text-heading-sm--line-height: 25px;
}

@media (width >= 1280px) {
  .project-tags {
    --text-paragraph-xs: 14px;
    --text-paragraph-xs--line-height: 17.5px;
  }

  .project-title {
    --text-heading-sm: 24px;
    --text-heading-sm--line-height: 30px;
  }
}

/* Home: method list, stacked with horizontal rules until 1024px. */
.method-item {
  --text-heading-lg: 28px;
  --text-heading-lg--line-height: 35px;
  letter-spacing: normal;
}

@media (width >= 1024px) {
  .method-item {
    --text-heading-lg: 36px;
    --text-heading-lg--line-height: 45px;
  }
}

@media (width >= 1280px) {
  .method-item {
    --text-heading-lg: 48px;
    --text-heading-lg--line-height: 60px;
  }
}

@media (width >= 1536px) {
  .method-item {
    --text-heading-lg: 60px;
    --text-heading-lg--line-height: 75px;
  }
}

.method-text {
  --text-paragraph-3xl: 32px;
  --text-paragraph-3xl--line-height: 44px;
}

@media (width >= 768px) {
  .method-text {
    --text-paragraph-3xl: 40px;
    --text-paragraph-3xl--line-height: 55px;
  }
}

@media (width >= 1024px) {
  .method-text {
    --text-paragraph-3xl: 48px;
    --text-paragraph-3xl--line-height: 66px;
  }
}

@media (width >= 1280px) {
  .method-text {
    --text-paragraph-3xl: 56px;
    --text-paragraph-3xl--line-height: 77px;
  }
}

/* Inner pages: the space around the page head. */
.page-head {
  --spacing-4xl: 0px;
  --spacing-6xl: 48px;
}

@media (width >= 768px) {
  .page-head {
    --spacing-4xl: 32px;
  }
}

@media (width >= 1024px) {
  .page-head {
    --spacing-4xl: 48px;
    --spacing-6xl: 80px;
  }
}

@media (width >= 1280px) {
  .page-head {
    --spacing-4xl: 64px;
    --spacing-6xl: 96px;
  }
}

/* Content headings, the old .gutenberg h2, h3 and h4 scales. */
.content-h2 {
  --text-heading-lg: 24px;
  --text-heading-lg--line-height: 30px;
}

.content-h3 {
  --text-heading-lg: 20px;
  --text-heading-lg--line-height: 25px;
}

.content-h4 {
  --text-heading-lg: 18px;
  --text-heading-lg--line-height: 22.5px;
}

@media (width >= 768px) {
  .content-h2 {
    --text-heading-lg: 32px;
    --text-heading-lg--line-height: 40px;
  }

  .content-h3 {
    --text-heading-lg: 28px;
    --text-heading-lg--line-height: 35px;
  }

  .content-h4 {
    --text-heading-lg: 24px;
    --text-heading-lg--line-height: 30px;
  }
}

@media (width >= 1024px) {
  .content-h2 {
    --text-heading-lg: 40px;
    --text-heading-lg--line-height: 50px;
  }

  .content-h3 {
    --text-heading-lg: 36px;
    --text-heading-lg--line-height: 45px;
  }

  .content-h4 {
    --text-heading-lg: 32px;
    --text-heading-lg--line-height: 40px;
  }
}

@media (width >= 1280px) {
  .content-h2 {
    --text-heading-lg: 56px;
    --text-heading-lg--line-height: 70px;
  }

  .content-h3 {
    --text-heading-lg: 48px;
    --text-heading-lg--line-height: 60px;
  }

  .content-h4 {
    --text-heading-lg: 40px;
    --text-heading-lg--line-height: 50px;
  }
}

/* Related projects and articles: the section title and the card titles. */
.related-title {
  --text-heading-lg: 24px;
  --text-heading-lg--line-height: 30px;
}

.related-card-title {
  --text-heading-lg: 24px;
  --text-heading-lg--line-height: 30px;
}

@media (width >= 768px) {
  .related-title {
    --text-heading-lg: 32px;
    --text-heading-lg--line-height: 40px;
  }

  .related-card-title {
    --text-heading-lg: 28px;
    --text-heading-lg--line-height: 35px;
  }
}

@media (width >= 1024px) {
  .related-title {
    --text-heading-lg: 48px;
    --text-heading-lg--line-height: 60px;
  }
}

@media (width >= 1280px) {
  .related-title {
    --text-heading-lg: 56px;
    --text-heading-lg--line-height: 70px;
  }

  .related-card-title {
    --text-heading-lg: 32px;
    --text-heading-lg--line-height: 40px;
  }
}

/* Studio: names and roles. */
.staff-name {
  --text-heading-lg: 32px;
  --text-heading-lg--line-height: 40px;
}

.staff-role {
  --text-paragraph-xs: 12px;
}

@media (width >= 768px) {
  .staff-name {
    --text-heading-lg: 36px;
    --text-heading-lg--line-height: 45px;
  }

  .staff-role {
    --text-paragraph-xs: 14px;
  }
}

@media (width >= 1024px) {
  .staff-name {
    --text-heading-lg: 40px;
    --text-heading-lg--line-height: 50px;
  }

  .staff-role {
    --text-paragraph-xs: 16px;
  }
}

@media (width >= 1280px) {
  .staff-name {
    --text-heading-lg: 48px;
    --text-heading-lg--line-height: 60px;
  }
}

/* Contacts: the big lines. */
.contact-list {
  --text-paragraph-3xl: 24px;
  --text-paragraph-3xl--line-height: 33px;
}

@media (width >= 768px) {
  .contact-list {
    --text-paragraph-3xl: 32px;
    --text-paragraph-3xl--line-height: 44px;
  }
}

@media (width >= 1024px) {
  .contact-list {
    --text-paragraph-3xl: 40px;
    --text-paragraph-3xl--line-height: 55px;
  }
}

@media (width >= 1280px) {
  .contact-list {
    --text-paragraph-3xl: 56px;
    --text-paragraph-3xl--line-height: 77px;
  }
}

/* News list: date and title steps; the card goes side by side from 1024px. */
.news-date {
  --text-paragraph-lg: 14px;
  --text-paragraph-lg--line-height: 17.5px;
}

.news-title {
  --text-heading-lg: 32px;
  --text-heading-lg--line-height: 36.8px;
}

@media (width >= 768px) {
  .news-date {
    --text-paragraph-lg: 16px;
    --text-paragraph-lg--line-height: 20px;
  }
}

@media (width >= 1024px) {
  .news-date {
    --text-paragraph-lg: 20px;
    --text-paragraph-lg--line-height: 25px;
  }

  .news-title {
    --text-heading-lg: 40px;
    --text-heading-lg--line-height: 46px;
  }
}

@media (width >= 1280px) {
  .news-date {
    --text-paragraph-lg: 24px;
    --text-paragraph-lg--line-height: 30px;
  }

  .news-title {
    --text-heading-lg: 48px;
    --text-heading-lg--line-height: 55.2px;
  }
}

/* Footer: link sizes, newsletter title and the box padding. */
.footer-links {
  --text-paragraph-base: 12px;
  --text-paragraph-base--line-height: 20px;
}

.footer-newsletter-title {
  --text-paragraph-lg: 16px;
  --text-paragraph-lg--line-height: 22px;
}

@media (width >= 768px) {
  .footer-links {
    --text-paragraph-base: 14px;
  }

  .footer-newsletter-title {
    --text-paragraph-lg: 18px;
    --text-paragraph-lg--line-height: 24.75px;
  }
}

@media (width >= 1024px) {
  .footer-newsletter-title {
    --text-paragraph-lg: 20px;
    --text-paragraph-lg--line-height: 27.5px;
  }
}

@media (width >= 1280px) {
  .footer-links {
    --text-paragraph-base: 16px;
  }
}

.site-footer {
  --spacing-6xl: 48px;
}

@media (width >= 1024px) {
  .site-footer {
    --spacing-6xl: 96px;
  }
}

/* Single project: subtitle and terms. */
.project-subtitle {
  --text-paragraph-3xl: 20px;
  --text-paragraph-3xl--line-height: 22px;
}

.project-terms {
  --text-paragraph-base: 12px;
  --text-paragraph-base--line-height: 16.5px;
}

@media (width >= 768px) {
  .project-subtitle {
    --text-paragraph-3xl: 32px;
    --text-paragraph-3xl--line-height: 35px;
  }

  .project-terms {
    --text-paragraph-base: 13px;
  }
}

@media (width >= 1024px) {
  .project-subtitle {
    --text-paragraph-3xl: 40px;
    --text-paragraph-3xl--line-height: 44px;
  }
}

@media (width >= 1280px) {
  .project-subtitle {
    --text-paragraph-3xl: 48px;
    --text-paragraph-3xl--line-height: 53px;
  }

  .project-terms {
    --text-paragraph-base: 16px;
    --text-paragraph-base--line-height: 22px;
  }
}

/* Projects page: the search modes. */
.mode-links {
  --text-paragraph-lg: 18px;
  --text-paragraph-lg--line-height: 22.5px;
}

@media (width >= 1280px) {
  .mode-links {
    --text-paragraph-lg: 20px;
    --text-paragraph-lg--line-height: 25px;
  }
}

/* A small link that reaches its full size at 1280px, as the old "Vedi tutti". */
@media (width < 1280px) {
  .btn-small-until-xl .ens-btn {
    font-size: 14px !important;
    line-height: 17.5px;
  }
}

.news-related-title {
  --text-heading-lg: 32px;
  --text-heading-lg--line-height: 40px;
}

@media (width >= 768px) {
  .news-related-title {
    --text-heading-lg: 36px;
    --text-heading-lg--line-height: 45px;
  }
}

@media (width >= 1280px) {
  .news-related-title {
    --text-heading-lg: 40px;
    --text-heading-lg--line-height: 50px;
  }
}

/* Single news: label, title and date sit 16px apart until 1280px, 32px from there. */
@media (width < 1280px) {
  .news-head-title {
    --spacing-l: 16px;
  }
}

/* Single news: the featured image and the article start 64px down between 768 and 1279px, 80px from there. */
@media (768px <= width < 1280px) {
  .news-featured {
    --spacing-6xl: 64px;
  }

  .news-start.ensoul-spacer {
    height: 64px;
  }
}