/* =========================================================
   process.css
   Parley Rum – How Rum Is Made page
   Built on base.css

   This file creates:
   - the hero background
   - a sticky side menu
   - the rope timeline down the middle
   - alternating “step” cards (left/right)
   ========================================================= */


/* =========================================================
   HERO (top banner)
   ========================================================= */
.process-hero{
  padding: 34px 0 22px;
  position: relative;
}

/* Soft background photo behind the hero text */
.process-hero::after{
  content:"";
  position:absolute;
  inset: 0;
  background-image: url("../images/parley-shipping.jpg");
  background-size: cover;
  background-position: center;
  opacity: .10; /* very faint */
  filter: saturate(1.05) contrast(1.05);
  pointer-events:none;
}

/* Keep hero text above the background image */
.process-hero .container{ position: relative; z-index: 1; }

.process-hero-card{ padding: 22px; }

.process-hero-card .eyebrow{
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-subtitle{ max-width: 72ch; }

.hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}


/* =========================================================
   OVERVIEW STRIP (Step 1 / Step 2 / Step 3 / Step 4)
   ========================================================= */
.section-tight{ padding: 22px 0 50px; }

.info-strip{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.info-item{ padding: 14px; }

.info-kicker{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 6px;
}

.info-title{
  font-weight: 900;
  color: var(--text);
}


/* =========================================================
   PAGE LAYOUT (sidebar + timeline)
   ========================================================= */
.process-wrap{
  display:grid;
  grid-template-columns: 280px 1fr; /* left = sidebar, right = content */
  gap: 22px;
  align-items: start;
}

/* Sidebar stays visible while scrolling on desktop */
.process-nav{
  position: sticky;
  top: 18px;
}

.process-nav-card{ padding: 14px; }

.process-nav-title{
  font-weight: 900;
  margin-bottom: 10px;
  color: var(--text);
}

.process-nav-link{
  display:block;
  padding: 9px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--muted);
}

.process-nav-link:hover{
  background: rgba(208,122,45,.16);
  color: var(--text);
}


/* =========================================================
   TIMELINE + ROPE
   The rope is a real <div class="rope"> in the HTML.
   This is easier to control than a CSS ::before trick.
   ========================================================= */

.timeline{
  position: relative;
  padding-top: 6px;

  /* --rope-x controls where the rope sits horizontally.
     50% = centered.
     On mobile we move it left. */
  --rope-x: 50%;

  /* This is the “middle column” width in the step layout */
  --rope-col: 120px;
}

/* The rope itself (a repeating SVG background image) */
.rope{
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rope-x);
  width: 170px;
  transform: translateX(-50%);
  transform-origin: top center;

  background-repeat: repeat-y;
  background-position: center top;
  background-size: 170px 720px;

  opacity: .95;
  pointer-events: none;
  z-index: 0;

  /* Gentle movement. Disabled in prefers-reduced-motion */
  animation: ropeSway 6.8s ease-in-out infinite;

  /* Rope SVG (embedded so you don’t need a separate file) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='720' viewBox='0 0 170 720'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d4b07a'/%3E%3Cstop offset='0.5' stop-color='%23b8844c'/%3E%3Cstop offset='1' stop-color='%23895b33'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M85 0 C122 60 48 120 85 180 C122 240 48 300 85 360 C122 420 48 480 85 540 C122 600 48 660 85 720' fill='none' stroke='url(%23g)' stroke-width='14' stroke-linecap='round'/%3E%3Cpath d='M85 0 C122 60 48 120 85 180 C122 240 48 300 85 360 C122 420 48 480 85 540 C122 600 48 660 85 720' fill='none' stroke='%23fff2df' stroke-width='3' opacity='.5'/%3E%3C/svg%3E");
}

/* Rope “sway” animation */
@keyframes ropeSway{
  0%   { transform: translateX(-50%) translateX(0); }
  25%  { transform: translateX(-50%) translateX(4px); }
  50%  { transform: translateX(-50%) translateX(0); }
  75%  { transform: translateX(-50%) translateX(-4px); }
  100% { transform: translateX(-50%) translateX(0); }
}


/* =========================================================
   STEP CARDS
   Each step card contains a 3-column grid:
   [text column] [rope column] [image column]
   Then the next step flips sides for variety.
   ========================================================= */

.step-card{
  position: relative;
  z-index: 1;          /* above the rope */
  margin-bottom: 224px; /* big spacing between steps */
}

/* The inner layout for pill + text + image */
.step-inner{
  display: grid;
  grid-template-columns: minmax(360px, 1fr) var(--rope-col) minmax(360px, 1fr);
  grid-template-rows: auto auto; /* row 1 = pill, row 2 = content */
  align-items: start;
}

