/* AnnaBay Club: one cocktail. A hero with the words on the photo, the recipe, a photo, the four steps with a video each. */

.crumb--light a,
.crumb--light span {
  color: var(--white);
}

/* The hero photo shows the bottle, so the words sit at the foot, left */
.cocktail-page .chero__bg img {
  object-position: 50% 45%;
}

/* ---------- 2. The recipe ---------- */
.recipe {
  --ink: var(--red);
  background: var(--sand);
  color: var(--black);
}

.recipe__inner {
  display: grid;
  gap: 44px;
}

.recipe__copy {
  display: grid;
  gap: 16px;
}

.recipe__lead {
  max-width: 28ch;
  font-size: 20px;
}

.ingredients {
  display: grid;
  border-top: 2px solid var(--red);
}

.ingredients li {
  display: grid;
  grid-template-columns: 9rem 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 2px solid var(--red);
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ingredients strong {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.02em;
  color: var(--red);
}

@media (min-width: 900px) {
  .recipe__inner {
    grid-template-columns: 1fr 1.1fr;
    gap: 96px;
    align-items: center;
  }
  .ingredients li {
    grid-template-columns: 11rem 1fr;
    padding: 24px 0;
    font-size: 26px;
  }
  .ingredients strong {
    font-size: 38px;
  }
}

/* ---------- 3. A photo ---------- */
.cphoto {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 var(--gutter);
  background: var(--sand);
  text-align: center;
}

.cphoto img {
  display: block;
  width: min(100%, 560px);
  height: auto;
  margin-inline: auto;
  box-shadow: 0 0 0 4px var(--red), 12px 12px 0 4px var(--black);
}

@media (min-width: 900px) {
  .cphoto img {
    width: min(100%, 640px);
  }
}

/* ---------- 4. The steps ---------- */
.steps {
  --ink: var(--red);
  padding-block: 96px 100px;
  background: var(--sand);
  color: var(--black);
}

.steps .big {
  margin-bottom: 44px;
}

.steps__list {
  display: grid;
  gap: 48px 28px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .steps__list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .steps__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step {
  display: grid;
  align-content: start;
  gap: 8px;
}

.step__video {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  aspect-ratio: 9 / 16;
  margin-bottom: 14px;
  background: var(--red);
  color: var(--white);
  box-shadow: 6px 6px 0 var(--black);
}

.step__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
}

.step__play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 20px 0 0 26px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--red);
}

.step__soon {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.step__n {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}

.step h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--red);
}

.step p:not(.step__n) {
  font-size: 17px;
}

/* ---------- The engraving behind the sand ---------- */
.cocktail-page .paper::before {
  background-image: url("/assets/img/wm-mojito.webp?v=1");
  background-size: auto 115%;
  background-repeat: no-repeat;
  background-position: calc(var(--px, 0.5) * 100%) 50%;
  filter: blur(0.8px);
  opacity: 0.084;
}

/* Fixes: the words stay left of the bottle, the small label is red, the photo has air above and below */
.cocktail-page .chero__text {
  max-width: 22ch;
}

.cocktail-page .chero .big {
  font-size: clamp(70px, 16vw, 130px);
}

@media (min-width: 900px) {
  .cocktail-page .chero .big {
    font-size: clamp(90px, 8.4vw, 140px);
  }
}

.recipe .kicker,
.steps .kicker {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}

.cphoto {
  padding-block: 8px 72px;
  margin-top: -8px;
}

.recipe {
  padding-bottom: 64px;
}

.crumb--light {
  gap: 10px;
}

@media (max-width: 899px) {
  .cocktail-page .chero__text {
    max-width: 17ch;
    font-size: 16px;
  }
  .cocktail-page .chero .big {
    font-size: 64px;
  }
}


/* Phone: the photo is 4:5, the words lie on its foot (the tabletop carried on below the Mojito) */
@media (max-width: 899px) {
  .cocktail-page .chero__bg {
    aspect-ratio: 20 / 31;
  }
  .cocktail-page .chero__bg img {
    object-position: 50% 0;
  }
  .cocktail-page .chero__copy {
    padding-bottom: 36px;
  }
  .cocktail-page .chero .big {
    font-size: 60px;
  }
  .cocktail-page .chero__text {
    max-width: 30ch;
    font-size: 16px;
  }
}

/* The photo and the steps close together; the engraving runs behind the photo too */
.cphoto {
  padding-block: 8px 0;
  margin-top: -8px;
}

.cphoto::before {
  z-index: -1;
}

