/* =================================
   MOBILE STYLESHEET
   =================================
   
   TABLE OF CONTENTS
   =================================
   1. Mobile Reset ............................ Line 25
   2. Mobile Navigation ....................... Line 35
   3. Mobile Layout Adjustments ............... Line 150
   4. Mobile Typography ....................... Line 180
   5. Mobile Hero Section ..................... Line 200
   6. Mobile Grid System ...................... Line 280
   7. Mobile Story Timeline ................... Line 400
   8. Mobile Wedding Party .................... Line 500
   9. Mobile Forms ............................ Line 600
   10. Tablet Adjustments ..................... Line 650
   11. Touch Device Optimizations ............. Line 700
   ================================= */

/* =================================
   1. MOBILE RESET
   ================================= */

/* Reset mobile-specific issues */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* =================================
   2. MOBILE NAVIGATION
   ================================= */

/* Mobile Navigation Toggle - Mobile-specific only */
/* Base navigation styles are in main.css */

.nav-toggle {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: var(--secondary-color);
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  position: absolute;
  width: 20px;
  height: 2px;
  background: var(--primary-color);
  transition: all 0.3s ease;
}

.nav-toggle span {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nav-toggle span::before {
  content: '';
  top: -6px;
}

.nav-toggle span::after {
  content: '';
  top: 6px;
}

/* Hamburger animation */
.nav-toggle.active span {
  background: transparent;
}

.nav-toggle.active span::before {
  transform: rotate(45deg);
  top: 0;
}

.nav-toggle.active span::after {
  transform: rotate(-45deg);
  top: 0;
}

/* =================================
   3. MOBILE LAYOUT ADJUSTMENTS
   ================================= */

@media screen and (max-width: 768px) {
  .nav-toggle {
    display: block;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    /* Use dynamic viewport height for better mobile support */
    min-height: 100vh;
    min-height: 100dvh;
    background: white;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-menu.mobile-open {
    transform: translateX(0);
  }

  .nav-menu li {
    margin: 1rem 0;
  }

  .nav-menu a {
    font-family: var(--font-family-button);
    font-size: 1.2rem;
    font-weight: 400;
    padding: 1rem 2rem;
    text-align: center;
    min-width: 200px;
    letter-spacing: var(--letter-spacing-wide);
  }

  /* 3.1 Container Adjustments */
  .container {
    padding: 0 1rem;
  }

  /* 3.2 Typography Adjustments - MOVED TO main.css media queries */

  /* 3.3 Hero Section Mobile */
  .hero-split-container {
    grid-template-columns: 1fr 1fr !important;
    min-height: 35vh !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .hero-right {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: 35vh !important;
    padding: 2rem 1rem !important;
    min-height: 35vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-left {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 35vh !important;
    height: 35vh !important;
    padding: 2rem 0.75rem;
    background: transparent !important;
    border-right: none !important;
  }

  .hero-left::after {
    content: '' !important;
    position: absolute !important;
    right: -2px !important;
    top: 0.5rem !important;
    bottom: 0.5rem !important;
    width: 2px !important;
    background-color: var(--primary-color) !important;
    z-index: 1 !important;
  }

  .hero-left .announcement-text {
    background: transparent !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
  }

  .hero-left .announcement-text::before {
    display: none !important;
    z-index: -1;
  }

  .hero-image {
    width: 100% !important;
    height: calc(35vh - 2rem) !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  /* 3.4 Main Grid Mobile */
  .main-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0 !important;
  }

  /* Counter section - full width on top, more compact */
  .countdown-item {
    grid-column: 1 !important;
    grid-row: 1 !important;
    border-bottom: 2px solid var(--primary-color) !important;
    border-right: none !important;
    padding: 1rem 1rem 0.75rem 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* NUCLEAR OVERRIDE: Remove ALL border-right from counter section */
  .grid-item:first-child,
  .countdown-item {
    border-right: none !important;
    border-right-width: 0 !important;
    border-right-style: none !important;
  }

  /* Remove the ::after pseudo-element border as well */
  .grid-item:first-child::after {
    display: none !important;
  }

  /* Location and RSVP section - create a sub-grid with spacing */
  .location-rsvp-item {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    border: none !important;
    margin-top: 0.5rem !important;
  }

  /* Location section - left side of bottom row */
  .location-rsvp-item .location-section {
    border-right: 2px solid var(--primary-color) !important;
    border-bottom: none !important;
    padding: 1.5rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* RSVP section - right side of bottom row */
  .location-rsvp-item .rsvp-section {
    padding: 1.5rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Align buttons horizontally */
  .location-rsvp-item .section-actions {
    margin-top: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Countdown timer mobile - more compact design */
  .countdown-timer {
    justify-content: space-between !important;
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 0.75rem !important;
  }

  .countdown-number-item {
    flex: 1 !important;
    min-width: auto !important;
  }

  .countdown-number {
    font-size: 2.8rem !important;
    margin-bottom: 0.1rem !important;
    line-height: 1 !important;
  }

  .countdown-label {
    font-size: 0.8rem !important;
  }

  .countdown-message {
    font-size: 1.1rem !important;
    margin-bottom: 0.75rem !important;
  }

  .rsvp-section-bottom {
    flex: 1 !important;
    text-align: center !important;
  }

  /* =================================
     7. MOBILE STORY TIMELINE
     ================================= */

  /* CRITICAL: Remove z-index from parent to allow bottom sheet to appear on top */
  .story-timeline-section {
    z-index: auto !important;
    position: relative !important;
  }

  /* Ensure story moments don't have z-index that interferes with bottom sheet */
  .story-moment {
    z-index: auto !important;
  }

  .story-moment.active {
    z-index: auto !important;
  }

  .story-moment:hover {
    z-index: auto !important;
  }

  /* Ensure illustrations don't have z-index */
  .story-illustration {
    z-index: auto !important;
  }

  /* Disable hover tooltips on mobile - only use click/tap */
  .story-moment:hover .story-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .story-illustrations-row {
    display: flex !important;
    justify-content: space-evenly !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
    padding: 0 0.5rem !important;
    margin: 0 !important;
    overflow: visible !important;
    max-width: 100% !important;
  }

  .story-moment {
    flex: 1 1 0 !important;
    text-align: center !important;
    overflow: visible !important;
    min-width: 0 !important;
    max-width: 70px !important;
  }

  .story-illustration {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 !important;
    margin: 0 auto var(--spacing-xs) auto !important;
  }

  /* Extra small screens - tighter spacing */
  @media (max-width: 400px) {
    .story-illustrations-row {
      gap: 0.3rem !important;
    }

    .story-moment {
      max-width: 58px !important;
    }
  }

  /* Make illustrations look clickable on mobile */
  .story-illustration {
    cursor: pointer !important;
  }

  /* ========================================
     STORY TOOLTIPS - HIDDEN ON MOBILE (USING BOTTOM SHEET)
     ======================================== */

  /* Hide tooltips on mobile - we use bottom sheet instead */
  .story-tooltip {
    display: none !important;
  }

  /* =================================
     8. MOBILE WEDDING PARTY
     ================================= */

  .party-showcase-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0 var(--spacing-small);
    margin: 0 auto var(--spacing-large);
    overflow: visible;
  }

  .showcase-member {
    flex: 1 !important;
    text-align: center !important;
    overflow: visible !important;
  }

  .showcase-image-placeholder {
    width: 100% !important;
    max-width: 70px !important;
    aspect-ratio: 1 !important;
    margin: 0 auto 0.5rem auto !important;
  }

  .card-title {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
  }

  .role-text {
    font-size: 0.7rem;
  }

  /* =================================
     9. MOBILE FORMS
     ================================= */

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px;
    /* Prevents zoom on iOS */
    padding: 1rem;
  }

  .btn {
    padding: 1rem 2rem;
    font-size: 1rem !important;
    min-height: 44px;
    /* Touch-friendly */
    letter-spacing: var(--letter-spacing-wide) !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Business cards mobile */
  .recommendations-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .business-card {
    padding: 1.5rem;
  }
}

/* =================================
   10. TABLET ADJUSTMENTS
   ================================= */

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .party-showcase-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .recommendations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media screen and (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    position: static;
    transform: none;
    height: auto;
    background: transparent;
    box-shadow: none;
    flex-direction: row;
    justify-content: center;
  }
}

/* Desktop overrides for showcase images */
@media screen and (min-width: 768px) {
  .showcase-image-placeholder {
    max-width: 150px !important;
  }
}

/* =================================
   11. TOUCH DEVICE OPTIMIZATIONS
   ================================= */

@media (hover: none) and (pointer: coarse) {

  .story-moment:hover .story-tooltip {
    transform: none;
  }

  .btn:hover {
    transform: none;
  }

  .nav-menu a:hover {
    transform: none;
  }
}

/* Wedding Party Showcase - Mobile overrides only */
@media (max-width: 768px) {
  .party-showcase-grid {
    justify-content: center !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }
}

.party-showcase {
  padding: 1.5rem 0 2rem 0 !important;
}

.showcase-member {
  position: relative !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Consistent avatar sizes - MOBILE */
.showcase-image-placeholder {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  min-height: 80px !important;
  border-radius: 50% !important;
  margin: 0 auto 0.5rem auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background-color: var(--accent-color) !important;
}

/* DESKTOP - Larger avatars */
@media (min-width: 768px) {
  .showcase-image-placeholder {
    width: 140px !important;
    height: 140px !important;
    min-width: 140px !important;
    min-height: 140px !important;
    border: none !important;
  }

  .showcase-image-placeholder .placeholder-text {
    font-size: 0.85rem !important;
  }

  .showcase-member .card-title {
    font-size: 1rem !important;
    margin-bottom: 0.35rem !important;
  }

  .showcase-member .role-text {
    font-size: 0.85rem !important;
  }
}

.showcase-image-placeholder .placeholder-text {
  font-size: 0.7rem !important;
  line-height: 1.1 !important;
  text-align: center !important;
  font-weight: 600 !important;
}

/* Member names and roles */
.showcase-member .card-title {
  font-size: 0.8rem !important;
  margin-bottom: 0.25rem !important;
  font-weight: 700 !important;
}

.showcase-member .role-text {
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
  color: var(--primary-color) !important;
  opacity: 0.8 !important;
}

/* REMOVE wedding party tooltips - they should NOT have tooltips */
.showcase-member::before,
.showcase-member::after {
  display: none !important;
  content: none !important;
}

.showcase-member {
  cursor: default !important;
}

/* Story illustrations - consistent sizes and smart popovers */
.story-illustrations-row {
  display: flex !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  padding: 0 0.5rem !important;
  gap: 0.5rem !important;
}

.story-moment {
  position: relative !important;
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
  max-width: 70px !important;
  min-width: 0 !important;
}

.story-illustration {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1 !important;
  margin-bottom: 0.5rem !important;
}

/* Reduce spacing in counter section */
.countdown-item .section-title {
  margin-bottom: 1rem !important;
}

.countdown-message {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.countdown-item .section-actions {
  margin-top: 0.5rem !important;
}

@media screen and (max-width: 768px) {

  /* Page title styles moved to main.css media queries */
}

.subtitle-text {
  margin-bottom: 0.75rem !important;
}

/* Fix potential doubled section dividers */
.section-divider {
  margin: 1.5rem 0 !important;
  height: 2px !important;
}

/* Ensure no doubled borders in sections */
.location-header,
.schedule-section,
.rsvp-section,
.thank-you-section {
  border-bottom: none !important;
}

/* Navigation border styles are in main.css */
/* =
================================
   12. OUR STORY PAGE - MOBILE ADJUSTMENTS
   ================================= */

@media screen and (max-width: 768px) {

  /* Make story blocks stack vertically on mobile */
  .story-block {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-medium) !important;
  }

  /* Stable cafe image size on mobile */
  .story-image-left img[src*="stable-cafe"],
  .story-image-right img[src*="stable-cafe"] {
    width: 75% !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Adjust text padding for mobile */
  .story-text-left,
  .story-text-right {
    padding: var(--spacing-small) !important;
  }

  /* Reduce story block spacing on mobile */
  .story-block {
    margin-bottom: var(--spacing-small) !important;
  }
}

/* Fix venue title being cut off on mobile */
@media screen and (max-width: 768px) {
  .location-section {
    padding: 1.5rem 1rem 2rem 1rem !important;
    overflow: visible !important;
  }

  .location-section .section-title,
  .location-section .subtitle-text {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Ensure nav toggle doesn't cover title */
  .nav-toggle {
    top: 80px !important;
    /* Align with December 20 date */
  }
}

/* Venue page - prevent title overlap with image */
@media screen and (max-width: 768px) {
  .hero-split-container {
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-left {
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
  }

  .hero-right {
    order: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    padding: var(--spacing-medium) var(--spacing-small) !important;
  }

  .venue-details-content {
    margin-top: 0 !important;
  }

  .page-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Prevent scroll jump on story moment clicks */
@media screen and (max-width: 768px) {
  .story-moment {
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  .story-illustration {
    pointer-events: none !important;
  }

  .story-illustration img {
    pointer-events: none !important;
  }
}