/* Real photography layer — keeps the existing Eden art direction intact. */

.hero-with-photo {
  isolation: isolate;
}

.hero-photo-layer,
.hero-photo-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/*
 * HERO PHOTO TREATMENT
 * The image remains visible and atmospheric, but the focal point is deliberately
 * pushed away from the headline. The layered shade creates a protected reading
 * zone on the left rather than simply making the entire image darker.
 */
.hero-photo-layer {
  z-index: -4;
  opacity: .42;
  overflow: hidden;
}

.hero-photo-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 46%;
  filter: saturate(.74) contrast(1.16) brightness(.57);
  transform: scale(1.045);
}

.hero-photo-shade {
  z-index: -3;
  background:
    radial-gradient(ellipse at 22% 48%, rgba(8,8,6,.62) 0%, rgba(8,8,6,.34) 34%, transparent 61%),
    linear-gradient(90deg, rgba(8,8,6,.995) 0%, rgba(8,8,6,.97) 27%, rgba(8,8,6,.84) 48%, rgba(8,8,6,.48) 72%, rgba(8,8,6,.24) 100%),
    linear-gradient(180deg, rgba(8,8,6,.58) 0%, rgba(8,8,6,.12) 34%, rgba(8,8,6,.24) 66%, rgba(8,8,6,.94) 100%);
}

.hero-with-photo::before {
  z-index: -2;
}

.hero-with-photo .hero-copy {
  position: relative;
  z-index: 3;
}

.hero-with-photo .hero-copy h1 {
  text-shadow:
    0 2px 2px rgba(0,0,0,.2),
    0 12px 42px rgba(0,0,0,.55);
}

.hero-with-photo .hero-intro,
.hero-with-photo .hero-actions,
.hero-with-photo .hero-eyebrow,
.hero-with-photo .hero-footer {
  text-shadow: 0 4px 22px rgba(0,0,0,.72);
}

.hero-photo-card {
  position: relative;
  height: min(66vh, 700px);
  min-height: 470px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1.2rem;
}

.photo-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(240,234,220,.16);
  border-radius: 46% 46% 1.2rem 1.2rem / 17% 17% 1.2rem 1.2rem;
  background: #11110e;
  box-shadow: 0 35px 80px rgba(0,0,0,.42);
}

.photo-frame::after,
.aperitivo-photo::after,
.atmosphere-shot::after,
.cocktail-real-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,8,.02), rgba(10,10,8,.42)),
    radial-gradient(circle at 50% 15%, transparent 0, transparent 38%, rgba(10,10,8,.22) 100%);
}

.photo-frame img,
.aperitivo-photo img,
.atmosphere-shot img,
.cocktail-real-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.8) contrast(1.08) brightness(.84);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}

.photo-frame img {
  object-position: 62% 48%;
}

.hero-photo-card:hover .photo-frame img,
.aperitivo-photo:hover img,
.atmosphere-shot:hover img,
.cocktail-real-photo:hover img {
  transform: scale(1.035);
  filter: saturate(.92) contrast(1.04) brightness(.91);
}

.photo-card-meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .9rem 1rem;
  background: rgba(10,10,8,.68);
  border: 1px solid rgba(240,234,220,.14);
  backdrop-filter: blur(14px);
  border-radius: 1rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .58rem;
  color: var(--cream-soft);
}

.photo-card-meta span {
  color: var(--olive);
}

.photo-card-meta p {
  margin: 0;
}

/* Aperitivo: editorial image replaces the abstract illustration. */
.editorial-band-photo {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  min-height: min(900px, 92svh);
  background: #c4bd8a;
  overflow: hidden;
}

.editorial-band-photo .editorial-copy {
  align-self: center;
  position: relative;
  z-index: 2;
}

.aperitivo-photo {
  margin: 0;
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: #17170f;
}

.aperitivo-photo img {
  object-position: center;
  filter: saturate(.76) contrast(1.09) brightness(.74);
}

.aperitivo-photo::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 32%;
  z-index: 2;
  background: linear-gradient(90deg, rgba(196,189,138,.8), transparent);
  pointer-events: none;
}

.aperitivo-photo figcaption {
  position: absolute;
  z-index: 3;
  left: clamp(1.5rem, 4vw, 4rem);
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 4vw, 4rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  color: var(--cream);
}

.aperitivo-photo figcaption span {
  font-size: .63rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240,234,220,.72);
}

.aperitivo-photo figcaption strong {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.7vw, 5.4rem);
  font-weight: 400;
  line-height: .84;
  text-align: right;
}

.aperitivo-photo figcaption i {
  color: var(--olive);
  font-weight: 400;
}

/* Signature cocktail gets documented Eden imagery while retaining the type layout. */
.cocktail-feature-photo {
  overflow: hidden;
  isolation: isolate;
}

.cocktail-real-photo {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.cocktail-real-photo img {
  object-position: center 55%;
  filter: saturate(.72) contrast(1.1) brightness(.74);
}

/* Atmosphere gallery */
.atmosphere {
  background:
    radial-gradient(circle at 80% 10%, rgba(176,180,91,.08), transparent 25%),
    #0d0d0a;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.atmosphere-heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: clamp(3rem, 8vw, 8rem);
  max-width: 1500px;
  margin: 0 auto clamp(3.5rem, 7vw, 6.5rem);
}

.atmosphere-intro {
  max-width: 520px;
  color: var(--cream-soft);
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  margin: 0;
}

.atmosphere-grid {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  grid-template-rows: 360px 360px;
  gap: 1rem;
}

.atmosphere-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(240,234,220,.12);
  background: #151510;
  min-width: 0;
}

