/* CSS Styles for EG Portfolio Interactive Banner - Ported to Liko Theme */
/* ---------------------------------------------------------------------- */

/* 
  Fonts updated to use --font-unbounded and --font-fahkwang as per original Axleo demo.
  The Liko theme must ensure "Unbounded" and "Fahkwang" fonts are loaded (e.g., via Google Fonts)
  and that these CSS variables are defined globally or that these local definitions are desired.
  Color variables like --primary-color, --white-color etc., are also expected 
  to be globally available from Liko theme, or can be customized below.
  The banner text will now attempt to use the Liko theme's heading font variable: --tp-ff-heading.
*/
:root {
  /* --font-unbounded: "Unbounded", sans-serif; -- No longer primary, use theme's variable */
  /* --font-fahkwang: "Fahkwang", sans-serif;   -- No longer primary, use theme's variable */
  /* Local color variable definitions from Axleo, Liko theme might override or have its own */
  --primary-color: #EC6219; /* Axleo's orange, Liko might have a different primary */
  --white-color: #fff;
  --title-color: #1A1A1A; /* Axleo's default title color for non-banner contexts */
  --paragraph-color-dark: #C4C4C4; /* For text on dark backgrounds */
  /* Add other necessary color variables if not globally defined by Liko */
}

.interactive-banner-section {
  position: relative;
  width: 100%; /* Ensure it takes full width */
  top: 0;
}

@media (min-width: 1200px) {
  .interactive-banner-section {
    height: 100vh !important; /* Force stability to prevent PC shifts */
    overflow: hidden; /* Prevent scrollbars if content overflows slightly during transitions on PC */
    contain: layout paint; /* CLS Optimization: isolate layout and painting */
  }
}

.interactive-banner-section .social-icon {
  position: absolute;
  left: 3%;
  top: 50%; /* Centered vertically */
  transform: translateY(-50%);
  z-index: 21;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column; /* Changed from writing-mode for better compatibility */
  align-items: center;
  gap: 15px; /* Adjusted gap */
}
@media (max-width: 1199px) {
  .interactive-banner-section .social-icon {
    display: none;
    visibility: hidden;
  }
  .interactive-banner-section .interactive-banner-img-group { /* Hide main desktop background group on mobile */
    display: none !important; /* Using important to ensure it's hidden */
    visibility: hidden !important;
  }
  .interactive-banner-section { /* Allow section to grow and scroll on mobile */
    height: auto !important;
    min-height: 100vh; /* Reserve full height to prevent initial collapse */
    overflow: visible !important;
  }
}
.interactive-banner-section .social-icon li a {
  font-family: var(--tp-ff-heading, sans-serif); /* Use Liko theme's heading font */
  font-size: 14px;
  font-weight: 500; 
  color: var(--white-color);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  line-height: 1;
  padding: 10px 15px; /* Adjusted padding */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.35s, border-color 0.35s;
  text-decoration: none;
  writing-mode: vertical-rl; /* Kept if this specific style is desired */
  text-orientation: mixed;
}
.interactive-banner-section .social-icon li a i { /* Style for icons if used */
    margin-bottom: 5px; /* Adjust icon spacing in vertical mode */
}
.interactive-banner-section .social-icon li a:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.interactive-banner-section .social-icon.two { /* For right side icons */
  right: 3%;
  left: unset;
}

.interactive-banner-section .interactive-banner-img-group {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute; /* Changed from height:100vh to be absolute positioned full cover */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Base layer for backgrounds */
}
.interactive-banner-section .interactive-banner-img-group .single-banner-bg {
  background-size: cover !important; /* Ensure cover is applied */
  background-position: center center !important; /* Ensure center is applied */
  background-repeat: no-repeat !important; /* Ensure no-repeat */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.75s ease-in-out; /* Smoother transition */
  z-index: 2; /* Individual backgrounds above the group's default */
}
.interactive-banner-section .interactive-banner-img-group .single-banner-bg.active {
  opacity: 1;
  z-index: 3; /* Active background on top */
}