/* Little “knot” marker on the rope for each step */
.step-card::before{
  content:"";
  position:absolute;
  left: var(--rope-x);
  top: 18px;
  width: 26px;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,245,228,.85), transparent 55%),
    linear-gradient(180deg, #d4b07a, #895b33);
  box-shadow:
    0 10px 18px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(120,80,30,.3);
  z-index: 2;
}

/* IMPORTANT:
   overflow hidden stops the rope from painting “past” the content */
.timeline{
  overflow: hidden;
}

/* Decorative rope end knot before the summary */
.rope-end{
  position: relative;
  height: 40px;
  margin-top: 8px;
  margin-bottom: 10px;
  z-index: 2;
}

.rope-end::before{
  content:"";
  position:absolute;
  left: var(--rope-x);
  top: 0;
  width: 30px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,245,228,.9), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(43,27,15,.18), transparent 58%),
    linear-gradient(180deg, #d4b07a, #895b33);
  box-shadow:
    0 10px 18px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(120,80,30,.3);
  z-index: 2;
}

/* Make sure the summary sits above the rope visually */
.summary-card{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: none;
  padding: 18px;
}


/* Step pill (the numbered title bubble) */
.step-pill{
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.65);
  box-shadow: var(--sh-soft);
  margin-bottom: 14px;
  width: fit-content;
}

.step-number{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
  background: radial-gradient(circle at 30% 30%, rgba(255,232,188,.95), rgba(208,122,45,.88));
  border: 1px solid var(--stroke);
}

.step-pill-title{
  font-weight: 900;
  color: var(--text);
}

/* Text card */
.step-text{
  grid-row: 2;
  padding: 16px;
  align-self: start;
}

/* Image block (background image set by class name below) */
.step-media{
  grid-row: 2;
  align-self: start;

  min-height: 290px;
  aspect-ratio: 4 / 3;

  background-size: cover;
  background-position: center;

  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  box-shadow: var(--sh-soft);
}

/* Which side is text vs image (alternating pattern) */
.step-card:nth-of-type(1) .step-pill{ grid-column: 1; }
.step-card:nth-of-type(1) .step-text{ grid-column: 1; }
.step-card:nth-of-type(1) .step-media{ grid-column: 3; }

.step-card:nth-of-type(2) .step-pill{ grid-column: 3; }
.step-card:nth-of-type(2) .step-text{ grid-column: 3; }
.step-card:nth-of-type(2) .step-media{ grid-column: 1; }

.step-card:nth-of-type(3) .step-pill{ grid-column: 1; }
.step-card:nth-of-type(3) .step-text{ grid-column: 1; }
.step-card:nth-of-type(3) .step-media{ grid-column: 3; }

.step-card:nth-of-type(4) .step-pill{ grid-column: 3; }
.step-card:nth-of-type(4) .step-text{ grid-column: 3; }
.step-card:nth-of-type(4) .step-media{ grid-column: 1; }


/* Step images (SAFE TO EDIT: swap image filenames here) */
.step-media-harvest{ background-image: url("../images/sugar-cane.jpg"); }
.step-media-ferment{ background-image: url("../images/fermentation.jpg"); }
.step-media-distill{ background-image: url("../images/copper-still-2.jpg"); }
.step-media-aging{ background-image: url("../images/barrel-3.jpg"); }


/* =========================================================
   CONCLUSION SECTION (3 equal-height cards)
   ========================================================= */
.conclusion-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 18px;
  align-items: stretch;
}

.conclusion-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 22px;
}

.conclusion-card h3{
  margin-bottom: 8px;
  color: var(--text);
}

.conclusion-card p{
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 900px){
  .conclusion-grid{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   RESPONSIVE (smaller screens)
   ========================================================= */
@media (max-width: 980px){
  /* Sidebar stacks above content */
  .process-wrap{ grid-template-columns: 1fr; }
  .process-nav{ position: relative; }
}

@media (max-width: 760px){
  /* Step overview becomes 2 columns */
  .info-strip{ grid-template-columns: 1fr 1fr; }

  /* Move rope to the left on mobile */
  .timeline{
    --rope-x: 20px;
    --rope-col: 34px;
  }

  /* Simplify the layout into 2 columns:
     [rope column] [content column] */
  .step-inner{
    grid-template-columns: var(--rope-col) 1fr;
    grid-template-rows: auto auto auto;
  }

  .step-pill{ grid-column: 2; grid-row: 1; }
  .step-text{ grid-column: 2; grid-row: 2; }
  .step-media{ grid-column: 2; grid-row: 3; }

  .step-media{
    margin-top: 12px;
    min-height: 200px;
    aspect-ratio: 16 / 10;
  }
}

/* Accessibility: if user prefers reduced motion, stop the rope animation */
@media (prefers-reduced-motion: reduce){
  .rope{ animation: none; }
}