/* Consistency Fixes - Image Sizing, Text Alignment, Titles */

/* ============================================
   IMAGE SIZE CONSISTENCY
   ============================================ */

/* All gallery images - same aspect ratio and sizing */
.gallery-item,
.gallery-item img {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
}

.gallery-item {
    min-height: 200px;
    max-height: 400px;
}

@media (min-width: 768px) {
    .gallery-item {
        min-height: 250px;
        max-height: 500px;
    }
}

/* Experience section gallery - consistent with main gallery */
.experience .gallery-item {
    aspect-ratio: 4 / 3;
}

.experience .gallery-item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Event card images - consistent sizing */
.event-gallery-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.event-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================
   TEXT ALIGNMENT CONSISTENCY
   ============================================ */

/* All section titles - center aligned */
.section-title {
    text-align: center !important;
    width: 100%;
    display: block;
}

/* All section descriptions - center aligned */
.section-description {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Opening hours - center aligned */
.opening-hours-section,
.opening-hours-card,
.opening-hours-display {
    text-align: center;
}

/* Testimonials - left aligned text, right aligned author */
.testimonial-text {
    text-align: left;
}

.testimonial-author {
    text-align: right;
    margin-top: auto;
}

/* Contact cards - consistent alignment */
.contact-card h2,
.contact-card h3 {
    text-align: left;
}

.contact-info {
    text-align: left;
}

/* Menu items - left aligned */
.menu-item-name,
.menu-item-description {
    text-align: left;
}

.menu-item-price {
    text-align: right;
}

/* ============================================
   TITLE CONSISTENCY
   ============================================ */

/* Ensure all h2 titles use section-title class styling */
h2.section-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
}

/* Page headers - consistent */
.page-header h1,
.contact-card h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    text-align: center;
}

/* Event card titles */
.event-card h3,
.event-gallery-content h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    text-align: left;
}

/* Menu category titles */
.menu-category h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    text-align: left;
}

/* ============================================
   SPACING CONSISTENCY
   ============================================ */

/* Consistent section spacing */
section {
    padding: 3.5rem 0;
}

/* Consistent container padding */
.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Consistent card padding */
.card,
.contact-card,
.testimonial-card,
.event-card {
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .card,
    .contact-card,
    .testimonial-card,
    .event-card {
        padding: 2rem;
    }
}

/* ============================================
   MOBILE-SPECIFIC FIXES
   ============================================ */

@media (max-width: 767px) {
    /* Ensure text doesn't overflow */
    .section-title {
        word-wrap: break-word;
        hyphens: auto;
    }
    
    /* Better button spacing */
    .hero-buttons {
        width: 100%;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
    }
    
    /* Better carousel on mobile */
    .events-carousel-container {
        scroll-snap-type: x mandatory;
    }
    
    .event-gallery-card {
        scroll-snap-align: start;
    }
    
    /* Prevent text from being too small */
    body {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
    }
    
    /* Better form inputs */
    input,
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* ============================================
   ADDITIONAL MOBILE OPTIMIZATIONS
   ============================================ */

/* Improve tap targets on mobile */
@media (max-width: 767px) {
    .nav-link,
    .menu-tab,
    .filter-btn,
    .gallery-filter-btn {
        padding: 1rem;
        min-height: 48px;
    }
    
    /* Better spacing for touch */
    .menu-item {
        padding: 1rem 0;
    }
    
    /* Larger carousel buttons on mobile */
    .carousel-btn {
        width: 48px;
        height: 48px;
    }
}

/* ============================================
   PERFORMANCE - IMAGE OPTIMIZATION
   ============================================ */

/* Ensure images don't cause layout shift */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Lazy loading placeholder */
img[loading="lazy"] {
    background: hsl(var(--card) / 0.2);
    min-height: 200px;
}

/* ============================================
   ACCESSIBILITY - TEXT CONTRAST
   ============================================ */

/* Ensure sufficient contrast */
.section-description,
.menu-item-description,
.testimonial-text {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .nav,
    .footer,
    .mobile-menu-toggle,
    .carousel-controls,
    .filter-btn,
    .gallery-filter-btn {
        display: none;
    }
    
    .main {
        padding-top: 0;
    }
    
    section {
        page-break-inside: avoid;
    }
}