/* =========================================================
   SIX NINE — COFFEE & DINING RESPONSIVE
   File: assets/css/responsive/coffee-dining-responsive.css
   ========================================================= */


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

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

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

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


  /* =======================================================
     INTRO
     ======================================================= */

  .dining-intro {
    padding:
      110px
      0
      180px;
  }

  .dining-intro__grid {
    gap: 100px;
  }

  .dining-intro__visual {
    min-height: 620px;
  }


  /* =======================================================
     SPACE
     ======================================================= */

  .dining-space {
    padding:
      100px
      0
      180px;
  }

  .dining-space__photo--large {
    min-height: 690px;
  }

  .dining-space__photo--portrait {
    min-height: 380px;
  }

  .dining-space__photo--small {
    min-height: 300px;
  }


  /* =======================================================
     MENU
     ======================================================= */

  .dining-menu {
    padding:
      105px
      0
      170px;
  }

  .dining-menu__content {
    gap: 120px;
  }

  .dining-menu-section__items {
    column-gap: 70px;
  }


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

  .dining-photo-break {
    min-height: 76svh;
  }


  /* =======================================================
     AFTER
     ======================================================= */

  .dining-after {
    padding:
      100px
      0
      160px;
  }


  /* =======================================================
     FOOTER
     ======================================================= */

  .site-footer__top {
    gap: 58px;
  }
}


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

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

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

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

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

  .dining-hero__footer {
    gap: 40px;
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .dining-intro {
    padding:
      100px
      0
      145px;
  }

  .dining-intro__grid {
    grid-template-columns:
      0.82fr
      1.18fr;

    gap: 62px;
  }

  .dining-intro__visual {
    min-height: 560px;
  }


  /* =======================================================
     SPACE
     ======================================================= */

  .dining-space {
    padding:
      90px
      0
      150px;
  }

  .dining-space__header {
    grid-template-columns:
      1fr
      0.5fr;

    gap: 56px;
  }

  .dining-space__gallery {
    grid-template-columns:
      1.3fr
      0.7fr;
  }

  .dining-space__photo--large {
    min-height: 610px;
  }

  .dining-space__photo--portrait {
    min-height: 330px;
  }

  .dining-space__photo--small {
    min-height: 270px;
  }


  /* =======================================================
     MENU
     ======================================================= */

  .dining-menu {
    padding:
      90px
      0
      150px;
  }

  .dining-menu__header {
    grid-template-columns:
      1fr
      0.48fr;

    gap: 56px;
  }

  .dining-menu-nav {
    margin-bottom: 64px;
  }

  .dining-menu-section__header {
    grid-template-columns:
      0.28fr
      1.72fr;

    gap: 46px;
  }

  .dining-menu-section__items {
    column-gap: 52px;
  }

  .dining-menu-item {
    min-height: 142px;
  }


  /* =======================================================
     AFTER
     ======================================================= */

  .dining-after-card {
    min-height: 300px;
  }


  /* =======================================================
     FOOTER
     ======================================================= */

  .site-footer__top {
    grid-template-columns: 1fr;

    gap: 56px;
  }

  .site-footer__nav {
    gap: 26px;
  }
}


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

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


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

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

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

    height: 106%;

    object-position: center;
  }

  .dining-hero__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(12, 12, 13, 0.12) 0%,
        rgba(12, 12, 13, 0.2) 34%,
        rgba(12, 12, 13, 0.6) 72%,
        rgba(12, 12, 13, 0.93) 100%
      );
  }

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

    align-content: end;

    gap: 20px;

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

  .dining-hero__title {
    font-size:
      clamp(
        4.2rem,
        20vw,
        6.4rem
      );

    line-height: 0.8;
  }

  .dining-hero__footer {
    align-items: flex-start;
    flex-direction: column;

    gap: 24px;

    margin-top: 2px;
  }

  .dining-hero__footer > p {
    font-size: 0.98rem;
  }

  .dining-hero__actions {
    display: grid;
    grid-template-columns: 1fr;

    width: 100%;

    gap: 8px;
  }

  .dining-hero__actions .btn {
    width: 100%;
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .dining-intro {
    padding:
      78px
      0
      100px;
  }

  .dining-intro__grid {
    grid-template-columns: 1fr;

    gap: 44px;
  }

  .dining-intro__copy {
    gap: 21px;
  }

  .dining-intro__copy > p {
    max-width: 100%;
  }

  .dining-intro__visual {
    min-height: 480px;
  }


  /* =======================================================
     SPACE
     ======================================================= */

  .dining-space {
    padding:
      76px
      0
      100px;
  }

  .dining-space__header {
    grid-template-columns: 1fr;

    gap: 26px;

    margin-bottom: 42px;
  }

  .dining-space__header > p {
    max-width: 100%;
  }

  .dining-space__gallery {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    grid-template-rows: auto;

    gap: 7px;
  }

  .dining-space__photo--large {
    grid-column:
      1
      / -1;

    grid-row: auto;

    min-height: 420px;
  }

  .dining-space__photo--portrait {
    min-height: 310px;
  }

  .dining-space__photo--small {
    min-height: 310px;
  }


  /* =======================================================
     MENU
     ======================================================= */

  .dining-menu {
    padding:
      78px
      0
      100px;
  }

  .dining-menu__header {
    grid-template-columns: 1fr;

    gap: 28px;

    margin-bottom: 42px;
  }

  .dining-menu__header-copy {
    max-width: 100%;
  }


  /* =======================================================
     MENU NAV
     ======================================================= */

  .dining-menu-nav {
    top:
      calc(
        var(--navbar-top) +
        var(--navbar-height) +
        8px
      );

    margin-bottom: 48px;
  }

  .dining-menu-nav__track {
    padding:
      7px
      0;
  }

  .dining-menu-nav__button {
    min-height: 38px;

    padding:
      0
      14px;

    font-size: 0.59rem;
  }


  /* =======================================================
     MENU CONTENT
     ======================================================= */

  .dining-menu__content {
    gap: 78px;
  }


  /* =======================================================
     MENU CATEGORY
     ======================================================= */

  .dining-menu-section {
    scroll-margin-top:
      calc(
        var(--navbar-height) +
        104px
      );
  }

  .dining-menu-section__header {
    grid-template-columns: 1fr;

    gap: 14px;

    padding-bottom: 22px;
  }

  .dining-menu-section__index {
    font-size: 0.57rem;
  }

  .dining-menu-section__heading {
    gap: 9px;
  }

  .dining-menu-section__title {
    font-size:
      clamp(
        2.4rem,
        12vw,
        3.5rem
      );
  }

  .dining-menu-section__description {
    max-width: 100%;

    font-size: 0.8rem;
  }


  /* =======================================================
     MENU ITEMS
     ======================================================= */

  .dining-menu-section__items {
    grid-template-columns: 1fr;

    column-gap: 0;
  }

  .dining-menu-item {
    min-height: 0;

    gap: 9px;

    padding:
      22px
      0;
  }

  .dining-menu-item__top {
    gap: 18px;
  }

  .dining-menu-item__name {
    font-size:
      clamp(
        1.4rem,
        6vw,
        1.75rem
      );
  }

  .dining-menu-item__price {
    font-size: 0.72rem;
  }

  .dining-menu-item__description {
    max-width: 100%;

    font-size: 0.74rem;
  }

  .dining-menu-item__variants {
    gap:
      5px
      12px;
  }

  .dining-menu-item__variant {
    font-size: 0.64rem;
  }


  /* =======================================================
     MENU STATES
     ======================================================= */

  .dining-menu-state {
    min-height: 240px;

    padding:
      48px
      18px;
  }

  .dining-menu-state--error {
    min-height: 300px;
  }


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

  .dining-photo-break {
    min-height: 66svh;
  }

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

    height: 104%;
  }

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

  .dining-photo-break__content > div {
    gap: 18px;
  }


  /* =======================================================
     AFTER
     ======================================================= */

  .dining-after {
    padding:
      78px
      0
      96px;
  }

  .dining-after__header {
    margin-bottom: 40px;
  }

  .dining-after__grid {
    grid-template-columns: 1fr;
  }

  .dining-after-card {
    grid-template-columns:
      32px
      minmax(0, 1fr)
      22px;

    gap: 14px;

    min-height: 230px;

    padding: 22px;
  }

  .dining-after-card__copy {
    gap: 10px;
  }

  .dining-after-card__copy strong {
    font-size:
      clamp(
        2rem,
        9vw,
        2.8rem
      );
  }

  .dining-after-card__copy p {
    max-width: 100%;
  }


  /* =======================================================
     RESERVATION
     ======================================================= */

  .dining-reservation {
    padding:
      100px
      0;
  }

  .dining-reservation__inner {
    gap: 24px;
  }

  .dining-reservation__actions {
    display: grid;
    grid-template-columns: 1fr;

    width: 100%;

    gap: 8px;
  }

  .dining-reservation__actions .btn {
    width: 100%;
  }


  /* =======================================================
     FOOTER
     ======================================================= */

  .site-footer {
    padding:
      56px
      0
      calc(
        92px +
        env(safe-area-inset-bottom)
      );
  }

  .site-footer__top {
    gap: 46px;

    padding-bottom: 48px;
  }

  .site-footer__wordmark {
    font-size:
      clamp(
        3.7rem,
        19vw,
        5.8rem
      );
  }

  .site-footer__nav {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      38px
      24px;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;

    gap: 7px;
  }


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

  .dining-mobile-cta {
    display: grid;
  }
}


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

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

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

    padding-bottom: 30px;
  }

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


  /* =======================================================
     INTRO
     ======================================================= */

  .dining-intro {
    padding:
      68px
      0
      86px;
  }

  .dining-intro__visual {
    min-height: 400px;
  }


  /* =======================================================
     SPACE
     ======================================================= */

  .dining-space {
    padding:
      68px
      0
      88px;
  }

  .dining-space__gallery {
    gap: 5px;
  }

  .dining-space__photo--large {
    min-height: 350px;
  }

  .dining-space__photo--portrait,
  .dining-space__photo--small {
    min-height: 240px;
  }


  /* =======================================================
     MENU
     ======================================================= */

  .dining-menu {
    padding:
      68px
      0
      88px;
  }

  .dining-menu-nav {
    margin-bottom: 40px;
  }

  .dining-menu-nav__button {
    min-height: 36px;

    padding:
      0
      12px;

    font-size: 0.56rem;
  }

  .dining-menu__content {
    gap: 66px;
  }

  .dining-menu-section__title {
    font-size:
      clamp(
        2.25rem,
        12vw,
        3rem
      );
  }

  .dining-menu-item {
    padding:
      19px
      0;
  }

  .dining-menu-item__top {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap: 12px;
  }

  .dining-menu-item__name {
    font-size:
      clamp(
        1.3rem,
        6.4vw,
        1.6rem
      );
  }

  .dining-menu-item__price {
    font-size: 0.68rem;
  }

  .dining-menu-item__description {
    font-size: 0.71rem;
  }


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

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


  /* =======================================================
     AFTER
     ======================================================= */

  .dining-after {
    padding:
      68px
      0
      84px;
  }

  .dining-after-card {
    min-height: 210px;

    padding: 19px;
  }


  /* =======================================================
     RESERVATION
     ======================================================= */

  .dining-reservation {
    padding:
      88px
      0;
  }


  /* =======================================================
     FOOTER
     ======================================================= */

  .site-footer__nav {
    grid-template-columns: 1fr;

    gap: 32px;
  }


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

  .dining-mobile-cta {
    grid-template-columns:
      0.78fr
      1.22fr;

    gap: 6px;

    padding:
      8px
      10px
      calc(
        8px +
        env(safe-area-inset-bottom)
      );
  }

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

    padding-inline: 12px;

    font-size: 0.6rem;
  }
}


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

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

  .dining-intro__visual {
    min-height: 360px;
  }

  .dining-space__photo--large {
    min-height: 320px;
  }

  .dining-space__photo--portrait,
  .dining-space__photo--small {
    min-height: 210px;
  }

  .dining-menu-item__name {
    font-size: 1.22rem;
  }

  .dining-menu-item__price {
    font-size: 0.64rem;
  }

  .dining-photo-break {
    min-height: 54svh;
  }

  .dining-after-card {
    grid-template-columns:
      28px
      minmax(0, 1fr)
      20px;

    padding: 17px;
  }
}


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

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

  .dining-hero__title {
    font-size:
      clamp(
        3.6rem,
        15vw,
        4.8rem
      );
  }

  .dining-hero__footer {
    gap: 18px;
  }
}


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

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

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

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

    padding:
      92px
      0
      30px;
  }

  .dining-hero__title {
    font-size:
      clamp(
        4rem,
        10vw,
        5.8rem
      );
  }

  .dining-hero__footer {
    flex-direction: row;

    align-items: flex-end;
  }

  .dining-hero__actions {
    grid-template-columns:
      auto
      auto;

    width: auto;
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .dining-intro__grid {
    grid-template-columns:
      0.8fr
      1.2fr;

    gap: 44px;
  }

  .dining-intro__visual {
    min-height: 430px;
  }


  /* =======================================================
     SPACE
     ======================================================= */

  .dining-space__gallery {
    grid-template-columns:
      1.35fr
      0.65fr;
  }

  .dining-space__photo--large {
    grid-column: auto;

    grid-row:
      1
      / 3;

    min-height: 520px;
  }

  .dining-space__photo--portrait {
    min-height: 280px;
  }

  .dining-space__photo--small {
    min-height: 230px;
  }


  /* =======================================================
     MENU
     ======================================================= */

  .dining-menu-section__items {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    column-gap: 42px;
  }

  .dining-menu-section__header {
    grid-template-columns:
      0.25fr
      1.75fr;
  }


  /* =======================================================
     AFTER
     ======================================================= */

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


  /* =======================================================
     RESERVATION
     ======================================================= */

  .dining-reservation__actions {
    grid-template-columns:
      auto
      auto;

    width: auto;
  }
}


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

@media (hover: none) {
  .dining-space__photo img {
    transform: none !important;
  }

  .dining-menu-item:hover {
    padding-left: 0;
  }

  .dining-after-card:hover {
    background:
      var(--color-white);

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

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

  .dining-after-card:hover
  .dining-after-card__copy p {
    color:
      var(--text-secondary);
  }

  .dining-after-card:hover > svg {
    transform: none;
  }
}


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

@media (
  prefers-reduced-motion: reduce
) {
  .dining-hero__media img,
  .dining-intro__visual img,
  .dining-space__photo img,
  .dining-photo-break > img,
  .dining-after-card,
  .dining-after-card::after,
  .dining-after-card > svg,
  .dining-menu-item {
    transform: none !important;

    transition: none !important;
  }

  .dining-menu-state__line::after {
    animation: none !important;

    left: 0;

    width: 100%;
  }
}