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

/* 1350/16 = 84.375 this is our em calculation for px */

/*******************************/
/* BELOW 1344px (Smaller Desktops) */
/*******************************/

@media (max-width: 84em) {
  .hero {
    max-width: 110rem;
  }

  .heading_primary {
    font-size: 4rem;
  }

  .hero_description {
    font-size: 1.8rem;
  }

  .heading_secondary {
    font-size: 3.6rem;
  }

  .mission_description {
    font-size: 1.8rem;
  }

  .values_description {
    font-size: 1.8rem;
  }

  .values_summary_grid {
    grid-template-columns: 1fr;
  }

  .values_cards {
    grid-template-columns: 1fr;
  }

  .heading_tertiary {
    font-size: 3.2rem;
  }
}

/*******************************/
/* BELOW 1200px (Landscape Tablets) */
/*******************************/

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

  .header {
    padding: 0 3.2rem;
  }

  .grid {
    column-gap: 4.8rem;
  }

  .hero {
    gap: 4.8rem;
  }

  .hero_image {
    max-width: 48rem;
  }
}

/*******************************/
/* BELOW 944px (Tablets) */
/*******************************/

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

  .logo {
    height: 8.2rem;
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 0 5.6rem;
    gap: 4.8rem;
  }

  .hero_image {
    width: min(100%, 44rem);
    max-width: 100%;
  }

  .hero_text_box {
    text-align: center;
  }

  .hero_image_box {
    text-align: center;
  }

  .team_cards {
    grid-template-columns: 1fr;
  }

  .team_card {
    max-width: none;
    width: 100%;
  }

  .team_card.is_open .team_card_shell {
    grid-template-columns: 1fr;
  }

  .team_card.is_open .team_card_toggle {
    width: 100%;
  }

  .team_card.is_open .team_card_image {
    width: 100%;
    max-width: none;
    height: clamp(36rem, 65vw, 48rem);
    object-fit: cover;
  }

  .team_card.is_open .team_card_content {
    height: auto;
    max-height: none;
    overflow-y: visible;
  }

  .team_card_toggle,
  .team_card_image,
  .team_card_content {
    height: auto;
  }

  .team_card_toggle,
  .team_card_image {
    height: 38rem;
  }

  .team_card_image_bolawa,
  .team_card_image_khalil {
    object-position: center 32%;
  }

  .team_card.is_open .team_card_image_bolawa,
  .team_card.is_open .team_card_image_khalil {
    object-position: center 24%;
  }
}

/*******************************/
/* BELOW 704px (Smaller Tablets) */
/*******************************/

@media (max-width: 44em) {
  .team_photo {
    border-radius: 1.8rem;
  }

  .header {
    height: 9.2rem;
    padding: 0 2.4rem;
    z-index: 50;
  }

  .logo {
    height: 7.2rem;
  }

  .event_intro {
    padding: 2.4rem 2rem;
  }

  .event_meta {
    font-size: 1.3rem;
    letter-spacing: 0.12rem;
  }

  .section_dinner .events_description,
  .section_padel .events_description,
  .section_members_corner .events_description {
    font-size: 1.8rem;
  }

  .slideshow_hint {
    bottom: 1.2rem;
    width: min(calc(100% - 2.4rem), 28rem);
    padding: 0.8rem 1.2rem;
    font-size: 1.2rem;
  }

  .slideshow_image {
    height: clamp(24rem, 64vw, 40rem);
  }

  .slideshow_container {
    aspect-ratio: 4 / 3;
    min-height: clamp(24rem, 64vw, 40rem);
  }

  .team_card_content {
    padding: 2.4rem 2rem;
  }

  .member_position {
    gap: 1.4rem;
    align-items: center;
  }

  .value_card_toggle {
    padding: 2.4rem 2rem;
  }

  .value_card_detail {
    padding: 0 2rem 2.4rem;
  }

  /* We are now displaying the mobile navigation button */

  .btn_mobile_nav {
    display: block;
    z-index: 9999;
  }

  /* We are hiding the navigation to the right of the page and will bring it in when the mobile nav is clicked */

  .main_nav {
    background-color: rgba(255, 255, 255, 0.929);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);
    z-index: 40;

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

    /* ALLOWS NO TRANSITIONS AT ALL
    display: none; */

    /* Hide the element visually */
    opacity: 0;

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

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

  .main_nav_list {
    flex-direction: column;
    gap: 4.8rem;
  }

  /* WHEN WE CLICK ON THE MENU, NAV_OPEN CLASS WILL BE INSERTED INTO THE HEADER ELEMENT */
  .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_link:link,
  .main_nav_link:visited {
    font-size: 3rem;
  }

  /* Need to do the toggle menu here */
}

@media (max-width: 44em) {
  .btn_back_top {
    bottom: 2rem;
    right: 2rem;
    width: 4rem;
    height: 4rem;
    font-size: 2.2rem;
  }
}

@media (max-width: 34em) {
  .hero {
    padding: 0 2.4rem;
    gap: 3.2rem;
  }

  .hero_image {
    width: min(100%, 36rem);
  }

  .event_card {
    max-width: 100%;
  }

  .slideshow_image {
    height: clamp(22rem, 72vw, 32rem);
  }

  .slideshow_container {
    aspect-ratio: 1 / 1;
    min-height: clamp(22rem, 72vw, 32rem);
  }

  .events_page_title {
    font-size: 4.4rem;
  }

  .section_dinner .heading_secondary,
  .section_padel .heading_secondary,
  .section_members_corner .heading_secondary {
    font-size: 3.4rem;
  }

  .team_card_toggle,
  .team_card_image {
    height: 34rem;
  }

  .team_card_image_bolawa,
  .team_card_image_khalil {
    object-position: center 26%;
  }

  .team_card.is_open .team_card_image {
    height: clamp(30rem, 86vw, 38rem);
  }

  .team_card.is_open .team_card_image_bolawa,
  .team_card.is_open .team_card_image_khalil {
    object-position: center 40%;
  }

  .member_position {
    align-items: center;
  }
}