/* Starphir Handyman Services - Main Stylesheet */

@import url('handyman-variables.css');

/* ===================
   BASE STYLES
   =================== */
.handyman-page {
  font-family: var(--handyman-font-body);
  font-size: var(--handyman-font-size-body);
  line-height: 1.6;
  color: var(--handyman-text);
  min-height: 100vh;
  position: relative;
}

/* Fixed background gradient */
.handyman-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: var(--handyman-gradient-main);
}

/* ===================
   HEADER SECTION
   =================== */
.handyman-header {
  position: relative;
  padding: var(--handyman-spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Logo - Clickable to return to main site */
.handyman-logo {
  width: 280px;
  height: auto;
  cursor: pointer;
  transition: transform var(--handyman-transition-fast),
              filter var(--handyman-transition-fast);
}

.handyman-logo:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

/* Tools Icon - Decorative */
.handyman-tools-icon {
  position: absolute;
  top: 20px;
  right: 50%;
  transform: translateX(50%);
  width: 180px;
  height: auto;
  opacity: 0.4;
  pointer-events: none;
}

/* ===================
   HOME PAGE TITLE SECTION
   =================== */
.handyman-hero {
  text-align: center;
  padding: var(--handyman-spacing-xl) var(--handyman-spacing-lg);
  margin-top: -60px;
}

.handyman-title {
  font-family: var(--handyman-font-title);
  font-size: var(--handyman-font-size-title);
  color: var(--handyman-text-light);
  letter-spacing: 3px;
  margin-bottom: var(--handyman-spacing-md);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.handyman-tagline {
  font-family: var(--handyman-font-body);
  font-size: var(--handyman-font-size-body);
  color: var(--handyman-text);
  max-width: 700px;
  margin: 0 auto var(--handyman-spacing-xl);
  line-height: 1.8;
  letter-spacing: 1px;
}

/* ===================
   HOME PAGE NAVIGATION GRID
   =================== */
.handyman-home-nav {
  display: flex;
  justify-content: center;
  gap: var(--handyman-spacing-2xl);
  padding: var(--handyman-spacing-lg);
  max-width: 900px;
  margin: 0 auto;
}

.handyman-nav-column {
  display: flex;
  flex-direction: column;
  gap: var(--handyman-spacing-sm);
}

.handyman-nav-link {
  font-family: var(--handyman-font-body);
  font-size: var(--handyman-font-size-nav);
  color: var(--handyman-text);
  text-decoration: none;
  padding: var(--handyman-spacing-xs) var(--handyman-spacing-sm);
  letter-spacing: 2px;
  transition: all var(--handyman-transition-fast);
  border-left: 3px solid transparent;
}

.handyman-nav-link:hover {
  color: var(--handyman-nav-active);
  border-left-color: var(--handyman-accent);
  padding-left: var(--handyman-spacing-md);
  text-shadow: 0 0 10px rgba(255, 179, 71, 0.5);
}

.handyman-nav-link.active {
  color: var(--handyman-nav-active);
  border-left-color: var(--handyman-accent);
}

/* ===================
   INTERIOR PAGE LAYOUT
   =================== */
.handyman-interior {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--handyman-spacing-lg);
  padding: var(--handyman-spacing-lg);
  min-height: calc(100vh - 200px);
}

/* Sidebar Navigation */
.handyman-sidebar {
  position: sticky;
  top: var(--handyman-spacing-lg);
  height: fit-content;
}

.handyman-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--handyman-spacing-xs);
  padding: var(--handyman-spacing-md);
  background: var(--handyman-nav-bg);
  border-radius: 8px;
  box-shadow: var(--handyman-shadow-medium);
  align-items: flex-start;  /* Plan 10: Left-align nav items */
}

.handyman-sidebar-link {
  font-family: var(--handyman-font-body);
  font-size: var(--handyman-font-size-nav);
  color: var(--handyman-text);
  text-decoration: none;
  padding: var(--handyman-spacing-xs) var(--handyman-spacing-sm);
  letter-spacing: 1.5px;
  transition: all var(--handyman-transition-fast);
  border-radius: 4px;
  text-align: left;  /* Plan 10: Left-align text */
  width: 100%;       /* Plan 10: Full width for alignment */
}

