/*
 * Copyright (C) 2026 ANSYS, Inc. and/or its affiliates.
 * SPDX-License-Identifier: Apache-2.0
 *
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * CSS Variables
 * Centralized theme variables for
 * carousel items, content, buttons,
 * background, and step-by-step layout.
 */
:root {
  /* Carousel Item */
  --carousel-item-height: 30rem;
  --carousel-item-color: #fff;
  --carousel-item-border: thin solid #000;
  --carousel-gradient: linear-gradient(
    to right,
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0.1)
  );

  /* Carousel Content */
  --carousel-content-padding: 0.75rem;
  --carousel-content-margin-left: 0.75rem;
  --carousel-h2-size: 2.5rem;
  --carousel-h2-color: #fff;
  --carousel-p-margin: 2rem 0;
  --carousel-p-size: 1rem;
  --carousel-p-color: #fff;

  /* Buttons */
  --btn-bg: #fff;
  --btn-color: #000;
  --btn-radius: 0.25rem;
  --btn-size: 0.75rem;
  --btn-weight: bold;
  --btn-padding: 0.75rem 1.25rem;
  --btn-mr: 1rem;
  --btn-hover-bg: #939393;

  /* Carousel Background */
  --carousel-bg-height: 15rem;
  --carousel-bg-animation: slideBackground 15s infinite;
}

/**
 * Carousel Item
 */
.carousel-item {
  height: var(--carousel-item-height);
  color: var(--carousel-item-color);
  border: var(--carousel-item-border);
  position: relative;
}

/**
 * Carousel Item Overlay
 */
.carousel-item::before {
  z-index: 1;
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--carousel-gradient);
}

/**
 * Carousel Content
 */
.carousel-content {
  padding: var(--carousel-content-padding);
  margin-left: var(--carousel-content-margin-left);
  position: relative;
  z-index: 2;
}

/**
 * Carousel Content Headings
 */
.carousel-content h2 {
  font-size: var(--carousel-h2-size);
  color: var(--carousel-h2-color);
}

/**
 * Carousel Content Paragraphs
 */
.carousel-content p {
  margin: var(--carousel-p-margin);
  font-size: var(--carousel-p-size);
  color: var(--carousel-p-color);
}

/**
 * Carousel Content Buttons
 */
.carousel-content .btn-custom {
  background-color: var(--btn-bg);
  color: var(--btn-color);
  border: none;
  border-radius: var(--btn-radius);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  padding: var(--btn-padding);
  text-transform: uppercase;
  margin-right: var(--btn-mr);
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

/**
 * Carousel Content Buttons - Hover
 */
.carousel-content .btn-custom:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-color);
}

/**
 * Carousel Content Responsive
 */
@media (max-width: 1200px) {
  .carousel-content .btn-custom {
    padding: 0.4rem;
    margin-right: 0.25rem;
  }
  .carousel-content p {
    margin: 1rem 0;
  }
  .carousel-content h2 {
    margin: 0 0 0.5rem 0;
  }
}

/**
 * Carousel Background Animation
 */
@keyframes slideBackground {
  0% {
    background-image: url("https://images.ansys.com/is/image/ansys/engineers-around-ev-design?wid=1850&fmt=png-alpha&op_usm=0.9,1.0,20,0&fit=constrain,0");
  }
  33% {
    background-image: url("https://images.ansys.com/is/image/ansys/ansys-homepage-hero-space?wid=1850&fmt=png-alpha&op_usm=0.9,1.0,20,0&fit=constrain,0");
  }
  66% {
    background-image: url("https://images.ansys.com/is/image/ansys/homepage-carousel-autonomous-w1920xh675v3?wid=1850&fmt=png-alpha&op_usm=0.9,1.0,20,0&fit=constrain,0");
  }
  100% {
    background-image: url("https://images.ansys.com/is/image/ansys/hero-optic-lidar-2?wid=1850&fmt=png-alpha&op_usm=0.9,1.0,20,0&fit=constrain,0");
  }
}

/**
 * Carousel Background Container
 */
.carousel-background {
  height: var(--carousel-bg-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-size: cover;
  background-position: center;
  animation: var(--carousel-bg-animation);
}

/**
 * General Overrides
 */
.bd-main .bd-content {
  display: flex !important;
  height: 100% !important;
  justify-content: center !important;
}

.bd-main .bd-content .bd-article-container {
  width: 100% !important;
}

/**
 * Carousel
 */
.carousel {
  background-color: #000 !important;
}

/* Carousel Card Styling: Add border for cards */
.carousel-card {
  border: 2px solid #FFB71B;
  border-radius: 8px;
  transition: box-shadow 0.3s, transform 0.3s;
}
.carousel-card:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
  transform: translateY(-5px);
}

/**
 * Responsive Design
 */
@media (max-width: 768px) {
  :root {
    --carousel-h2-size: 2rem;
    --carousel-bg-height: 12rem;
    --carousel-content-padding: 0.5rem;
    --carousel-content-margin-left: 0.5rem;
  }

  .carousel-content .btn-custom {
    font-size: 0.65rem;
    padding: 0.5rem 0.75rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
  }
}