/* =========================================================================
   Nashville Guru seasonal layer
   Every colour here is a custom property printed by the ng-seasonal
   mu-plugin, so the whole file re-skins itself when the season changes.
   Fallbacks match the year-round palette, so nothing breaks if the plugin
   is inactive.
   ====================================================================== */

:root {
	--ng-primary:    #008083;
	--ng-secondary:  #FF5E0E;
	--ng-dark:       #353535;
	--ng-light:      #F9F9F9;
	--ng-deep:       #000000;
	--ng-bg:         #FFFFFF;
	--ng-surface:    #FFFFFF;
	--ng-text:       #353535;
	--ng-muted:      #767676;
	--ng-on-dark:    #FFFFFF;
	--ng-on-primary: #FFFFFF;
	--ng-link:       #008083;
	--ng-focus:      #62DFE1;

	--ng-hl-bg:        #353535;
	--ng-hl-surface:   #444444;
	--ng-hl-surface-2: #555555;
	--ng-hl-accent:    #008083;
	--ng-hl-accent-2:  #FF5E0E;
	--ng-hl-ink:       #FFFFFF;
	--ng-hl-ink-muted: #BBBBBB;

	--ng-radius: 12px;
	--ng-gap:    24px;
}

/* -------------------------------------------------------------------------
   Homepage
   ---------------------------------------------------------------------- */

.ng-home { font-size: 16px; line-height: 1.5; }
.ng-home a { text-decoration: none; color: inherit; }
.ng-home a:focus-visible { outline: 3px solid var(--ng-focus); outline-offset: 2px; }
.ng-home img { display: block; max-width: 100%; height: auto; }

.ng-admin-notice {
	background: #FFF4D6;
	border: 1px solid #E0C97A;
	border-radius: var(--ng-radius);
	padding: 14px 18px;
	margin: 0 0 20px;
	font-size: 14px;
	color: #5A4A1A;
}
.ng-admin-notice ul { margin: 8px 0 8px 18px; }
.ng-admin-notice code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px; }

/* The theme puts a bullet image on every #content ul li and list-style:decimal
   with a 23px indent on every #content ol li, both at ID specificity. Our
   lists carry their own numbering, so they have to opt out at the same weight. */

#content .ng-rows,
#content .ng-list,
#content .ng-farms,
#content .ng-dining,
#content .ng-tiles,
#content .ng-jump { margin: 0; padding: 0; list-style: none; }

#content .ng-rows > li,
#content .ng-list > li,
#content .ng-farms > li,
#content .ng-dining > li {
	background-image: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

#content .ng-rows { margin: 0 0 0; }

/* Hero ------------------------------------------------------------------ */

