/* =========================================================
   WHITE BEARD COFFEE & ROASTERY
   Responsive: Contact
   File: /assets/css/responsive/contact-responsive.css
   ========================================================= */


/* ---------------------------------------------------------
   1. SMALL DESKTOP
   <= 1279px
   --------------------------------------------------------- */

@media (max-width: 1279px) {
  .contact-hero__grid {
    gap: clamp(3rem, 6vw, 6rem);
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(17rem, 0.45fr);
  }

  .contact-directory__layout {
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(21rem, 0.75fr);
  }

  .contact-card--whatsapp {
    min-height: 39rem;
  }

  .contact-location__grid {
    gap: clamp(3rem, 6vw, 6rem);
    grid-template-columns:
      minmax(20rem, 0.65fr)
      minmax(26rem, 1fr);
  }
}


/* ---------------------------------------------------------
   2. TABLET LANDSCAPE
   <= 1023px
   --------------------------------------------------------- */

@media (max-width: 1023px) {
  .contact-section {
    padding-block: clamp(5rem, 9vw, 7rem);
  }

  .contact-display {
    font-size: clamp(4.5rem, 11vw, 7.5rem);
  }

  .contact-heading {
    font-size: clamp(3rem, 7vw, 5rem);
  }

  /* Hero */

  .contact-hero {
    min-height: auto;
    padding:
      clamp(9rem, 15vw, 11rem)
      0
      clamp(5rem, 8vw, 7rem);
  }

  .contact-hero__grid {
    align-items: start;
    gap: 3.5rem;
    grid-template-columns: 1fr;
  }

  .contact-hero__content {
    max-width: 55rem;
  }

  .contact-hero__title {
    max-width: 8ch;
  }

  .contact-hero__aside {
    display: grid;
    max-width: 52rem;
    align-items: end;
    gap: 2rem;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(15rem, 0.55fr);
  }

  .contact-hero__index {
    margin-top: 0;
  }

  /* Directory */

  .contact-directory__header {
    align-items: start;
    gap: 2rem;
    grid-template-columns: 1fr;
  }

  .contact-directory__header .contact-copy {
    max-width: 38rem;
  }

  .contact-directory__layout {
    grid-template-columns: 1fr;
  }

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

  .contact-card--whatsapp {
    min-height: 34rem;
  }

  .contact-card--store {
    min-height: 21rem;
  }

  /* Social */

  .contact-social__header {
    align-items: start;
    gap: 2rem;
    grid-template-columns: 1fr;
  }

  .contact-social__header .contact-copy {
    max-width: 38rem;
  }

  .contact-social__link {
    min-height: 9rem;
  }

  /* Location */

  .contact-location__grid {
    align-items: start;
    gap: 3.5rem;
    grid-template-columns: 1fr;
  }

  .contact-location__intro {
    max-width: 47rem;
  }

  .contact-location__details {
    max-width: 52rem;
  }

  .contact-location__address {
    max-width: 18ch;
  }
}


/* ---------------------------------------------------------
   3. TABLET PORTRAIT & MOBILE
   <= 767px
   --------------------------------------------------------- */