.atmosphere-shot-main {
  grid-row: 1 / 3;
}

.atmosphere-shot-wide {
  grid-column: 2;
}

.atmosphere-shot-main img {
  object-position: center;
}

.atmosphere-shot figcaption {
  position: absolute;
  z-index: 3;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

.atmosphere-shot figcaption span {
  color: rgba(240,234,220,.7);
  text-transform: uppercase;
  font-size: .56rem;
  letter-spacing: .18em;
}

.atmosphere-shot figcaption strong {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 3rem);
  font-weight: 400;
  line-height: 1;
}

.photo-credit {
  max-width: 1500px;
  margin: 1.3rem auto 0;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  color: #6f6b61;
  font-size: .56rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .desktop-nav {
    gap: 1.15rem;
  }

  .hero-main {
    grid-template-columns: 1.05fr .95fr;
  }

  .hero-photo-layer img {
    object-position: 68% 46%;
  }

  .hero-photo-card {
    height: min(58vh, 590px);
    min-height: 420px;
  }

  .editorial-band-photo {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  .hero-with-photo {
    padding-top: 7.25rem;
  }

  .hero-photo-layer {
    opacity: .37;
  }

  .hero-photo-layer img {
    object-position: 66% 38%;
    filter: saturate(.68) contrast(1.18) brightness(.52);
    transform: scale(1.07);
  }

  .hero-photo-shade {
    background:
      radial-gradient(ellipse at 30% 28%, rgba(8,8,6,.68) 0%, rgba(8,8,6,.36) 38%, transparent 66%),
      linear-gradient(180deg, rgba(8,8,6,.95) 0%, rgba(8,8,6,.82) 28%, rgba(8,8,6,.66) 50%, rgba(8,8,6,.9) 80%, #080806 100%),
      linear-gradient(90deg, rgba(8,8,6,.9) 0%, rgba(8,8,6,.58) 58%, rgba(8,8,6,.3) 100%);
  }

  .hero-with-photo .hero-copy {
    max-width: 720px;
  }

  .hero-with-photo .hero-copy h1 {
    text-shadow:
      0 2px 2px rgba(0,0,0,.28),
      0 10px 34px rgba(0,0,0,.78);
  }

  .hero-main {
    grid-template-columns: 1fr;
    gap: 2.7rem;
  }

  .hero-photo-card {
    width: min(88vw, 520px);
    height: 57svh;
    min-height: 430px;
    justify-self: end;
  }

  .photo-frame {
    border-radius: 44% 44% 1rem 1rem / 15% 15% 1rem 1rem;
  }

  .photo-frame img {
    object-position: 60% 45%;
  }

  .editorial-band-photo {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .editorial-band-photo .editorial-copy {
    padding-bottom: 4rem;
  }

  .aperitivo-photo {
    min-height: 72svh;
  }

  .aperitivo-photo::before {
    width: 100%;
    height: 30%;
    inset: 0 0 auto;
    background: linear-gradient(180deg, rgba(196,189,138,.75), transparent);
  }

  .atmosphere-heading {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .atmosphere-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 58svh 310px;
  }

  .atmosphere-shot-main {
    grid-row: auto;
    grid-column: 1 / 3;
  }

  .atmosphere-shot-wide {
    grid-column: auto;
  }

  .photo-credit {
    flex-direction: column;
    gap: .4rem;
  }
}

@media (max-width: 560px) {
  .hero-photo-layer {
    opacity: .33;
  }

  .hero-photo-layer img {
    object-position: 61% 32%;
    filter: saturate(.64) contrast(1.2) brightness(.48);
    transform: scale(1.09);
  }

  .hero-photo-shade {
    background:
      radial-gradient(ellipse at 24% 27%, rgba(8,8,6,.82) 0%, rgba(8,8,6,.48) 42%, transparent 70%),
      linear-gradient(180deg, rgba(8,8,6,.98) 0%, rgba(8,8,6,.9) 25%, rgba(8,8,6,.74) 48%, rgba(8,8,6,.92) 74%, #080806 100%),
      linear-gradient(90deg, rgba(8,8,6,.96) 0%, rgba(8,8,6,.72) 67%, rgba(8,8,6,.38) 100%);
  }

  .hero-with-photo .hero-copy h1 {
    text-shadow:
      0 2px 1px rgba(0,0,0,.35),
      0 8px 26px rgba(0,0,0,.9);
  }

  .hero-with-photo .hero-intro {
    color: #eee7d9;
    max-width: 31rem;
  }

  .hero-photo-card {
    width: 100%;
    height: 54svh;
    min-height: 390px;
    padding: .75rem;
  }

  .photo-frame img {
    object-position: 58% 42%;
  }

  .photo-card-meta {
    font-size: .52rem;
  }

  .aperitivo-photo {
    min-height: 66svh;
  }

  .aperitivo-photo figcaption {
    align-items: flex-start;
    flex-direction: column;
  }

  .aperitivo-photo figcaption strong {
    text-align: left;
    font-size: clamp(2.8rem, 14vw, 4.3rem);
  }

  .cocktail-real-photo {
    min-height: 430px;
  }

  .atmosphere-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: .8rem;
  }

  .atmosphere-shot,
  .atmosphere-shot-main,
  .atmosphere-shot-wide {
    grid-column: auto;
    grid-row: auto;
    min-height: 54svh;
  }

  .atmosphere-shot:not(.atmosphere-shot-main) {
    min-height: 390px;
  }

  .atmosphere-shot figcaption {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }

  .photo-credit {
    font-size: .5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-frame img,
  .aperitivo-photo img,
  .atmosphere-shot img,
  .cocktail-real-photo img {
    transition: none;
  }
}