/* Buffet Page Fixes - Additional styles to address layout and visual issues */

/* New styles for updated buffet page layout */
.subtitle-text {
    font-size: 1.1rem;
    color: var(--penkey-navy);
    opacity: 0.8;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}

.orange-divider {
    width: 80px;
    height: 3px;
    background-color: var(--penkey-orange);
    margin: 0 auto;
    margin-bottom: 2rem;
}

.larger-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-orange {
    background-color: var(--penkey-orange);
    color: white;
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    display: inline-block;
    text-align: center;
}

.btn-orange:hover {
    background-color: var(--penkey-navy);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Buffet package tiles */
.buffet-page .buffet-package-tile {
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.buffet-page .buffet-package-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}

.buffet-page .aspect-square {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
}

.buffet-page .aspect-square > div:first-child {
    flex-shrink: 0;
}

.buffet-page .aspect-square > div:last-child {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Modal styles */
#buffet-modal-container {
    backdrop-filter: blur(3px);
    transition: all 0.3s ease;
    z-index: 50;
}

#buffet-modal-content {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease;
    max-width: 90%;
    width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#buffet-modal-container.flex #buffet-modal-content {
    transform: scale(1);
}

/* Buffet Categories Modal (match menu modal, scoped) */
.buffet-page .categories-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1100; }
.buffet-page .categories-modal.hidden { display: none; }
.buffet-page .categories-modal-content { background: #fff; width: 92%; max-width: 720px; max-height: 90vh; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.buffet-page .categories-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e8e5e0; gap: 12px; }
.buffet-page .categories-modal-header h2 { margin: 0; line-height: 1.2; flex: 1 1 auto; color: var(--penkey-navy); }
.buffet-page .categories-modal-close { background: transparent; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--penkey-orange); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; }
.buffet-page .categories-modal-close:hover { opacity: .85; }
.buffet-page .categories-modal-close:focus-visible { outline: 2px solid rgba(255,152,0,.35); border-radius: 999px; }
.buffet-page .categories-modal-body { padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.buffet-page .categories-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.buffet-page .categories-grid a { display: block; padding: 10px 12px; border: 1px solid #e8e5e0; border-radius: 10px; color: rgba(36,50,53,.88); text-decoration: none; }
.buffet-page .categories-grid a:hover { background: var(--penkey-cream); }
@media (max-width: 560px) { .buffet-page .categories-grid { grid-template-columns: 1fr; } }

/* Fix grid layout issues */
.buffet-page .grid {
    display: grid;
}

.buffet-page .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.buffet-page .md\:grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .buffet-page .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .buffet-page .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Fix afternoon tea and cheese boards sections */
.afternoon-tea .content-card,
.cheese-boards .content-card {
    margin-bottom: 1.5rem;
    padding: 2rem;
}

.afternoon-tea .board-includes,
.cheese-boards .board-includes,
.afternoon-tea .custom-packages,
.cheese-boards .custom-packages {
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
}

.board-includes ul,
.custom-packages ul {
    margin-left: 1rem;
}

/* Fix spacing between sections */
.buffet-intro + .booking-info {
    padding-top: 0;
}

.booking-info + .buffet-packages {
    padding-top: 0;
}

.buffet-packages + .afternoon-tea {
    padding-top: 0;
}

.afternoon-tea + .cheese-boards {
    padding-top: 0;
}

.cheese-boards + .collection-info {
    padding-top: 0;
}

/* Improve section spacing and consistency */
.buffet-page section {
    padding: 3rem 0;
}

.buffet-page section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Fix gap issues */
.gap-8 {
    gap: 2rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-4 {
    gap: 1rem;
}

/* Fix padding and margin issues */
.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.p-4 {
    padding: 1rem;
}

.p-6 {
    padding: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.max-w-2xl {
    max-width: 42rem;
}

/* Enhancing alignment consistency across all sections */
.buffet-page section .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.buffet-page section {
    padding: 3rem 0;
}

.content-card {
    padding: 2.5rem;
}

@media (max-width: 767px) {
    .content-card {
        padding: 1.5rem;
    }
}

/* Fix section header styling */
.buffet-page .section-header {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    padding-bottom: 1.5rem;
}

.buffet-page .section-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--penkey-orange);
    border-radius: 3px;
}

:root {
    --penkey-navy: #2e3d42;
    --penkey-orange: #FF8C2B;
    --penkey-cream: #faf3e6;
    --penkey-light: #FFFFFF;
    --penkey-dark: #1A2323;
}

/* Buffet hero readability tweaks (scoped) */
.buffet-page .hero .hero-content h1,
.buffet-page .hero .hero-content .hero-tagline {
    text-shadow: none;
}

/* Buffet page utility polyfills for Tailwind-like classes used in markup */
/* Grid */
.buffet-page .grid { display: grid; }
.buffet-page .grid-cols-1 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .buffet-page .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.buffet-page .gap-8 { gap: 2rem; }

/* Flex */
.buffet-page .flex { display: flex; }
.buffet-page .flex-col { flex-direction: column; }
@media (min-width: 640px) {
  .buffet-page .sm\:flex-row { flex-direction: row; }
}
.buffet-page .items-center { align-items: center; }
.buffet-page .justify-center { justify-content: center; }

/* Sizing & spacing helpers */
.buffet-page .h-full { height: 100%; }
.buffet-page .h-auto { height: auto; }
.buffet-page .w-full { width: 100%; }
.buffet-page .p-0 { padding: 0 !important; }
.buffet-page .mb-4 { margin-bottom: 1rem; }
.buffet-page .pb-3 { padding-bottom: 0.75rem; }
.buffet-page .text-center { text-align: center; }
.buffet-page .inline-block { display: inline-block; }
.buffet-page .object-cover { object-fit: cover; }
.buffet-page .space-y-4 > * + * { margin-top: 1rem; }
.buffet-page .gap-4 { gap: 1rem; }

/* Borders & overflow */
.buffet-page .border-b { border-bottom: 1px solid rgba(46, 61, 66, 0.1); }
.buffet-page .border-gray-100 { border-color: rgba(46, 61, 66, 0.12) !important; }
.buffet-page .overflow-hidden { overflow: hidden; }
.buffet-page .overflow-x-auto { overflow-x: auto; }

/* Corners & shadows */
.buffet-page .rounded-lg { border-radius: 0.5rem; }
.buffet-page .shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

/* Footer CTA button outline variant (buffet only) */
.buffet-page .btn-footer.btn-outline {
  background: transparent;
  color: var(--penkey-cream);
  border: 2px solid var(--penkey-cream);
}
.buffet-page .btn-footer.btn-outline:hover {
  background: var(--penkey-cream);
  color: var(--penkey-navy);
}

/* Additional buffet-page utility polyfills used in markup */
/* Spacing (margin) */
.buffet-page .mt-0 { margin-top: 0; }
.buffet-page .mt-2 { margin-top: 0.5rem; }
.buffet-page .mt-4 { margin-top: 1rem; }
.buffet-page .mt-8 { margin-top: 2rem; }
.buffet-page .mb-2 { margin-bottom: 0.5rem; }
.buffet-page .mb-3 { margin-bottom: 0.75rem; }
.buffet-page .mb-6 { margin-bottom: 1.5rem; }
.buffet-page .mb-8 { margin-bottom: 2rem; }
.buffet-page .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.buffet-page .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.buffet-page .mx-auto { margin-left: auto; margin-right: auto; }

/* Spacing (padding) */
.buffet-page .p-4 { padding: 1rem; }
.buffet-page .p-6 { padding: 1.5rem; }
.buffet-page .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.buffet-page .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.buffet-page .p-3 { padding: 0.75rem; }

/* Text & color */
.buffet-page .text-white { color: #ffffff; }
.buffet-page .text-left { text-align: left; }
.buffet-page .text-lg { font-size: 1.125rem; line-height: 1.75rem; }

/* Background helpers */
.buffet-page .bg-white { background-color: #ffffff; }
.buffet-page .bg-penkey-orange { background-color: var(--penkey-orange); }
.buffet-page .bg-penkey-navy { background-color: var(--penkey-navy); }
.buffet-page .bg-penkey-cream { background-color: var(--penkey-cream); }

/* Lists */
.buffet-page .list-disc { list-style: disc; }
.buffet-page .pl-5 { padding-left: 1.25rem; }
.buffet-page .space-y-2 > * + * { margin-top: 0.5rem; }

/* Flex alignment */
.buffet-page .justify-between { justify-content: space-between; }
@media (min-width: 768px) {
  .buffet-page .md\:flex-row { flex-direction: row; }
  .buffet-page .md\:mt-0 { margin-top: 0; }
  .buffet-page .md\:w-2\/3 { width: 66.666667%; }
  .buffet-page .md\:w-1\/3 { width: 33.333333%; }
}

/* Width constraints */
.buffet-page .max-w-2xl { max-width: 42rem; }

/* Cursor */
.buffet-page .cursor-pointer { cursor: pointer; }

/* Rounded corners */
.buffet-page .rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }

/* Arbitrary height utility used in tiles */
.buffet-page [class*="h-[calc(100%-76px)]"] { height: calc(100% - 76px); }

/* Outline buttons within buffet content (non-footer) */
.buffet-page .btn.btn-outline {
  background: transparent;
  color: var(--penkey-navy);
  border: 2px solid var(--penkey-navy);
}
.buffet-page .btn.btn-outline:hover {
  background: var(--penkey-navy);
  color: #ffffff;
}

/* Light border utility used in tables */
.buffet-page .border-gray-200 { border-color: rgba(46, 61, 66, 0.2) !important; }

.buffet-page .section-header h2 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--penkey-navy);
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.buffet-page .section-header p {
    font-size: 1.125rem;
    color: #555;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Fix text styling (scoped) */
.buffet-page .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.buffet-page .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.buffet-page .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.buffet-page .font-bold {
    font-weight: 700;
}

.buffet-page .font-semibold {
    font-weight: 600;
}

.buffet-page .italic {
    font-style: italic;
}

/* .text-center already provided in scoped utilities above */

/* Fix list styling (scoped duplicates retained earlier) */
.buffet-page .list-none { list-style-type: none; }

/* Border, padding, rounded, shadow are already provided in scoped utilities above */

/* Flex utilities are already provided in scoped utilities above */

/* Fix table styling */
.buffet-page .board-table-container {
    margin-bottom: 1rem;
}

.buffet-page .board-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    overflow: hidden;
}

.buffet-page .board-table th,
.buffet-page .board-table td {
    padding: 0.75rem 1rem;
    text-align: left;
}

.buffet-page .board-table th {
    background-color: var(--penkey-cream);
    font-weight: 600;
    color: var(--penkey-navy);
}

.buffet-page .board-table tr {
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.buffet-page .board-table tr:hover {
    background-color: rgba(242, 242, 242, 0.5);
}

.buffet-page .board-table tr:last-child {
    border-bottom: none;
}

/* Fix specific buffet page issues */
.buffet-intro {
    padding-bottom: 0;
    background-color: var(--penkey-cream);
}

.booking-info {
    padding-top: 0;
    background-color: var(--penkey-cream);
}

.buffet-packages {
    background-color: white;
}

.buffet-packages .content-card {
    overflow: hidden;
}

.buffet-packages .grid {
    margin-top: 2rem;
}

.afternoon-tea {
    background-color: var(--penkey-cream);
}

.afternoon-tea .content-card,
.cheese-boards .content-card {
    margin-bottom: 1rem;
}

.cheese-boards {
    background-color: white;
}

.collection-info {
    background-color: var(--penkey-cream);
}

.collection-info .split-section {
    align-items: center;
}

/* Fix hero section styling */
.hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 8rem 0;
    color: white;
    text-align: center;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.hero h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
    line-height: 1.2;
}

.hero-tagline {
    font-size: 1.5rem;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
    max-width: 600px;
    margin: 0 auto;
}

.grain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/grain-texture.png');
    opacity: 0.3;
    z-index: 1;
}

@media (max-width: 767px) {
    .hero {
        padding: 6rem 0;
    }
    
    .hero h1 {
        font-size: 2.25rem;
    }
    
    .hero-tagline {
        font-size: 1.25rem;
    }
}

/* Enhance section visual separation */
.buffet-intro,
.booking-info,
.buffet-packages,
.afternoon-tea,
.cheese-boards,
.collection-info {
    position: relative;
}

/* Add subtle grain texture to cream backgrounds */
.bg-penkey-cream {
    position: relative;
}

.bg-penkey-cream::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/grain-texture.png');
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.bg-penkey-cream > * {
    position: relative;
    z-index: 1;
}

/* Fix button styling */
.btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--penkey-orange);
    border-color: var(--penkey-orange);
    color: white;
}

