/* Real photography, framed to the subject. No letterboxing or duplicate backdrops. */

/* Keep focal coordinates with each photograph, including dynamically swapped images. */
img[src*="/latte"]{--photo-focus:47% 52%}
img[src*="/iced"]{--photo-focus:50% 50%}
img[src*="/espresso"]{--photo-focus:48% 59%}
img[src*="/flat-white"],img[src*="/cappuccino"]{--photo-focus:50% 50%}
img[src*="/americano"]{--photo-focus:50% 50%}
img[src*="/cold-brew"]{--photo-focus:50% 50%}
img[src*="/matcha"]{--photo-focus:51% 50%}
img[src*="/tea"]{--photo-focus:57% 55%}
img[src*="/hot-chocolate"]{--photo-focus:50% 50%}
img[src*="/croissant"]{--photo-focus:50% 50%}
img[src*="/pastry"]{--photo-focus:55% 65%}

.hero-special img{object-fit:cover;object-position:47% 52%;padding:0;border:0}

/* A shallow landscape crop loses the bottom of a glass. A near-square frame
   leaves breathing room around the drink, while the photograph fills the card. */
.drink-card-photo,.menu-card-photo{aspect-ratio:1.12;overflow:hidden}
.drink-card-photo{border:0}
.drink-card-photo img,
.menu-card-photo>img[class],
.menu-card-photo:hover>img[class]{
  display:block;width:100%;height:100%;max-width:none;max-height:none;
  padding:0;border:0;border-radius:0;object-fit:cover;
  object-position:var(--photo-focus,50% 50%);filter:none;transform:none;
  transition:transform .65s cubic-bezier(.2,.7,.2,1);
}
.drink-card:hover .drink-card-photo img,
.menu-card-photo:hover>img[class]{transform:scale(1.025)}

/* The latte is a landscape photograph. Give its cup, handle and saucer a
   landscape stage; place the caption below the photograph rather than over it. */
