/* =========================================================================
 * Menu Article + Menus Index  —  greedy-cow
 * Centered, mobile-first "real menu card" layout for restaurant menu guides.
 * ====================================================================== */

.ma-main{
	background:
		radial-gradient(1100px 520px at 50% -8%, rgba(201,154,63,.10), transparent 60%),
		var(--cream);
	padding:calc(var(--header-h) - 30px) 0 clamp(48px,8vw,90px);
}

.menu-article{
	max-width:760px;
	margin:0 auto;
	padding:0 clamp(16px,5vw,28px);
	text-align:center;
	overflow-x:clip;
}
.menu-article *{max-width:100%}

/* --- head --- */
.menu-article .ma-head{padding-top:clamp(18px,5vw,40px)}
.menu-article .crumbs{
	font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.18em;
	text-transform:uppercase;color:var(--cocoa);opacity:.6;margin-bottom:14px;
}
.menu-article .crumbs a{color:inherit;text-decoration:none}
.menu-article .crumbs a:hover{color:var(--gold)}
.menu-article h1{
	font-family:var(--serif);font-weight:600;
	font-size:clamp(1.9rem,6.4vw,3rem);line-height:1.06;letter-spacing:-.015em;
	color:var(--cocoa);margin:0 auto;max-width:16ch;
}

/* --- featured image (between H1 and intro) --- */
.ma-feat{
	margin:clamp(20px,5vw,34px) auto clamp(22px,5vw,32px);
	width:100%;max-width:600px;border-radius:20px;overflow:hidden;
	box-shadow:0 24px 60px -24px rgba(28,20,16,.55);
	border:1px solid rgba(28,20,16,.08);
	background:var(--cocoa);
}
.ma-feat img{
	display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
}

/* --- intro --- */
.menu-article .ma-body{max-width:680px;margin:0 auto;text-align:center}
.menu-article .ma-intro,
.menu-article .ma-body > p:first-child{
	font-family:var(--sans);font-size:clamp(1.02rem,2.6vw,1.18rem);
	line-height:1.7;color:#4a382c;margin:0 auto clamp(28px,6vw,42px);max-width:60ch;
}

/* --- menu card (each h3 section) --- */
.mcard{
	position:relative;text-align:left;
	margin:0 auto clamp(22px,5vw,30px);
	padding:clamp(20px,5vw,34px) clamp(18px,5vw,32px) clamp(12px,4vw,22px);
	background:linear-gradient(180deg,#FBF7EE 0%,#F3EAD6 100%);
	border:1px solid rgba(201,154,63,.34);
	border-radius:18px;
	box-shadow:0 18px 44px -28px rgba(28,20,16,.5), inset 0 1px 0 rgba(255,255,255,.6);
}
.mcard::before{
	content:"";position:absolute;left:0;right:0;top:0;height:5px;
	background:linear-gradient(90deg,var(--gold),var(--gold-soft),var(--gold));
	border-radius:18px 18px 0 0;
}
.mcard h3{
	font-family:var(--serif);font-weight:600;text-align:center;
	font-size:clamp(1.35rem,4.4vw,1.7rem);line-height:1.15;letter-spacing:-.01em;
	color:var(--cocoa);margin:6px 0 4px;
}
.mcard h3::after{
	content:"";display:block;width:52px;height:2px;margin:12px auto 4px;
	background:var(--gold);opacity:.75;
}

/* --- menu table (block layout so flex rows never force horizontal overflow) --- */
.menu-table{display:block;width:100%;max-width:100%;border-collapse:collapse;margin:8px 0 4px}
.menu-table tbody{display:block;width:100%}
.menu-table tr{
	display:flex;align-items:baseline;gap:12px;width:100%;
	padding:13px 2px;border-bottom:1px dashed rgba(28,20,16,.18);
}
.menu-table tr:last-child{border-bottom:0}
.menu-table td{padding:0;border:0;background:none}
.menu-table .mi-name{
	flex:1 1 auto;min-width:0;text-align:left;font-family:var(--sans);font-weight:600;
	font-size:clamp(.98rem,2.5vw,1.06rem);color:var(--cocoa);line-height:1.35;
	overflow-wrap:anywhere;
}
.menu-table .mi-name small{display:block;font-weight:400;font-size:.86em;color:#7a6552;margin-top:2px}
.menu-table .mi-price{
	flex:0 0 auto;text-align:right;font-family:var(--sans);font-weight:700;
	font-size:clamp(.98rem,2.5vw,1.06rem);color:#a9772a;white-space:nowrap;
}

/* --- hours card --- */
.mcard--hours{
	background:linear-gradient(180deg,#241813 0%,#180f0b 100%);
	border-color:rgba(201,154,63,.4);
}
.mcard--hours h3{color:var(--cream)}
.mcard--hours .menu-table tr{border-bottom-color:rgba(246,240,228,.14)}
.mcard--hours .mi-name{color:var(--cream)}
.mcard--hours .mi-price{color:var(--gold-soft)}

/* --- back button --- */
.ma-back{text-align:center;margin-top:clamp(26px,6vw,40px)}

/* =========================================================================
 * Menus index (Blog landing)
 * ====================================================================== */
.menu-index .mi-intro{margin-bottom:clamp(30px,6vw,44px)}
.mi-grid{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
	gap:clamp(16px,3vw,24px);text-align:left;margin-top:8px;
}
.mi-card{
	display:flex;flex-direction:column;background:#FBF7EE;border-radius:16px;overflow:hidden;
	border:1px solid rgba(201,154,63,.28);text-decoration:none;color:var(--cocoa);
	box-shadow:0 14px 34px -24px rgba(28,20,16,.5);transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.mi-card:hover{transform:translateY(-5px);box-shadow:0 24px 48px -22px rgba(28,20,16,.55)}
.mi-thumb{display:block;background:var(--cocoa);aspect-ratio:16/10;overflow:hidden}
.mi-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mi-title{font-family:var(--serif);font-weight:600;font-size:1.12rem;line-height:1.25;padding:16px 16px 4px}
.mi-cta{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;color:#a9772a;padding:0 16px 18px;margin-top:auto}
.mi-empty{text-align:center;color:#6a564a;padding:40px 0}

@media(max-width:600px){
	.mi-grid{grid-template-columns:1fr 1fr;gap:12px}
	.mi-title{font-size:.98rem;padding:12px 12px 2px}
	.mi-cta{font-size:11.5px;padding:0 12px 14px}
	.menu-table tr{padding:12px 0}
}
@media(max-width:380px){
	.mi-grid{grid-template-columns:1fr}
}