.btn-primary:hover {
    background-color: #e07c1a;
    border-color: #e07c1a;
}

.btn-secondary {
    background-color: var(--penkey-navy);
    border-color: var(--penkey-navy);
    color: white;
}

.btn-secondary:hover {
    background-color: #243235;
    border-color: #243235;
}

/* Fix contact buttons in booking info section */
.contact-options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .contact-options {
        flex-direction: row;
    }
}

.contact-options a.btn {
    text-align: center;
    min-width: 200px;
}

/* Fix CTA buttons in collection info section */
.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.cta-buttons .btn {
    min-width: 200px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cta-buttons .btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.cta-buttons .btn:hover::after {
    height: 100%;
}

.cta-buttons .btn-primary {
    box-shadow: 0 4px 12px rgba(242, 129, 35, 0.3);
}

.cta-buttons .btn-secondary {
    box-shadow: 0 4px 12px rgba(36, 50, 53, 0.3);
}

.inline-block {
    display: inline-block;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Fix container issues */
.buffet-page section .container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Fix image aspect ratio issues */
.split-section-image img {
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 100%;
    height: auto;
    max-height: 400px;
}

/* Enhanced content card styling */
.content-card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    padding: 2.5rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.content-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, var(--penkey-navy), var(--penkey-orange));
}

