/*
Author: Matt Pahuta
https://www.mattpahuta.com
Date: March 2025
*/
@layer reset, base;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  [role='list'] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body {
    min-block-size: 100vh;
  }

  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.1;
  }

  p,
  li {
    text-wrap: wrap;
  }

  img,
  picture {
    max-inline-size: 100%;
    display: block;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }
}

@layer base {
  :root {
    /* Fonts */
    --ff-title: 'Martian Mono', serif;
    --ff-body: 'Inter', serif;
    /* Font Sizes */
    --fs-text-preset-1: 2.375rem; /* 38px, bold, lineheight 1.2 spacing -2px */
    --fs-text-preset-2: 2.125rem; /* 34px, semi-bold, lineheight 1.3, spacing -2px */
    @media (width > 40rem) {
      --fs-text-preset-1: 3.875rem; /* 62px, bold, lineheight 1.2, spacing -2px */
      --fs-text-preset-2: 3.125rem; /* 50px*, semi-bold, lineheight 1.3, spacing -2px */
    }
    --fs-text-preset-3: 2.125rem; /* 34px, semi-bold, lineheight 1.3, spacing -1px */
    --fs-text-preset-4: 1.5rem; /* 24px, semi-bold, lineheight 1.1, spacing -1px */
    --fs-text-preset-5: 1.25rem; /* 20px, Inter, regular, lineheight 1.4, spacing -0.5px  */
    --fs-text-preset-6: 1.125rem; /* 18px, semi-bold, lineheight 1.3, spacing -1px  */
    --fs-text-preset-7: 1rem;
    --fs-text-preset-8: 0.875rem; /* 14px, semi-bold, lineheight 1.2, spacing -1px  */
    /* Colors */
    --clr-neutral-900: hsl(194, 78%, 11%);
    --clr-neutral-700: hsl(195, 23%, 28%);
    --clr-neutral-200: hsl(17, 12%, 89%);
    --clr-neutral-100: hsl(17, 41%, 97%);
    --clr-neutral-000: hsl(0, 0%, 100%);
    --clr-light-salmon-500: hsl(22, 99%, 72%);
    --clr-light-salmon-100: hsl(22, 100%, 91%);
    --clr-light-salmon-50: hsl(23, 100%, 97%);
    /* Gradients */
    --gradient-text: linear-gradient(
      107deg,
      #ff9a60 -11.37%,
      #062630 61.84%
    );
    --gradient-standard: linear-gradient(
      90deg,
      #ffe2d1 0%,
      #fff5ef 100%
    );
    --gradient-alt: linear-gradient(90deg, #375058 0%, #062832 100%);
    /* Spacing */
    --spacing-0: 0px; /* 0px */
    --spacing-025: 0.125rem; /* 2px */
    --spacing-050: 0.25rem; /* 4px */
    --spacing-075: 0.375rem; /* 6px */
    --spacing-100: 0.5rem; /* 8px */
    --spacing-150: 0.75rem; /* 12px */
    --spacing-200: 1rem; /* 16px */
    --spacing-250: 1.25rem; /* 20px */
    --spacing-300: 1.5rem; /* 24px */
    --spacing-400: 2rem; /* 32px */
    --spacing-450: 2.125rem; /* 34px */
    --spacing-500: 2.5rem; /* 40px */
    --spacing-600: 3rem; /* 48px */
    --spacing-700: 3.75rem; /* 60px */
    --spacing-800: 4rem; /* 64px */
    --spacing-1000: 5rem; /* 80px */
    --spacing-1250: 7.5rem; /* 120px */
    /* Border radius */
    --radius-0: 0px;
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-20: 20px;
    --radius-24: 24px;
    --radius-full: 999px;

    /* Semantic Variables */
    --bg-dark: var(--clr-neutral-900);
    --section-padding-lrg: var(--spacing-800);
    --section-padding-xl: var(var(--spacing-1000));
  }

  html {
    font-family: var(--ff-body);
    scroll-padding: 1.5rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-size: var(--fs-text-preset-5);
    font-weight: 400;
    line-height: 1.4;
    color: var(--clr-neutral-700);
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--ff-title);
    font-weight: 600;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  cite {
    font-style: normal;
  }

  .logo-link {
    display: inline-flex;
  }

  .hero__title {
    max-width: 16ch;
    font-size: var(--fs-text-preset-1);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -2px;
    color: var(--gradient-text);
    background: var(--gradient-text);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  h2 {
    font-size: var(--fs-text-preset-2);
    line-height: 1.3;
    letter-spacing: -2px;
  }

  .section h2 {
    --margin-block-end: var(--spacing-300);
    max-width: 17ch;
    margin-block-end: var(--margin-block-end);
    color: var(--clr-neutral-900);
  }

  .site-footer h2 {
    max-width: 20ch;
    text-align: center;
    text-wrap: auto;
    margin-block-end: var(--spacing-500);
  }

  @media (width > 40rem) {
    .features-section h2 {
      --margin-block-end: var(--spacing-450);
    }
    .membership-section h2 {
      --margin-block-end: var(--spacing-500);
    }
  }

  @media (width > 64rem) {
    .membership-section h2 {
      --margin-block-end: var(--spacing-800);
    }
    .journey-section h2,
    .membership-section h2 {
      --margin-block-end: var(--spacing-800);
      margin-inline: auto;
      text-align: center;
      text-wrap: balance;
    }
  }

  .section p {
    max-width: 56ch;
  }

  .img-club {
    position: relative;
    z-index: 100;
    object-fit: cover;
    border-radius: var(--radius-8);
  }

  @media (width > 40rem) {
    .img-club {
      border-radius: var(--radius-16);
    }
    .picture-club {
      position: relative;
    }
    .picture-club::before {
      position: absolute;
      content: url('../images/logos-tech.svg');
      z-index: 1000;
      right: 3rem;
      bottom: 3rem;
    }
  }

  @media (width > 64rem) {
    .img-club {
      border-radius: var(--radius-12);
    }
    .section__picture img {
      max-width: 560px;
    }
    .picture-club::before {
      right: 0;
      bottom: 1.5rem;
      left: -5rem;
    }
  }

  .socials-list {
    list-style: none;
  }
}

@layer layout {
  .flow > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  .wrapper {
    --wrapper-max-width: 1170px;
    --padding-inline: var(--spacing-400);
    margin-inline: auto;
    width: min(
      100% - var(--padding-inline),
      var(--wrapper-max-width)
    );

    @media (width > 40rem) {
      --padding-inline: var(--spacing-800);
    }

    &[data-width='medium'] {
      --wrapper-max-width: 970px;
    }
  }

  .equal-columns {
    display: grid;
    gap: var(--equal-columns-gap, var(--spacing-300));
    align-items: var(--column-layout-alignment, start);

    &[data-gap='medium'] {
      --equal-columns-gap: var(--spacing-500);
    }

    &[data-gap='large'] {
      --equal-columns-gap: var(--spacing-800);
    }

    @media (width > 64rem) {
      --column-layout-alignment: center;
      grid-auto-flow: column;

      &[data-gap='medium'] {
        --equal-columns-gap: var(--spacing-1000);
      }
    }
  }

  .main {
    padding-block: var(--spacing-800);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-800);

    @media (width > 40rem) {
      padding-block-start: var(--spacing-1000);
      gap: var(--spacing-1000);
    }

    @media (width > 64rem) {
      padding-block: var(--spacing-1250);
      gap: var(--spacing-1250);
    }
  }

  .section {
    --padding: (var(--spacing-800));
    padding-block: var(--padding);
  }

  /* Note: Journey section is only visible for desktop size screens */
  .journey-section {
    display: none;
    padding-block: var(--spacing-1000);
    position: relative;
    overflow: hidden;
    z-index: 0;
  }

  @media (width > 64rem) {
    .about-section {
      grid-template-columns: auto 1fr;
    }
    .features-section__content {
      order: 2;
    }
    .journey-section {
      display: block;
      color: var(--clr-neutral-900);
    }
    .journey-section::before {
      content: '';
      position: absolute;
      background-image: url('../images/pattern-glow.svg');
      background-repeat: no-repeat;
      bottom: 0;
      right: -50%;
      width: 100%;
      height: 100%;
    }
  }

  .journey-content {
    padding-inline: var(--spacing-700);
    position: relative;
  }
}

@layer components {
  a.button,
  button.button {
    padding: 1.125rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: fit-content;
    cursor: pointer;
    border-radius: var(--radius-8);
    text-transform: uppercase;
    line-height: 1.1;
    font-family: var(--ff-title);
    font-size: var(--fs-text-preset-7);
    letter-spacing: -1px;
    font-weight: 500;
    gap: 0.5em;
    transition: 150ms outline ease-in-out;

    @media (width > 40rem) {
      font-size: var(--fs-text-preset-6);
    }
  }

  .button svg {
    height: 24px;
    width: 24px;
    flex: none;
  }

  a.btn-primary,
  a.btn-alt {
    text-decoration: none;
  }

  .btn-primary {
    background: var(--clr-light-salmon-50);
    color: var(--clr-neutral-900);
    border: 2px solid var(--clr-neutral-900);
  }

  .btn-primary:hover,
  .btn-primary:focus-visible {
    background: var(--gradient-standard);
  }

  .btn-primary:focus-visible {
    outline: 2px solid var(--clr-neutral-900);
    outline-offset: 0.25rem;
  }

  .btn-alt {
    background: var(--clr-neutral-900);
    color: var(--clr-neutral-000);
    border: 2px solid var(--clr-neutral-000);
  }

  .btn-alt:hover,
  .btn-alt:focus-visible {
    background: var(--gradient-alt);
  }

  .btn-alt:focus-visible {
    outline: 2px solid var(--clr-neutral-200);
    outline-offset: 0.25rem;
  }

  @media screen and (-ms-high-contrast: active) {
    button.button {
      border: 2px solid currentcolor;
    }
  }

  .site-header,
  .journey-section {
    background-image: url('../images/pattern-light-bg.svg');
    background-color: var(--clr-light-salmon-50);
  }

  .site-header {
    overflow: hidden;
    padding-block-start: var(--spacing-300);
    padding-block-end: var(--spacing-1000);
    background-repeat: no-repeat;

    @media (width > 40rem) {
      background-repeat: repeat;
      padding-block-start: var(--spacing-400);
    }
  }

  .journey-section {
    border-radius: var(--radius-12);
  }

  /* Handle decorative glow - header */
  .header-wrapper {
    position: relative;
  }

  .header-wrapper::before {
    content: '';
    position: absolute;
    background-image: url('../images/pattern-glow.svg');
    background-repeat: no-repeat;
    bottom: -65%;
    right: -20%;
    width: 100%;
    height: 100%;

    @media (width > 64rem) {
      bottom: -25%;
      right: -55%;
    }
  }

  .hero {
    padding-block-start: var(--spacing-600);

    @media (width > 40rem) {
      padding-block-start: var(--spacing-1000);
    }

    .hero__content {
      z-index: 1000;
    }

    .hero__content > p {
      --flow-space: var(--spacing-300);
      max-width: 55ch;
    }

    .hero__content--cta {
      --flow-space: var(--spacing-400);

      .button {
        --flow-space: var(--spacing-400);
        margin-block-end: var(--spacing-250);
      }
      .testimonial-component {
        --flow-space: var(--spacing-250);
      }
    }

    .hero__image {
      position: relative;
    }

    @media (width > 64rem) {
      .hero__content {
        max-width: 570px;
      }
    }
  }

  /* multi-stars and testimonal total component */
  .stars-container {
    display: flex;
    &[data-stars='small'] svg {
      height: 24px;
      width: 24px;
    }
    &[data-stars='large'] svg {
      height: 28px;
      width: 28px;
    }
  }

  .testimonial-component {
    display: flex;
    align-items: center;
    gap: var(--spacing-150);
    font-family: var(--ff-title);
    font-size: var(--fs-text-preset-8);
    letter-spacing: -1px;
    .testimonial-component__avatars {
      max-width: 110px;
    }
  }

  /* Circle accent text */
  .accent-circle {
    position: relative;
  }

  .accent-circle::before {
    position: absolute;
    content: url('../images/pattern-circle.png');
    top: -1rem;
    left: -2rem;
    transform: scale(0.7);

    @media (width > 40rem) {
      top: -6px;
      left: -0.7rem;
      transform: scale(1);
    }
  }

  /* Custom OL - Journey list */
  .journey-list {
    width: 100%;
    max-width: 1050px;
    font-family: var(--ff-title);
    font-size: var(--fs-text-preset-6);
    font-weight: 600;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    gap: var(--spacing-600);
    counter-reset: journey-list-item;
  }

  .journey-list li {
    display: grid;
    gap: var(--spacing-200);
    align-items: center;
  }

  .journey-list li:not(:last-child) {
    background-image: url('../images/pattern-arrow.svg');
    background-repeat: no-repeat;
    background-position: top right;
  }

  .journey-list li:before {
    content: counter(journey-list-item);
    counter-increment: journey-list-item;
    font-size: var(--fs-text-preset-5);
    font-weight: 600;
    border: 2px solid var(--clr-neutral-900);
    border-radius: var(--radius-4);
    justify-self: start;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin-inline-end: var(--spacing-200);
  }

  /* Custom UL check list */
  .custom-check-list {
    display: grid;
    gap: var(--spacing-200);
    font-size: var(--fs-text-preset-5);

    @media (width > 64rem) {
      max-width: 400px;
    }
  }

  .custom-check-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-150);
    align-items: center;
  }

  .custom-check-list li::before {
    content: url('../images/icon-check.svg');
    width: 24px;
    height: 24px;
    display: inline-block;
  }

  /* Testimonial Quote */
  .testimonial-quote-wrapper {
    display: grid;

    @media (width > 64rem) {
      text-align: center;
      justify-items: center;
    }
  }

  .testimonial-quote {
    max-width: 40ch;
    margin-block: var(--spacing-400);
    font-family: var(--ff-title);
    font-size: var(--fs-text-preset-4);
    font-weight: 600;
    color: var(--clr-neutral-900);
    letter-spacing: -1px;

    @media (width > 40rem) {
      font-size: var(--fs-text-preset-3);
    }
  }

  /* Membership cards */
  .membership-options-list {
    display: grid;
    gap: var(--spacing-300);
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(250px, 100%), 1fr)
    );
    align-items: center;

    @media (width > 64rem) {
      grid-template-columns: 1fr 350px 1fr;
    }
  }

  .card {
    display: grid;
    gap: var(--spacing-300);
    padding: var(--spacing-300);
    border: 1px solid var(--clr-neutral-200);
    border-radius: var(--radius-8);

    &[data-featured='true'] {
      background-color: var(--clr-neutral-100);
      overflow: hidden;
      background-image: url('../images/pattern-glow.svg');
      background-position: 25% 0%;

      @media (width > 64rem) {
        padding-block: var(--spacing-500);
      }
    }

    .card__cost {
      display: flex;
      align-items: center;
      gap: var(--spacing-100);
    }

    .card__cost span {
      font-size: var(--fs-text-preset-3);
      font-weight: 700;
    }

    ul {
      padding-block-start: var(--spacing-300);
      border-top: 1px solid var(--clr-neutral-200);
    }

    button {
      margin-block-start: var(--spacing-100);
      justify-content: center;
    }
  }

  /* Footer and CTA */
  .site-footer {
    color: var(--clr-neutral-000);
    border-top-left-radius: var(--radius-16);
    border-top-right-radius: var(--radius-16);
    background-image: url('../images/pattern-dark-bg.svg');

    .cta-wrapper {
      padding-block-start: var(--spacing-600);
      padding-block-end: var(--spacing-800);
      display: flex;
      flex-direction: column;
      align-items: center;

      .button {
        margin-block-end: var(--spacing-300);
      }
    }

    .footer-bottom {
      max-width: 1170px;
      margin-inline: var(--spacing-200);
      padding-block: var(--spacing-300);
      border-top: 1px solid var(--clr-neutral-700);
    }

    .footer-bottom__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--spacing-200);

      p {
        font-size: var(--fs-text-preset-8);
        font-weight: 500;
      }
    }

    .socials-list {
      display: flex;
      gap: var(--spacing-200);
      justify-content: center;
      align-items: center;
    }

    .social-link {
      @media (prefers-reduced-motion: no-preference) {
        transition: opacity 150ms ease-in-out;
      }
      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }

    .social-link:hover {
      opacity: 0.6;
    }

    @media (width > 40rem) {
      .footer-bottom {
        margin-inline: 0;
      }

      .footer-bottom__content {
        flex-direction: row;
        justify-content: space-between;
      }
    }

    @media (width > 64rem) {
      .cta-wrapper {
        padding-block-start: var(--spacing-1000);
      }
      .footer-bottom {
        margin-inline: auto;
      }
    }

    @media (width > 75rem) {
      .footer-bottom__content {
        --padding-inline: 0;
      }
    }
  }
}

@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .skip-nav-link {
    background-color: var(--clr-neutral-900);
    color: var(--clr-light-salmon-100);
    padding: 0.5rem 1.5rem;
    border-radius: 0 0 var(--radius-4) var(--radius-4);
    position: absolute;
    transform: translateY(-120%);
    transition: transform 250ms ease-in;
  }

  .skip-nav-link:focus {
    transform: translateY(0);
  }

  .fw-semi-bold {
    font-weight: 600;
  }

  .bg-dark {
    background-color: var(--bg-dark);
  }
}