/* =========================================================
   cocktails.css
   Styles used ONLY on the Cocktails page.

   Most common edits:
   - change how many columns the grid has
   - adjust spacing
   - map a new cocktail photo (Image mapping section)
   ========================================================= */

.section-cocktails{
  /* Moves content slightly down so it breathes below the header */
  padding-top: 40px;
}

/* =========================================================
   Decorative rope divider
   This is purely visual. It separates sections on the page.
   ========================================================= */
.rope-divider{
  position: relative;
  height: 18px;
  margin: 22px 0;
  border-radius: 999px;

  /* Rope body: twist + fibers + shading */
  background:
    /* soft highlight */
    linear-gradient(180deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.06) 40%,
      rgba(0,0,0,.12) 100%
    ),

    /* twisted strands (subtle, not candy striped) */
    repeating-linear-gradient(35deg,
      rgba(191,147,70,.92) 0 12px,
      rgba(170,118,48,.92) 12px 24px,
      rgba(203,162,92,.90) 24px 36px
    ),

    /* fine fibers */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.045) 0 1px,
      transparent 1px 5px
    ),

    /* random speckle */
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.08), transparent 55%),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,.10), transparent 60%);

  border: 1px solid rgba(120,80,30,.26);

  box-shadow:
    0 8px 18px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.10);

  filter: saturate(1.02);
}

/* Rope edge fuzz */
.rope-divider::before{
  content:"";
  position:absolute;
  inset: -4px -2px;
  border-radius: 999px;
  pointer-events:none;

  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.05) 0 1px,
      transparent 1px 6px
    );

  opacity: .18;
  mix-blend-mode: multiply;
}

/* Knotted end wraps */
.rope-divider::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events:none;

  background:
    radial-gradient(circle at 10px 50%, rgba(110,70,25,.35), transparent 60%),
    radial-gradient(circle at calc(100% - 10px) 50%, rgba(110,70,25,.35), transparent 60%);

  opacity: .85;
}


/* =========================================================
   Intro card at the top (headline + chips)
   ========================================================= */
.cocktails-intro{
  padding: 26px 24px;
  margin-bottom: 22px;
}

.cocktails-title{
  margin-bottom: 10px;
}

/* The row of little label “chips” */
.cocktail-chip-row{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(201,150,46,.45);
}

.chip{
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(201,150,46,.45);
  background: rgba(201,150,46,.18);
  font-size: 12px;
}


/* =========================================================
   Cocktail card grid layout
   Desktop shows 3 columns.
   ========================================================= */
.cocktail-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}


/* =========================================================
   Cocktail cards
   Slight lift on hover to feel “interactive.”
   ========================================================= */
.cocktail-card{
  transition: transform .2s ease;
}
.cocktail-card:hover{
  transform: translateY(-4px);
}

/* The image area height for each cocktail */
.cocktail-media{
  height: 260px;
}


/* =========================================================
   Tags (Spiced vs Cinnamon)
   ========================================================= */
.tag{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(201,150,46,.5);
  background: rgba(201,150,46,.20);
}

/* Cinnamon tag is warmer/redder */
.tag-cinnamon{
  background: rgba(184,76,42,.22);
  border-color: rgba(184,76,42,.45);
}


/* =========================================================
   Ingredients list
   ========================================================= */
.cocktail-ingredients{
  margin-top: 10px;
  padding-left: 18px;
  font-size: 13px;
  color: var(--muted);
}


/* =========================================================
   IMAGE MAPPING (MOST IMPORTANT SECTION FOR EDITING PHOTOS)

   How it works:
   - In the HTML, each card has a class like: cocktail-espresso-martini
   - That class is defined here and points to an image file.

   To ADD a new cocktail photo:
   1) Upload your image into /images/
   2) Add a line here using the same pattern
   3) Use that class name on the cocktail’s “media” div in the HTML

   Example:
   .cocktail-my-new-drink{ background-image: url("../images/cocktail-my-new-drink.jpg"); }
   ========================================================= */
.cocktail-espresso-martini{ background-image: url("../images/cocktail-espresso-martini.jpg"); }
.cocktail-spiced-daily{ background-image: url("../images/cocktail-spiced-daily.jpg"); }
.cocktail-spicy-pirate{ background-image: url("../images/cocktail-spicy-pirate.jpg"); }
.cocktail-parley-cola{ background-image: url("../images/cocktail-parley-cola.jpg"); }
.cocktail-spiced-hawaii{ background-image: url("../images/cocktail-spiced-hawaii.jpg"); }
.cocktail-spiced-jinger{ background-image: url("../images/cocktail-spiced-jinger.jpg"); }
.cocktail-spiced-mule{ background-image: url("../images/cocktail-spiced-mule.jpg"); }
.cocktail-cuba-libre{ background-image: url("../images/cocktail-cuba-libre.jpg"); }
.cocktail-hot-toddy{ background-image: url("../images/cocktail-hot-toddy.jpg"); }


/* =========================================================
   Responsive layout:
   - Under 980px wide: 2 columns
   - Under 560px wide: 1 column
   ========================================================= */
@media (max-width: 980px){
  .cocktail-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .cocktail-grid{ grid-template-columns: 1fr; }
}