/* fsq-pages-q13.css - Page-specific styles layer */
@layer pages {
  /* Constellation bar (header) */
  .constellation-bar {
    padding-block: var(--fsq-space-4);

    &__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--fsq-space-6);
    }

    &__brand {
      display: flex;
      align-items: center;
      gap: var(--fsq-space-3);
      font-size: var(--fsq-text-xl);
      font-weight: var(--fsq-font-bold);
      color: var(--fsq-color-primary-600);
      text-decoration: none;
    }

    &__logo {
      width: 40px;
      height: 40px;
    }

    &__nav {
      display: none;

      @media (min-width: 768px) {
        display: block;
      }
    }

    &__mobile-toggle {
      display: block;

      @media (min-width: 768px) {
        display: none;
      }
    }
  }

  /* Legend gate (hero) */
  .legend-gate {
    background: linear-gradient(
      135deg,
      var(--fsq-color-primary-50) 0%,
      var(--fsq-color-secondary-50) 50%,
      var(--fsq-color-accent-50) 100%
    );
    position: relative;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f59b37' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      opacity: 0.3;
    }

    &__content {
      position: relative;
      z-index: 1;
    }
  }

  /* Score trails (features) */
  .score-trails {
    &__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
      gap: var(--fsq-space-6);
    }
  }

  /* Archetype weave (character cards) */
  .archetype-weave {
    background: var(--fsq-color-neutral-50);

    &__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
      gap: var(--fsq-space-6);
    }

    &__card {
      position: relative;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--fsq-color-primary-500), var(--fsq-color-secondary-500));
      }
    }
  }

  /* Chronicle grid (story sections) */
  .chronicle-grid {
    &__items {
      display: grid;
      gap: var(--fsq-space-8);
    }

    &__item {
      display: grid;
      gap: var(--fsq-space-6);

      @media (min-width: 768px) {
        grid-template-columns: 1fr 1fr;
        align-items: center;

        &:nth-child(even) {
          direction: rtl;

          & > * {
            direction: ltr;
          }
        }
      }
    }

    &__media {
      border-radius: var(--fsq-radius-lg);
      overflow: hidden;
      box-shadow: var(--fsq-shadow-lg);
    }
  }

  /* Atlas radar (map/regions) */
  .atlas-radar {
    background: var(--fsq-color-surface);

    &__table-wrapper {
      overflow-x: auto;
      border-radius: var(--fsq-radius-lg);
      box-shadow: var(--fsq-shadow-md);
    }
  }

  /* Moment gallery (carousel) */
  .moment-gallery {
    background: var(--fsq-color-neutral-900);
    color: var(--fsq-color-neutral-50);

    &__carousel {
      position: relative;
      overflow: hidden;
    }

    &__viewport {
      overflow: hidden;
    }

    &__container {
      display: flex;
      gap: var(--fsq-space-4);
    }

    &__slide {
      flex: 0 0 100%;
      min-width: 0;

      @media (min-width: 768px) {
        flex: 0 0 50%;
      }

      @media (min-width: 1024px) {
        flex: 0 0 33.333%;
      }
    }

    &__controls {
      display: flex;
      gap: var(--fsq-space-3);
      justify-content: center;
      margin-top: var(--fsq-space-6);
    }
  }

  /* Join summon (CTA + form) */
  .join-summon {
    background: linear-gradient(135deg, var(--fsq-color-primary-500), var(--fsq-color-secondary-500));
    color: white;

    &__content {
      max-width: 600px;
      margin-inline: auto;
      text-align: center;
    }

    &__form {
      background: white;
      padding: var(--fsq-space-6);
      border-radius: var(--fsq-radius-lg);
      box-shadow: var(--fsq-shadow-xl);
      color: var(--fsq-color-text);
    }
  }

  /* Ads guideline */
  .ads-guideline {
    background: var(--fsq-color-neutral-100);
    padding: var(--fsq-space-3);
    text-align: center;
    font-size: var(--fsq-text-sm);
    border-top: 1px solid var(--fsq-color-border);

    &__link {
      color: var(--fsq-color-primary-600);
      font-weight: var(--fsq-font-bold);

      &:hover {
        text-decoration: underline;
      }
    }
  }

  /* Umbra footer */
  .umbra-footer {
    &__grid {
      display: grid;
      gap: var(--fsq-space-8);
      margin-bottom: var(--fsq-space-8);

      @media (min-width: 768px) {
        grid-template-columns: 2fr 1fr 1fr 1fr;
      }
    }

    &__brand {
      font-size: var(--fsq-text-2xl);
      font-weight: var(--fsq-font-bold);
      margin-bottom: var(--fsq-space-4);
    }

    &__section-title {
      font-size: var(--fsq-text-lg);
      font-weight: var(--fsq-font-bold);
      margin-bottom: var(--fsq-space-4);
    }

    &__links {
      list-style: none;
      padding: 0;

      li {
        margin-bottom: var(--fsq-space-2);
      }

      a {
        color: var(--fsq-color-neutral-300);
        text-decoration: none;
        transition: color var(--fsq-transition-fast);

        &:hover {
          color: var(--fsq-color-primary-400);
        }
      }
    }

    &__bottom {
      padding-top: var(--fsq-space-8);
      border-top: 1px solid var(--fsq-color-neutral-700);
      text-align: center;
      color: var(--fsq-color-neutral-400);
      font-size: var(--fsq-text-sm);
    }
  }

  /* Success page */
  .success-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    &__icon {
      width: 80px;
      height: 80px;
      margin-inline: auto;
      margin-bottom: var(--fsq-space-6);
      color: #10b981;
    }
  }

  /* Legal pages */
  .legal-page {
    &__toc {
      background: var(--fsq-color-neutral-50);
      padding: var(--fsq-space-6);
      border-radius: var(--fsq-radius-lg);
      margin-bottom: var(--fsq-space-8);

      &-title {
        font-size: var(--fsq-text-lg);
        font-weight: var(--fsq-font-bold);
        margin-bottom: var(--fsq-space-4);
      }

      &-list {
        list-style: none;
        padding: 0;

        li {
          margin-bottom: var(--fsq-space-2);
        }

        a {
          color: var(--fsq-color-primary-600);

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    &__section {
      margin-bottom: var(--fsq-space-12);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  /* FAQ page */
  .faq-page {
    &__intro {
      text-align: center;
      max-width: 60ch;
      margin-inline: auto;
      margin-bottom: var(--fsq-space-12);
    }

    &__categories {
      display: grid;
      gap: var(--fsq-space-8);
    }

    &__category-title {
      font-size: var(--fsq-text-2xl);
      margin-bottom: var(--fsq-space-6);
      padding-bottom: var(--fsq-space-3);
      border-bottom: 2px solid var(--fsq-color-primary-500);
    }
  }

  /* Contact page */
  .contact-page {
    &__grid {
      display: grid;
      gap: var(--fsq-space-8);

      @media (min-width: 768px) {
        grid-template-columns: 1fr 1fr;
      }
    }

    &__info {
      &-item {
        display: flex;
        gap: var(--fsq-space-4);
        margin-bottom: var(--fsq-space-6);
      }

      &-icon {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        color: var(--fsq-color-primary-600);
      }
    }
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  .content-auto {
    content-visibility: auto;
  }
}