.ng-hero {
	position: relative;
	border-radius: var(--ng-radius);
	overflow: hidden;
	background: var(--ng-dark) center / cover no-repeat;
	color: var(--ng-on-dark);
	min-height: 360px;
	display: flex;
	align-items: flex-end;
	margin: 0 0 20px;
}
.ng-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.20) 45%, rgba(0,0,0,0.70) 100%);
}
.ng-hero-inner { position: relative; z-index: 1; padding: 32px; max-width: 700px; }
.ng-hero-title {
	margin: 0;
	font-family: 'Oswald', sans-serif;
	font-size: clamp(38px, 6vw, 72px);
	font-weight: 700;
	line-height: 0.98;
	text-transform: uppercase;
	color: var(--ng-on-dark);
	text-shadow: 0 2px 20px rgba(0,0,0,0.45);
}
.ng-hero-blurb {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.55;
	text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* Jump nav -------------------------------------------------------------- */

.ng-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ng-chip {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	border-radius: 19px;
	background: var(--ng-surface);
	border: 1px solid rgba(0,0,0,0.08);
	color: var(--ng-text);
	font-size: 14px;
	font-weight: 600;
}
.ng-chip:hover { background: var(--ng-light); }
.ng-chip-season { background: var(--ng-hl-accent); border-color: var(--ng-hl-accent); color: var(--ng-hl-ink); }

/* Cards ----------------------------------------------------------------- */

.ng-card {
	background: var(--ng-surface);
	border-radius: var(--ng-radius);
	padding: 24px;
	margin: 0 0 var(--ng-gap);
}
.ng-card-head { position: relative; margin: 0 0 18px; padding-right: 110px; }
.ng-card-head h2 {
	margin: 0;
	font-family: 'Oswald', sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.05;
	text-transform: lowercase;
	color: var(--ng-text);
}
.ng-card-head h2::before {
	content: "";
	display: inline-block;
	width: 11px; height: 11px;
	margin-right: 10px;
	transform: rotate(45deg);
	background: var(--ng-secondary);
	vertical-align: 3px;
}
.ng-card-head p { margin: 6px 0 0; font-size: 14px; color: var(--ng-muted); }
.ng-more {
	position: absolute; right: 0; top: 4px;
	font-size: 14px; font-weight: 600; color: var(--ng-link);
}

.ng-prose { font-size: 16px; }
.ng-prose h2, .ng-prose h3 { font-family: 'Oswald', sans-serif; }

/* Grids and tiles ------------------------------------------------------- */

.ng-grid { display: grid; gap: 16px; }
.ng-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ng-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ng-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ng-tile { display: flex; flex-direction: column; gap: 6px; }
.ng-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	background: var(--ng-light) center / cover no-repeat;
	position: relative;
}
.ng-thumb-tall { aspect-ratio: 16 / 10; }
.ng-thumb-tag {
	position: absolute; left: 10px; bottom: 10px;
	padding: 4px 10px;
	border-radius: 12px;
	background: var(--ng-dark);
	color: var(--ng-on-dark);
	font-size: 11px; font-weight: 600;
}
.ng-tile-title { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--ng-text); }
.ng-tile-wide .ng-tile-title { font-size: 17px; }
.ng-tile-meta { font-size: 12px; color: var(--ng-muted); line-height: 1.35; }
.ng-tile:hover .ng-tile-title { color: var(--ng-link); }

/* Split: main grid plus a narrow list ----------------------------------- */

.ng-split { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
.ng-split-aside { background: var(--ng-light); border-radius: 10px; padding: 14px 16px; }

.ng-badge {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 11px;
	border-radius: 12px;
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.6px; text-transform: uppercase;
}
.ng-badge-open { background: var(--ng-primary); color: var(--ng-on-primary); }
.ng-badge-soon { background: var(--ng-secondary); color: var(--ng-on-primary); }

.ng-list { list-style: none; margin: 0; padding: 0; }
#content .ng-list > li,
.ng-list li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(0,0,0,0.07);
	font-size: 14px;
}
.ng-list li:last-child { border-bottom: 0; }
.ng-list a { font-weight: 600; color: var(--ng-text); }
.ng-list a:hover { color: var(--ng-link); }
.ng-list span { flex-shrink: 0; font-size: 12px; color: var(--ng-secondary); font-weight: 600; }

/* Event rows and date boxes --------------------------------------------- */

.ng-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ng-rows a {
	display: flex; align-items: center; gap: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--ng-light);
}
.ng-rows a:hover { background: var(--ng-surface); box-shadow: inset 0 0 0 1px var(--ng-primary); }

.ng-date {
	flex-shrink: 0;
	min-width: 56px;
	text-align: center;
	border-radius: 8px;
	padding: 6px 9px;
	background: var(--ng-surface);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07);
}
.ng-date-month { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--ng-muted); }
.ng-date-day   { display: block; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 22px; line-height: 1; color: var(--ng-text); }
.ng-date-range .ng-date-day { font-size: 18px; }

/* Multi-day runs that cross a month boundary stack two stamps. */
.ng-date-split { display: flex; flex-direction: column; gap: 3px; min-width: 62px; }
.ng-date-split .ng-date-day { font-size: 17px; }
.ng-date-sep { display: block; height: 1px; margin: 0 6px; background: var(--ng-muted); opacity: 0.45; }

