/*
 * Automation page-specific styling
 *
 * This stylesheet contains rules scoped only to the Loxone automation
 * page. It should be loaded after the main global stylesheet
 * (style.css) to override base styles where necessary. The rules
 * below adjust colours, layout, backgrounds, and interactions for
 * sections unique to the automation page.
 */

/* ========================================================= */
/*  Automation page overrides and additions                 */
/* The following rules are scoped to the automation page's  */
/* section IDs to avoid interfering with the rest of the    */
/* website. They adjust heading colours, comparison cards,  */
/* system gallery layout, residential/commercial columns,   */
/* process section layout and gallery overlay styles.       */

/* White headings for sections on the automation page */
#hero h1,
#hero p,
#not-smart-home h2,
#not-smart-home h3,
#why-loxone h2,
#why-loxone h3,
#what-it-does h2,
#what-it-does h3,
#residential-commercial h2,
#residential-commercial h3,
#process h2,
#process h3,
#low-voltage-foundation h2 {
  color: #fff;
}

/* ---------------------------------------------------------------------
 * Automation page layout and background tweaks
 *
 * The following rules apply a dark background and generous vertical
 * padding to the main sections on the automation page. They also
 * position the hero image behind the headline and overlay it with a
 * semi‑transparent tint for readability. All content within these
 * sections is set to white by default for high contrast.
 */
#hero,
#not-smart-home,
#why-loxone,
#what-it-does,
#residential-commercial,
#process,
#low-voltage-foundation {
  background-color: var(--dark-bg);
  /* Reduce vertical padding to create a tighter rhythm */
  padding: 80px 0;
  position: relative;
  color: #fff;
}

/* Prevent hero content from overflowing horizontally and ensure symmetrical design */
#hero {
  overflow: hidden;
}

/* Override the hero container width to remove asymmetrical margins. */
#hero .container {
  /* Force full-width container within the hero to remove the leftover
     dark band that appears on the left. Use !important so this rule
     wins over the global .container settings. */
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 5%;
}

/* Add spacing between hero call-to-action buttons */
#hero .hero-actions {
  display: flex;
  gap: 24px;
  justify-content: center;
}
#hero .hero-actions .btn {
  margin: 0; /* override default margin to rely on gap for spacing */
}

/* Hero image positioning: fill the hero and sit behind the overlay */
#hero .hero-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}
#hero .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Dark overlay over the hero image for text legibility */
#hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Lighten the overlay tint for improved headline contrast */
  background: rgba(10, 53, 80, 0.5);
  z-index: 1;
}

/* Add a matching dark bar on the right side of the hero section to mirror
   the natural dark band on the left. This ensures symmetry regardless of
   the underlying image content. */
#hero::after {
  /* Remove the unintended dark bar on the right side of the hero */
  content: none;
}
/* Increase hero height for a more impactful intro */
#hero {
  min-height: 80vh;
}
/* Ensure hero content sits above the overlay */
#hero .hero-content {
  position: relative;
  z-index: 2;
  /* Center hero text both horizontally and vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

/* Comparison cards layout in "This Is Not Alexa" section */
#not-smart-home .comparison {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 40px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
#not-smart-home .comparison-card {
  /* Use a slightly lighter card with a subtle shadow for stronger contrast */
  /* Lighten the card background for stronger contrast against the dark section.  
     A slightly higher opacity and softer border improves readability when scanning 
     across the two columns. */
  background-color: rgba(255, 255, 255, 0.12);
  padding: 28px;
  border-radius: 12px;
  flex: 1 1 220px;
  max-width: 300px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
}
#not-smart-home .comparison-card h3 {
  margin: 0 0 0.5rem 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
}
#not-smart-home .comparison-card ul {
  padding-left: 18px;
  margin: 0;
  color: #d1dae6;
  font-size: 0.95rem;
}
#not-smart-home .comparison-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Increase size and weight of the VS separator for emphasis */
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 24px;
}

/* Ensure the 'vs' label inside the comparison section is visible against the dark background */
#not-smart-home .comparison-vs span {
  color: var(--primary-color);
}

/* Constrain the miniserver solution image within the not-smart-home section and scale it slightly smaller */
#not-smart-home .section-media img {
  width: 90%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 30px auto 0;
  border-radius: 10px;
}

/* System gallery layout */
#what-it-does .system-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  margin-bottom: 30px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
#what-it-does .gallery-item {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 12px;
  overflow: hidden;
  background-color: rgba(255,255,255,0.05);
  padding-bottom: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#what-it-does .gallery-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
#what-it-does .gallery-item img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
#what-it-does .gallery-item h3 {
  margin-top: 12px;
  font-size: 1.1rem;
  color: #fff;
  font-weight: 600;
}

/* Gallery overlay */
.gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 10000;
  color: #fff;
}
.gallery-overlay.active {
  display: flex;
}
.gallery-overlay .overlay-content {
  max-width: 90%;
  max-height: 90%;
  text-align: center;
}
.gallery-overlay img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 10px;
  margin-bottom: 1.5rem;
}
.gallery-overlay h3 {
  margin: 0.5rem 0;
  color: #fff;
}
.gallery-overlay p {
  margin: 0 0 1rem 0;
  color: #d1dae6;
}
.gallery-overlay .close-btn,
  .gallery-overlay .prev-btn,
  .gallery-overlay .next-btn {
  position: absolute;
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  font-size: 2.4rem;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.gallery-overlay .close-btn {
  top: 20px;
  right: 20px;
  font-size: 2.5rem;
  transform: none;
}
.gallery-overlay .prev-btn {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
.gallery-overlay .next-btn {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* Residential vs commercial section */
#residential-commercial .two-col {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}
#residential-commercial .two-col article {
  flex: 1 1 45%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#residential-commercial .two-col figure {
  margin: 0 0 1rem;
  /* Let images fill the width of their columns while capping the size */
  width: 100%;
  max-width: 400px;
}
#residential-commercial .two-col figure img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 10px;
}
#residential-commercial .two-col h3 {
  margin: 0.5rem 0;
}

