From 87d548951ee4cdd53eb91f7cf2b4dc6386db49d5 Mon Sep 17 00:00:00 2001
From: Chad Nuttall <chadnuttall1@gmail.com>
Date: Thu, 24 Sep 2026 08:11:20 -0400
Subject: [PATCH] Align brewery tour CTA buttons on /contact

Make both tour cards flex columns and pin each CTA to the card bottom
with mt-auto, so the buttons share a baseline at md+ widths regardless
of per-card copy height. The auto margin collapses when stacked, so
mobile keeps its natural pt-5 gap with no extra blank space.

Closes #128

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 app/(pages)/contact/page.tsx | 40 +++++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/app/(pages)/contact/page.tsx b/app/(pages)/contact/page.tsx
index f832a90..0bceb90 100644
--- a/app/(pages)/contact/page.tsx
+++ b/app/(pages)/contact/page.tsx
@@ -186,7 +186,9 @@ export default function ContactPage() {
 
         <div className="mt-10 grid divide-y divide-stone overflow-hidden rounded-xl border border-stone bg-paper md:grid-cols-2 md:divide-x md:divide-y-0">
           {/* Tour only */}
-          <div className="p-6 sm:p-8">
+          {/* mt-auto pins each CTA to the card bottom so both buttons align
+              side-by-side; when stacked the auto margin collapses to pt-5. */}
+          <div className="flex flex-col p-6 sm:p-8">
             <h3 className="text-lg font-semibold tracking-tight">
               Brewery Tour
             </h3>
@@ -202,18 +204,20 @@ export default function ContactPage() {
             <p className="mt-2 text-sm font-medium text-ink">
               No beer or tasting included.
             </p>
-            <TourInquiryCta
-              tour="breweryTour"
-              ctaLocation="contact_page_tours"
-              variant="outline"
-              className="mt-5 h-11 min-h-[44px] px-6"
-            >
-              Arrange a brewery tour
-            </TourInquiryCta>
+            <div className="mt-auto pt-5">
+              <TourInquiryCta
+                tour="breweryTour"
+                ctaLocation="contact_page_tours"
+                variant="outline"
+                className="h-11 min-h-[44px] px-6"
+              >
+                Arrange a brewery tour
+              </TourInquiryCta>
+            </div>
           </div>
 
           {/* Tour + tasting */}
-          <div className="p-6 sm:p-8">
+          <div className="flex flex-col p-6 sm:p-8">
             <p className="text-xs font-semibold uppercase tracking-wider text-moss">
               Stay for a taste
             </p>
@@ -233,13 +237,15 @@ export default function ContactPage() {
             <p className="mt-2 text-sm font-medium text-ink">
               Generous beer tastings included.
             </p>
-            <TourInquiryCta
-              tour="breweryTourTasting"
-              ctaLocation="contact_page_tours"
-              className="mt-5 h-11 min-h-[44px] px-6"
-            >
-              Arrange tour + tasting
-            </TourInquiryCta>
+            <div className="mt-auto pt-5">
+              <TourInquiryCta
+                tour="breweryTourTasting"
+                ctaLocation="contact_page_tours"
+                className="h-11 min-h-[44px] px-6"
+              >
+                Arrange tour + tasting
+              </TourInquiryCta>
+            </div>
           </div>
         </div>
       </section>