/**
 * Viewport type and layout for both photography-competition pages.
 * Phone end (max-width: 767px) matches the current Mobile work.
 * From 768px through 1600px, h1 / h3 / p interpolate to the desktop tokens.
 * h2 uses clamp(1.75rem, 3.2vw, 2.75rem) from wanderlust.css (no 4rem lock).
 * Type is never selected by section id or by color class.
 */

@media (max-width: 767px) {
  .pc-layout h1,
  .pc-layout h2,
  .pc-layout h3,
  .pc-layout p,
  .pc-layout ul,
  .pc-layout li,
  .pc-layout .wanderlust-section-title,
  .pc-layout .wanderlust-faq-question,
  .pc-layout .wanderlust-faq-body,
  .pc-layout .wanderlust-footer,
  .pc-layout .wanderlust-footer-text,
  .pc-layout .wanderlust-pill-nav,
  .pc-layout .wanderlust-pill-link {
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .pc-layout #site-header {
    max-width: 100%;
    left: 0;
    right: 0;
  }

  .pc-layout .wanderlust-pill-nav {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .pc-layout .wanderlust-pill-link {
    white-space: normal;
    text-align: center;
    flex-shrink: 1;
  }

  .pc-layout #hero .wanderlust-hero-content {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 1rem;
    width: auto;
    max-width: calc(100% - 1.5rem);
    text-align: right;
  }

  .pc-layout #hero h1,
  .pc-layout h1 {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
    overflow-wrap: break-word;
  }

  .pc-layout #hero h1 {
    text-align: right;
  }

  .pc-layout h2,
  .pc-layout h2.wanderlust-section-title {
    font-size: 1.75rem;
    line-height: 1.2;
    height: auto;
    max-width: 100%;
    overflow-wrap: break-word;
    white-space: normal;
  }

  .pc-layout h3,
  .pc-layout .wanderlust-faq-question,
  .pc-layout .wanderlust-faq-lead {
    font-size: 1.2rem;
    line-height: 1.25;
    height: auto;
    max-width: 100%;
    overflow-wrap: break-word;
    white-space: normal;
  }

  .pc-layout p,
  .pc-layout ul,
  .pc-layout li,
  .pc-layout .wanderlust-faq-body,
  .pc-layout .wanderlust-footer-text {
    font-size: 1rem;
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .pc-layout .wanderlust-footer-logo {
    width: min(250px, 70%);
    height: auto;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .pc-layout h1 {
    font-size: clamp(1.35rem, calc(1.35rem + 3.15rem * ((100vw - 768px) / 832)), 4rem);
    line-height: calc(1.2 + (-0.2 * ((100vw - 768px) / 832)));
  }

  .pc-layout #hero h1 {
    font-size: clamp(1.35rem, calc(1.35rem + 3.15rem * ((100vw - 768px) / 832)), 4rem);
  }

  .pc-layout h3,
  .pc-layout .wanderlust-faq-question,
  .pc-layout .wanderlust-faq-lead {
    font-size: clamp(1.2rem, calc(1.2rem + 0.8rem * ((100vw - 768px) / 832)), 2rem);
    line-height: 1.15;
  }

  .pc-layout p,
  .pc-layout ul,
  .pc-layout li,
  .pc-layout .wanderlust-faq-body {
    font-size: clamp(1rem, calc(1rem + 0.375rem * ((100vw - 768px) / 832)), 1.375rem);
    line-height: clamp(1.4rem, calc(1.4rem + 0.2rem * ((100vw - 768px) / 832)), 1.6rem);
  }
}

@media (min-width: 1600px) {
  .pc-layout h1,
  .pc-layout #hero h1 {
    font-size: 4rem;
    line-height: 1;
  }

  .pc-layout h3,
  .pc-layout .wanderlust-faq-question,
  .pc-layout .wanderlust-faq-lead {
    font-size: 2rem;
    line-height: 1.15;
  }

  .pc-layout p,
  .pc-layout ul,
  .pc-layout li,
  .pc-layout .wanderlust-faq-body {
    font-size: 1.375rem;
    line-height: 1.6rem;
  }
}