/* Sticky section headers: keep headings visible just below the main navigation */
#not-smart-home > .container > header,
#why-loxone > .container > header,
#what-it-does > .container > header,
#residential-commercial > .container > header,
#process > .container > header,
#low-voltage-foundation > .container > header {
  position: sticky;
  top: 100px; /* leave enough space below the main navigation and accent line */
  z-index: 50;
  background-color: var(--dark-bg);
  padding-bottom: 20px;
}

/* Process section two-column layout */
#process .process-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}
#process .process-wrapper .steps-wrapper {
  flex: 1 1 55%;
  color: #fff;
  font-size: 1rem;
  line-height: 1.6;
}
#process .process-wrapper .process-image {
  /* Allocate a column for the image and constrain its width.
     Increase the max width by 10% to make the image more prominent */
  flex: 1 1 40%;
  max-width: 440px;
}
#process .process-wrapper .process-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
#process .process-cta {
  margin-top: 1.5rem;
}
#process .process-cta p {
  margin-bottom: 1rem;
  color: #fff;
}
#process .process-cta .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Numbered list styling in the process section
   Rather than relying on the browser’s default numbers, use counters to
   emphasize each step.  Large coloured numerals call attention to the
   sequence and improve scanning. */
#process .steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}
#process .steps li {
  position: relative;
  padding-left: 56px;
  margin-bottom: 24px;
}
#process .steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 600;
}
#process .steps li h3 {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 1.2rem;
  color: #fff;
  font-weight: 600;
}
#process .steps li .microcopy {
  margin-top: 0;
  color: #d1dae6;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
#process .steps li .link {
  display: inline-block;
  font-size: 0.95rem;
  color: var(--primary-color);
  margin-top: 4px;
}

/* Badge only section alignment */
.badge-only {
  text-align: center;
}
.badge-only img {
  max-width: 300px;
  width: 100%;
  height: auto;
  margin: 20px auto;
  display: block;
}

/* Layout for why-loxone content: stack list, callout, and badge with spacing */
#why-loxone .why-content {
  /* Arrange the bullet list, callout and badge side by side on larger screens */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
}
#why-loxone .why-content .key-points {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  /* White text for readability on dark background */
  color: #fff;
  /* Let the list take up a reasonable width in the flex container */
  flex: 1 1 50%;
  max-width: 600px;
}

/* Size the callout and badge columns within the Why Loxone section */
#why-loxone .why-content .callout,
#why-loxone .why-content .badge-only {
  flex: 1 1 250px;
}

/* White strong text in callout for better contrast */
#why-loxone .why-content .callout strong {
  color: #fff;
}

/* Muted microcopy styling for automation sections */
#not-smart-home .microcopy,
#why-loxone .microcopy,
#what-it-does .microcopy,
#residential-commercial .microcopy,
#process .microcopy,
#low-voltage-foundation .microcopy {
  color: #d1dae6;
  font-size: 0.95rem;
}

/* Slightly muted colour for secondary details within the callout */
#why-loxone .why-content .callout p {
  color: #d1dae6;
}

/* Style the Loxone Silver Partner badge when it appears within the callout */
#why-loxone .why-content .callout img.silver-badge {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  /* Align the badge to the left by removing automatic horizontal centring */
  margin: 0 0 12px 0;
}

/* Ensure bullet lists in the residential/commercial section align consistently */
#residential-commercial .two-col ul {
  margin: 0 0 1rem 1.5rem;
  padding: 0;
  list-style: disc;
  text-align: left;
}
#residential-commercial .two-col ul li {
  margin-bottom: 0.5rem;
  text-align: left;
}

/* Responsive YouTube video wrapper for the low‑voltage section */
#low-voltage-foundation .video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  margin-top: 20px;
}
#low-voltage-foundation .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------------------------------
 * Mobile‑specific adjustments for the automation page
 *
 * These overrides only activate on screens under 767px wide. They
 * restructure comparison cards, galleries and two‑column layouts to
 * stack vertically, improving readability and tapability on small
 * devices. Desktop styles above remain unaffected.
 */
@media (max-width: 767px) {
  /* Stack comparison cards vertically in the "This Is Not Alexa" section */
  #not-smart-home .comparison {
    flex-direction: column;
    align-items: center;
  }
  #not-smart-home .comparison-card {
    max-width: none;
    width: 100%;
    margin-bottom: 20px;
  }
  #not-smart-home .comparison-vs {
    margin: 10px 0;
    font-size: 2rem;
  }
  /* Adjust system gallery grid to fit smaller screens */
  #what-it-does .system-gallery {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  /* Stack residential/commercial columns vertically */
  #residential-commercial .two-col {
    flex-direction: column;
    align-items: center;
  }
  #residential-commercial .two-col article {
    flex: none;
    max-width: none;
    width: 100%;
  }
  #residential-commercial .two-col figure img {
    height: 200px;
  }
  /* Stack process section elements */
  #process .process-wrapper {
    flex-direction: column;
  }
  #process .process-wrapper .process-image {
    max-width: none;
    width: 100%;
    margin-bottom: 20px;
  }
  #process .process-wrapper .steps-wrapper {
    flex: none;
    width: 100%;
  }
}