/* ==========================================================================
   WORK PAGE — MIRAVEL
   ========================================================================== */


/* ==========================================================================
   1. PAGE VARIABLES
   ========================================================================== */

.work-page {

  --work-bg: #F2ECEA;

  --work-ink: #292727;

  --work-muted: #777171;

  --work-accent: #A15D66;

  --work-footer-bg: #272525;

  --work-footer-ink: #F2ECEA;

  --work-gap: clamp(18px, 2.5vw, 36px);

  --work-inline: clamp(20px, 4.6vw, 72px);

  margin: 0;

  background: var(--work-bg);

  color: var(--work-ink);

  overflow-x: clip;

}


/* ==========================================================================
   2. SHARED PAGE CONTAINER
   ========================================================================== */

.work-page .work-container {

  width: 100%;

  max-width: 1600px;

  padding-inline: var(--work-inline);

  margin-inline: auto;

  box-sizing: border-box;

}


/* ==========================================================================
   3. HEADER
   ========================================================================== */

.work-page .work-header {

  position: relative;

  inset: auto;

  width: 100%;

  margin: 0;

  padding: 0;

  background: var(--work-bg);

  color: var(--work-accent);

  box-shadow: none;

  transform: none;

  opacity: 1;

  z-index: 100;

}


.work-page.header-hidden .work-header {

  transform: none;

  opacity: 1;

}


.work-page .work-header__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 32px;

  min-height: clamp(82px, 8vw, 112px);

}


/* ==========================================================================
   4. HEADER BRAND
   ========================================================================== */

.work-page .work-header .brand {

  display: inline-flex;

  align-items: center;

  flex: 0 0 auto;

  width: auto;

  text-decoration: none;

}


.work-page .work-header .brand__logo {

  display: block;

  width: clamp(140px, 16vw, 205px);

  max-width: 100%;

  height: auto;

  object-fit: contain;

}


/* ==========================================================================
   5. DESKTOP NAVIGATION
   ========================================================================== */

.work-page .work-header .nav {

  display: block;

  position: static;

  width: auto;

  height: auto;

  padding: 0;

  margin: 0;

  background: transparent;

}


.work-page .work-header .nav ul {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: clamp(24px, 3.3vw, 56px);

  padding: 0;

  margin: 0;

  list-style: none;

}


.work-page .work-header .nav li {

  padding: 0;

  margin: 0;

}


.work-page .work-header .nav a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: auto;

  padding: 8px 0;

  color: var(--work-accent);

  font-size: clamp(14px, 1vw, 17px);

  font-weight: 400;

  line-height: 1.4;

  text-decoration: none;

  transition: opacity .2s ease;

}


.work-page .work-header .nav a:hover {

  opacity: .65;

}


.work-page .work-header .nav a[aria-current="page"] {

  color: var(--work-accent);

}


/* Contact navigation item */

.work-page .work-header .nav .btn-ghost {

  padding: 10px 20px;
  border: 1px solid var(--work-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--work-accent);

}


/* Mobile toggle hidden on desktop */

.work-page .work-header .nav-toggle {

  display: none;

}


/* ==========================================================================
   6. MAIN PAGE
   ========================================================================== */

.work-page .work-main {

  display: block;
  width: 100%;
  padding-top: clamp(46px, 5vw, 80px);
  padding-bottom: clamp(90px, 11vw, 160px);

}


/* ==========================================================================
   7. WORK INTRODUCTION
   ========================================================================== */

.work-page .work-intro {

  margin-bottom: clamp(40px, 4vw, 64px);
  margin-top: clamp(40px, 4vw, 64px);

}



.work-page .work-title {
  margin: 0;

  font-family: "Cormorant", serif;
  font-style: normal;
  font-weight: 300;

  font-size: clamp(86px, 11vw, 170px);
  line-height: 0.85;
  letter-spacing: -0.025em;

  color: var(--work-ink);
}


.work-page .work-subtitle {

  margin: 0;
  font-size: clamp(20px, 2.1vw, 32px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--work-ink);

}


/* ==========================================================================
   8. PROJECT GRID
   ========================================================================== */

.work-page .work-grid {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: var(--work-gap);

  row-gap: clamp(42px, 4.5vw, 76px);

  align-items: start;

}


/* ==========================================================================
   9. PROJECT CARD
   ========================================================================== */

.work-page .work-card {

  display: flex;

  flex-direction: column;

  gap: 0;

  min-width: 0;

  margin: 0;

  padding: 0;

}