.ng-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-grow: 1; }
.ng-row-title { font-family: 'Oswald', sans-serif; font-size: 19px; line-height: 1.15; color: var(--ng-text); }
.ng-row-meta { font-size: 12px; color: var(--ng-muted); }
.ng-row-cta {
	flex-shrink: 0;
	display: inline-flex; align-items: center;
	height: 34px; padding: 0 15px;
	border-radius: 17px;
	background: var(--ng-primary); color: var(--ng-on-primary);
	font-size: 13px; font-weight: 700;
}

/* Farms ----------------------------------------------------------------- */

.ng-farms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: farm; }
.ng-farm a {
	display: flex; align-items: center; gap: 14px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--ng-primary);
	color: var(--ng-on-primary);
}
.ng-farm-mid a { background: var(--ng-secondary); }
.ng-farm-far a { background: var(--ng-deep); }
.ng-farm-num {
	flex-shrink: 0;
	font-family: 'Oswald', sans-serif;
	font-size: 22px; line-height: 1;
	width: 28px; text-align: center;
	opacity: 0.75;
}
.ng-farm-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex-grow: 1; }
.ng-farm-title { font-family: 'Oswald', sans-serif; font-size: 20px; line-height: 1.15; text-transform: uppercase; }
.ng-farm-town  { font-size: 12px; opacity: 0.85; }
.ng-farm-drive { flex-shrink: 0; font-size: 13px; font-weight: 700; }

/* Seasonal highlight ---------------------------------------------------- */

.ng-highlight {
	background: var(--ng-hl-bg);
	color: var(--ng-hl-ink);
	border-radius: var(--ng-radius);
	padding: 28px;
	margin: 0 0 var(--ng-gap);
	border-top: 5px solid var(--ng-hl-accent-2);
	border-bottom: 5px solid var(--ng-hl-accent);
}
.ng-highlight h2 {
	margin: 4px 0 0;
	font-family: 'Oswald', sans-serif;
	font-size: 38px; line-height: 1;
	text-transform: uppercase;
	color: var(--ng-hl-ink);
}
.ng-highlight h3 {
	margin: 0;
	font-family: 'Oswald', sans-serif;
	font-size: 24px; line-height: 1.1;
	text-transform: uppercase;
	color: var(--ng-hl-ink);
}
.ng-highlight-eyebrow {
	margin: 0;
	font-size: 12px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase;
	color: var(--ng-hl-accent-2);
}
.ng-highlight-blurb { margin: 8px 0 0; font-size: 15px; max-width: 620px; color: var(--ng-hl-ink-muted); }
.ng-highlight-sub   { margin: 4px 0 14px; font-size: 13px; color: var(--ng-hl-ink-muted); }
.ng-rule { height: 1px; background: var(--ng-hl-accent-2); opacity: 0.32; margin: 22px 0; }

.ng-pop {
	display: flex; flex-direction: column; gap: 7px;
	padding: 12px;
	border-radius: var(--ng-radius);
	background: var(--ng-hl-surface);
	border: 1px solid var(--ng-hl-accent);
	color: var(--ng-hl-ink);
}
.ng-pop .ng-thumb { background-color: var(--ng-hl-surface-2); }
.ng-pop-title { font-family: 'Oswald', sans-serif; font-size: 19px; line-height: 1.15; }
.ng-pop-at    { font-size: 12px; color: var(--ng-hl-ink-muted); }
.ng-pop-hood  { font-size: 11px; color: var(--ng-hl-ink-muted); }

.ng-rows-dark a { background: var(--ng-hl-surface); border: 1px solid var(--ng-hl-accent); }
.ng-rows-dark a:hover { background: var(--ng-hl-surface-2); box-shadow: none; }
.ng-rows-dark .ng-date { background: var(--ng-hl-surface-2); box-shadow: none; }
.ng-rows-dark .ng-date-month { color: var(--ng-hl-ink-muted); }
.ng-rows-dark .ng-date-day   { color: var(--ng-hl-ink); }
.ng-rows-dark .ng-date-sep   { background: var(--ng-hl-ink-muted); }
.ng-rows-dark .ng-row-title  { color: var(--ng-hl-ink); }
.ng-rows-dark .ng-row-meta   { color: var(--ng-hl-ink-muted); }
.ng-rows-dark .ng-row-cta    { background: var(--ng-hl-accent-2); color: var(--ng-hl-bg); }