.handyman-sidebar-link:hover {
  color: var(--handyman-nav-active);
  background: rgba(210, 105, 30, 0.2);
}

.handyman-sidebar-link.active {
  color: var(--handyman-nav-active);
  background: rgba(210, 105, 30, 0.3);
  font-weight: bold;
}

/* Contact and Estimates button - white text on all pages */
.handyman-nav-link[href="handyman-contact.html"],
.handyman-sidebar-link[href="handyman-contact.html"] {
  color: var(--handyman-text-light);  /* White */
}

.handyman-nav-link[href="handyman-contact.html"]:hover,
.handyman-sidebar-link[href="handyman-contact.html"]:hover {
  color: var(--handyman-text-light);  /* Stay white on hover */
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

/* Main Content Area */
.handyman-content {
  padding: var(--handyman-spacing-md);
}

.handyman-page-title {
  font-family: var(--handyman-font-body);
  font-size: var(--handyman-font-size-h2);
  color: var(--handyman-text-light);
  margin-bottom: var(--handyman-spacing-md);
  letter-spacing: 2px;
  text-align: center;  /* Plan 10: Centered */
}

.handyman-description {
  font-size: var(--handyman-font-size-body);
  color: var(--handyman-text);
  line-height: 1.8;
  letter-spacing: 1px;
  max-width: 600px;
  margin-bottom: var(--handyman-spacing-xl);
  text-align: center;  /* Plan 10: Centered (was justify) */
  margin-left: auto;   /* Plan 10: Center the block */
  margin-right: auto;
}

/* ===================
   IMAGE SLIDESHOW
   =================== */
.handyman-slideshow {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 400px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--handyman-shadow-medium);
  background: var(--handyman-bg-dark);
  margin-left: auto;   /* Plan 10: Center slideshow */
  margin-right: auto;
}

.handyman-slideshow-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.handyman-slideshow-image.active {
  animation: handymanFadeInOut var(--handyman-fade-total) ease-in-out;
}

@keyframes handymanFadeInOut {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Single image (no cycling) */
.handyman-slideshow-image.static {
  opacity: 1;
  animation: none;
}

/* ===================
   CONTACT PAGE FORM
   =================== */
.handyman-contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--handyman-spacing-xl);
}

.handyman-contact-info {
  padding: var(--handyman-spacing-md);
}

.handyman-contact-info h3 {
  font-size: var(--handyman-font-size-h3);
  color: var(--handyman-text-light);
  margin-bottom: var(--handyman-spacing-md);
}

.handyman-contact-info p {
  margin-bottom: var(--handyman-spacing-xs);
  letter-spacing: 1px;
}

.handyman-contact-info a {
  color: var(--handyman-accent-light);
  text-decoration: none;
}

.handyman-contact-info a:hover {
  text-decoration: underline;
}

.handyman-form {
  display: flex;
  flex-direction: column;
  gap: var(--handyman-spacing-sm);
}

.handyman-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--handyman-spacing-xs);
}

.handyman-form-label {
  font-family: var(--handyman-font-title);
  font-size: var(--handyman-font-size-body);
  color: var(--handyman-text-light);
  letter-spacing: 1px;
}

.handyman-form-input,
.handyman-form-textarea {
  padding: var(--handyman-spacing-sm);
  font-family: var(--handyman-font-body);
  font-size: var(--handyman-font-size-body);
  color: var(--handyman-text-light);
  background: rgba(74, 55, 40, 0.6);
  border: 2px solid var(--handyman-secondary);
  border-radius: 4px;
  transition: all var(--handyman-transition-fast);
}

.handyman-form-input:focus,
.handyman-form-textarea:focus {
  outline: none;
  border-color: var(--handyman-accent);
  box-shadow: 0 0 10px rgba(210, 105, 30, 0.3);
}

.handyman-form-textarea {
  min-height: 150px;
  resize: vertical;
}

