/**
 * GVA IMAGES LIST - CSS EXTERNE
 * 3 Styles: Institutional, Modern Corporate, Visual Focus
 */

/* ===================================
   VARIABLES COMMUNES
   =================================== */
.gva-images-list {
   --green-agri: #1a5c2e;
   --blue-navy: #0f172a;
   --border-color: #e2e8f0;
   --text-color: #334155;
}

/* ===================================
   STYLE 1: ÉLÉGANCE INSTITUTIONNELLE
   =================================== */
.img-premium {
   border-radius: 30px;
   box-shadow: 20px 20px 0px -5px rgba(26, 92, 46, 0.1);
   object-fit: cover;
   width: 100%;
   height: 100%;
   min-height: 500px;
}

.list-premium {
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
}

.list-premium li {
   position: relative;
   padding-left: 35px;
   margin-bottom: 20px;
   font-size: 0.95rem;
   line-height: 1.6;
   color: var(--text-color);
}

.list-premium li:last-child {
   margin-bottom: 0;
}

.list-premium li::before {
   content: "\f058";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   position: absolute;
   left: 0;
   top: 2px;
   color: var(--green-agri);
   font-size: 1.2rem;
}

/* ===================================
   STYLE 2: MODERN CORPORATE SPLIT
   =================================== */
.split-card {
   background: #f8fafc;
   border-radius: 40px;
   overflow: hidden;
   border: 1px solid var(--border-color);
}

.content-padding {
   padding: 60px;
}

.icon-box-small {
   width: 45px;
   height: 45px;
   background: white;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
   color: var(--green-agri);
   margin-bottom: 15px;
   font-size: 1.1rem;
}

.split-card .item-text {
   font-size: 0.875rem;
   color: var(--text-color);
   margin-bottom: 0;
   line-height: 1.5;
}

.split-bg-image {
   background-size: cover;
   background-position: center;
   height: 700px;
}

/* ===================================
   STYLE 3: VISUAL FOCUS
   =================================== */
.focus-img-container {
   position: relative;
   padding: 20px;
}

.focus-img-container img {
   border-radius: 50% 50% 0 0;
   height: 550px;
   width: 100%;
   object-fit: cover;
}

.focus-badge {
   position: absolute;
   bottom: 40px;
   right: 0;
   background: var(--green-agri);
   color: white;
   padding: 20px 30px;
   border-radius: 20px 0 0 20px;
   font-weight: 700;
   font-size: 0.95rem;
   box-shadow: 0 10px 25px rgba(26, 92, 46, 0.3);
}

.focus-list-item {
   display: flex;
   margin-bottom: 1.5rem;
}

.focus-list-item:last-child {
   margin-bottom: 0;
}

.focus-list-item .icon-check {
   margin-right: 15px;
   margin-top: 3px;
   color: #22c55e;
   font-size: 1.1rem;
   flex-shrink: 0;
}

.focus-list-item p {
   margin-bottom: 0;
   line-height: 1.6;
   color: var(--text-color);
}

.focus-list-item strong {
   color: var(--blue-navy);
   font-weight: 600;
}

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 991px) {
   /* Institutional */
   .img-premium {
      min-height: 350px;
      margin-bottom: 30px;
   }
   
   /* Modern Corporate */
   .content-padding {
      padding: 30px;
   }
   
   .split-bg-image {
      display: none;
   }
   
   /* Visual Focus */
   .focus-img-container {
      padding: 10px;
      margin-bottom: 30px;
   }
   
   .focus-img-container img {
      height: 400px;
      border-radius: 30px;
   }
   
   .focus-badge {
      bottom: 20px;
      padding: 15px 25px;
      font-size: 0.85rem;
   }
}

@media (max-width: 576px) {
   /* Institutional */
   .img-premium {
      min-height: 250px;
      border-radius: 20px;
      box-shadow: 15px 15px 0px -5px rgba(26, 92, 46, 0.1);
   }
   
   .list-premium li {
      font-size: 0.875rem;
      padding-left: 30px;
   }
   
   /* Modern Corporate */
   .content-padding {
      padding: 20px;
   }
   
   .split-card {
      border-radius: 25px;
   }
   
   .icon-box-small {
      width: 40px;
      height: 40px;
      font-size: 1rem;
   }
   
   /* Visual Focus */
   .focus-img-container img {
      height: 300px;
   }
   
   .focus-badge {
      font-size: 0.75rem;
      padding: 12px 20px;
   }
   
   .focus-list-item {
      margin-bottom: 1rem;
   }
}

/* ===================================
   ANIMATIONS
   =================================== */
.list-premium li,
.icon-box-small,
.focus-list-item {
   animation: fadeInUp 0.6s ease-out;
   animation-fill-mode: both;
}

.list-premium li:nth-child(1) { animation-delay: 0.1s; }
.list-premium li:nth-child(2) { animation-delay: 0.2s; }
.list-premium li:nth-child(3) { animation-delay: 0.3s; }
.list-premium li:nth-child(4) { animation-delay: 0.4s; }
.list-premium li:nth-child(5) { animation-delay: 0.5s; }
.list-premium li:nth-child(6) { animation-delay: 0.6s; }

.focus-list-item:nth-child(1) { animation-delay: 0.1s; }
.focus-list-item:nth-child(2) { animation-delay: 0.2s; }
.focus-list-item:nth-child(3) { animation-delay: 0.3s; }
.focus-list-item:nth-child(4) { animation-delay: 0.4s; }
.focus-list-item:nth-child(5) { animation-delay: 0.5s; }
.focus-list-item:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* ===================================
   HOVER EFFECTS
   =================================== */
.img-premium {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-premium:hover {
   transform: translateY(-5px);
   box-shadow: 25px 25px 0px -5px rgba(26, 92, 46, 0.15);
}

.icon-box-small {
   transition: all 0.3s ease;
}

.icon-box-small:hover {
   transform: scale(1.1);
   background: var(--green-agri);
   color: white;
}

.focus-badge {
   transition: transform 0.3s ease;
}

.focus-img-container:hover .focus-badge {
   transform: translateX(-5px);
}

/* ============================================
   RTL SUPPORT
   ============================================ */
html[lang="ar"] .focus-list-item .icon-check {
    margin-left: 15px;
      margin-right: 0;
}
html[lang="ar"] .list-premium li::before {
    left: 0;
    right: 0;
}
html[lang="ar"] .list-premium li {
    padding-left: 0;
    padding-right: 35px;
}