.ng-highlight-foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	margin-top: 24px; padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,0.18);
	font-size: 14px;
	color: var(--ng-hl-ink-muted);
}
.ng-highlight-foot a {
	flex-shrink: 0;
	display: inline-flex; align-items: center;
	height: 38px; padding: 0 18px;
	border-radius: 19px;
	background: var(--ng-hl-accent-2);
	color: var(--ng-hl-bg);
	font-size: 14px; font-weight: 800;
}

/* In-content ad blocks -------------------------------------------------- */

.ng-ad { margin: 0 0 var(--ng-gap); text-align: center; }
.ng-ad-label {
	display: block;
	margin: 0 0 6px;
	font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
	color: var(--ng-muted);
	text-align: left;
}
.ng-ad img { margin: 0 auto; border-radius: 10px; }
.ng-ad .mobile-ad { display: none; }

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.ng-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ng-split  { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.ng-card { padding: 18px 16px; }
	.ng-hero { min-height: 300px; }
	.ng-hero-inner { padding: 20px 18px; }
	.ng-card-head { padding-right: 0; }
	.ng-more { position: static; display: inline-block; margin-top: 8px; }
	.ng-grid-2, .ng-grid-3, .ng-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ng-highlight { padding: 20px 16px; }
	.ng-highlight h2 { font-size: 30px; }
	.ng-highlight-foot { flex-direction: column; align-items: flex-start; }
	.ng-rows a { flex-wrap: wrap; }
	.ng-row-cta { margin-left: 70px; }
	.ng-ad .desktop-ad { display: none; }
	.ng-ad .mobile-ad  { display: block; }
}

@media (max-width: 480px) {
	.ng-grid-2, .ng-grid-3, .ng-grid-4 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.ng-home * { animation: none !important; transition: none !important; }
}

/* =========================================================================
   Site-wide palette, opt in

   These only fire when "Apply the seasonal palette across the whole site" is
   turned on in Settings > Seasonal, which adds .ng-sitewide to the body.
   Until then the seasonal page paints itself and every other page on the site
   is left exactly as it was.

   section.standard appears 173 times across the theme with a #f0f0f0 base, so
   repainting it is a deliberate site-wide decision, not something to switch on
   while testing a single page.

   Delete this block once the colours in style.css have been migrated.
   ====================================================================== */

body.ng-sitewide                   { color: var(--ng-text); background: var(--ng-bg); }
body.ng-sitewide .universal-box    { background: var(--ng-light); }
body.ng-sitewide h1.section-header { background: var(--ng-dark); color: var(--ng-on-dark); }

/* section.standard is deliberately NOT repainted. It appears 173 times across
   the theme on a #f0f0f0 base, and turning all of it orange is a content
   decision, not a palette one. Add it here consciously if you want it. */

/* ---- Chrome: header, nav, footer ----
   Applied on the seasonal page whatever the site-wide switch says, because a
   cream page under a black nav looks unfinished. Scoped to the two body
   classes so no other page is touched until you opt in. */

body.ng-home-seasonal #header,
body.ng-sitewide #header                 { background: var(--ng-bg); }

body.ng-home-seasonal #nav,
body.ng-sitewide #nav                    { background: var(--ng-deep); }

body.ng-home-seasonal #nav a,
body.ng-sitewide #nav a                  { color: var(--ng-on-dark); }

body.ng-home-seasonal #nav a:hover,
body.ng-sitewide #nav a:hover            { background: var(--ng-primary); color: var(--ng-on-primary); }