.steps {
  padding-block: 44px 80px;
}

.steps .big {
  margin-bottom: 36px;
}

@media (max-width: 899px) {
  .cocktail-page .chero__copy {
    padding-bottom: 18px;
  }
  .cocktail-page .chero__text {
    font-size: 15px;
  }
}


/* ---------- Phone hero, final: the words lie on the photo, at the top, over the palm leaves ---------- */
@media (max-width: 899px) {
  .cocktail-page .chero {
    background: var(--red);
  }
  .cocktail-page .chero__bg {
    aspect-ratio: 2 / 3;
  }
  .cocktail-page .chero__bg img {
    object-position: 50% 0;
  }
  .cocktail-page .chero__copy {
    position: absolute;
    top: 22px;
    bottom: auto;
    left: 0;
    right: 0;
    padding: 0 var(--gutter);
    gap: 8px;
    color: var(--white);
    text-shadow: 0 1px 4px rgba(30, 10, 0, 0.7), 0 2px 16px rgba(30, 10, 0, 0.6);
  }
  .cocktail-page .chero .big {
    display: block;
    font-size: 54px;
    line-height: 0.9;
  }
  .cocktail-page .chero .big span {
    display: inline;
  }
  .cocktail-page .chero .big span:first-child {
    color: var(--white);
  }
  .cocktail-page .chero .big .hollow {
    color: var(--red);
    text-shadow: none;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95));
  }
  .cocktail-page .chero .kicker,
  .cocktail-page .crumb--light a,
  .cocktail-page .crumb--light span {
    color: var(--white);
  }
  .cocktail-page .chero__text {
    max-width: 26ch;
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
  }
}

/* Steps as plain text, four in a row on a computer */
.steps--text .step {
  gap: 10px;
  padding-top: 18px;
  border-top: 3px solid var(--red);
}


/* The photo sits inside the steps section: the engraving runs on behind it, and its shadow is not cut off */
.steps .cphoto {
  margin: 0 0 64px;
  padding: 0;
  background: none;
  z-index: auto;
}

.steps {
  padding-block: 8px 80px;
}

.recipe {
  padding-bottom: 72px;
}

.steps--text .steps__list {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .steps--text .steps__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Phone hero: the words at the foot, on the left, beside the bottle; the crumb stays at the top left */
@media (max-width: 899px) {
  .cocktail-page .chero__bg {
    aspect-ratio: 4 / 5;
  }
  .cocktail-page .chero__copy {
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px var(--gutter) 24px;
    gap: 0;
  }
  .cocktail-page .chero__copy > .crumb {
    margin: 0;
  }
  .cocktail-page .chero__copy > :not(.crumb) {
    max-width: 44%;
  }
  .cocktail-page .chero .big {
    display: grid;
    font-size: 52px;
    margin-top: auto;
  }
  .cocktail-page .chero .big span {
    display: block;
  }
  .cocktail-page .chero .kicker {
    margin-top: auto;
  }
  .cocktail-page .chero .kicker + .big {
    margin-top: 6px;
  }
  .cocktail-page .chero__text {
    max-width: 44%;
    margin-top: 8px;
    font-size: 14px;
  }
}

@media (max-width: 899px) {
  .cocktail-page .chero .big {
    font-size: 46px;
  }
  .cocktail-page .chero__copy > :not(.crumb),
  .cocktail-page .chero__text {
    max-width: 42%;
  }
  .cocktail-page .chero__text {
    font-size: 13px;
  }
}

/* The steps are torn at the foot only (above the red band); the top stays straight so the photo is not cut */
.steps.torn {
  margin-top: 0;
  padding-block: 8px 100px;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 28px) no-repeat,
    url("../img/tear-bottom.svg") bottom / 600px 30px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 28px) no-repeat,
    url("../img/tear-bottom.svg") bottom / 600px 30px repeat-x;
}


/* Phone hero: the photo shifted left, so the woman is in the picture; the words stay bottom left, a little narrower */
@media (max-width: 899px) {
  .cocktail-page .chero .big {
    font-size: 40px;
  }
  .cocktail-page .chero__copy > :not(.crumb),
  .cocktail-page .chero__text {
    max-width: 36%;
  }
  .cocktail-page .chero__text {
    font-size: 12px;
    line-height: 1.35;
  }
  .cocktail-page .chero .kicker {
    font-size: 14px;
  }
}

@media (max-width: 899px) {
  .cocktail-page .chero .big {
    font-size: 36px;
  }
  .cocktail-page .chero__copy > :not(.crumb),
  .cocktail-page .chero__text {
    max-width: 32%;
  }
  .cocktail-page .chero__text {
    font-size: 11.5px;
  }
}

