/* ==========================================================
   PROJECT XAMUCO
   File: ritual.css
   Version: 1.0.0
   Description: Chapter IV · Preparados
========================================================== */

/* ======================================================
   RITUAL
====================================================== */

.ritual {
  position: relative;

  display: flex;

  align-items: center;

  min-height: 100vh;

  overflow: hidden;

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

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

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

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

/* ======================================================
   OVERLAY
====================================================== */

.ritual__overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.68) 0%,
    rgba(0, 0, 0, 0.42) 42%,
    rgba(0, 0, 0, 0.12) 72%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* ======================================================
   CONTAINER
====================================================== */

.ritual__container {
  position: relative;

  display: grid;

  grid-template-columns: 5fr 7fr;

  align-items: center;

  min-height: 100vh;

  z-index: var(--z-base);
}

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

.ritual__content {
  grid-column: 1;

  max-width: 36rem;

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

/* ======================================================
   TITLE
====================================================== */

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

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

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

/* ======================================================
   STATEMENT
====================================================== */

.ritual__statement {
  max-width: 30rem;

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

  font-family: var(--font-heading);

  font-size: clamp(2rem, 4vw, 3rem);

  font-style: italic;

  line-height: 1.25;

  letter-spacing: 0.01em;

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

/* ======================================================
   DESCRIPTION
====================================================== */

.ritual__description {
  max-width: 30rem;

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

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

  color: rgba(255, 255, 255, 0.88);
}