/* Improve content card on cream backgrounds */
.bg-penkey-cream .content-card {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Enhanced buffet card styling */
.buffet-card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.buffet-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

/* Ensure consistent card header styling */
.buffet-card .bg-penkey-navy,
.buffet-card .bg-penkey-orange {
    padding: 1.25rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

/* Improve card content spacing */
.buffet-card .p-6 {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Improve list styling in cards */
.buffet-card ul.list-disc {
    margin-left: 1.25rem;
    margin-bottom: 1.5rem;
}

.buffet-card ul.list-disc li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* Enhance split section styling for better layout and spacing */
.split-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

.split-section-content {
    padding: 1rem 0;
}

.split-section-image {
    margin-bottom: 1.5rem;
}

/* Buffet intro: image overlay and 50/50 layout */
.buffet-page .buffet-intro .split-section-image { position: relative; }
.buffet-page .image-overlay-box {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    background: rgba(46, 61, 66, 0.82); /* penkey navy with opacity */
    color: #fff;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

@media (min-width: 768px) {
    .split-section {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
        margin-bottom: 3rem;
    }
    
    .split-section-content,
    .split-section-image {
        flex: 1;
    }
    
    .split-section-content {
        padding: 1.5rem 0;
    }
    
    .split-section-image {
        margin-bottom: 0;
    }
    
    .split-section.image-right {
        flex-direction: row;
    }
    
    .split-section.image-left {
        flex-direction: row-reverse;
    }

    /* Force 50/50 split on buffet intro */
    .buffet-page .buffet-intro .split-section-content,
    .buffet-page .buffet-intro .split-section-image {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Improve mobile responsiveness */
@media (max-width: 767px) {
    .split-section-image {
        margin-bottom: 1.5rem;
    }
    
    .split-section-image img {
        max-height: 300px;
    }
    
    .section-header h2 {
        font-size: 1.75rem;
    }
    
    .buffet-card {
        margin-bottom: 2rem;
    }
    
    .text-xl {
        font-size: 1.1rem;
    }
    
    .text-2xl {
        font-size: 1.3rem;
    }
    
    .py-12 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .content-card {
        padding: 1.5rem;
    }
}

/* Fix Gold and Diamond buffet cards layout */
.buffet-cards {
    margin-top: 2rem;
}

/* Fix overflow issues */
.overflow-x-auto {
    overflow-x: auto;
}

/* Fix width issues */
.w-full {
    width: 100%;
}

/* =============================
   New Buffet Redesign (scoped)
   ============================= */
/* Brand tokens (scoped fallbacks) */
.buffet-page {
  --penkey-navy: #243235;
  --penkey-orange: #F28123;
  --penkey-cream: #F7F3EE;
  --penkey-sand: #FFF8F1;
}

/* Sticky subnav */
.buffet-page .subnav {
  position: sticky;
  top: var(--header-offset, 150px); /* sits below site header */
  display: flex;
  gap: 6px;
  background: #fff;
  border: 1px solid #e8e5e0;
  border-radius: 999px;
  padding: 6px;
  overflow-x: auto;
  z-index: 999;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
  margin: 18px auto;
}
.buffet-page .subnav a {
  color: rgba(36,50,53,.88);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.buffet-page .subnav a:hover { background: var(--penkey-cream); }
.buffet-page .subnav a.active { background: var(--penkey-sand); color: var(--penkey-navy); font-weight: 700; }
.buffet-page .subnav a:focus-visible { outline: 2px solid var(--penkey-orange); outline-offset: 2px; }

/* Subnav "More" chip (match menu) */
.buffet-page .subnav .subnav-more {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: rgba(36,50,53,.88);
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.buffet-page .subnav .subnav-more:hover { background: var(--penkey-cream); }
.buffet-page .subnav .subnav-more.active { background: var(--penkey-sand); color: var(--penkey-navy); font-weight: 700; }

  /* Mobile subnav tweaks */
  @media (max-width: 640px) {
    .buffet-page .subnav { top: var(--header-offset, 150px); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .buffet-page .subnav::-webkit-scrollbar { display: none; }
  }

  /* Reduce margin/padding and chip size like menu page on small screens */
  @media (max-width: 768px) {
    .buffet-page .subnav { margin: 10px auto; padding: 4px; }
    .buffet-page .subnav a { padding: 8px 12px; font-size: 0.95rem; }
  }

/* Ensure anchored sections don't hide under sticky header/subnav */
.buffet-page section[id] { scroll-margin-top: calc(var(--header-offset, 150px) + 80px); }

/* Slide-out subnav (mobile) */
@media (max-width: 899px) {
  /* Toggle button */
  .buffet-page .subnav-toggle {
    position: fixed;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 51;
    background: var(--penkey-navy);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    opacity: .72;
    transition: opacity .2s ease, transform .15s ease;
  }
  .buffet-page .subnav-toggle:focus-visible { outline: 2px solid var(--penkey-orange); outline-offset: 3px; }
  .buffet-page .subnav-toggle:hover,
  .buffet-page .subnav-toggle:active,
  .buffet-page .subnav-toggle:focus-visible,
  .buffet-page .subnav-toggle[aria-expanded="true"] { opacity: 1; }

  /* Backdrop */
  .buffet-page .subnav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
    z-index: 50;
  }

  /* Panel: repurpose .subnav as a bottom sheet */
  .buffet-page .subnav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    top: auto;
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .2s ease;
    z-index: 60;
  }
  .buffet-page .subnav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
}

/* Desktop: show sticky chips and hide toggle/backdrop */
@media (min-width: 900px) {
  .buffet-page .subnav-toggle { display: none; }
  .buffet-page .subnav-backdrop { display: none !important; }
}

/* Hero */
.buffet-page .buffet-hero {
  background: linear-gradient(180deg,#ffffff, var(--penkey-cream));
  border-radius: 22px;
  padding: 36px 20px;
  margin: 10px 0 18px;
  position: relative;
  overflow: hidden;
}
.buffet-page .buffet-hero .hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.buffet-page .buffet-hero .eyebrow { color: var(--penkey-orange); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.buffet-page .buffet-hero h1 { color: var(--penkey-navy); font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 6px 0 10px; }
.buffet-page .buffet-hero .sub { color: rgba(36,50,53,.86); font-size: 1.05rem; line-height: 1.6; }
.buffet-page .buffet-hero .cta { display:flex; gap:10px; justify-content:center; margin-top: 14px; flex-wrap: wrap; }

/* Thin divider */
.buffet-page .thin-divider { border-top: 1px dashed #e4dfd8; margin: 8px 0 14px; }

/* Section headers */
.buffet-page .section-head { text-align: center; margin: 18px 0 12px; }
.buffet-page .section-head h2 { color: var(--penkey-navy); font-size: clamp(1.4rem,2.6vw,1.9rem); margin: 0 0 6px; }
.buffet-page .section-head .section-sub { color: rgba(36,50,53,.75); font-size: .98rem; }

/* Info grid */
.buffet-page .info-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
@media (min-width: 700px) { .buffet-page .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .buffet-page .info-grid { grid-template-columns: repeat(4, 1fr); } }
.buffet-page .info-card { background:#fff; border:1px solid #eee8e1; border-radius:14px; padding:16px; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.buffet-page .info-kicker { font-size: .8rem; text-transform: uppercase; letter-spacing:.06em; color: var(--penkey-orange); font-weight: 800; margin-bottom: 6px; }
.buffet-page .info-title { color: var(--penkey-navy); font-weight: 800; margin-bottom: 4px; }
.buffet-page .info-desc { color: rgba(36,50,53,.8); }

/* Plans */
.buffet-page .plans { display:grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .buffet-page .plans { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px) { .buffet-page .plans { grid-template-columns: repeat(4,1fr); } }
.buffet-page .plan { border:1px solid #efe9e1; border-radius:16px; padding:16px; box-shadow: 0 8px 22px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:10px; }
.buffet-page .plan h3 { margin: 2px 0 4px; color: var(--penkey-navy); font-size: 1.1rem; }
.buffet-page .price { color: var(--penkey-navy); font-weight: 800; font-size: 1.35rem; }
.buffet-page .price .per { font-size: .8rem; font-weight: 600; color: rgba(36,50,53,.7); }
.buffet-page .chiprow { display:flex; gap:8px; flex-wrap: wrap; }
.buffet-page .chip { background: #fff; border:1px solid #eee4da; color: rgba(36,50,53,.9); border-radius: 999px; padding:6px 10px; font-size:.9rem; }
.buffet-page .plan-cta { margin-top: auto; padding-top: 6px; }

/* Boards and Tea CTA alignment */
.buffet-page .board { display:flex; flex-direction: column; }
.buffet-page .board-cta { margin-top: auto; padding-top: 6px; }
.buffet-page .tea > div { display:flex; flex-direction: column; }
.buffet-page .tea .plan-cta { margin-top: auto; padding-top: 6px; }

/* When any modal is open, prevent background scroll */
.buffet-page.modal-open { overflow: hidden; }

/* Tiny screens: make CTAs full-width for easier tapping */
@media (max-width: 420px) {
  .buffet-page .plan-cta .btn,
  .buffet-page .board-cta .btn,
  .buffet-page .tea .plan-cta .btn { width: 100%; }
  /* Buffet info modal primary button */
  .buffet-page #buffet-modal-content .btn { width: 100%; }
}

/* Media frames */
.buffet-page .frame { background:#fff; border:1px solid #efe8e0; border-radius:18px; overflow:hidden; box-shadow: 0 10px 26px rgba(0,0,0,.06); }
.buffet-page .frame .kv { width:100%; height: 280px; object-fit: cover; display:block; }
@media (min-width: 900px) { .buffet-page .frame .kv { height: 340px; } }

/* Buffet package modal (robust fallback, no utility classes required) */
.buffet-page #buffet-modal-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  padding: 16px;
  z-index: 9999;
}
.buffet-page #buffet-modal-container.open { display: flex; }
.buffet-page #buffet-modal-content {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow: auto;
}

/* Mosaic image grid (Boards section) */
.buffet-page .mosaic-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.buffet-page .mosaic-side { display: grid; gap: 8px; }
@media (max-width: 899px) {
  .buffet-page .mosaic-main { height: 240px; }
  .buffet-page .mosaic-side .kv { height: 200px; }
}
@media (min-width: 900px) {
  .buffet-page .mosaic-grid { grid-template-columns: 2fr 1fr; height: 340px; }
  .buffet-page .mosaic-main { height: 100%; width: 100%; object-fit: cover; display: block; }
  .buffet-page .mosaic-side { grid-template-rows: 1fr 1fr; }
  .buffet-page .mosaic-side .kv { height: 100%; width: 100%; object-fit: cover; }
}

/* Accent band */
.buffet-page .accent-band { height: 8px; background: linear-gradient(90deg, var(--penkey-orange), #ffb870); border-radius: 12px; margin: 16px 0; opacity:.9; }

/* Afternoon Tea */
.buffet-page .tea { display:grid; grid-template-columns: 1fr; gap: 12px; align-items: center; }
@media (min-width: 900px) { .buffet-page .tea { grid-template-columns: 1fr 1fr; } }
.buffet-page .tagrow { display:flex; flex-wrap: wrap; gap:8px; margin: 8px 0; }
.buffet-page .tag { border:1px dashed #e9dfd4; color: var(--penkey-navy); border-radius:10px; padding:6px 10px; font-size:.9rem; background:#fff; }
.buffet-page .meta { color: rgba(36,50,53,.75); margin-top: 6px; font-style: italic; }

/* Boards */
.buffet-page .boards { display:grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 880px) { .buffet-page .boards { grid-template-columns: repeat(3,1fr); } }
.buffet-page .board { background:#fff; border:1px solid #eee5db; border-radius:16px; padding:16px; box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.buffet-page .board h3 { margin:0 0 2px; color: var(--penkey-navy); }
.buffet-page .board .fit { color: rgba(36,50,53,.7); margin-bottom: 4px; }
.buffet-page .board .bprice { font-weight: 800; color: var(--penkey-navy); }

/* USPs */
.buffet-page .usps { display:grid; grid-template-columns: repeat(2,1fr); gap:8px; margin-top: 10px; }
@media (min-width: 900px) { .buffet-page .usps { grid-template-columns: repeat(4,1fr); } }
.buffet-page .usp { background:#fff; border:1px solid #efe6dd; border-radius:12px; padding:10px; text-align:center; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.buffet-page .usp strong { display:block; color: var(--penkey-navy); }
.buffet-page .usp span { color: rgba(36,50,53,.72); font-size:.92rem; }

/* Contact callout */
.buffet-page .callout { background: var(--penkey-navy); color: #fff; border-radius: 16px; padding: 18px; display:flex; flex-direction: column; gap: 12px; align-items: center; justify-content: space-between; }
@media (min-width: 900px) { .buffet-page .callout { flex-direction: row; } }
.buffet-page .callout .cta { display:flex; gap:10px; flex-wrap: wrap; }
@media (max-width: 420px) {
  .buffet-page .callout .cta .btn { width: 100%; }
}

/* Buttons (scoped adjustments) */
.buffet-page .btn { border-radius: 999px; padding: 10px 14px; font-weight: 800; letter-spacing: .02em; }
.buffet-page .btn-navy { background: var(--penkey-navy); color:#fff; }
.buffet-page .btn-navy:hover { filter: brightness(1.05); }
.buffet-page .btn-primary { background: var(--penkey-orange); color:#fff; }
.buffet-page .btn-primary:hover { filter: saturate(1.1) brightness(1.02); }