/* BRASA — THE BAR. Back into the night: three cocktail posters that shift and
   reveal their ingredients on hover, next to a tall bar photograph. */

.bar { padding-block: clamp(5rem, 13vh, 10rem); }

.bar__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.4rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
}
.bar__arc {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.bar__arc span { flex: 1; height: 1px; min-width: 2.5rem; background: linear-gradient(90deg, var(--ember), var(--rule)); }

.bar__grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}

/* render.js pours the three cocktails into [data-bar-pours]. The grid above is
   drawn for four cells — the tall bar photograph and three cocktails — but the
   wrapper was a cell of its own, so all three stacked in the second column and
   the last two stood empty. The wrapper steps out of the layout and each
   cocktail takes its own cell. (A phone lays them out as rows — see below.) */
.bar__pours { display: contents; }

.bar__tall .frame { aspect-ratio: 3 / 4.4; border-radius: var(--r-lg); }
.bar__tall p { margin-top: 1rem; font-size: var(--t-small); color: var(--muted); }

.cocktail { position: relative; }
.cocktail__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--black);
}
.cocktail__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease-out);
}
.cocktail:hover .cocktail__frame img,
.cocktail:focus-within .cocktail__frame img {
  transform: translate3d(-1.5%, -1.5%, 0) scale(1.03);
}
.cocktail__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(11, 9, 8, .88));
  opacity: .85;
}

.cocktail__body {
  position: absolute;
  left: 1rem; right: 1rem; bottom: .9rem;
  z-index: 2;
}
.cocktail__name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--cream);
}
.cocktail__reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.cocktail__reveal > div { overflow: hidden; }
.cocktail:hover .cocktail__reveal,
.cocktail:focus-within .cocktail__reveal { grid-template-rows: 1fr; opacity: 1; }
.cocktail__ingredients {
  font-size: var(--t-small);
  color: var(--cream-72);
  padding-top: .4rem;
}
.cocktail__price {
  display: inline-block;
  margin-top: .5rem;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ember);
}

.bar__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 1100px) {
  .bar__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bar__tall { grid-column: 1 / -1; }
  .bar__tall .frame { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .bar__head { grid-template-columns: 1fr; align-items: start; }
  .bar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cocktail__reveal { grid-template-rows: 1fr; opacity: 1; }

  /* On a phone the three pours were squeezed into one grid column, 160px wide,
     with the words printed over the drink. Each pour is a row now: the words on
     the left where they are read, the photograph on the right, nothing laid
     over it. */
  .bar__pours { grid-column: 1 / -1; display: grid; }
  .cocktail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44%;
    gap: 1rem;
    align-items: center;
    padding-block: 1rem;
  }
  .cocktail + .cocktail { border-top: 1px solid var(--rule); }
  .cocktail__frame { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 5; }
  .cocktail__frame::after { display: none; }
  .cocktail__body { position: static; grid-column: 1; grid-row: 1; }
  .cocktail:hover .cocktail__frame img,
  .cocktail:focus-within .cocktail__frame img { transform: none; }
}