body.ng-home-seasonal #nav ul li.current_page_item a,
body.ng-home-seasonal #nav ul li.current-page-ancestor a,
body.ng-sitewide #nav ul li.current_page_item a,
body.ng-sitewide #nav ul li.current-page-ancestor a { color: var(--ng-secondary); background: transparent; }

body.ng-home-seasonal #footer,
body.ng-sitewide #footer                 { background: var(--ng-dark); color: var(--ng-on-dark); }

body.ng-home-seasonal #newsletter-link a:link,
body.ng-home-seasonal #newsletter-link a:visited,
body.ng-sitewide #newsletter-link a:link,
body.ng-sitewide #newsletter-link a:visited { background: var(--ng-secondary); color: var(--ng-on-primary); }

body.ng-home-seasonal #sidebar #advertise,
body.ng-sitewide #sidebar #advertise     { background: var(--ng-primary); color: var(--ng-on-primary); }

/* The theme's own .fall modifiers, re-pointed at the tokens. Inert unless an
   element actually carries the class, so these are safe at any time. */
html.fall               { color: var(--ng-text); background: var(--ng-bg); }
#header.fall            { background: var(--ng-bg); }
#nav.fall               { background: var(--ng-deep); }
h1.section-header.fall  { background: var(--ng-dark); color: var(--ng-on-dark); }
section.standard.fall   { background: var(--ng-secondary); color: var(--ng-on-primary); }
.universal-box.fall     { background: var(--ng-light); }
#content.fall           { margin: 20px 0; }

/* The seasonal page's own background, regardless of the switch above. */
body.ng-home-seasonal { background: var(--ng-bg); color: var(--ng-text); }

/* Featured guides ------------------------------------------------------- */

.ng-guide { display: flex; flex-direction: column; gap: 7px; }
.ng-guide .ng-thumb { aspect-ratio: 3 / 2; }
.ng-guide-title {
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
	line-height: 1.15;
	color: var(--ng-text);
}
.ng-guide-blurb { font-size: 13px; line-height: 1.45; color: var(--ng-muted); }
.ng-guide:hover .ng-guide-title { color: var(--ng-link); }

/* Instagram band -------------------------------------------------------- */

.ng-ig {
	background: var(--ng-dark);
	color: var(--ng-on-dark);
	border-radius: var(--ng-radius);
	overflow: hidden;
	margin: 0 0 var(--ng-gap);
}
.ng-ig-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 28px;
}
.ng-ig-eyebrow {
	margin: 0;
	font-size: 12px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase;
	color: var(--ng-secondary);
}
.ng-ig-handle {
	margin: 4px 0 0;
	font-family: 'Oswald', sans-serif;
	font-size: 40px; font-weight: 700; line-height: 1;
	color: var(--ng-on-dark);
}
.ng-ig-blurb { margin: 8px 0 0; font-size: 15px; color: var(--ng-on-dark); opacity: 0.75; }
.ng-ig-cta {
	flex-shrink: 0;
	display: inline-flex; align-items: center; gap: 9px;
	height: 46px; padding: 0 22px;
	border-radius: 23px;
	background: var(--ng-secondary);
	color: var(--ng-on-primary);
	font-size: 15px; font-weight: 800;
}
.ng-ig-cta:hover { background: var(--ng-primary); }
.ng-ig-cta svg { flex-shrink: 0; }

/* The feed is the Instagram Feed plugin's own markup. It ships in masonry
   mode, which positions each item absolutely and sizes it from the image, so
   items escape any grid laid over them. These rules take the items out of
   masonry and put them in a plain square grid.

   Setting the feed itself to Grid layout, 6 columns, 0 padding in the plugin's
   settings makes most of this unnecessary, and is worth doing: the plugin also
   ignores the shortcode's num and cols in v6, so the post count comes from
   there too. */
