/* Framing for Fırın Villa's real photos. Full-frame editorial images keep their natural ratio. */
img[data-photo]{object-position:var(--photo-focus,50% 50%)}
.values-image img[data-photo],.social-postage img[data-photo]{height:auto;aspect-ratio:auto;object-fit:contain}
.story-hero-art .editorial-picture img[data-photo="borek-hero"]{object-position:50% 64%}
.gallery-item--wide img[data-photo="kahvalti-genis"]{object-position:50% 48%}
.place-hero-detail img[data-photo="kahvalti-detay"]{object-position:20% 75%}
.gallery-dialog img[data-photo]{object-position:center}
@media(min-width:1101px) and (min-height:651px){.values-image{max-width:min(100%,max(260px,calc((100svh - var(--header) - 300px)*1.497)))} }

/* Whole breakfast spreads keep their full frame, including during hover. */
.flavour-chapter .chapter-picture.chapter-picture--full{height:auto;border-radius:2px;overflow:visible}
.chapter-picture--full img,.brand-note-picture--full img{display:block;width:100%;height:auto;object-fit:contain;transform:none}
.chapter-picture--full:hover img{transform:none}
.chapter-picture--full .chapter-sticker{position:static;display:block;width:fit-content;margin-top:18px;transform:none}
.brand-note-picture--full{height:auto;border-radius:2px}
.gallery-item--full{grid-row:span 2;display:flex;flex-direction:column;background:#fff}
.gallery-item--full img{height:0;min-height:0;flex:1;object-fit:contain;object-position:center;transform:none}
.gallery-item--full:hover img{transform:none}
.gallery-item--full::after{display:none}
.gallery-item--full>span{position:static;flex-shrink:0;padding:14px 18px;color:var(--ink)}
.gallery-item--full i{border-color:var(--line)}
.social-postage--portrait{width:min(100%,var(--social-photo-width),280px)}
@media(max-width:1100px){.gallery-item--full{grid-row:span 1}}
@media(max-width:850px){.brand-note--full{display:flex;flex-direction:column;align-items:stretch;gap:32px}.brand-note--full .brand-note-art{padding:0 20px 36px 0}}

/* The introduction uses a genuine 5/7 split rather than a small image in a wide column. */
.story-intro{align-items:center;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,88px);width:calc(100% - 2 * var(--gutter));max-width:1664px;margin-left:auto;margin-right:auto;padding-top:90px;padding-bottom:100px}
.story-intro-art{min-width:0}
.story-intro-art>.eyebrow{font-size:10px;letter-spacing:1.7px;line-height:1.5;color:var(--muted);margin:0 0 22px;padding:0}
.intro-cake{width:100%;max-width:none;aspect-ratio:9/10;overflow:hidden;border-radius:2px}
.intro-cake img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover) and (pointer:fine){.intro-cake:hover img{transform:scale(1.025)}}
@media(max-width:850px){.story-intro{display:flex;flex-direction:column;align-items:stretch;gap:35px;padding-top:55px;padding-bottom:70px}.story-intro h2{font-size:clamp(43px,6.5vw,60px)}.intro-cake{max-width:none}}
@media(max-width:600px){.story-intro{padding-top:40px;padding-bottom:55px;gap:30px}.story-intro-art{margin-bottom:0}.story-intro-art>.eyebrow{font-size:9px}}
@media(prefers-reduced-motion:reduce){.intro-cake img{transition:none}.intro-cake:hover img{transform:none}}

/* Wide product frames previously magnified portrait originals excessively. */
.flavour-picture{height:auto;aspect-ratio:3/2}
.flavours .section-heading,.flavours .flavour-layout,.flavours .flavours-bottom{max-width:1664px;margin-left:auto;margin-right:auto}
.flavour-chapter .chapter-picture:not(.chapter-picture--full){height:auto;aspect-ratio:4/3}
.flavour-chapter[data-chapter="pastane"] .chapter-picture--product,.flavour-chapter[data-chapter="burger"] .chapter-picture--product{border-radius:3px;aspect-ratio:1}
.flavour-chapter[data-chapter="firindan"] .chapter-picture{aspect-ratio:3/2}
.root-preview{height:172px;width:230px;top:19px}
.root-row{min-height:210px}