.handyman-form-submit {
  padding: var(--handyman-spacing-sm) var(--handyman-spacing-lg);
  font-family: var(--handyman-font-body);
  font-size: var(--handyman-font-size-nav);
  color: var(--handyman-text-light);
  background: var(--handyman-accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all var(--handyman-transition-fast);
  align-self: flex-start;
}

.handyman-form-submit:hover {
  background: var(--handyman-accent-light);
  box-shadow: var(--handyman-shadow-glow);
  transform: translateY(-2px);
}

/* ===================
   FOOTER
   =================== */
.handyman-footer {
  padding: var(--handyman-spacing-lg);
  text-align: center;
  background: var(--handyman-bg-dark);
  margin-top: var(--handyman-spacing-xl);
}

.handyman-footer-text {
  font-size: var(--handyman-font-size-small);
  color: var(--handyman-text-muted);
  letter-spacing: 1px;
}

.handyman-footer-link {
  color: var(--handyman-accent-light);
  text-decoration: none;
}

.handyman-footer-link:hover {
  text-decoration: underline;
}

/* Local Presence Text - same font as nav buttons */
.handyman-local-presence {
  font-family: var(--handyman-font-body);
  font-size: var(--handyman-font-size-nav);
  color: var(--handyman-text);
  letter-spacing: 1.5px;
  margin-top: var(--handyman-spacing-sm);
}

/* Fill out text on Contact page - 25% larger than body */
.handyman-fillout-text {
  font-size: calc(var(--handyman-font-size-body) * 1.25);
}

/* ===================
   RESPONSIVE STYLES
   =================== */
@media (max-width: 992px) {
  .handyman-interior {
    grid-template-columns: 220px 1fr;
  }

  .handyman-slideshow {
    max-width: 100%;
    height: 300px;
  }
}

@media (max-width: 768px) {
  .handyman-header {
    flex-direction: column;
    align-items: center;
  }

  .handyman-logo {
    width: 220px;
  }

  .handyman-tools-icon {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 120px;
    margin: var(--handyman-spacing-md) auto;
  }

  .handyman-title {
    font-size: 45px;  /* Plan 10: 25% larger (was 36px) */
  }

  .handyman-home-nav {
    flex-direction: column;
    gap: var(--handyman-spacing-lg);
    align-items: center;
  }

  .handyman-nav-column {
    align-items: center;
  }

  .handyman-interior {
    grid-template-columns: 1fr;
  }

  .handyman-sidebar {
    position: relative;
    top: 0;
  }

  .handyman-sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .handyman-contact-layout {
    grid-template-columns: 1fr;
  }

  .handyman-slideshow {
    height: 250px;
  }

  /* Plan 10: Paired/static slideshows stack on mobile */
  .handyman-slideshow-paired,
  .handyman-slideshow-static {
    max-width: 100%;
  }

  .handyman-slide-pair,
  .handyman-slideshow-static {
    flex-direction: column;
  }

  .handyman-slide-pair img,
  .handyman-slideshow-static img {
    max-width: 90%;
  }
}

@media (max-width: 576px) {
  .handyman-title {
    font-size: 35px;  /* Plan 10: 25% larger (was 28px) */
    letter-spacing: 2px;
  }

  .handyman-tagline {
    font-size: 18px;  /* Plan 10: 25% larger (was 14px) */
  }

  .handyman-nav-link,
  .handyman-sidebar-link {
    font-size: 20px;  /* Plan 10: 25% larger (was 16px) */
  }

  .handyman-page-title {
    font-size: 30px;  /* Plan 10: 25% larger (was 24px) */
  }

  .handyman-slideshow {
    height: 200px;
  }
}

/* ===================
   PLAN 10: HANDYMAN HOME BUTTON
   =================== */
.handyman-home-button {
  display: block;
  font-family: var(--handyman-font-body);
  font-size: var(--handyman-font-size-nav);
  color: var(--handyman-nav-active);  /* Light orange #FFB347 */
  text-decoration: none;
  padding: var(--handyman-spacing-sm) var(--handyman-spacing-md);
  margin-top: 25px;  /* 25px below logo (was 40px, moved up 15px) */
  margin-bottom: var(--handyman-spacing-md);
  letter-spacing: 1.5px;
  transition: all var(--handyman-transition-fast);
  border-left: 3px solid var(--handyman-accent);
  background: rgba(210, 105, 30, 0.2);
  border-radius: 4px;
}

.handyman-home-button:hover {
  color: var(--handyman-text-light);
  background: rgba(210, 105, 30, 0.4);
  text-shadow: 0 0 10px rgba(255, 179, 71, 0.5);
}

/* ===================
   PLAN 10: SITEMAP BAR
   =================== */
.handyman-sitemap {
  display: flex;
  justify-content: center;
  gap: var(--handyman-spacing-lg);
  flex-wrap: wrap;
  padding: var(--handyman-spacing-md);
  background: rgba(30, 18, 16, 0.8);  /* Uses brightened bg-dark */
  border-top: 1px solid var(--handyman-secondary);
}

.handyman-sitemap-link {
  font-family: var(--handyman-font-body);
  font-size: var(--handyman-font-size-small);
  color: var(--handyman-text-muted);
  text-decoration: none;
  transition: color var(--handyman-transition-fast);
}

.handyman-sitemap-link:hover {
  color: var(--handyman-nav-active);
}

/* ===================
   PLAN 10: PAGE TRANSITION
   =================== */
.handyman-page-transition {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.handyman-page-transition.active {
  opacity: 1;
  visibility: visible;
}

/* Logo brighten effect on click */
.handyman-logo.brighten {
  filter: brightness(1.8) drop-shadow(0 0 30px #FFB347);
}

/* ===================
   PLAN 10: PAIRED IMAGE SLIDESHOW
   =================== */
.handyman-slideshow-paired {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 400px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--handyman-shadow-medium);
  background: var(--handyman-bg-dark);
  margin: 0 auto;
}

.handyman-slide-pair {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  gap: var(--handyman-spacing-sm);
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.handyman-slide-pair.active {
  animation: handymanFadeInOut var(--handyman-fade-total) ease-in-out;
}

.handyman-slide-pair img {
  max-width: 48%;
  max-height: 100%;
  object-fit: contain;  /* Proportional scaling, no crop */
}

/* ===================
   PLAN 10: TRIPLE IMAGE SLIDE
   =================== */
.handyman-slide-triple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  gap: var(--handyman-spacing-xs);
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.handyman-slide-triple.active {
  animation: handymanFadeInOut var(--handyman-fade-total) ease-in-out;
}

.handyman-slide-triple img {
  max-width: 32%;
  max-height: 100%;
  object-fit: cover;  /* Allow cropping for matching sizes */
}

/* ===================
   PLAN 10: SINGLE IMAGE IN MIXED SLIDESHOW
   =================== */
.handyman-slide-single {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.handyman-slide-single.active {
  animation: handymanFadeInOut var(--handyman-fade-total) ease-in-out;
}

.handyman-slide-single img {
  max-width: 90%;
  max-height: 100%;
  object-fit: contain;
}

/* ===================
   PLAN 10: STATIC PAIRED IMAGES (NO ANIMATION)
   =================== */
.handyman-slideshow-static {
  display: flex;
  gap: var(--handyman-spacing-md);
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

.handyman-slideshow-static img {
  max-width: 48%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: var(--handyman-shadow-medium);
}

/* ===================
   PLAN 10: THANK YOU PAGE
   =================== */
.handyman-thank-you {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  text-align: center;
  padding: var(--handyman-spacing-2xl);
}

.handyman-thank-you h1 {
  font-family: var(--handyman-font-title);
  font-size: var(--handyman-font-size-title);
  color: var(--handyman-text-light);
  margin-bottom: var(--handyman-spacing-lg);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.handyman-thank-you p {
  font-size: var(--handyman-font-size-body);
  color: var(--handyman-text);
  max-width: 600px;
  margin-bottom: var(--handyman-spacing-xl);
  line-height: 1.8;
}

.handyman-btn {
  display: inline-block;
  padding: var(--handyman-spacing-sm) var(--handyman-spacing-lg);
  font-family: var(--handyman-font-body);
  font-size: var(--handyman-font-size-nav);
  color: var(--handyman-text-light);
  background: var(--handyman-accent);
  border: 2px solid var(--handyman-accent-light);
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 2px;
  transition: all var(--handyman-transition-fast);
}

.handyman-btn:hover {
  background: var(--handyman-accent-light);
  box-shadow: var(--handyman-shadow-glow);
  transform: translateY(-2px);
}

/* ===================
   PAGE-SPECIFIC IMAGE SIZING
   =================== */

/* Furniture Page - 25% larger images, paired images same size */
.handyman-page--furniture .handyman-slideshow-paired {
  max-width: 1000px;  /* Was 800px, 25% larger */
  height: 500px;      /* Was 400px, 25% larger */
}

.handyman-page--furniture .handyman-slide-pair {
  gap: 16px;
  justify-content: center;
}

.handyman-page--furniture .handyman-slide-pair img {
  width: auto;         /* Auto width based on height */
  max-width: calc(50% - 8px);  /* Half container minus half gap */
  height: 450px;       /* Same height for both images */
  object-fit: contain; /* No cropping */
  margin: 0;           /* Remove any margin */
  padding: 0;          /* Remove any padding */
}

/* Electrical Page - 25% larger images */
.handyman-page--electrical .handyman-slideshow-paired {
  max-width: 1000px;  /* Was 800px, 25% larger */
  height: 500px;      /* Was 400px, 25% larger */
}

/* HVAC Page - 25% larger images */
.handyman-page--hvac .handyman-slideshow-paired {
  max-width: 1000px;  /* Was 800px, 25% larger */
  height: 500px;      /* Was 400px, 25% larger */
}

/* Painting Page - Ensure both images are same size, 25% larger */
.handyman-page--painting .handyman-slideshow-static {
  align-items: stretch;
  max-width: 1000px;  /* 25% larger than 800px */
}

.handyman-page--painting .handyman-slideshow-static img {
  height: 438px;      /* 25% larger than 350px */
  width: auto;
  max-width: 48%;
  object-fit: contain;
}

/* Masonry Page - Ensure both images are same size, 25% larger */
.handyman-page--masonry .handyman-slideshow-static {
  align-items: stretch;
  max-width: 1000px;  /* 25% larger than 800px */
}

.handyman-page--masonry .handyman-slideshow-static img {
  height: 438px;      /* 25% larger than 350px */
  width: auto;
  max-width: 48%;
  object-fit: contain;
}

/* ===================
   MOBILE-SPECIFIC IMAGE STYLES
   =================== */
@media (max-width: 768px) {
  /* Furniture Page Mobile - Prevent cropping, same size images */
  .handyman-page--furniture .handyman-slideshow-paired {
    height: auto;           /* Auto height instead of fixed */
    min-height: 600px;      /* Minimum height */
    overflow: visible;      /* Allow content to show */
  }

  .handyman-page--furniture .handyman-slide-pair {
    position: relative;     /* Override absolute positioning */
    flex-direction: column;
    height: auto;           /* Auto height */
    display: none;          /* Hide by default */
  }

  .handyman-page--furniture .handyman-slide-pair.active {
    display: flex;          /* Show active slide */
    opacity: 1;
    animation: none;        /* Remove fade animation for cleaner display */
  }

  .handyman-page--furniture .handyman-slide-pair img {
    width: 95%;             /* Same width for both images */
    max-width: 650px;       /* +25% (was 520px) */
    height: 455px;          /* +25% (was 364px) */
    object-fit: contain;    /* No cropping */
    margin: 10px auto;
  }

  /* Painting Page Mobile - same size, vertically centered, no cropping */
  .handyman-page--painting .handyman-slideshow-static {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .handyman-page--painting .handyman-slideshow-static img {
    width: 95%;         /* Same width for both images */
    height: auto;       /* Natural height, no cropping */
    max-width: 500px;   /* Cap maximum width */
    object-fit: contain;
    margin: 0;
  }

  /* Masonry Page Mobile - same size, vertically centered, no cropping */
  .handyman-page--masonry .handyman-slideshow-static {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .handyman-page--masonry .handyman-slideshow-static img {
    width: 95%;         /* Same width for both images */
    height: auto;       /* Natural height, no cropping */
    max-width: 500px;   /* Cap maximum width */
    object-fit: contain;
    margin: 0;
  }

  /* HVAC Page Mobile - Paired images not cropped */
  .handyman-page--hvac .handyman-slideshow-paired {
    height: auto;
    min-height: 600px;
    overflow: visible;
  }

  .handyman-page--hvac .handyman-slide-pair {
    position: relative;
    flex-direction: column;
    height: auto;
    display: none;
  }

  .handyman-page--hvac .handyman-slide-pair.active {
    display: flex;
    opacity: 1;
    animation: none;
  }

  .handyman-page--hvac .handyman-slide-pair img {
    max-width: 95%;
    width: auto;
    height: auto;
    max-height: none;
    object-fit: contain;
    transform: none;
    margin: 10px auto;
  }

  /* HVAC single slides also need adjustment */
  .handyman-page--hvac .handyman-slide-single {
    position: relative;
    display: none;
    height: auto;
  }

  .handyman-page--hvac .handyman-slide-single.active {
    display: flex;
    opacity: 1;
    animation: none;
  }

  /* Electrical Page Mobile - Paired images not cropped */
  .handyman-page--electrical .handyman-slideshow-paired {
    height: auto;
    min-height: 600px;
    overflow: visible;
  }

  .handyman-page--electrical .handyman-slide-pair {
    position: relative;
    flex-direction: column;
    height: auto;
    display: none;
  }

  .handyman-page--electrical .handyman-slide-pair.active {
    display: flex;
    opacity: 1;
    animation: none;
  }

  .handyman-page--electrical .handyman-slide-pair img {
    max-width: 95%;
    width: auto;
    height: auto;
    max-height: none;
    object-fit: contain;
    transform: none;
    margin: 10px auto;
  }

  /* Electrical single slides also need adjustment */
  .handyman-page--electrical .handyman-slide-single {
    position: relative;
    display: none;
    height: auto;
  }

  .handyman-page--electrical .handyman-slide-single.active {
    display: flex;
    opacity: 1;
    animation: none;
  }

  /* Odd Jobs Page Mobile - Paired images not cropped */
  .handyman-page--odd-jobs .handyman-slideshow-paired {
    height: auto;           /* Auto height instead of fixed */
    min-height: 600px;      /* Minimum height */
    overflow: visible;      /* Allow content to show */
  }

  .handyman-page--odd-jobs .handyman-slide-pair {
    position: relative;     /* Override absolute positioning */
    flex-direction: column;
    height: auto;           /* Auto height */
    display: none;          /* Hide by default */
  }

  .handyman-page--odd-jobs .handyman-slide-pair.active {
    display: flex;          /* Show active slide */
    opacity: 1;
    animation: none;        /* Remove fade animation for cleaner display */
  }

  .handyman-page--odd-jobs .handyman-slide-pair img {
    max-width: 95%;
    width: auto;
    height: auto;           /* Natural height */
    max-height: none;       /* Remove height constraint */
    object-fit: contain;    /* No cropping */
    transform: none;        /* Remove scale transform */
    margin: 10px auto;
  }

  /* Odd Jobs single and triple slides also need adjustment */
  .handyman-page--odd-jobs .handyman-slide-single,
  .handyman-page--odd-jobs .handyman-slide-triple {
    position: relative;
    display: none;
    height: auto;
  }

  .handyman-page--odd-jobs .handyman-slide-single.active,
  .handyman-page--odd-jobs .handyman-slide-triple.active {
    display: flex;
    opacity: 1;
    animation: none;
  }
}

@media (max-width: 576px) {
  /* Furniture Page Small Mobile - same size images, +25% larger */
  .handyman-page--furniture .handyman-slideshow-paired {
    min-height: 600px;
  }

  .handyman-page--furniture .handyman-slide-pair img {
    width: 98%;
    max-width: 100%;
    height: 358px;          /* +25% (was 286px) */
  }

  /* Painting Page Mobile Small - same width, natural height */
  .handyman-page--painting .handyman-slideshow-static img {
    width: 98%;
    height: auto;
    max-width: 100%;
  }

  /* Masonry Page Mobile Small - same width, natural height */
  .handyman-page--masonry .handyman-slideshow-static img {
    width: 98%;
    height: auto;
    max-width: 100%;
  }

  /* HVAC Page Small Mobile - maintain auto height */
  .handyman-page--hvac .handyman-slideshow-paired {
    min-height: 450px;
  }

  .handyman-page--hvac .handyman-slide-pair img {
    max-width: 98%;
  }

  /* Electrical Page Small Mobile - maintain auto height */
  .handyman-page--electrical .handyman-slideshow-paired {
    min-height: 450px;
  }

  .handyman-page--electrical .handyman-slide-pair img {
    max-width: 98%;
  }

  /* Odd Jobs Page Small Mobile - maintain auto height */
  .handyman-page--odd-jobs .handyman-slideshow-paired {
    min-height: 450px;
  }

  .handyman-page--odd-jobs .handyman-slide-pair img {
    max-width: 98%;
  }
}