.interactive-banner-section .interactive-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* Simpler 5 columns */
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  z-index: 10; /* Above background images, below social icons if they overlap */
}
@media (max-width: 1199px) { 
  .interactive-banner-section .interactive-list {
    display: flex; /* Use flex for mobile stacking */
    flex-direction: column;
    height: auto; /* Adjust height for mobile */
    min-height: 100vh; /* Match section height to prevent inner collapse */
    position: relative; /* No longer absolute for mobile stacking */
    margin-top: 0; /* Prevent margin shifts */
  }
}

.interactive-banner-section .interactive-list .ineteractive-single-item {
  display: flex;
  height: 100%;
  align-items: flex-end;
  position: relative;
  padding: 60px 35px 70px 35px; /* Adjusted padding to be closer to original Axleo proportions */
  cursor: pointer;
  box-sizing: border-box; /* Ensure padding doesn't break layout */
}
@media (max-width: 1699px) {
  .interactive-banner-section .interactive-list .ineteractive-single-item {
    padding: 50px 25px;
  }
}
@media (max-width: 1399px) {
  .interactive-banner-section .interactive-list .ineteractive-single-item {
    padding: 40px 20px;
  }
}
@media (max-width: 1199px) { 
  .interactive-banner-section .interactive-list .ineteractive-single-item {
    height: 50vh; /* Each item takes half viewport height on mobile */
    /* min-height: 60vh; -- Replaced by height: 100vh */
    width: 100%; /* Full width for mobile */
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Separator for mobile */
    display: flex; 
    align-items: flex-end; /* Align content to the bottom like desktop */
    padding: 50px 25px; /* Responsive padding */
    box-sizing: border-box; 
  }
  .interactive-banner-section .interactive-list .ineteractive-single-item:last-child {
     border-bottom: none;
  }
}

.interactive-banner-section .interactive-list .ineteractive-single-item:after { /* Column separator lines */
  content: "";
  height: 100%;
  width: 2px; /* Kept at 1px as per original demo style */
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0.6; /* Slightly increased opacity for better visibility */
  background: linear-gradient(0deg, rgba(255,255,255,0.3) 0%, transparent 100%); /* Slightly more opaque base for gradient */
}
.interactive-banner-section .interactive-list .ineteractive-single-item:last-child::after {
  display: none;
}
@media (max-width: 1199px) { 
    .interactive-banner-section .interactive-list .ineteractive-single-item:after {
        display: none;
    }
}

.interactive-banner-section .interactive-list .ineteractive-single-item .responsive-bg-img {
  display: none; 
}
@media (max-width: 1199px) {
  .interactive-banner-section .interactive-list .ineteractive-single-item .responsive-bg-img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    z-index: 1; 
    opacity: 0.7; /* Slight opacity to allow text to be readable */
    aspect-ratio: 16 / 9; /* Common aspect ratio to reserve space before JPG/WebP loads */
  }
  .interactive-banner-section .interactive-list .ineteractive-single-item .responsive-bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  .interactive-banner-section .interactive-list .ineteractive-single-item .responsive-bg-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 2;
  }
}

.interactive-banner-section .interactive-list .ineteractive-single-item .card-content {
  position: relative; 
  z-index: 5; 
  width: 100%; /* Ensure content takes width */
}

