/* Eatery page.
   Moved here verbatim from page 156's page CSS, which is where it lived while
   Turtle was a one-off builder page. Enqueued only on a tg_vendor single, so
   the builder pages keep using their own copies and nothing shifts under them.
   Tokens + components live in thegreen.css. */
.tg-vendor{background:var(--surface-light);}

/* Left Column is a 30px stack rather than the 28 the spotlight pages use. */
.tg-vendor-logo{margin:0 0 30px;}
.tg-vendor-logo img{width:180px;height:auto;}
.wpb-content-wrapper .tg-vendor-title{margin:0 0 30px;}
.tg-vendor-body{margin:0 0 30px;}
.tg-vendor-body p{font-size:18px;line-height:1.5;margin:0 0 18px;}
.tg-vendor-body p:last-child{margin-bottom:0;}
.wpb-content-wrapper .tg-vendor-cta{margin:0 0 30px;}
/* Opening Hours / Contact / Follow are gap=8 groups: label, then lines on a
   31px pitch. */
.wpb-content-wrapper .tg-vendor-label{margin:0 0 8px;}
.tg-vendor-lines{margin:0 0 30px;}
.tg-vendor-lines p{font-size:15px;line-height:1.5;margin:0;}
.tg-vendor-lines a{color:inherit;text-decoration:underline;}
.tg-vendor-map img{width:396px;max-width:100%;height:auto;}
/* The Image Column is 823 tall against a 1982 copy column, so it stops short
   rather than stretching — same as the file. */
.tg-vendor-media img{aspect-ratio:640/823;}

.tg-vwhatson{background:var(--olive);}
.tg-sec-head{display:flex;align-items:flex-end;}
.tg-sec-head > .wpb_column{float:none;}
.wpb-content-wrapper .tg-sec-head-l{padding:88px var(--gutter) 0;}
.wpb-content-wrapper .tg-sec-head-r{padding:88px var(--gutter) 0;display:flex;
  justify-content:flex-end;}
.tg-sec-intro{max-width:360px;}
.tg-sec-intro p{margin:0;text-align:right;}
.tg-viewall a{color:var(--cream-light);text-decoration:underline;}
.wpb-content-wrapper .tg-vwhatson-grid{padding:32px calc(var(--gutter) - 24px) 89px;}
.tg-vwhatson-grid .tg-vcard-title{min-height:22px;}

/* Gallery — Image Grid is 348 / 521 / 347 over a 348px band. */
.tg-vgallery{background:var(--surface-sage-soft);}
.wpb-content-wrapper .tg-vgallery-head{padding:88px var(--gutter) 0;}
/* The gallery band's own padding. The carousel inside it is full-width by
   design — a single photo fills the row — so without this the strip runs to
   the edge of the screen instead of stopping at the content column. Same
   numbers the three-up grid below used, because it is the same band. */
.tg-vcarousel{padding:48px var(--gutter) 88px;}

.tg-photogrid{display:flex;gap:16px;padding:48px var(--gutter) 88px;}
.tg-photogrid::before,.tg-photogrid::after{display:none;}
.tg-photogrid > .wpb_column{float:none;width:auto;}
.tg-photogrid > .tg-photo-a{flex:348 1 0;}
.tg-photogrid > .tg-photo-b{flex:521 1 0;}
.tg-photogrid > .tg-photo-c{flex:347 1 0;}
/* `.vc_single_image-wrapper` is an inline-block and shrink-wraps to the
   image's intrinsic size, so a portrait image would keep its own width. */
.tg-photogrid .wpb_single_image,
.tg-photogrid .vc_figure,
.tg-photogrid .vc_single_image-wrapper{display:block;width:100%;}
.wpb-content-wrapper .tg-photogrid img{width:100%;height:348px;object-fit:cover;}

@media (max-width:900px){
  .tg-sec-head{flex-wrap:wrap;}
  .tg-sec-head > .wpb_column{width:100% !important;}
  .wpb-content-wrapper .tg-sec-head-r{justify-content:flex-start;padding-top:16px;}
  .tg-sec-intro p{text-align:left;}
  .tg-vendor-media img{aspect-ratio:16/10;}
  .tg-vcarousel{padding:32px var(--gutter) 56px;}
  .tg-photogrid{flex-wrap:wrap;padding:32px var(--gutter) 56px;}
  .tg-photogrid > .wpb_column{flex:1 1 100%;}
  .wpb-content-wrapper .tg-photogrid img{height:240px;}
}
/* Measured against the frame.
   Turtle-Map 1 is a 396x303 box in the file holding a 1000x1000 source, so it
   is a cropped fill (Figma's default for an image fill) — not height:auto,
   which let the square run to 396 and made the column 93 too long. */
.wpb-content-wrapper .tg-vendor-map img{width:396px;height:303px;object-fit:cover;}
/* The back link takes the column's own 30px stack gap here; the shared
   component's 28 is the spotlight/event pages' value. */
.wpb-content-wrapper .tg-backlink{margin-bottom:30px;}
/* Paragraph breaks inside a body block are a blank line in the file's text
   node, so the gap is one 27px line, not 18. */
.tg-vendor-body p{margin:0 0 27px;}
.tg-vendor-body p:last-child{margin-bottom:0;}
/* The editor content can carry a subheading (Turtle's "Functions"); the frame
   sets it as body text, so it takes the body size rather than the h3 scale. */
.tg-vendor-body h2,.tg-vendor-body h3,.tg-vendor-body h4{
  font-size:18px;font-weight:700;line-height:1.5;margin:0 0 27px;}
/* OPENING HOURS / CONTACT / FOLLOW: 13px bold at lh100% is a 16px box. */
.wpb-content-wrapper .tg-vendor-label{line-height:16px;}
/* Each line in those groups is its own 23px text node on an 8px stack gap, so
   the pitch is 31. Built as one text block the lines have to carry the pitch
   as line-height; the trailing half-gap is taken back off the block so the
   group still measures the file's 140 / 109 / 78. */
.tg-vendor-lines p{line-height:31px;}
.tg-vendor-lines{margin-bottom:22px;}
/* What's On heading band. The file's Heading Row is 72 tall — the View All
   block's height, not the 67 of the title — and the slider starts 48 below it
   at y=208. */
.wpb-content-wrapper .tg-vwhatson.tg-sec-head > .wpb_column{padding-bottom:5px;}
.wpb-content-wrapper .tg-vwhatson-grid{padding-top:48px;}