/* Trim the stray item at the lower left of the values photograph in the frame only. */
.values-image{position:relative;overflow:hidden;aspect-ratio:1440/962}
.values-image img[data-photo="firindan-sunum"]{position:absolute;left:-2%;top:-2%;width:104%;height:106%;max-width:none;object-fit:cover}

/* Keep the whole table and the gallery's shared overlay and movement. */
.place-gallery{container-type:inline-size}
.gallery-grid{--gallery-table-ratio:1.497175141;--gallery-gap:25px;--gallery-column:calc((100cqw - 2 * var(--gallery-gap)) / 3);grid-auto-rows:calc(((2 * var(--gallery-column) + var(--gallery-gap)) / var(--gallery-table-ratio) - var(--gallery-gap)) / 2)}
.gallery-grid .gallery-item--full{display:block;grid-row:span 2;background:var(--brown)}
.gallery-grid .gallery-item--full img{display:block;width:100%;height:100%;object-fit:contain;transform:none}
.gallery-grid .gallery-item--full::after{display:block}
.gallery-grid .gallery-item--full>span{position:absolute;left:25px;right:25px;bottom:22px;padding:0;color:#fff}
.gallery-grid .gallery-item--full i{border-color:#ffffff77}
.gallery-item{transition:transform .65s cubic-bezier(.2,.7,.2,1),box-shadow .65s}
.gallery-grid .gallery-item:focus-visible{transform:translateY(-5px);box-shadow:0 12px 26px #35271f1a}
.gallery-item:focus-visible i{transform:rotate(90deg);background:#fff;color:var(--brown)}
@media(hover:hover) and (pointer:fine){.gallery-grid .gallery-item:hover{transform:translateY(-5px);box-shadow:0 12px 26px #35271f1a}}
@media(min-width:1800px){.root-preview{width:280px;height:187px;top:22px}.root-row{min-height:230px}}
@media(max-width:1100px){.gallery-grid{--gallery-gap:20px}.root-preview{width:195px;height:146px;top:17px}.root-row{min-height:180px}}
@media(max-width:850px){.gallery-grid{grid-auto-rows:auto}.gallery-item{height:270px}.gallery-item--tall{height:auto;grid-row:span 2}.gallery-grid .gallery-item--full{grid-column:span 2;grid-row:span 1;height:auto;aspect-ratio:var(--gallery-table-ratio)}.gallery-item:last-child{grid-column:span 2;height:360px}.root-preview{width:160px;height:120px;top:17px}.root-row{min-height:155px}}
@media(max-width:600px){.flavour-picture{height:auto;aspect-ratio:3/2}.flavour-chapter .chapter-picture:not(.chapter-picture--full){height:auto;aspect-ratio:4/3}.gallery-item{height:230px}.gallery-item--tall{height:280px;grid-row:span 1}.gallery-item:last-child{height:280px}.gallery-grid .gallery-item--full>span{left:14px;right:14px;bottom:14px}.root-row{min-height:0}.root-preview{position:static;top:auto;width:100%;height:180px}}
@media(prefers-reduced-motion:reduce){.gallery-item{transition:none}.gallery-grid .gallery-item:hover,.gallery-grid .gallery-item:focus-visible{transform:none;box-shadow:none}}

/* This lower cake fits the hover preview without clipping its decoration. */
.root-preview[data-photo="pasta-cafe"]{aspect-ratio:4/3;height:auto}
@media(min-width:1800px){.root-preview[data-photo="pasta-cafe"]{top:10px}}
.gallery-grid .gallery-item--full:focus-visible img{transform:scale(1.05)}
@media(hover:hover) and (pointer:fine){.gallery-grid .gallery-item--full:hover img{transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.gallery-grid .gallery-item--full:hover img,.gallery-grid .gallery-item--full:focus-visible img{transform:none}}

/* SVG artwork and circle share one centre on both axes, regardless of the font. */
.gallery-item i,.pair-plus{display:grid;place-items:center;flex:0 0 auto;padding:0;font-size:0;line-height:0;letter-spacing:0}
.gallery-item i svg,.pair-plus svg{display:block;grid-area:1 / 1;width:20px;height:20px;overflow:visible}
.pair-plus svg{width:24px;height:24px}

/* The home selection keeps one stable frame tall enough for a whole decorated cake. */
.flavours .flavour-picture{aspect-ratio:4/3}