.interactive-banner-section .interactive-list .ineteractive-single-item .card-content .catgory-and-title {
  transform: translateY(50px); /* Adjusted initial offset to be closer to original Axleo */
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.interactive-banner-section .interactive-list .ineteractive-single-item .card-content .catgory-and-title > a {
  font-family: var(--tp-ff-heading, sans-serif); /* Use Liko theme's heading font */
  font-size: 13px; 
  font-weight: 400; 
  color: var(--tp-common-white);
  border: 1px solid rgba(255, 255, 255, 0.83);
  border-radius: 50px;
  padding: 5px 15px; /* Adjusted padding */
  margin-bottom: 15px; /* Adjusted margin */
  display: inline-block;
  text-decoration: none;
  background-color: rgba(0,0,0,0.2); /* Slight background for readability */
}
.interactive-banner-section .interactive-list .ineteractive-single-item .card-content .catgory-and-title h3 {
  margin-bottom: 0;
}
/* Ensure the h3 itself also gets the correct color and font-weight to avoid inheritance issues */
.interactive-banner-section .interactive-list .ineteractive-single-item .card-content .catgory-and-title h3 {
  font-family: var(--tp-ff-heading, sans-serif) !important;
  color: var(--tp-common-white, var(--white-color)) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important; /* Optimized for Unbounded/Fahkwang */
  font-size: 46px !important; /* Apply font-size here too if 'a' tag doesn't fill h3 */
  margin-bottom: 0 !important; /* Ensure no theme margins interfere */
  margin-top: 0 !important;
  min-height: 1.1em; /* Reserve space for at least one line */
}
.interactive-banner-section .interactive-list .ineteractive-single-item .card-content .catgory-and-title h3 a {
  font-family: inherit !important; /* Inherit from parent h3 */
  font-size: inherit !important; /* Inherit from parent h3 */
  font-weight: inherit !important; /* Inherit from parent h3 */
  line-height: inherit !important; /* Inherit from parent h3 */
  color: inherit !important; /* Inherit from parent h3 */
  transition: color 0.35s;
  text-decoration: none;
  display: block; /* Ensure 'a' tag takes up space if h3 has padding */
  /* text-shadow: 1px 1px 2px rgba(0,0,0,0.5); */ /* Removed text-shadow for crispness */
}
@media (max-width: 1399px) {
  .interactive-banner-section .interactive-list .ineteractive-single-item .card-content .catgory-and-title h3,
  .interactive-banner-section .interactive-list .ineteractive-single-item .card-content .catgory-and-title h3 a {
    font-size: 38px !important; /* Adjusted responsive size */
  }
}
@media (max-width: 1199px) { 
  .interactive-banner-section .interactive-list .ineteractive-single-item .card-content .catgory-and-title h3,
  .interactive-banner-section .interactive-list .ineteractive-single-item .card-content .catgory-and-title h3 a {
    font-size: 32px !important; /* Adjusted responsive size */
  }
}
@media (max-width: 767px) { 
  .interactive-banner-section .interactive-list .ineteractive-single-item .card-content .catgory-and-title h3,
  .interactive-banner-section .interactive-list .ineteractive-single-item .card-content .catgory-and-title h3 a {
    font-size: 28px !important; /* Adjusted responsive size */
  }
}
.interactive-banner-section .interactive-list .ineteractive-single-item .card-content .catgory-and-title h3 a:hover {
  color: var(--primary-color); 
}

.interactive-banner-section .interactive-list .ineteractive-single-item .card-content p {
  margin-bottom: 0;
  font-family: var(--tp-ff-heading, sans-serif); /* Use Liko theme's heading font */
  font-size: 18px; 
  font-weight: 400; /* Made lighter to match demo visual */
  line-height: 1.6; 
  color: rgba(255, 255, 255, 0.85); /* Made description text whiter */
  transform: translateY(100%); 
  opacity: 0; 
  will-change: transform, opacity;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.1s, opacity 0.4s ease 0.1s; /* Added delay */
  padding-top: 10px; /* Adjusted padding */
  min-height: 3.2em; /* Reserve space for ~2 lines of description */
  /* text-shadow: 1px 1px 1px rgba(0,0,0,0.3); */ /* Removed text-shadow for crispness */
}

.interactive-banner-section .interactive-list .ineteractive-single-item:hover .card-content .catgory-and-title,
.interactive-banner-section .interactive-list .ineteractive-single-item.force-show .card-content .catgory-and-title { /* For JS to force show */
  transform: translateY(0);
}
.interactive-banner-section .interactive-list .ineteractive-single-item:hover .card-content p,
.interactive-banner-section .interactive-list .ineteractive-single-item.force-show .card-content p {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure the main section itself doesn't have a conflicting background if images fail to load */
.interactive-banner-section {
    background-color: #111; /* Dark fallback background */
}