/* respects users who've explicitly asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .section-testimonials::before,
  .section-testimonials::after {
    animation: none;
  }

  .testimonials--container {
    opacity: 1; /* show immediately, no fade */
    transition: none;
  }

  .section-label,
  .testimonials--heading,
  .testimonial-blockquote,
  .testimonial-figcaption {
    filter: blur(0);
    transition: none;
  }

  .about-text-box .about-text,
  .about-text-box .quote-text,
  .about-text-box .quote-author,
  .about-text-box .heading-secondary {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .journey-timeline::after {
    transform: scaleY(1); /* show the full line, no scroll-driven anim */
  }
  .journey-marker {
    opacity: 1; /* all markers visible */
  }
}

/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/
@media (max-width: 84em) {
  .heading-primary {
    /* font-size: 4.4rem; */
  }
  .hero-content {
    max-width: 54rem;
    margin-left: 6.4rem;
  }
  .hero-img {
    object-position: 70%;
  }
}
/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
  html {
    font-size: 56.25%;
  }

  .heading-primary {
    /* font-size: 4.6rem; */
  }

  .heading-secondary {
    /* font-size: 4rem; */
  }

  .hero-content {
    max-width: 46rem;
    margin-left: 6.4rem;
  }
}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/
@media (max-width: 59em) {
  html {
    /* 8px / 16px = 0.5 = 50% */
    /* font-size: 50%; */
  }

  .hero-content {
    max-width: 48rem;
    /* margin-left: 6.4rem; */
  }

  /* MOBILE NAVIGATION */

  .btn-mobile-nav {
    display: block;
    z-index: 9999;
  }

  .main-nav {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;

    /* Hide navigation */
    /* Allows NO transitions at all */
    /* display: none; */

    /* 1) Hide it visually */
    opacity: 0;

    /* 2) Make it unaccessible to mouse and keyboard */
    pointer-events: none;

    /* 3) Hide it from screen readers */
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }
  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .main-nav-list {
    flex-direction: column;
    gap: 4.8rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 3rem;
  }
}
/**************************/
/* BELOW 864px (Tablets, break point where hero content gets
too close to his head) */
/**************************/

@media (max-width: 54em) {
  .hero {
    align-items: flex-start; /* stop vertical-centering; pin content to top */
  }

  .hero-img {
    object-position: 77%;
  }

  .hero-content {
    margin-left: 0;
    max-width: none;
    width: 100%;
    height: 80vh;
    padding: 0 3.2rem 4.8rem 3.2rem; /* full-width text band, no side gutter */
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* gap: 34rem; */
  }

  .hero-buttons {
    justify-content: center;
  }
  .subheadline {
    margin-bottom: 1.8rem;
  }
}

/**************************/
/* BELOW 780px (Because heading primary was cutting his head) */
/**************************/
@media (max-width: 48em) {
  .hero-img {
    object-position: 77%;
  }
  .about-text {
    font-size: 2rem;
  }
}

/**************************/
/* BELOW 704px (SmallerTablets) */
/**************************/

@media (max-width: 44em) {
  .about-text {
    font-size: 1.8rem;
  }
  .hero-img {
    object-position: 70% center;
  }
}

/**************************/
/* BELOW 608px Specific for:
- about coach image to be under upper most text
- footer to get more compact
-journey timeline to be centerd with text markers about each */
/**************************/

