/* =========================================================
   SIX NINE — ABOUT RESPONSIVE
   File: assets/css/responsive/about-responsive.css
   ========================================================= */


/* =========================================================
   LARGE LAPTOP
   ========================================================= */

@media (max-width: 1280px) {
  /* =======================================================
     HERO
     ======================================================= */

  .about-hero__content {
    padding:
      160px
      0
      58px;
  }

  .about-hero__title {
    font-size:
      clamp(
        5.4rem,
        11vw,
        10rem
      );
  }


  /* =======================================================
     MANIFESTO
     ======================================================= */

  .about-manifesto {
    padding:
      108px
      0
      180px;
  }

  .about-manifesto__grid {
    gap: 100px;
  }

  .about-manifesto__statement {
    font-size:
      clamp(
        3.8rem,
        7.5vw,
        7.2rem
      );
  }


  /* =======================================================
     RHYTHM
     ======================================================= */

  .about-rhythm-item {
    min-height: 138px;

    grid-template-columns:
      62px
      minmax(0, 1fr)
      minmax(170px, 0.34fr)
      50px;
  }


  /* =======================================================
     DESTINATION
     ======================================================= */

  .about-destination__main {
    min-height: 760px;
  }

  .about-destination__secondary {
    min-height: 340px;
  }


  /* =======================================================
     PHILOSOPHY
     ======================================================= */

  .about-philosophy__grid {
    gap: 110px;
  }


  /* =======================================================
     EXPERIENCE CARDS
     ======================================================= */

  .about-experience-card {
    min-height: 330px;
  }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1024px) {
  /* =======================================================
     HERO
     ======================================================= */

  .about-hero {
    min-height: 92svh;
  }

  .about-hero__content {
    padding:
      145px
      0
      54px;
  }

  .about-hero__title {
    font-size:
      clamp(
        4.8rem,
        10vw,
        7.8rem
      );
  }

  .about-hero__bottom {
    gap: 40px;
  }


  /* =======================================================
     MANIFESTO
     ======================================================= */

  .about-manifesto {
    padding:
      96px
      0
      145px;
  }

  .about-manifesto__grid {
    grid-template-columns:
      0.22fr
      1.78fr;

    gap: 62px;
  }

  .about-manifesto__content {
    gap: 64px;
  }


  /* =======================================================
     RHYTHM
     ======================================================= */

  .about-rhythm-item {
    grid-template-columns:
      52px
      minmax(0, 1fr)
      minmax(160px, 0.38fr)
      46px;

    gap: 18px;

    min-height: 124px;
  }

  .about-rhythm-item strong {
    font-size:
      clamp(
        3rem,
        6.6vw,
        5.4rem
      );
  }


  /* =======================================================
     DESTINATION
     ======================================================= */

  .about-destination {
    padding:
      92px
      0
      140px;
  }

  .about-destination__grid {
    grid-template-columns:
      1fr
      0.9fr;
  }

  .about-destination__main {
    min-height: 660px;
  }

  .about-destination__secondary {
    min-height: 300px;
  }


  /* =======================================================
     PHILOSOPHY
     ======================================================= */

  .about-philosophy {
    padding:
      92px
      0
      140px;
  }

  .about-philosophy__grid {
    grid-template-columns:
      0.9fr
      1.1fr;

    gap: 72px;
  }

  .about-principle {
    min-height: 165px;
  }


  /* =======================================================
     PHOTO BREAK
     ======================================================= */

  .about-photo-break {
    min-height: 74svh;
  }


  /* =======================================================
     EXPERIENCES
     ======================================================= */

  .about-experiences {
    padding:
      92px
      0
      140px;
  }

  .about-experience-card {
    min-height: 310px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .about-page main {
    overflow: hidden;
  }


  /* =======================================================
     HERO
     ======================================================= */

  .about-hero {
    min-height: 100svh;
  }

  .about-hero__media img {
    inset:
      -3%
      0;

    height: 106%;
  }

  .about-hero__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(12, 12, 13, 0.14) 0%,
        rgba(12, 12, 13, 0.22) 34%,
        rgba(12, 12, 13, 0.64) 72%,
        rgba(12, 12, 13, 0.95) 100%
      );
  }

  .about-hero__content {
    min-height: 100svh;

    align-content: end;

    gap: 22px;

    padding:
      calc(
        104px +
        env(safe-area-inset-top)
      )
      0
      36px;
  }

  .about-hero__top {
    gap: 14px;
  }

  .about-hero__location {
    font-size: 0.54rem;
  }

  .about-hero__title {
    font-size:
      clamp(
        4rem,
        19vw,
        6rem
      );

    line-height: 0.81;
  }

  .about-hero__bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 20px;
  }

  .about-hero__bottom p {
    max-width: 320px;

    font-size:
      clamp(
        1.45rem,
        7.5vw,
        2.1rem
      );
  }

  .about-hero__bottom > span {
    max-width: 100%;

    font-size: 0.56rem;

    text-align: left;
  }


  /* =======================================================
     MANIFESTO
     ======================================================= */

  .about-manifesto {
    padding:
      78px
      0
      100px;
  }

  .about-manifesto__grid {
    grid-template-columns: 1fr;

    gap: 34px;
  }

  .about-manifesto__content {
    gap: 42px;
  }

  .about-manifesto__statement {
    font-size:
      clamp(
        3rem,
        13vw,
        4.8rem
      );

    line-height: 0.9;
  }

  .about-manifesto__copy {
    grid-template-columns: 1fr;

    gap: 24px;

    max-width: 100%;
  }


  /* =======================================================
     RHYTHM
     ======================================================= */

  .about-rhythm-item {
    grid-template-columns:
      34px
      minmax(0, 1fr)
      38px;

    grid-template-areas:
      "number title arrow"
      ". caption arrow";

    gap:
      8px
      14px;

    min-height: 118px;

    padding:
      20px
      0;
  }

  .about-rhythm-item__number {
    grid-area: number;
  }

  .about-rhythm-item strong {
    grid-area: title;

    font-size:
      clamp(
        2.8rem,
        13vw,
        4.4rem
      );
  }

  .about-rhythm-item__caption {
    grid-area: caption;

    font-size: 0.6rem;
  }

  .about-rhythm-item__arrow {
    grid-area: arrow;

    align-self: center;

    width: 38px;
    height: 38px;
  }

  .about-rhythm-item__arrow svg {
    width: 16px;
    height: 16px;
  }


  /* =======================================================
     DESTINATION
     ======================================================= */

  .about-destination {
    padding:
      78px
      0
      98px;
  }

  .about-destination__grid {
    grid-template-columns: 1fr;

    grid-template-rows: auto;

    gap: 7px;
  }

  .about-destination__main {
    grid-row: auto;

    min-height: 480px;
  }

  .about-destination__content {
    padding:
      42px
      0;
  }

  .about-destination__secondary {
    min-height: 340px;
  }


  /* =======================================================
     PHILOSOPHY
     ======================================================= */

  .about-philosophy {
    padding:
      78px
      0
      98px;
  }

  .about-philosophy__grid {
    grid-template-columns: 1fr;

    gap: 44px;
  }

  .about-philosophy__title {
    font-size:
      clamp(
        3rem,
        13vw,
        4.8rem
      );
  }

  .about-principle {
    grid-template-columns:
      32px
      minmax(0, 1fr);

    gap: 14px;

    min-height: 150px;

    padding:
      22px
      0;
  }

  .about-principle strong {
    font-size:
      clamp(
        1.9rem,
        8vw,
        2.6rem
      );
  }


  /* =======================================================
     PHOTO BREAK
     ======================================================= */

  .about-photo-break {
    min-height: 64svh;
  }

  .about-photo-break > img {
    inset:
      -2%
      0;

    height: 104%;
  }

  .about-photo-break__content {
    padding-bottom: 34px;
  }

  .about-photo-break blockquote {
    font-size:
      clamp(
        3rem,
        13vw,
        4.8rem
      );

    line-height: 0.9;
  }


  /* =======================================================
     EXPERIENCES
     ======================================================= */

  .about-experiences {
    padding:
      78px
      0
      98px;
  }

  .about-experiences__header {
    margin-bottom: 42px;
  }

  .about-experiences__grid {
    grid-template-columns: 1fr;
  }

  .about-experience-card {
    min-height: 270px;

    padding: 22px;
  }

  .about-experience-card__number {
    top: 20px;
    left: 22px;
  }

  .about-experience-card strong {
    font-size:
      clamp(
        2.4rem,
        11vw,
        3.6rem
      );
  }


  /* =======================================================
     FINAL
     ======================================================= */

  .about-final {
    padding:
      100px
      0;
  }

  .about-final__inner {
    gap: 24px;
  }

  .about-final__actions {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;

    gap: 8px;
  }

  .about-final__actions
  .btn {
    width: 100%;
  }


  /* =======================================================
     MOBILE CTA
     ======================================================= */

  .about-mobile-cta {
    display: block;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  /* =======================================================
     HERO
     ======================================================= */

  .about-hero__content {
    padding-top:
      calc(
        96px +
        env(safe-area-inset-top)
      );

    padding-bottom: 30px;
  }

  .about-hero__title {
    font-size:
      clamp(
        3.7rem,
        19vw,
        5.1rem
      );
  }

  .about-hero__bottom p {
    font-size:
      clamp(
        1.35rem,
        7vw,
        1.9rem
      );
  }


  /* =======================================================
     MANIFESTO
     ======================================================= */

  .about-manifesto {
    padding:
      68px
      0
      86px;
  }

  .about-manifesto__statement {
    font-size:
      clamp(
        2.7rem,
        13vw,
        4rem
      );
  }


  /* =======================================================
     RHYTHM
     ======================================================= */

  .about-rhythm-item {
    grid-template-columns:
      28px
      minmax(0, 1fr)
      34px;

    min-height: 108px;
  }

  .about-rhythm-item strong {
    font-size:
      clamp(
        2.5rem,
        13vw,
        3.8rem
      );
  }

  .about-rhythm-item__caption {
    font-size: 0.56rem;
  }

  .about-rhythm-item__arrow {
    width: 34px;
    height: 34px;
  }


  /* =======================================================
     DESTINATION
     ======================================================= */

  .about-destination {
    padding:
      68px
      0
      86px;
  }

  .about-destination__main {
    min-height: 400px;
  }

  .about-destination__content {
    padding:
      34px
      0;
  }

  .about-destination__secondary {
    min-height: 290px;
  }


  /* =======================================================
     PHILOSOPHY
     ======================================================= */

  .about-philosophy {
    padding:
      68px
      0
      86px;
  }

  .about-philosophy__title {
    font-size:
      clamp(
        2.7rem,
        13vw,
        4rem
      );
  }

  .about-principle {
    min-height: 140px;
  }

  .about-principle strong {
    font-size:
      clamp(
        1.7rem,
        8vw,
        2.2rem
      );
  }


  /* =======================================================
     PHOTO BREAK
     ======================================================= */

  .about-photo-break {
    min-height: 58svh;
  }

  .about-photo-break blockquote {
    font-size:
      clamp(
        2.7rem,
        13vw,
        4rem
      );
  }


  /* =======================================================
     EXPERIENCES
     ======================================================= */

  .about-experiences {
    padding:
      68px
      0
      86px;
  }

  .about-experience-card {
    min-height: 240px;

    padding: 18px;
  }

  .about-experience-card__number {
    top: 17px;
    left: 18px;
  }

  .about-experience-card strong {
    font-size:
      clamp(
        2.15rem,
        11vw,
        3rem
      );
  }

  .about-experience-card p {
    font-size: 0.72rem;
  }


  /* =======================================================
     FINAL
     ======================================================= */

  .about-final {
    padding:
      88px
      0;
  }


  /* =======================================================
     MOBILE CTA
     ======================================================= */

  .about-mobile-cta {
    padding:
      8px
      10px
      calc(
        8px +
        env(safe-area-inset-bottom)
      );
  }

  .about-mobile-cta
  .btn {
    min-height: 44px;

    font-size: 0.6rem;
  }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {
  .about-hero__title {
    font-size: 3.4rem;
  }

  .about-manifesto__statement {
    font-size: 2.55rem;
  }

  .about-rhythm-item strong {
    font-size: 2.35rem;
  }

  .about-destination__main {
    min-height: 360px;
  }

  .about-destination__secondary {
    min-height: 260px;
  }

  .about-philosophy__title {
    font-size: 2.55rem;
  }

  .about-photo-break blockquote {
    font-size: 2.55rem;
  }

  .about-experience-card {
    min-height: 220px;
  }
}


/* =========================================================
   SHORT MOBILE VIEWPORT
   ========================================================= */

@media (
  max-width: 768px
) and (
  max-height: 700px
) {
  .about-hero__content {
    padding-top: 90px;
  }

  .about-hero__title {
    font-size:
      clamp(
        3.3rem,
        14vw,
        4.5rem
      );
  }

  .about-hero__bottom {
    gap: 16px;
  }

  .about-hero__bottom p {
    font-size: 1.4rem;
  }
}


/* =========================================================
   LANDSCAPE MOBILE
   ========================================================= */

@media (
  max-width: 900px
) and (
  orientation: landscape
) {
  /* =======================================================
     HERO
     ======================================================= */

  .about-hero {
    min-height: 100svh;
  }

  .about-hero__content {
    min-height: 100svh;

    padding:
      90px
      0
      30px;
  }

  .about-hero__title {
    font-size:
      clamp(
        3.8rem,
        9vw,
        5.4rem
      );
  }

  .about-hero__bottom {
    flex-direction: row;

    align-items: flex-end;
  }

  .about-hero__bottom > span {
    text-align: right;
  }


  /* =======================================================
     MANIFESTO
     ======================================================= */

  .about-manifesto__grid {
    grid-template-columns:
      0.22fr
      1.78fr;
  }

  .about-manifesto__copy {
    grid-template-columns:
      1fr
      0.8fr;
  }


  /* =======================================================
     RHYTHM
     ======================================================= */

  .about-rhythm-item {
    grid-template-columns:
      46px
      minmax(0, 1fr)
      minmax(150px, 0.36fr)
      40px;

    grid-template-areas: none;

    min-height: 104px;
  }

  .about-rhythm-item__number,
  .about-rhythm-item strong,
  .about-rhythm-item__caption,
  .about-rhythm-item__arrow {
    grid-area: auto;
  }

  .about-rhythm-item strong {
    font-size:
      clamp(
        2.8rem,
        7vw,
        4.5rem
      );
  }


  /* =======================================================
     DESTINATION
     ======================================================= */

  .about-destination__grid {
    grid-template-columns:
      1fr
      0.9fr;
  }

  .about-destination__main {
    grid-row:
      1
      / 3;

    min-height: 560px;
  }

  .about-destination__secondary {
    min-height: 240px;
  }


  /* =======================================================
     PHILOSOPHY
     ======================================================= */

  .about-philosophy__grid {
    grid-template-columns:
      0.9fr
      1.1fr;
  }


  /* =======================================================
     EXPERIENCES
     ======================================================= */

  .about-experiences__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  /* =======================================================
     FINAL
     ======================================================= */

  .about-final__actions {
    grid-template-columns:
      auto
      auto;

    width: auto;
  }
}


/* =========================================================
   TOUCH
   ========================================================= */

@media (hover: none) {
  .about-rhythm-item:hover {
    padding-left: 0;
    padding-right: 0;

    background:
      transparent;
  }

  .about-rhythm-item:hover::before {
    transform:
      scaleY(0);
  }

  .about-rhythm-item:hover
  .about-rhythm-item__arrow {
    background:
      transparent;

    color:
      var(--color-white);

    transform: none;
  }

  .about-destination__secondary img {
    transform:
      none !important;
  }

  .about-experience-card:hover {
    background:
      var(--color-white);

    color:
      var(--color-black);
  }

  .about-experience-card:hover::after {
    transform:
      scale(0.8);
  }

  .about-experience-card:hover p {
    color:
      var(--text-secondary);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  .about-hero__media img,
  .about-rhythm-item,
  .about-rhythm-item::before,
  .about-rhythm-item__arrow,
  .about-destination__main img,
  .about-destination__secondary img,
  .about-photo-break > img,
  .about-experience-card,
  .about-experience-card::after {
    transform:
      none !important;

    transition:
      none !important;
  }
}