/* ==========================================================================
   10. PROJECT IMAGE
   ========================================================================== */

.work-page .work-card__image {

  position: relative;

  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  border-radius: 8px;

  background: #EEEAE8;

  text-decoration: none;

  isolation: isolate;

}


.work-page .work-card__image img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transform: scale(1);

  transition: transform .5s ease;

}


.work-page .work-card__image:hover img {

  transform: scale(1.035);

}


/* ==========================================================================
   11. PROJECT INFORMATION
   ========================================================================== */

.work-page .work-card__content {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  min-width: 0;

  padding-top: clamp(12px, 1.2vw, 18px);

}


.work-page .work-card__title {

  margin: 0;

  font-size: clamp(21px, 1.8vw, 28px);

  font-weight: 500;

  line-height: 1.25;

  letter-spacing: -.025em;

}


.work-page .work-card__title a {

  color: var(--work-ink);

  text-decoration: none;

}


.work-page .work-card__title a:hover {

  color: var(--work-accent);

}


.work-page .work-card__description {

  margin: 4px 0 0;

  color: var(--work-muted);

  font-size: clamp(13px, 1vw, 16px);

  line-height: 1.5;

}


/* ==========================================================================
   12. PROJECT TAGS
   ========================================================================== */

.work-page .work-card__tags {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 6px;

  padding: 0;

  margin: 10px 0 0;

  list-style: none;

}


.work-page .work-card__tags li {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 25px;

  padding: 4px 10px;

  border: 1px solid rgba(161, 93, 102, .6);

  border-radius: 999px;

  background: transparent;

  color: var(--work-accent);

  font-size: 11px;

  font-weight: 400;

  line-height: 1.2;

  white-space: nowrap;

}


/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.work-page .work-footer {

  width: 100%;

  background: var(--work-footer-bg);

  color: var(--work-footer-ink);

}


.work-page .work-footer__inner {

  padding-top: clamp(48px, 6vw, 90px);

  padding-bottom: clamp(34px, 4vw, 60px);

}


/* ==========================================================================
   14. FOOTER TOP
   ========================================================================== */

.work-page .work-footer__top {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 36px;

}


.work-page .work-footer__contact {

  min-width: 0;

}


.work-page .work-footer__eyebrow {

  margin: 0 0 10px;

  color: rgba(242, 236, 234, .65);

  font-size: clamp(16px, 1.5vw, 22px);

}


.work-page .work-footer__title {

  margin: 0;

  font-size: clamp(54px, 6vw, 100px);

  font-weight: 300;

  line-height: 1.05;

  letter-spacing: -.045em;

  color: var(--work-footer-ink);

}


.work-page .work-footer__title em {

  font-weight: 300;

  font-style: italic;

}


.work-page .work-footer__email {

  display: inline-block;

  margin-top: clamp(18px, 2vw, 30px);

  padding-bottom: 5px;

  border-bottom: 1px solid rgba(242, 236, 234, .3);

  color: rgba(242, 236, 234, .85);

  font-size: clamp(15px, 1.5vw, 22px);

  text-decoration: none;

  overflow-wrap: anywhere;

}


/* ==========================================================================
   15. SOCIAL LINKS
   ========================================================================== */

.work-page .work-footer__social {

  display: flex;

  align-items: center;

  gap: 14px;

  flex: 0 0 auto;

  padding-bottom: 5px;

}


.work-page .work-footer__social a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background: var(--work-footer-ink);

  color: var(--work-footer-bg);

  font-size: 14px;

  font-weight: 700;

  line-height: 1;

  text-decoration: none;

  transition:
    background-color .2s ease,
    transform .2s ease;

}


.work-page .work-footer__social a:hover {

  background: #D8BCC0;

  transform: translateY(-3px);

}


/* ==========================================================================
   16. FOOTER BOTTOM
   ========================================================================== */

.work-page .work-footer__bottom {

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: 30px;

  margin-top: clamp(52px, 6vw, 90px);

}


.work-page .work-footer__nav {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 28px;

}


.work-page .work-footer__nav a,
.work-page .work-footer__phone {

  color: rgba(242, 236, 234, .75);

  font-size: clamp(13px, 1vw, 16px);

  line-height: 1.4;

  text-decoration: none;

}


.work-page .work-footer__nav a:hover,
.work-page .work-footer__phone:hover {

  color: var(--work-footer-ink);

}


/* Footer logo */