.menu-hero-visual{min-height:0;align-self:center;aspect-ratio:auto;width:100%;padding:0}
.menu-hero-photo{inset:auto;position:relative;width:100%;height:auto;aspect-ratio:1.17;border:0;border-radius:20px;background:#2b2119;box-shadow:none}
.menu-hero-photo img{position:absolute;inset:0;width:100%;height:100%;max-height:none;padding:0;border:0;border-radius:0;object-fit:cover;object-position:47% 48%;filter:none}
.menu-hero-photo:after{background:linear-gradient(0deg,#130e0b45,transparent 35%)}
.menu-glass-label{position:relative;inset:auto;left:auto;bottom:auto;top:auto;width:calc(100% - 36px);margin:-34px 18px 0;max-width:none}

/* The recommendation reads as one composition, with a full-height photo next
   to its copy on wide screens. Compact screens keep a generous square image. */
.finder-layout{grid-template-columns:minmax(260px,.68fr) minmax(0,1.5fr);gap:clamp(32px,4.5vw,70px)}
.finder-result{display:grid;grid-template-columns:1.08fr 1fr;align-items:stretch;min-height:0}
.finder-image{position:relative;display:block;align-self:stretch;aspect-ratio:auto;width:100%;height:auto;min-height:0;max-height:none;padding:0;overflow:hidden;border:0;background:#241b15}
.finder-image>img{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;max-width:none;max-height:none;padding:0;border:0;border-radius:0;object-fit:cover;object-position:var(--photo-focus,50% 50%)}
.finder-image:before,.finder-image:after{content:none}
.finder-result-copy{align-self:center;padding:32px 26px}
.finder-result-copy h3{font-size:clamp(27px,2.3vw,35px);line-height:1.18}
.finder-result-bottom{flex-wrap:wrap;row-gap:8px}

/* Detail photos fill their panel. The content scrolls independently on wide
   displays, so a long ingredient list does not turn the image into a sliver. */
.drink-dialog{max-width:1100px;overflow:hidden}
.drink-dialog-grid{grid-template-columns:1.22fr 1fr;min-height:0;align-items:stretch}
.drink-dialog-image{position:relative;display:block;min-height:0;height:auto;background:#241c16;padding:0;border:0;overflow:hidden}
.drink-dialog-image img{position:absolute;inset:0;width:100%;height:100%;max-height:none;padding:0;border:0;object-fit:cover;object-position:var(--photo-focus,50% 50%);filter:none}
.drink-dialog-copy{max-height:min(620px,calc(100svh - 64px));overflow:auto;overscroll-behavior:contain}

/* Match the gallery's smaller tiles to the products, without padding inside
   the photograph. The room shot spans the full height for an editorial rhythm. */
.story-gallery-grid{grid-template-columns:1.12fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.gallery-trigger{border:0}
.gallery-trigger.gallery-small{aspect-ratio:1.23}
.gallery-trigger>img,.gallery-small img{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;border-radius:0;object-fit:cover;object-position:var(--photo-focus,50% 50%);filter:none}
.gallery-trigger.gallery-tall>img{object-position:48% 50%}

/* A lightbox follows the actual photograph's proportions. Its frame itself
   becomes narrower for a portrait, rather than surrounding it with bars. */
.gallery-dialog{--gallery-ratio:1.5;width:min(1100px,calc(100vw - 32px),calc((100svh - 150px)*var(--gallery-ratio)));max-height:calc(100svh - 28px);overflow:auto}
.gallery-dialog:has(>img[src*="/latte"]){--gallery-ratio:1.4693878}
.gallery-dialog:has(>img[src*="/pastry"]){--gallery-ratio:.9592326}
.gallery-dialog>img{position:static;display:block;width:100%;height:auto;max-height:none;padding:0;border:0;object-fit:cover;background:none}
.gallery-controls{min-height:65px}

/* Each chapter photo fills the sticky canvas, including incoming layers. */
.story-process-photo{padding:0;border:0}
.story-process-photo>img{width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;object-fit:cover}
.story-process-photo>img[src*="/barista"]{object-position:50% 62%}
.story-process-photo>img[src*="/latte"]{object-position:47% 50%}
.story-process-photo>img[src*="/people"]{object-position:56% 51%}

/* Planner photographs retain a stable, nearly square frame when the drink
   changes. The copy sits below it with no artificial photo mat. */
.visit-plan-image{height:auto;aspect-ratio:1.12;padding:0;border:0;background:#251c16}
.visit-plan-image>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;padding:0;border:0;object-fit:cover;object-position:var(--photo-focus,50% 50%);filter:none}
.visit-plan-image:before,.visit-plan-image:after{content:none}
.visit-plan-image>.eyebrow{bottom:16px;left:16px;max-width:calc(100% - 32px)}

@media(max-width:1250px) and (min-width:851px){
  .finder-layout{grid-template-columns:1fr;gap:34px}
  .finder-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
  .finder-controls fieldset{margin-bottom:18px}
  .finder-help{grid-column:1/-1}
  .finder-result{grid-template-columns:1.05fr 1fr}
  .finder-image{min-height:400px}
  .finder-result-copy{padding:35px}
}
@media(max-width:1000px){
  .drink-dialog{max-width:560px;overflow:auto}
  .drink-dialog-grid{display:block;min-height:0}
  .drink-dialog-image{height:auto;aspect-ratio:1.12}
  .drink-dialog-copy{max-height:none;overflow:visible}
}
@media(max-width:850px){
  .finder-layout{grid-template-columns:1fr;gap:32px}
  .finder-result{grid-template-columns:1.08fr 1fr}
  .finder-image{min-height:340px}
  .finder-result-copy{padding:30px 25px}
  .story-gallery-grid{gap:17px}
  .visit-plan-result{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .visit-plan-image{height:auto;aspect-ratio:auto;min-height:340px}
  .visit-plan-content{align-self:center}
}
@media(max-width:640px){
  .drink-card-photo,.menu-card-photo{aspect-ratio:1.12}
  .menu-hero-visual{min-height:0;aspect-ratio:auto;align-self:stretch;margin-bottom:0}
  .menu-hero-photo{border-radius:18px}
  .menu-hero-photo img{height:100%;padding:0}
  .menu-glass-label{width:calc(100% - 28px);margin:-26px 14px 0;left:auto;bottom:auto}
  .finder-result{display:block}
  .finder-image{height:auto;aspect-ratio:1.12;min-height:0;width:100%;padding:0}
  .finder-image>img{width:100%;height:100%;max-height:none}
  .finder-result-copy{padding:28px 25px}
  .finder-result-copy h3{font-size:32px}
  .drink-dialog-image{height:auto;aspect-ratio:1.12}
  .drink-dialog-image img{padding:0;object-position:var(--photo-focus,50% 50%)}
  .story-gallery-grid{grid-template-columns:1fr;grid-template-rows:none;gap:17px}
  .gallery-trigger.gallery-tall{grid-column:auto;grid-row:auto;aspect-ratio:1.12}
  .gallery-trigger.gallery-small{grid-column:auto;grid-row:auto;aspect-ratio:1.12}
  .gallery-dialog{width:min(calc(100vw - 24px),calc((100svh - 150px)*var(--gallery-ratio)));max-height:calc(100svh - 28px)}
  .gallery-dialog>img{height:auto}
  .visit-plan-result{display:block}
  .visit-plan-image{height:auto;min-height:0;aspect-ratio:1.12}
  .visit-plan-image>img{padding:0}
}