.ng-ig-grid { line-height: 0; }
.ng-ig-grid #sb_instagram,
.ng-ig-grid .sb_instagram_header {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}
.ng-ig-grid #sb_instagram #sbi_images {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 3px !important;
	padding: 0 !important;
	width: 100% !important;
	height: auto !important;
}
.ng-ig-grid #sb_instagram .sbi_item {
	position: static !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	/* flex-basis 0 so four posts fill the band as well as six do. */
	flex: 1 1 0 !important;
	min-width: 0;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.ng-ig-grid #sb_instagram .sbi_inner_wrap {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}
.ng-ig-grid #sb_instagram .sbi_photo_wrap {
	width: 100% !important;
	height: 100% !important;
}
.ng-ig-grid #sb_instagram .sbi_photo {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	background-size: cover !important;
	background-position: center !important;
}
.ng-ig-grid #sb_instagram .sbi_photo img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}
.ng-ig-grid #sb_instagram .sbi_loader,
.ng-ig-grid #sb_instagram #sbi_load,
.ng-ig-grid #sb_instagram .sbi_hover_top,
.ng-ig-grid #sb_instagram .sbi_hover_bottom { display: none !important; }

/* Fallback tiles used in the mockup and when the plugin is absent. */
.ng-ig-grid-static {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 3px;
}
.ng-ig-tile {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--ng-light) center / cover no-repeat;
	position: relative;
}
.ng-ig-tile::after {
	content: "";
	position: absolute; inset: 0;
	background: var(--ng-dark);
	opacity: 0;
	transition: opacity 0.15s;
}
.ng-ig-tile:hover::after { opacity: 0.25; }

@media (max-width: 767px) {
	.ng-ig-head { flex-direction: column; align-items: flex-start; padding: 20px 18px; }
	.ng-ig-handle { font-size: 32px; }
	.ng-ig-grid #sb_instagram #sbi_images { flex-wrap: wrap !important; }
	.ng-ig-grid #sb_instagram .sbi_item { flex: 0 0 calc(33.333% - 2px) !important; }
	.ng-ig-grid-static { grid-template-columns: repeat(3, 1fr); }
}

/* Two-up cards and compact event rows ----------------------------------- */

.ng-two-up {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}
/* Both cards occupy the same box whatever their row count, with the footer
   link pinned to the bottom so the shorter one does not look unfinished. */
.ng-two-up .ng-card {
	margin: 0 0 var(--ng-gap);
	display: flex;
	flex-direction: column;
	height: 100%;
}
.ng-two-up .ng-card-head { padding-right: 0; }
.ng-two-up .ng-card-head h2 { font-size: 24px; }

.ng-rows-compact a { padding: 9px 12px; gap: 12px; }
.ng-rows-compact .ng-row-title { font-size: 17px; }

/* A word-based stamp, for the hand-picked weekly slots that say "Fri" or
   "Thu-Sun" rather than carrying a real date. */
.ng-date-word {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 62px;
	/* Matches the height of the month-and-day stamp in the next column so the
	   two cards' rows line up exactly. */
	min-height: 50px;
	padding: 0 12px;
	border-radius: 8px;
	background: var(--ng-surface);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07);
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--ng-text);
}

.ng-foot-link {
	display: inline-block;
	margin-top: auto;
	padding-top: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ng-link);
}

@media (max-width: 767px) {
	.ng-two-up { grid-template-columns: 1fr; gap: 0; }
}

/* Holiday tiles --------------------------------------------------------- */

.ng-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin: 0 0 var(--ng-gap);
}
.ng-tile-day {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	min-height: 96px;
	padding: 14px;
	border-radius: 10px;
	background: var(--ng-dark) center / cover no-repeat;
	color: var(--ng-on-dark);
	overflow: hidden;
}
/* Only darken when there is an image behind the text. */
.ng-tile-day[style*="background-image"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.65));
}
.ng-tile-day > * { position: relative; }
.ng-tile-day-date {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ng-secondary);
}
.ng-tile-day-name {
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
	line-height: 1.1;
	text-transform: uppercase;
}
a.ng-tile-day:hover { background-color: var(--ng-deep); }

@media (max-width: 767px) {
	.ng-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ng-tile-day { min-height: 80px; padding: 12px; }
	.ng-tile-day-name { font-size: 17px; }
}

