/**
 * Module MedHeroBlock - Styles CSS
 *
 * @author    Mediacom87 <contact@mediacom87.fr>
 * @copyright Mediacom87
 * @license   Commercial
 */

/* ========================================
   HERO BLOCK - Structure principale
   ======================================== */

.medhero-block {
   position: relative;
   width: 100%;
   min-height: var(--medhero-min-height, 500px);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

/* ========================================
   Image de fond
   ======================================== */

.medhero-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

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

.medhero-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--medhero-overlay-color, rgba(0, 0, 0, 0.3));
   z-index: 2;
}

/* ========================================
   Contenu
   ======================================== */

/* .medhero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
    color: var(--medhero-text-color, #ffffff);
} */
.medhero-content {
   position: relative;
   z-index: 3;
   max-width: 1440px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1.5fr 1fr;
   gap: 4rem;
   align-items: center;
    color: var(--medhero-text-color, #ffffff);
}

.medhero-content-inner {
   max-width: 900px;
   margin: 0 auto;
}

/* ========================================
   Titre
   ======================================== */

.medhero-title {
   font-size: 2.5rem;
   font-weight: 700;
   line-height: 1.2;
   margin: 0 0 20px 0;
   color: inherit;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ========================================
   Sous-titre
   ======================================== */

.medhero-subtitle {
   font-size: 1.125rem;
   line-height: 1.6;
   margin: 0 0 30px 0;
   color: inherit;
   opacity: 0.95;
}

.medhero-subtitle p {
   margin: 0 0 15px 0;
}

.medhero-subtitle p:last-child {
   margin-bottom: 0;
}

/* ========================================
   Bouton CTA
   ======================================== */

.medhero-cta {
   margin-top: 30px;
}

.medhero-btn {
   display: inline-block;
   padding: 15px 40px;
   font-size: 1rem;
   font-weight: 600;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--medhero-btn-text, #ffffff);
   background-color: var(--medhero-btn-bg, #333333);
   border: 2px solid transparent;
   border-radius: 4px;
   transition: all 0.3s ease;
   cursor: pointer;
}

.medhero-btn:hover,
.medhero-btn:focus {
   background-color: transparent;
   border-color: var(--medhero-btn-text, #ffffff);
   color: var(--medhero-btn-text, #ffffff);
   transform: translateY(-2px);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
   text-decoration: none;
}

/* ========================================
   Indicateur de scroll
   ======================================== */

.medhero-scroll-indicator {
   position: absolute;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   color: var(--medhero-text-color, #ffffff);
   opacity: 0.7;
   animation: medhero-bounce 2s infinite;
   cursor: pointer;
   transition: opacity 0.3s ease;
}

.medhero-scroll-indicator:hover {
   opacity: 1;
}

.medhero-scroll-indicator svg {
   display: block;
   width: 32px;
   height: 32px;
}

@keyframes medhero-bounce {

   0%,
   20%,
   50%,
   80%,
   100% {
      transform: translateX(-50%) translateY(0);
   }

   40% {
      transform: translateX(-50%) translateY(-10px);
   }

   60% {
      transform: translateX(-50%) translateY(-5px);
   }
}

/* ========================================
   Responsive - Tablette
   ======================================== */

@media (max-width: 991px) {
   .medhero-block {
      min-height: 450px;
   }

   .medhero-title {
      font-size: 2rem;
   }

   .medhero-subtitle {
      font-size: 1rem;
   }

   .medhero-btn {
      padding: 12px 30px;
      font-size: 0.9rem;
   }
}

/* ========================================
   Responsive - Mobile
   ======================================== */

@media (max-width: 767px) {
   .medhero-block {
      min-height: 100vh;
      min-height: 100svh;
      /* Small viewport height pour mobile */
   }

   .medhero-content {
      padding: 60px 15px;
   }

   .medhero-title {
      font-size: 1.5rem;
      margin-bottom: 15px;
   }

   .medhero-subtitle {
      font-size: 0.95rem;
      line-height: 1.5;
      margin-bottom: 20px;
   }

   .medhero-btn {
      padding: 12px 25px;
      font-size: 0.85rem;
      width: 100%;
      max-width: 280px;
   }

   .medhero-scroll-indicator {
      bottom: 20px;
   }

   .medhero-scroll-indicator svg {
      width: 24px;
      height: 24px;
   }
}

/* ========================================
   Responsive - Petit mobile
   ======================================== */

@media (max-width: 480px) {
   .medhero-title {
      font-size: 1.25rem;
   }

   .medhero-subtitle {
      font-size: 0.9rem;
   }
}

/* ========================================
   Accessibilité
   ======================================== */

@media (prefers-reduced-motion: reduce) {
   .medhero-scroll-indicator {
      animation: none;
   }

   .medhero-btn {
      transition: none;
   }
}

/* ========================================
   Mode sombre (si thème le supporte)
   ======================================== */

@media (prefers-color-scheme: dark) {

   .medhero-title,
   .medhero-subtitle {
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
   }
}