/* Phone hero: bigger words, all white, a strong soft shadow so they read over the photo */
@media (max-width: 899px) {
  .cocktail-page .chero .big {
    font-size: 58px;
  }
  .cocktail-page .chero .big span:first-child,
  .cocktail-page .chero .big .hollow {
    color: var(--white);
    filter: none;
  }
  .cocktail-page .chero__copy > :not(.crumb),
  .cocktail-page .chero__text {
    max-width: 56%;
  }
  .cocktail-page .chero__text {
    font-size: 15px;
    line-height: 1.3;
  }
  .cocktail-page .chero .kicker {
    font-size: 16px;
  }
  .cocktail-page .chero__copy {
    text-shadow: 0 1px 3px rgba(20, 8, 0, 0.8), 0 2px 14px rgba(20, 8, 0, 0.75), 0 0 28px rgba(20, 8, 0, 0.55);
  }
}


/* Daiquiri: four steps, four in a row on a computer; the hero photo sits a bit higher */
@media (min-width: 1100px) {
  .cocktail-page--daiquiri .steps--text .steps__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cocktail-page--daiquiri .chero__bg img {
  object-position: 50% 55%;
}

@media (min-width: 900px) {
  .cocktail-page--daiquiri .chero .big {
    font-size: clamp(80px, 7.2vw, 120px);
  }
  .cocktail-page--daiquiri .chero__text {
    max-width: 26ch;
  }
}

@media (max-width: 899px) {
  .cocktail-page--daiquiri .chero .kicker {
    font-size: 13px;
    letter-spacing: 0.16em;
  }
  .cocktail-page--daiquiri .chero .big {
    font-size: 50px;
  }
}


.recipe__note {
  grid-column: 1 / -1;
  font-size: 15px;
  font-style: italic;
}

.recipe__inner > .ingredients + .recipe__note {
  margin-top: -24px;
}


/* "The recipe": a big heading, nothing else beside the ingredients */
.recipe__title {
  font-size: clamp(72px, 20vw, 150px);
}

@media (min-width: 900px) {
  .recipe__title {
    font-size: clamp(100px, 11vw, 190px);
  }
}


/* Lucha pa Libertad: four steps in a row, the long title a little smaller */
@media (min-width: 1100px) {
  .cocktail-page--lucha .steps--text .steps__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 900px) {
  .cocktail-page--lucha .chero .big {
    font-size: clamp(80px, 7.4vw, 124px);
  }
  .cocktail-page--lucha .chero__text {
    max-width: 30ch;
  }
}

@media (max-width: 899px) {
  .cocktail-page--lucha .chero .big {
    font-size: 48px;
  }
  .cocktail-page--lucha .chero__copy > :not(.crumb),
  .cocktail-page--lucha .chero__text {
    max-width: 70%;
  }
  .cocktail-page--lucha .chero__text {
    font-size: 14px;
  }
  .cocktail-page--lucha .chero .kicker {
    font-size: 13px;
    letter-spacing: 0.16em;
  }
}

@media (min-width: 900px) {
  .cocktail-page--lucha .chero__bg img {
    object-position: 50% 30%;
  }
}


/* Storm in the Bay: four steps, seven ingredients */
@media (min-width: 1100px) {
  .cocktail-page--storm .steps--text .steps__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 900px) {
  .cocktail-page--storm .chero .big {
    font-size: clamp(80px, 7.4vw, 124px);
  }
  .cocktail-page--storm .chero__text {
    max-width: 34ch;
  }
}

@media (max-width: 899px) {
  .cocktail-page--storm .chero .big {
    font-size: 48px;
  }
  .cocktail-page--storm .chero__copy > :not(.crumb),
  .cocktail-page--storm .chero__text {
    max-width: 72%;
  }
  .cocktail-page--storm .chero__text {
    font-size: 13px;
  }
  .cocktail-page--storm .chero .kicker {
    font-size: 13px;
    letter-spacing: 0.16em;
  }
}


/* Club 1865 */
@media (min-width: 1100px) {
  .cocktail-page--club .steps--text .steps__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 899px) {
  .cocktail-page--club .chero .big {
    font-size: 54px;
  }
  .cocktail-page--club .chero__copy > :not(.crumb),
  .cocktail-page--club .chero__text {
    max-width: 62%;
  }
  .cocktail-page--club .chero__text {
    font-size: 13px;
  }
}


/* Señor's Mai Tai */
@media (min-width: 1100px) {
  .cocktail-page--maitai .steps--text .steps__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 899px) {
  .cocktail-page--maitai .chero .big {
    font-size: 50px;
  }
  .cocktail-page--maitai .chero__copy > :not(.crumb),
  .cocktail-page--maitai .chero__text {
    max-width: 62%;
  }
  .cocktail-page--maitai .chero__text {
    font-size: 13px;
  }
}


.cocktail-page--club .chero__bg img {
  object-position: 50% 50%;
}

@media (min-width: 900px) {
  .cocktail-page--club .chero__bg img {
    object-position: 50% 88%;
  }
}


/* Piña Zabala and Anna's Parchita: no steps, so the photo section only holds the photo */
.cocktail-page--pina .steps.torn,
.cocktail-page--parchita .steps.torn {
  padding-bottom: 100px;
}

.cocktail-page--pina .chero .big,
.cocktail-page--parchita .chero .big {
  font-size: clamp(80px, 8vw, 130px);
}

@media (max-width: 899px) {
  .cocktail-page--pina .chero .big,
  .cocktail-page--parchita .chero .big {
    font-size: 50px;
  }
  .cocktail-page--pina .chero__copy > :not(.crumb),
  .cocktail-page--pina .chero__text,
  .cocktail-page--parchita .chero__copy > :not(.crumb),
  .cocktail-page--parchita .chero__text {
    max-width: 62%;
  }
  .cocktail-page--pina .chero__text,
  .cocktail-page--parchita .chero__text {
    font-size: 13px;
  }
}

/* Piña Zabala and Anna's Parchita on a computer: the words on a red panel, the photo beside it, so nothing lies over the bottle */
@media (min-width: 900px) {
  .cocktail-page--pina .chero,
  .cocktail-page--parchita .chero {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    min-height: calc(100svh - var(--header-h, 64px));
    background: var(--red);
  }
  .cocktail-page--pina .chero__bg,
  .cocktail-page--parchita .chero__bg {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    min-height: 560px;
    aspect-ratio: auto;
  }
  .cocktail-page--pina .chero__bg img,
  .cocktail-page--parchita .chero__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cocktail-page--pina .chero__copy,
  .cocktail-page--parchita .chero__copy {
    grid-column: 1;
    grid-row: 1;
    position: static;
    align-self: center;
    display: grid;
    gap: 14px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 56px 40px 56px max(var(--gutter), calc((100vw - 1200px) / 2));
    text-shadow: none;
  }
  .cocktail-page--pina .chero .big,
  .cocktail-page--parchita .chero .big {
    font-size: clamp(70px, 6.4vw, 108px);
    filter: none;
  }
  .cocktail-page--pina .chero .big span,
  .cocktail-page--parchita .chero .big span,
  .cocktail-page--pina .chero .big .hollow,
  .cocktail-page--parchita .chero .big .hollow {
    color: var(--white);
    -webkit-text-stroke: 0;
    filter: none;
  }
  .cocktail-page--pina .chero__text,
  .cocktail-page--parchita .chero__text {
    max-width: 26ch;
    font-size: 19px;
    text-shadow: none;
  }
  .cocktail-page--pina .chero .kicker,
  .cocktail-page--parchita .chero .kicker {
    color: var(--gold-bright);
    text-shadow: none;
  }
}


.cocktail-page--storm .chero__bg img {
  object-position: 50% 55%;
}


/* Anna's Parchita: the whole tall photo in the hero, so the bottle and the glass are not zoomed in */
.cocktail-page--parchita .chero__bg img {
  object-position: 50% 74%;
}

@media (min-width: 900px) {
  .cocktail-page--parchita .chero {
    grid-template-columns: 1fr 1fr;
  }
}


/* ---------- Photo 2 as a polaroid: white card, soft shadow, slightly tilted, name in script ---------- */
.cphoto--polaroid .cphoto__card {
  display: inline-block;
  width: min(100%, 520px);
  padding: 12px 12px 0;
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
  transform: rotate(-1.5deg);
}

.cphoto--polaroid .cphoto__card img {
  width: 100%;
  border-radius: 3px;
  box-shadow: none;
}

.cphoto__cap {
  margin: 0;
  padding: 14px 4px 20px;
  font-family: var(--script);
  font-size: clamp(34px, 9vw, 46px);
  line-height: 1;
  color: var(--red);
}

@media (min-width: 900px) {
  .cphoto--polaroid .cphoto__card {
    width: min(100%, 560px);
  }
}