/* Compact rows read better with the date on one line. Same pill as the
   word stamp beside it, so both columns match. */
/* Every stamp is the same width, so the titles beside them line up down the
   column and across both cards. A multi-day run shrinks to fit rather than
   widening the stamp and knocking the row out of alignment. */
.ng-rows-compact .ng-date,
.ng-rows-compact .ng-date-word {
	flex: 0 0 104px;
	width: 104px;
	min-width: 0;
	box-sizing: border-box;
	padding: 0 8px;
	overflow: hidden;
}
.ng-rows-compact .ng-date {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 5px;
	min-height: 50px;
}
.ng-rows-compact .ng-date-month { display: inline; font-size: 11px; letter-spacing: 1px; }
.ng-rows-compact .ng-date-day   { display: inline; font-size: 18px; }

.ng-rows-compact .ng-date-split { flex-direction: row; gap: 3px; }
.ng-rows-compact .ng-date-split .ng-date-part { display: inline-flex; align-items: baseline; gap: 3px; }
.ng-rows-compact .ng-date-split .ng-date-month { font-size: 10px; letter-spacing: 0.4px; }
.ng-rows-compact .ng-date-split .ng-date-day   { font-size: 15px; }

/* In the stacked stamp the separator is a rule; inline it has to read as a
   dash or the two dates run together as "OCT 3 OCT 25". */
.ng-rows-compact .ng-date-sep {
	width: auto;
	height: auto;
	margin: 0;
	background: none;
	opacity: 1;
	align-self: baseline;
}
.ng-rows-compact .ng-date-sep::before {
	content: "\2013";
	font-size: 12px;
	color: var(--ng-muted);
}

/* Farm map -------------------------------------------------------------- */

.ng-map-wrap { margin: 0 0 18px; }
.ng-map-filters,
.ng-dining-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}
.ng-map-filters .ng-chip,
.ng-dining-filters .ng-chip {
	border: 1px solid rgba(0,0,0,0.12);
	background: var(--ng-light);
	cursor: pointer;
	font-family: inherit;
	height: 34px;
	padding: 0 14px;
	border-radius: 17px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ng-text);
}
.ng-map-filters .ng-chip.is-on,
.ng-dining-filters .ng-chip.is-on {
	background: var(--ng-primary);
	border-color: var(--ng-primary);
	color: var(--ng-on-primary);
}

.ng-map {
	height: 380px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--ng-light);
}
.ng-map .leaflet-container { font: inherit; }

/* Numbered pins, coloured like the list rows. */
.ng-pin-wrap { background: none; border: 0; }
.ng-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ng-primary);
	color: var(--ng-on-primary);
	border: 2px solid var(--ng-surface);
	box-shadow: 0 1px 4px rgba(0,0,0,0.35);
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
}

.ng-farm[hidden] { display: none; }

/* Holiday dining -------------------------------------------------------- */

.ng-dining {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	counter-reset: dining;
}
#content .ng-dining-row,
.ng-dining-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--ng-light);
}
.ng-dining-row[hidden] { display: none; }
.ng-dining-num {
	flex-shrink: 0;
	width: 26px;
	text-align: center;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	color: var(--ng-muted);
}
.ng-dining-thumb {
	flex-shrink: 0;
	width: 64px;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
}
.ng-dining-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex-grow: 1;
}
.ng-dining-title {
	font-family: 'Oswald', sans-serif;
	font-size: 19px;
	line-height: 1.15;
	color: var(--ng-text);
}
.ng-dining-title:hover { color: var(--ng-link); }
.ng-dining-meta { font-size: 12px; color: var(--ng-muted); }
.ng-dining-tag {
	flex-shrink: 0;
	padding: 4px 10px;
	border-radius: 12px;
	background: var(--ng-surface);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--ng-text);
}

@media (max-width: 767px) {
	.ng-map { height: 300px; }
	.ng-dining-thumb { display: none; }
	.ng-dining-row { flex-wrap: wrap; }
}