@media (max-width: 38em) {
  .hero-img {
    object-position: 77% center;
  }

  .about-coach-container {
    display: grid;
    grid-template-columns: 1fr; /* single column */
    justify-items: center; /* center items horizontally */
    row-gap: 3.2rem; /* spacing between stacked blocks */
  }

  .about-text-box {
    display: contents;
  }

  /* match the image width; kill the .flow owl margins (row-gap handles spacing now) */
  .about-text-box > *,
  .about-img-box {
    width: 80%;
    margin-top: 0;
    grid-column: 1; /* everything in the single column, forces grid not to make 2 cols */
  }

  /* place each block in its own row — EXCEPT p1 and the image share row 2,
     so they land in the same cell and overlap */
  .about-text-box .heading-secondary {
    grid-row: 1;
    text-align: center;
    margin-bottom: 6.4rem; /* 9.6 - 3.2(this is gap value), we to this so its 
    same as on testimonials, so here now will be 6.4(margin-bottom + 3.2(gap)
    = 9.6 of testimonials(it doenst have gap) */
  }
  .about-text-box .about-text:nth-of-type(1) {
    color: #f1f3f5;
    grid-row: 2;
    padding: 2.4rem 2rem; /* top/bottom + left/right inset from image edges */
  } /* p1  */
  .about-img-box {
    grid-row: 2;
  } /* same cell as p1 */
  .about-text-box .about-text:nth-of-type(2) {
    grid-row: 3;
  }
  .about-text-box .about-text:nth-of-type(3) {
    grid-row: 4;
  }
  .about-text-box .stoic-quote-container {
    grid-row: 5;
  }

  /* p1 pinned to the TOP of the shared cell = the image's top edge */
  .about-text-box .about-text:nth-of-type(1) {
    align-self: start;
    position: relative;
    z-index: 2;
  }

  /* image fills the cell, sits behind p1 */
  .about-img-box {
    align-self: start;
    position: relative;
    z-index: 1;
  }

  .quote-text {
    margin-top: 3.6rem;
  }

  .about-text-box .about-text:nth-of-type(2),
  .about-text-box .about-text:nth-of-type(3),
  .about-text-box .quote-text,
  .about-text-box .quote-author {
    padding: 0 2rem;
  }

  .journey-timeline {
    padding-left: 0;
  }

  .journey-phase {
    padding-left: 0;
    margin-bottom: 6.4rem;
  }

  .journey-phase::before {
    width: 100%;
    top: 0;
    left: 0;
  }

  .journey-content {
    text-align: center;
    padding: 0 3.6rem;
  }
  .heading-tertiary,
  .journey-content-text {
    position: relative;
    z-index: 2;
    background: #f1f3f5;
  }

  .journey-marker {
    position: relative;
    top: 0;
    left: 0;
    transform: translateX(0%);
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2.4rem;
  }

  .journey-timeline::after {
    content: "";
    position: absolute;
    /* line sits 12rem from timeline left edge */
    left: 50%;
    top: 0;
    /* bottom: 0; */
    width: 2px;
    z-index: 1;
  }

  .grid--footer {
    /* grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr; */
    grid-template-rows: 1fr 1fr;
    row-gap: 3.2rem;
    column-gap: 3.2rem;
  }
  .logo-col {
    grid-row: 2/3;
  }
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/
/* 16px is the accessibility-recommended minimum
 for body text on phones */
@media (max-width: 34em) {
  /* .hero-img {
    object-position: 30% center;
  } */

  .hero-img {
    object-position: 30% center;
  }

  .hero-content {
    padding: 0 3.2rem 1.2rem 3.2rem; /* full-width text band, no side gutter */
  }

  .testimonials {
    display: flex;
    flex-direction: column;
    /* grid-template-columns: repeat(2, 1fr); */
    /* column-gap: 10rem; */
    gap: 8rem;
  }

  .form-group-container {
    /* display: grid; */
    grid-template-columns: 1fr; /* single column */
    justify-items: center;
    row-gap: 3.2rem; /* spacing between stacked blocks */
  }

  .btn--email {
    position: relative;
    margin: 0 auto;
    top: 0;
    left: 0;
  }
  /* Headings */
  .heading-primary {
    font-size: 2.8rem; /* hero H1 — was landing ~36px, too big */
  }

  .heading-secondary {
    font-size: 2.6rem;
    margin-bottom: 4.8rem; /* the 9.6rem default is way too much on mobile */
  }

  .heading-tertiary {
    font-size: 2rem;
  }

  /* Subheadline */
  .subheadline {
    font-size: 1.6rem; /* keep at 16px floor for readability */
    margin-bottom: 1.8rem;
  }

  /* Buttons — fixed at 2rem, the real must-fix */
  .btn,
  .btn:link,
  .btn:visited {
    font-size: 1.6rem;
    padding: 1.4rem 2.4rem;
  }
}

/**************************/
/* BELOW 440px (Phones) */
/**************************/
@media (max-width: 28em) {
  .hero {
    min-height: 70vh;
  }

  .section-intro {
    padding: 0 4rem 0 4rem;
  }

  .about-text-box > *,
  .about-img-box {
    width: 100%;
  }
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  .about-visible .about-text:nth-of-type(4) {
    text-align: center;
  }
}
/**************************/
/* BELOW 414px (Phones) */
/**************************/
@media (max-width: 26em) {
  .hero-img {
    /* min-height: 70vh; */
    /* object-position: 30% center; */
  }
}
/**************************/
/* BELOW 386px (Phones) */
/**************************/
@media (max-width: 25em) {
  .hero-img {
    /* min-height: 70vh; */
    /* 20 */
    /* object-position: 80% center; */
  }
}

/**************************/
/* BELOW 372, 345 & 320px (Ultra Small Phones)
Fixing text over coach's head */
/**************************/
@media (max-width: 23em) {
  .hero-img {
    /* min-height: 70vh; */
    /* 40 */
    /* object-position: 100% center; */
  }

  .about-text-box .about-text:nth-of-type(1) {
    padding: 0 2rem; /* top/bottom + left/right inset from image edges */
  }
  .grid--footer {
    /* display: grid; */
    grid-template-columns: 1fr;
    grid-template-rows: 3fr;
    justify-content: center;
  }

  .logo-col {
    grid-row: 3;
  }

  .logo-col,
  .address-col,
  .nav-col {
    text-align: center;
  }
  .social-links {
    justify-content: center;
    margin-bottom: 2rem;
  }

  .footer-heading {
    margin-bottom: 2.4rem;
  }
  .about-text-box > *,
  .about-img-box {
    width: 100%;
  }
}

@media (max-width: 22em) {
  .hero-img {
    /* min-height: 70vh; */
    /* object-position: 52% center; */
  }

  .about-text {
    font-size: 1.8rem;
  }
}

@media (max-width: 20em) {
  .about-text-box .about-text:nth-of-type(1) {
    padding: 0 2rem; /* top/bottom + left/right inset from image edges */
  }
  .heading-primary {
    font-size: 2.7rem;
  }
  .heading-secondary {
    font-size: 2.5rem;
  }
  .heading-tertiary {
    font-size: 2.3rem;
  }
}

/* ////////////////////////////////////////////////////////
////////////////////////////////////////////////////////// */