@media (max-width: 767px) {
  .contact-section {
    padding-block: 4.75rem;
  }

  .contact-eyebrow {
    margin-bottom: 1rem;
    font-size: 0.61rem;
  }

  .contact-eyebrow::before {
    width: 1.75rem;
    flex-basis: 1.75rem;
  }

  .contact-display {
    font-size: clamp(3.75rem, 16vw, 6.5rem);
    line-height: 0.9;
  }

  .contact-heading {
    font-size: clamp(2.7rem, 11vw, 4.5rem);
    line-height: 0.97;
  }

  .contact-copy {
    font-size: 0.94rem;
    line-height: 1.7;
  }

  /* Hero */

  .contact-hero {
    min-height: min(47rem, 100svh);
    align-items: center;
    padding:
      clamp(8rem, 24vw, 10rem)
      0
      4.5rem;
    text-align: center;
  }

  .contact-hero::before {
    top: -14rem;
    right: -18rem;
  }

  .contact-hero::after {
    right: -17rem;
    bottom: -19rem;
  }

  .contact-hero__grid {
    justify-items: center;
    gap: 2.75rem;
  }

  .contact-hero__content,
  .contact-hero__aside {
    width: 100%;
    max-width: 36rem;
  }

  .contact-hero__eyebrow {
    justify-content: center;
  }

  .contact-hero__title {
    max-width: 8.5ch;
    margin-inline: auto;
  }

  .contact-hero__aside {
    display: block;
    padding-bottom: 0;
  }

  .contact-hero__copy {
    max-width: 32rem;
    margin-inline: auto;
    font-size: 0.97rem;
    line-height: 1.7;
  }

  .contact-hero__index {
    width: fit-content;
    justify-content: center;
    margin: 2rem auto 0;
  }

  /* Directory header */

  .contact-directory__header {
    margin-bottom: 3rem;
    text-align: center;
  }

  .contact-directory__header .contact-eyebrow {
    justify-content: center;
  }

  .contact-directory__header .contact-heading {
    max-width: 11ch;
    margin-inline: auto;
  }

  .contact-directory__header .contact-copy {
    max-width: 34rem;
    margin-inline: auto;
  }

  /* Directory cards */

  .contact-directory__layout {
    gap: 0.85rem;
  }

  .contact-directory__stores {
    gap: 0.85rem;
    grid-template-columns: 1fr;
  }

  .contact-card {
    border-radius: 1.5rem;
  }

  .contact-card--whatsapp {
    min-height: 31rem;
    padding: 2rem;
    text-align: center;
  }

  .contact-card--whatsapp::before {
    top: -13rem;
    right: -13rem;
  }

  .contact-card--whatsapp::after {
    right: -10rem;
    bottom: -21rem;
  }

  .contact-card--whatsapp .contact-card__top {
    width: 100%;
  }

  .contact-card--whatsapp .contact-card__title {
    max-width: 10ch;
    margin-inline: auto;
    font-size: clamp(2.85rem, 11vw, 4.75rem);
  }

  .contact-card--whatsapp .contact-card__description {
    margin-inline: auto;
  }

  .contact-card--whatsapp .contact-card__footer {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .contact-card--whatsapp .contact-card__note {
    max-width: 26rem;
    text-align: center;
  }

  .contact-card--store {
    min-height: 18rem;
    padding: 1.75rem;
  }

  .contact-card--store .contact-card__title {
    margin-top: 2rem;
    font-size: 2.35rem;
  }

  .contact-card--store .contact-card__footer {
    margin-top: 2rem;
  }

  /* Social */

  .contact-social__header {
    margin-bottom: 3rem;
    text-align: center;
  }

  .contact-social__header .contact-eyebrow {
    justify-content: center;
  }

  .contact-social__header .contact-heading {
    max-width: 11ch;
    margin-inline: auto;
  }

  .contact-social__header .contact-copy {
    max-width: 34rem;
    margin-inline: auto;
  }

  .contact-social__link {
    min-height: 8.5rem;
    gap: 1rem;
    grid-template-columns:
      1.5rem
      minmax(0, 1fr)
      3rem;
  }

  .contact-social__platform {
    font-size: clamp(2.25rem, 9vw, 3.75rem);
  }

  .contact-social__handle {
    font-size: 0.7rem;
  }

  .contact-social__arrow {
    width: 3rem;
    height: 3rem;
  }

  /* Location */

  .contact-location {
    text-align: center;
  }

  .contact-location::before {
    top: -18rem;
    left: -22rem;
  }

  .contact-location::after {
    right: -25rem;
    bottom: -25rem;
  }

  .contact-location__grid {
    gap: 3rem;
  }

  .contact-location__intro,
  .contact-location__details {
    max-width: 37rem;
    margin-inline: auto;
  }

  .contact-location__intro .contact-eyebrow {
    justify-content: center;
  }

  .contact-location__intro .contact-heading {
    max-width: 10ch;
    margin-inline: auto;
  }

  .contact-location__address {
    max-width: 20ch;
    margin-inline: auto;
    font-size: clamp(2rem, 8vw, 3.5rem);
  }

  .contact-location__footer {
    flex-direction: column;
    align-items: center;
  }

  .contact-location__note {
    text-align: center;
  }

  /* Signoff */

  .contact-signoff {
    padding-block: 4rem;
  }

  .contact-signoff__inner {
    flex-direction: column;
    text-align: center;
  }

  .contact-signoff__motto {
    font-size: clamp(2.2rem, 9vw, 3.75rem);
  }

  .contact-signoff__copy {
    max-width: 28rem;
    text-align: center;
  }
}


/* ---------------------------------------------------------
   4. SMALL MOBILE
   <= 479px
   --------------------------------------------------------- */

@media (max-width: 479px) {
  .contact-section {
    padding-block: 4rem;
  }

  .contact-display {
    font-size: clamp(3.3rem, 17vw, 4.75rem);
  }

  .contact-heading {
    font-size: clamp(2.55rem, 12vw, 3.75rem);
  }

  /* Hero */

  .contact-hero {
    min-height: min(44rem, 100svh);
    padding:
      7.5rem
      0
      3.75rem;
  }

  .contact-hero__grid {
    gap: 2.25rem;
  }

  .contact-hero__copy {
    font-size: 0.9rem;
  }

  .contact-hero__index {
    display: grid;
    gap: 0.45rem;
  }

  /* Cards */

  .contact-card {
    padding: 1.4rem;
    border-radius: 1.2rem;
  }

  .contact-card__top {
    gap: 0.75rem;
  }

  .contact-card__label {
    font-size: 0.58rem;
  }

  .contact-card__number {
    font-size: 0.75rem;
  }

  .contact-card--whatsapp {
    min-height: 29rem;
    padding: 1.5rem;
  }

  .contact-card--whatsapp .contact-card__title {
    margin-top: 2.5rem;
    font-size: clamp(2.65rem, 13vw, 3.75rem);
  }

  .contact-card__value {
    font-size: 0.9rem;
  }

  .contact-card__description {
    font-size: 0.8rem;
  }

  .contact-card__footer {
    margin-top: 2.5rem;
  }

  .contact-card--whatsapp .wb-button {
    width: 100%;
    justify-content: center;
  }

  .contact-card--store {
    min-height: 16rem;
  }

  .contact-card--store .contact-card__title {
    font-size: 2rem;
  }

  .contact-card--store .contact-card__footer {
    align-items: center;
  }

  .contact-link {
    gap: 0.7rem;
    font-size: 0.66rem;
  }

  .contact-link__icon {
    width: 2.75rem;
    height: 2.75rem;
    flex-basis: 2.75rem;
  }

  /* Social */

  .contact-social__link {
    min-height: 7.5rem;
    gap: 0.7rem;
    grid-template-columns:
      1.25rem
      minmax(0, 1fr)
      2.65rem;
  }

  .contact-social__index {
    width: 1.25rem;
    font-size: 0.58rem;
  }

  .contact-social__platform {
    margin-bottom: 0.35rem;
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .contact-social__handle {
    overflow-wrap: anywhere;
    font-size: 0.64rem;
  }

  .contact-social__arrow {
    width: 2.65rem;
    height: 2.65rem;
  }

  /* Location */

  .contact-location__grid {
    gap: 2.5rem;
  }

  .contact-location__address {
    font-size: clamp(1.85rem, 9vw, 2.75rem);
  }

  .contact-location__footer {
    margin-top: 2.5rem;
  }

  .contact-location__footer .wb-button {
    width: 100%;
    justify-content: center;
  }

  .contact-location__note {
    font-size: 0.72rem;
  }

  /* Signoff */

  .contact-signoff {
    padding-block: 3.5rem;
  }

  .contact-signoff__inner {
    gap: 1.5rem;
  }

  .contact-signoff__motto {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .contact-signoff__copy {
    font-size: 0.7rem;
  }
}


/* ---------------------------------------------------------
   5. SHORT LANDSCAPE DEVICES
   --------------------------------------------------------- */

@media (max-height: 600px) and (orientation: landscape) {
  .contact-hero {
    min-height: 38rem;
    padding-top: 7.5rem;
  }
}


/* ---------------------------------------------------------
   6. TOUCH DEVICES
   --------------------------------------------------------- */

@media (hover: none) {
  .contact-card--store:hover {
    color: var(--contact-ink);
    border-color: var(--contact-line);
    background: var(--contact-cream);
    transform: none;
  }

  .contact-card--store:hover .contact-card__label,
  .contact-card--store:hover .contact-card__number,
  .contact-card--store:hover .contact-card__value {
    color: inherit;
  }

  .contact-card--store:hover .contact-link__icon {
    color: inherit;
    border-color: currentColor;
    background: transparent;
  }

  .contact-social__link:hover::before {
    transform: scaleY(0);
  }

  .contact-social__link:hover .contact-social__arrow,
  .contact-link:hover .contact-link__icon {
    transform: none;
  }
}

@media (max-width: 991px) {
  html.nav-open
    body[data-page="contact"]
    .site-logo__image--light,
  body[data-page="contact"].nav-open
    .site-logo__image--light {
    display: block;
  }

  html.nav-open
    body[data-page="contact"]
    .site-logo__image--dark,
  body[data-page="contact"].nav-open
    .site-logo__image--dark {
    display: none;
  }

  html.nav-open
    body[data-page="contact"]
    .site-nav__toggle-icon,
  body[data-page="contact"].nav-open
    .site-nav__toggle-icon {
    filter: brightness(0) invert(1);
  }
}