.work-page .work-footer__brand {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: clamp(90px, 10vw, 145px);

}


.work-page .work-footer__brand img {

  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;

}


/* Phone aligned to the right */

.work-page .work-footer__phone {

  justify-self: end;

  white-space: nowrap;

}


/* ==========================================================================
   17. MEDIUM DESKTOP / TABLET
   ========================================================================== */

@media (max-width: 980px) {

  .work-page {

    --work-inline: clamp(22px, 4vw, 42px);

  }


  .work-page .work-header .nav ul {

    gap: 22px;

  }


  .work-page .work-header .brand__logo {

    width: 145px;

  }


  .work-page .work-grid {

    column-gap: 20px;

    row-gap: 44px;

  }


  .work-page .work-card__title {

    font-size: 22px;

  }

}


/* ==========================================================================
   18. MOBILE NAVIGATION
   ========================================================================== */

@media (max-width: 720px) {

  .work-page .work-header__inner {

    min-height: 84px;

    gap: 20px;

  }


  .work-page .work-header .brand__logo {

    width: clamp(135px, 34vw, 165px);

  }


  /* Show existing mobile menu button */

  .work-page .work-header .nav-toggle {

    display: inline-flex;

    position: relative;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width: 48px;

    height: 48px;

    padding: 0;

    border: 1px solid var(--work-accent);

    border-radius: 12px;

    background: transparent;

    color: var(--work-accent);

    cursor: pointer;

    z-index: 102;

  }


  /*
    The existing main.js toggles the
    "open" class on #primary-nav.
  */

  .work-page .work-header .nav {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    width: 100%;

    height: auto;

    margin: 0;

    padding: 20px var(--work-inline) 28px;

    background: var(--work-bg);

    box-sizing: border-box;

    box-shadow: 0 16px 28px rgba(35, 30, 30, .08);

    z-index: 101;

  }


  .work-page .work-header .nav.open {

    display: block;

  }


  .work-page .work-header .nav ul {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 10px;

  }


  .work-page .work-header .nav a {

    display: flex;

    justify-content: flex-start;

    width: 100%;

    padding: 12px 0;

    font-size: 18px;

  }


  .work-page .work-header .nav .btn-ghost {

    justify-content: center;

    width: max-content;

    margin-top: 8px;

    padding: 10px 22px;

  }

}


/* ==========================================================================
   19. MOBILE PROJECT GRID
   ========================================================================== */

@media (max-width: 600px) {

  .work-page {

    --work-inline: 20px;

  }


  .work-page .work-main {

    padding-top: 48px;

    padding-bottom: 90px;

  }


  .work-page .work-intro {

    margin-bottom: 40px;

  }


  .work-page .work-title {

    font-size: clamp(76px, 21vw, 112px);

    font-style: normal;

    line-height: .85;

  }


  .work-page .work-subtitle {

    margin-top: 0;

    font-size: clamp(18px, 4.6vw, 23px);

    line-height: 1.3;

  }


  .work-page .work-grid {

    grid-template-columns: minmax(0, 1fr);

    gap: 48px;

  }


  .work-page .work-card__image {

    aspect-ratio: 1 / 1;

    border-radius: 7px;

  }


  .work-page .work-card__content {

    padding-top: 14px;

  }


  .work-page .work-card__title {

    font-size: 23px;

  }


  .work-page .work-card__description {

    font-size: 14px;

  }


  .work-page .work-card__tags li {

    font-size: 11px;

  }

}


/* ==========================================================================
   20. MOBILE FOOTER
   ========================================================================== */

@media (max-width: 600px) {

  .work-page .work-footer__inner {

    padding-top: 56px;

    padding-bottom: 36px;

  }


  .work-page .work-footer__top {

    align-items: flex-start;

    flex-direction: column;

    gap: 36px;

  }


  .work-page .work-footer__title {

    font-size: clamp(48px, 11vw, 70px);

  }


  .work-page .work-footer__email {

    font-size: 16px;

  }


  .work-page .work-footer__bottom {

    grid-template-columns: 1fr;

    gap: 30px;

    margin-top: 58px;

  }


  .work-page .work-footer__nav {

    gap: 22px;

  }


  .work-page .work-footer__brand {

    justify-content: flex-start;

  }


  .work-page .work-footer__phone {

    justify-self: start;

  }

}


/* ==========================================================================
   21. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .work-page .work-card__image img,
  .work-page .work-footer__social a,
  .work-page .work-header .nav a {

    transition: none;

  }

}