/* ==========================================================
   PROJECT XAMUCO
   File: responsive.css
   Version: 1.0.0
   Description: Responsive behavior across the site
========================================================== */

/* ======================================================
   TABLET
====================================================== */

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

  .container {
    width: min(100% - 3rem, var(--container-width));
  }

  /* --------------------------------------------------
     BOTTLE · CHAPTERS
  -------------------------------------------------- */

  .bottle__chapter--presence {
    gap: var(--space-3xl);

    padding-block: var(--space-5xl);
  }

  .bottle__chapter--presence .bottle__chapter-content {
    max-width: 32rem;
  }

  .bottle__chapter--craft {
    gap: var(--space-3xl);

    padding-block: var(--space-5xl);
  }

  .bottle__chapter--craft .bottle__chapter-content {
    max-width: 30rem;
  }

  /* --------------------------------------------------
     BOTTLE · CLOSING
  -------------------------------------------------- */

  .bottle__closing {
    max-width: 90%;

    padding-block: var(--space-5xl);
  }

  .bottle__closing-art {
    width: min(100%, 50rem);
  }
}

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

@media (max-width: 768px) {
  /* --------------------------------------------------
     GENERAL
  -------------------------------------------------- */

  .container {
    width: min(100% - 2rem, var(--container-width));
  }

  /* --------------------------------------------------
   HEADER
-------------------------------------------------- */

  .site-header {
    height: var(--header-height);
  }

  .header {
    position: relative;

    width: 100%;
  }

  /* --------------------------------------------------
   HEADER · LOGO
-------------------------------------------------- */

  .header__logo img {
    width: 8.5rem;
  }

  /* --------------------------------------------------
   MOBILE TOGGLE
-------------------------------------------------- */

  .header__toggle {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 44px;
    height: 44px;

    padding: 0;

    cursor: pointer;

    background: transparent;

    border: none;

    z-index: 3;
  }

  .header__toggle span {
    display: block;

    width: 24px;
    height: 1px;

    margin: 3px 0;

    background: var(--color-background);

    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
  }

  /* --------------------------------------------------
   MOBILE NAVIGATION
-------------------------------------------------- */

  .header__nav {
    position: absolute;

    top: var(--header-height);
    left: 0;

    width: 100%;

    padding: var(--space-3xl) var(--space-lg);

    background: rgba(71, 0, 0, 0.97);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-1rem);

    transition:
      opacity 0.35s ease,
      visibility 0.35s ease,
      transform 0.35s ease;
  }

  .header__menu {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: var(--space-xl);

    width: min(100%, 20rem);

    margin: 0 auto;

    padding: 0;

    list-style: none;
  }

  .header__link {
    display: inline-block;

    font-size: var(--fs-lg);

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

  /* --------------------------------------------------
   MOBILE MENU · LINKS
-------------------------------------------------- */

  .header__item {
    opacity: 0;

    transform: translateY(1rem);

    transition:
      opacity var(--transition-slow) var(--ease-editorial),
      transform var(--transition-slow) var(--ease-editorial);
  }

  .site-header.menu-open .header__item {
    opacity: 1;

    transform: translateY(0);
  }

  .site-header.menu-open .header__item:nth-child(1) {
    transition-delay: 0.08s;
  }

  .site-header.menu-open .header__item:nth-child(2) {
    transition-delay: 0.14s;
  }

  .site-header.menu-open .header__item:nth-child(3) {
    transition-delay: 0.2s;
  }

  .site-header.menu-open .header__item:nth-child(4) {
    transition-delay: 0.26s;
  }

  /* --------------------------------------------------
   MOBILE MENU · OPEN
-------------------------------------------------- */

  .site-header.menu-open .header__nav {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
  }

  /* --------------------------------------------------
   MOBILE MENU · ICON
-------------------------------------------------- */

  .site-header.menu-open .header__toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.menu-open .header__toggle span:nth-child(2) {
    opacity: 0;
  }

  .site-header.menu-open .header__toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* --------------------------------------------------
   HERO · MOBILE CONTENT
-------------------------------------------------- */

  .hero .eyebrow,
  .hero .lead {
    display: none;
  }

  /* --------------------------------------------------
   HERO
-------------------------------------------------- */

  .hero {
    min-height: 100svh;

    background-image: url("../assets/images/hero/hero-mobile.webp");

    background-position: center center;

    background-size: cover;
  }

  .hero__container {
    min-height: 100svh;

    grid-template-columns: 1fr;

    align-items: center;
  }

  /* --------------------------------------------------
   HERO · MOBILE CONTENT
-------------------------------------------------- */

  .hero__content {
    grid-column: 1;

    width: min(78%, 20rem);

    max-width: 20rem;

    justify-self: start;

    align-self: center;

    margin-left: var(--space-lg);

    text-align: left;

    transform: translateY(-18vh);
  }

  .hero__content > * {
    margin-left: 0;
  }

  .hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.3) 45%,
      rgba(0, 0, 0, 0.68) 100%
    );
  }

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

    line-height: 0.9;
  }

  .hero .lead {
    max-width: 28rem;

    margin-inline: auto;

    font-size: var(--fs-md);
  }

  .hero .btn {
    margin-inline: 0;
  }

  /* --------------------------------------------------
     BOTTLE · CHAPTERS
  -------------------------------------------------- */

  .bottle__chapter {
    display: flex;

    flex-direction: column;

    gap: var(--space-3xl);

    padding-block: var(--space-4xl);
  }

  /* --------------------------------------------------
     PRESENCE
  -------------------------------------------------- */

  .bottle__chapter--presence {
    display: flex;

    flex-direction: column;

    gap: var(--space-3xl);

    padding-block: var(--space-4xl);
  }

  .bottle__chapter--presence .bottle__chapter-content {
    max-width: 32rem;

    margin-inline: auto;

    text-align: center;
  }

  .bottle__chapter--presence .bottle__chapter-title {
    max-width: 30rem;

    margin-inline: auto;

    font-size: clamp(1.8rem, 7vw, 2.5rem);
  }

  .bottle__chapter--presence .bottle__chapter-text {
    max-width: 30rem;

    margin-inline: auto;
  }

  .bottle__chapter--presence .bottle__chapter-art {
    width: 100%;

    justify-self: auto;
  }

  /* --------------------------------------------------
     CRAFT
  -------------------------------------------------- */

  .bottle__chapter--craft {
    display: flex;

    flex-direction: column;

    gap: var(--space-3xl);

    padding-block: var(--space-4xl);
  }

  .bottle__chapter--craft .bottle__chapter-content {
    max-width: 32rem;

    margin-inline: auto;

    text-align: center;

    justify-self: auto;

    order: 1;
  }

  .bottle__chapter--craft .bottle__chapter-text {
    max-width: 30rem;

    margin-inline: auto;
  }

  .bottle__chapter--craft .bottle__chapter-art {
    width: 100%;

    order: 2;
  }

  /* --------------------------------------------------
     CHAPTER IMAGES
  -------------------------------------------------- */

  .bottle__chapter-art {
    aspect-ratio: 4 / 5;

    width: 100%;
  }

  /* --------------------------------------------------
     CLOSING
  -------------------------------------------------- */

  .bottle__closing {
    max-width: 100%;

    padding-inline: var(--space-md);

    padding-block: var(--space-5xl);
  }

  .bottle__closing-content {
    max-width: 32rem;

    margin-inline: auto;
  }

  .bottle__closing-art {
    width: 100%;

    margin-block: var(--space-3xl);

    aspect-ratio: 16 / 9;
  }

  .bottle__closing-story {
    max-width: 32rem;

    margin-inline: auto;
  }

  .bottle__closing-final {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  /* --------------------------------------------------
   LEGEND · QUOTE
-------------------------------------------------- */

  .legend__quote {
    padding-inline: var(--space-sm);
  }

  /* --------------------------------------------------
   BOTTLE · CLOSING FINAL
-------------------------------------------------- */

  .bottle__closing-final {
    line-height: 1.4;
  }

  /* --------------------------------------------------
   RITUAL · MOBILE
-------------------------------------------------- */

  .ritual {
    display: block;

    min-height: auto;

    background-color: var(--color-background);

    background-image: url("../assets/images/cocktails/preparations-hero-mobile.webp");

    background-position: center top;

    background-repeat: no-repeat;

    background-size: 100% auto;

    padding-top: 150vw;

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

  .ritual__overlay {
    display: none;
  }

  .ritual__container {
    display: block;

    min-height: auto;

    padding-block: var(--space-4xl);

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

  .ritual__content {
    max-width: 32rem;

    margin-inline: auto;

    padding-inline: var(--space-md);

    color: var(--color-black);

    text-align: left;
  }

  .ritual__content > .eyebrow {
    display: block;

    width: 100%;

    text-align: center;
  }

  .ritual__title {
    margin-inline: auto;

    color: var(--color-primary);

    text-align: center;
  }

  .ritual__statement {
    max-width: 28rem;

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

  .ritual__description {
    max-width: 28rem;

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

  /* --------------------------------------------------
LOCATIONS · MOBILE
-------------------------------------------------- */

  .locations {
    padding-block: var(--space-4xl);
  }

  /* --------------------------------------------------
LOCATIONS · INTRODUCTION
-------------------------------------------------- */

  .locations__intro {
    max-width: 32rem;

    margin-inline: auto;

    text-align: center;
  }

  .locations__statement {
    font-size: clamp(1.8rem, 8vw, 2.5rem);

    line-height: 1.4;
  }

  .locations__description {
    max-width: 28rem;
  }

  /* --------------------------------------------------
LOCATIONS · MAP
-------------------------------------------------- */

  .locations__map-wrapper {
    margin-top: var(--space-3xl);

    padding-inline: 0;
  }

  .locations__map {
    width: 100%;

    overflow: hidden;
  }

  .locations__map-image {
    width: 100%;

    height: auto;
  }

  /* --------------------------------------------------
LOCATIONS · DIRECTORY
-------------------------------------------------- */

  .locations__directory {
    margin-top: var(--space-4xl);
  }

  .locations__directory-header {
    margin-bottom: var(--space-3xl);
  }

  .locations__directory-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  /* --------------------------------------------------
LOCATIONS · CITY
-------------------------------------------------- */

  .locations__city {
    display: block;

    padding-block: var(--space-3xl);
  }

  /* --------------------------------------------------
LOCATIONS · CITY NAME
-------------------------------------------------- */

  .locations__city-name {
    margin-bottom: var(--space-2xl);

    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  /* --------------------------------------------------
LOCATIONS · PLACES
-------------------------------------------------- */

  .locations__places {
    gap: var(--space-2xl);
  }

  .locations__place {
    max-width: 100%;
  }

  /* --------------------------------------------------
   FOOTER · MOBILE
-------------------------------------------------- */

  .footer__main {
    grid-template-columns: 1fr;

    gap: var(--space-3xl);

    padding-block: var(--space-4xl);
  }

  /* --------------------------------------------------
   FOOTER · BRAND
-------------------------------------------------- */

  .footer__brand {
    max-width: 100%;

    text-align: center;
  }

  .footer__logo {
    width: min(100%, 16rem);

    margin-inline: auto;

    margin-bottom: var(--space-xl);
  }

  /* --------------------------------------------------
   FOOTER · COLUMNS
-------------------------------------------------- */

  .footer__column {
    text-align: left;
  }

  .footer__heading {
    margin-bottom: var(--space-lg);
  }

  /* --------------------------------------------------
   FOOTER · BOTTOM
-------------------------------------------------- */

  .footer__bottom-inner {
    flex-direction: column;

    align-items: center;

    gap: var(--space-2xl);

    padding-block: var(--space-2xl);

    text-align: center;
  }

  /* --------------------------------------------------
   FOOTER · LEGAL
-------------------------------------------------- */

  .footer__legal {
    flex-direction: column;

    gap: var(--space-sm);

    order: 2;
  }

  /* --------------------------------------------------
   FOOTER · SEALS
-------------------------------------------------- */

  .footer__seals {
    justify-content: center;

    gap: var(--space-xl);

    order: 1;
  }

  .footer__seal {
    height: 3rem;
  }

  /* --------------------------------------------------
   FOOTER · CLOSING
-------------------------------------------------- */

  .footer__closing {
    padding-top: var(--space-4xl);

    padding-inline: var(--space-md);
  }

  .footer__statement {
    max-width: 22rem;

    font-size: clamp(2.2rem, 10vw, 3.2rem);

    line-height: 1.3;
  }

  /* --------------------------------------------------
   AGE GATE · MOBILE
-------------------------------------------------- */

  .age-gate {
    align-items: flex-start;

    padding: var(--space-3xl) var(--space-lg);
  }

  .age-gate__mark {
    width: 10rem;
  }

  .age-gate__title {
    font-size: clamp(2.4rem, 12vw, 3.5rem);
  }

  .age-gate__date {
    grid-template-columns: 1fr 1fr;
  }

  .age-gate__field--year {
    grid-column: 1 / -1;
  }

  /* --------------------------------------------------
   COOKIE BANNER · MOBILE
-------------------------------------------------- */

  .cookie-banner {
    padding: var(--space-md);
  }

  .cookie-banner__inner {
    flex-direction: column;

    align-items: stretch;

    gap: var(--space-xl);

    padding: var(--space-xl);
  }

  .cookie-banner__actions {
    width: 100%;
  }

  .cookie-banner__button {
    flex: 1;

    min-width: 0;
  }

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

  .product-hero {
    min-height: auto;

    padding-top: var(--space-3xl);
    padding-bottom: 0;
  }

  .product-hero__container {
    grid-template-columns: 1fr;

    gap: var(--space-2xl);
  }

  .product-hero__content {
    max-width: 100%;
  }

  .product-hero__title {
    margin-top: var(--space-sm);

    font-size: clamp(3.75rem, 18vw, 5.5rem);

    line-height: 0.88;
  }

  .product-hero__lead {
    max-width: 30rem;

    margin-top: var(--space-xl);

    font-size: var(--fs-md);

    line-height: var(--lh-relaxed);
  }

  .product-hero__meta {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-sm) var(--space-lg);

    margin-top: var(--space-xl);
  }

  .product-hero__art {
    position: relative;

    width: 100%;
    max-width: 22rem;

    margin-top: var(--space-xl);
    margin-inline: auto;
  }

  .product-hero__image {
    display: block;

    width: 100%;
    height: auto;
  }

  /* ======================================================
   PRODUCT ESSENTIALS
====================================================== */

  .product-essentials {
    padding-block: var(--space-4xl);
  }

  .product-essentials__container {
    grid-template-columns: 1fr;

    gap: var(--space-3xl);
  }

  .product-essentials__art {
    width: 100%;
  }

  .product-essentials__stage {
    width: min(100%, 22rem);

    margin-inline: auto;
  }

  .product-essentials__image {
    display: block;

    width: 100%;
    height: auto;
  }

  .product-essentials__content {
    width: 100%;
    max-width: 34rem;

    margin-inline: auto;
  }

  .product-essentials__title {
    margin-top: var(--space-sm);

    font-size: clamp(2.75rem, 12vw, 4rem);

    line-height: 0.95;
  }

  .product-essentials__specs {
    margin-top: var(--space-2xl);
  }

  .product-essentials__spec {
    display: grid;

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

    gap: var(--space-lg);

    padding-block: var(--space-md);
  }

  .product-essentials__spec dd {
    text-align: right;
  }

  /* ======================================================
   PRODUCT DETAILS
====================================================== */

  .product-details {
    padding-block: var(--space-4xl);
  }

  .product-details__intro {
    max-width: 34rem;

    margin-inline: auto;
  }

  .product-details__title {
    margin-top: var(--space-sm);

    font-size: clamp(2.75rem, 12vw, 4rem);

    line-height: 0.95;
  }

  .product-details__lead {
    margin-top: var(--space-xl);

    line-height: var(--lh-relaxed);
  }

  /* ======================================================
   PRODUCT DETAILS · CHAPTERS
====================================================== */

  .product-details__chapter {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-2xl);

    padding-block: var(--space-4xl);
  }

  .product-details__art,
  .product-details__content {
    grid-column: 1;

    width: 100%;
    max-width: none;
  }

  .product-details__art {
    margin: 0;
  }

  .product-details__image {
    display: block;

    width: 100%;
    height: auto;
  }

  /* ======================================================
   GLASS
====================================================== */

  .product-details__art--glass {
    grid-row: 1;
  }

  .product-details__content--glass {
    grid-row: 2;
  }

  /* ======================================================
   LABEL
====================================================== */

  .product-details__art--label {
    grid-row: 1;
  }

  .product-details__content--label {
    grid-row: 2;
  }

  /* ======================================================
   DETAIL CONTENT
====================================================== */

  .product-details__content {
    max-width: 32rem;
  }

  .product-details__number {
    display: block;

    margin-bottom: var(--space-sm);
  }

  .product-details__subtitle {
    font-size: clamp(2rem, 9vw, 3rem);

    line-height: 1;
  }

  .product-details__content p {
    margin-top: var(--space-lg);

    line-height: var(--lh-relaxed);
  }

  /* --------------------------------------------------
   SENSORY PROFILE · MOBILE
-------------------------------------------------- */

  .sensory-profile {
    padding-block: var(--space-4xl);
  }

  .sensory-profile__intro {
    margin-bottom: var(--space-4xl);
  }

  .sensory-profile__title {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .sensory-profile__lead {
    font-size: var(--fs-md);
  }

  /* --------------------------------------------------
   SENSORY PROFILE · NOTES
-------------------------------------------------- */

  .sensory-profile__notes {
    grid-template-columns: 1fr;

    margin-bottom: var(--space-4xl);
  }

  .sensory-profile__note {
    min-height: auto;

    padding: var(--space-2xl) 0;

    border-right: 0;

    border-bottom: 1px solid rgba(71, 0, 0, 0.2);
  }

  .sensory-profile__note:last-child {
    border-bottom: 0;
  }

  /* --------------------------------------------------
   SENSORY PROFILE · NUMBER
-------------------------------------------------- */

  .sensory-profile__number {
    margin-bottom: var(--space-xl);
  }

  /* --------------------------------------------------
   SENSORY PROFILE · COPY
-------------------------------------------------- */

  .sensory-profile__note p {
    max-width: 100%;
  }

  /* --------------------------------------------------
   SENSORY PROFILE · SERVE
-------------------------------------------------- */

  .sensory-profile__serve p {
    font-size: var(--fs-xl);
  }

  /* --------------------------------------------------
   PRODUCT PURCHASE · MOBILE
-------------------------------------------------- */

  .product-purchase__container {
    grid-template-columns: 1fr;

    gap: var(--space-3xl);

    min-height: auto;

    padding-block: var(--space-4xl);
  }

  /* --------------------------------------------------
   PRODUCT PURCHASE · CONTENT
-------------------------------------------------- */

  .product-purchase__content {
    max-width: 100%;

    order: 2;
  }

  .product-purchase__title {
    font-size: clamp(3rem, 13vw, 4.5rem);
  }

  /* --------------------------------------------------
   PRODUCT PURCHASE · ART
-------------------------------------------------- */

  .product-purchase__art {
    width: min(75vw, 22rem);

    order: 1;
  }

  /* --------------------------------------------------
   PRODUCT PURCHASE · QUANTITY
-------------------------------------------------- */

  .product-purchase__quantity {
    gap: var(--space-lg);
  }

  /* --------------------------------------------------
   PAGE BREAK · MOBILE
-------------------------------------------------- */

  .page-break {
    height: var(--space-2xl);
  }

  /* --------------------------------------------------
   CHECKOUT · MOBILE
-------------------------------------------------- */

  .checkout {
    padding-top: var(--header-height);
  }

  .checkout__layout {
    grid-template-columns: 1fr;

    min-height: auto;
  }

  /* --------------------------------------------------
   CHECKOUT · SUMMARY
-------------------------------------------------- */

  .checkout__summary {
    order: 1;

    padding: var(--space-2xl) var(--space-lg);

    border-left: 0;

    border-bottom: 1px solid rgba(71, 0, 0, 0.12);
  }

  .checkout__summary-inner {
    position: static;

    width: 100%;
  }

  /* --------------------------------------------------
   CHECKOUT · FORM
-------------------------------------------------- */

  .checkout__form {
    order: 2;

    padding: var(--space-3xl) var(--space-lg);
  }

  .checkout__intro {
    margin-bottom: var(--space-3xl);
  }

  .checkout__title {
    font-size: clamp(3rem, 13vw, 4.5rem);
  }

  /* --------------------------------------------------
   CHECKOUT · EXPRESS
-------------------------------------------------- */

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

  /* --------------------------------------------------
   CHECKOUT · GRID
-------------------------------------------------- */

  .checkout__grid,
  .checkout__grid--three {
    grid-template-columns: 1fr;
  }

  /* --------------------------------------------------
   CHECKOUT · PRODUCT
-------------------------------------------------- */

  .checkout__product {
    display: grid;

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

    grid-template-areas:
      "art info"
      "art price"
      "art quantity";

    align-items: start;

    gap: var(--space-sm) var(--space-lg);
  }

  .checkout__product-art {
    grid-area: art;

    width: 8rem;

    align-self: start;
  }

  .checkout__product-info {
    grid-area: info;

    min-width: 0;
  }

  .checkout__product-price {
    grid-area: price;

    justify-self: start;

    text-align: left;

    white-space: nowrap;
  }

  .checkout__quantity {
    grid-area: quantity;

    justify-self: start;

    margin-top: var(--space-sm);
  }

  /* --------------------------------------------------
   REVEAL · MOBILE
-------------------------------------------------- */

  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(2rem);
  }
}