/* ==========================================================================
   Market Hero Banner Section
   ========================================================================== */

.market {
  position: relative;
  max-width: 100%;
  min-height: 30rem; /* 480px */
  margin: 0 auto 3rem auto; /* 48px */
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
}

/* Gradient Overlay for Text Contrast */
.market__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 30, 63, 0.85) 0%,
    rgba(0, 30, 63, 0.4) 50%,
    rgba(0, 30, 63, 0.1) 100%
  );
  z-index: 1;
}

/* Text Container at Bottom */
.market__content {
  position: relative;
  z-index: 2;
  text-align: left;
  box-sizing: border-box;
  max-width: 90%;
  padding: 3.75rem; /* 60px */
}

/* Title Label */
.market__title {
  display: block;
  color: #FFFFFF;
  font-size: clamp(1.5rem, 5vw, 3.375rem); /* 24px -> 54px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem; /* 12px */
}

/* Description Text */
.market__description {
  color: #FFFFFF;
  font-size: 1.5rem; /* 24px */
  line-height: 1.4;
  max-width: 50rem; /* 800px */
  margin: 0;
}

@media (max-width: 768px) {
  .market {
    min-height: 22.5rem; /* 360px */
  }

  .market__content {
    padding: 1.5rem; /* 24px */
  }

  .market__description {
    font-size: 1.125rem;
  }
}

/* ==========================================================================
   Market Tabs Container & Mobile Select Integration
   ========================================================================== */

.market-tabs-wrapper {
  max-width: 100%;
  width: 90%;
  margin: 0 auto 4rem auto; /* 64px */
  box-sizing: border-box;
}

/* Mobile Select Dropdown (< 1024px) */
.market-tabs-mobile {
  display: block;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Market Mobile Select Dropdown (< 1024px)
   ========================================================================== */

.market-tabs-mobile {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
}

.market-tabs-select {
  width: 100%;
  max-width: 100%;
  height: 3.5rem; /* 56px */
  /* Equal left/right padding ensures text centers visually relative to the pill */
  padding: 0 2.5rem; 
  /* min 16px font prevents iOS Safari auto-zoom on touch focus */
  font-size: 1.125rem; 
  font-weight: 600;
  color: #001E3F;
  text-align: center;
  text-align-last: center; /* Centers active selection text on desktop/Android */
  -moz-text-align-last: center;
  background-color: #FFFFFF;
  border: 2px solid #001E3F;
  border-radius: 9999px; /* Pill shape */
  
  /* Reset browser native appearances */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* Arrow Icon */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23001E3F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 1rem;
  
  /* Truncate long option text gracefully on small screens without breaking layout */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}

/* Minimal option styling supported across desktop browsers */
.market-tabs-select option {
  font-weight: 500;
  color: #001E3F;
  background-color: #FFFFFF;
  text-align: center;
}

/* Hide select on desktop viewports */
@media (min-width: 1024px) {
  .market-tabs-mobile {
    display: none !important;
  }
}
/* Desktop Tabs Bar (>= 1024px) */
.market-tabs {
  display: none !important;
  gap: 0.75rem !important; /* 12px */
  border-bottom: none !important;
  margin-bottom: 2rem !important; /* 32px */
  overflow-x: auto !important;
  padding: 0.25rem 0 !important;
}

@media (min-width: 1024px) {
  .market-tabs-mobile {
    display: none !important;
  }

  .market-tabs {
    display: flex !important;
  }
}

/* Individual Tab Pills */
.market-tab {
  display: inline-block !important;
  padding: 0.75rem 1.5rem !important; /* 12px 24px */
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #001E3F !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: 2px solid #001E3F !important;
  border-radius: 1.5rem !important; /* 10px */
  background-color: transparent !important;
  transition: all 0.2s ease-in-out !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.market-tab:hover {
  /* background-color: rgba(0, 30, 63, 0.05) !important; */
  background-color: #001E3F !important;
  color: #fff !important;
}

/* Hide all panels by default */
.market-panel {
  display: none;
}

/* Show active target panel */
.market-panel:target {
  display: block !important;
}

/* Fallback: If no panel is targeted via URL hash, show the first panel wrapper */
.market-tabs-wrapper:not(:has(.market-panel:target)) .market-panels > .field > .field__items > .field__item:first-child .market-panel,
.market-tabs-wrapper:not(:has(.market-panel:target)) .market-panels > .market-panel:first-child {
  display: block !important;
}

/* Active State (via URL Hash :target or .is-active class) */
.market-tab.is-active
/* .market-tabs-wrapper:has(#philippines:target) a[href="#philippines"],
.market-tabs-wrapper:has(#hongkong-macau:target) a[href="#hongkong-macau"],
.market-tabs-wrapper:has(#pacific-islands:target) a[href="#pacific-islands"],
.market-tabs-wrapper:has(#fuel-products:target) a[href="#fuel-products"],
.market-tabs-wrapper:has(#convenience-store:target) a[href="#convenience-store"],
.market-tabs-wrapper:has(#food-and-beverage:target) a[href="#food-and-beverage"],
.market-tabs-wrapper:has(#business--partnership:target) a[href="#business--partnership"]  */
{
  background-color: #001E3F !important;
  color: #FFFFFF !important;
  border-color: #001E3F !important;
}

.market-tab::after {
  display: none !important;
}

/* ==========================================================================
   2-Column Layout for Market Component Card
   ========================================================================== */

.market-component-card {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 32px */
    width: 100%;
    margin-bottom: 2rem !important; /* 32px */

    @media (min-width: 900px) {
        display: grid !important;
        /* 1.5fr / 1fr (~60% / 40%) gives space for the gallery on laptop screens */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 2rem !important;
        align-items: start !important;
    }

    @media (min-width: 1280px) {
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) !important;
        gap: 2.5rem !important;
    }
}

@media (min-width: 1024px) {

  .market-component-card.business--partnership {
    grid-template-columns: 55% 1fr !important;
  }

  .market-component-card__text {
    width: 100%;
  }

  .market-component-card__gallery {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem; /* 16px */
  }
}

/* Left Column: Text & Button Wrapper */
.market-component-card__text {
  display: flex !important;
  flex-direction: column !important;
}

.market-component-card__title {
  color: #001E3F !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 1rem 0 !important;
}

.market-component-card__description {
  color: #4A5568 !important;
  font-size: 1.0625rem !important;
  line-height: 1.65 !important;
  margin-bottom: 1.5rem !important; /* 24px */
}
/* Center link wrapper and button on mobile screens */
@media (max-width: 1023px) {
  .market-component-card__link-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  .market-component-card__link-wrapper .field__item {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .market-component-card__link-wrapper a {
    margin: 0 auto;
  }
}

/* Button Base Styling */
.market-component-card__link-wrapper a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important; /* 8px */
  background-color: #001E3F !important;
  color: #FFFFFF !important;
  padding: 0.75rem 1.75rem !important; /* 12px 28px */
  border-radius: 50px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: all 0.2s ease-in-out !important;
}

.market-component-card__link-wrapper a::after {
  content: "" !important;
  display: inline-block !important;
  width: 1rem !important; /* 16px */
  height: 1rem !important; /* 16px */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.2s ease-in-out !important;
}

.market-component-card__link-wrapper a:hover {
  background-color: #FFBE00 !important;
  color: #001E3F !important;
}

.market-component-card__link-wrapper a:hover::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23001E3F" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>') !important;
  transform: translate(3px, -3px) !important;
}

/* Right Column: 2x2 Image Gallery Grid */
.market-component-card__gallery {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important; /* 16px */
  width: 100% !important;
}

.market-component-card__image-item img {
  width: 100% !important;
  height: 13.75rem !important; /* 220px */
  object-fit: cover !important;
  border-radius: 0.75rem !important; /* 12px */
  display: block !important;
}

@media (max-width: 767px) {
  .market-component-card {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 1.5rem !important;
  }

  .market-component-card__gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 576px) {
  .market-component-card__gallery {
    grid-template-columns: 1fr !important;
  }
}

#business--partnership .market-business--partnership img {
  max-width: 40.5rem; /* 648px */
  height: 19.4375rem; /* 311px */
  margin-top: 2.625rem; /* 42px */
}

/* ==========================================================================
   Staggered Column Galleries (Philippines, Hongkong, Pacific, Fuel, F&B)
   ========================================================================== */

#philippines .market-component-card__gallery,
#hongkong-macau .market-component-card__gallery,
#pacific-islands .market-component-card__gallery,
#cambodia .market-component-card__gallery,
#fuel-products .market-component-card__gallery,
#convenience-store .market-component-card__gallery,
#food-and-beverage .market-component-card__gallery {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    height: 30.875rem !important; /* Keeps your height for column wrapping */
    gap: 1rem !important;
    width: 100% !important; /* FLUID: Fill right grid column */
    max-width: 34.125rem; /* Cap at 546px on large screens */
    box-sizing: border-box !important;
    @media (max-width: 899px) {
        max-width: 100% !important;
    }

    @media (min-width: 1780px) {
        max-width: 100% !important;
    }
}

#philippines .market-component-card__image-item,
#hongkong-macau .market-component-card__image-item,
#pacific-islands .market-component-card__image-item,
#cambodia .market-component-card__image-item,
#fuel-products .market-component-card__image-item,
#convenience-store .market-component-card__image-item,
#food-and-beverage .market-component-card__image-item {
    width: calc(50% - 0.5rem) !important; /* Half width minus gap */
    max-width: 16.5625rem !important;
    margin: 0 !important;
    @media (max-width: 899px) {
        max-width: 100% !important;
    }

    @media (min-width: 1780px) {
        max-width: 100% !important;
    }
}

#philippines .market-component-card__image-item img,
#hongkong-macau .market-component-card__image-item img,
#pacific-islands .market-component-card__image-item img,
#cambodia .market-component-card__image-item img,
#fuel-products .market-component-card__image-item img,
#convenience-store .market-component-card__image-item img,
#food-and-beverage .market-component-card__image-item img {
  width: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 2.625rem !important; /* 42px */
}

/* Column 1 - Top (Short) */
#philippines .market-component-card__image-item:nth-child(1) img,
#hongkong-macau .market-component-card__image-item:nth-child(1) img,
#pacific-islands .market-component-card__image-item:nth-child(1) img,
#cambodia .market-component-card__image-item:nth-child(1) img,
#fuel-products .market-component-card__image-item:nth-child(1) img,
#convenience-store .market-component-card__image-item:nth-child(1) img,
#food-and-beverage .market-component-card__image-item:nth-child(1) img {
  height: 10rem !important; /* 160px */
}

/* Column 1 - Bottom (Tall) */
#philippines .market-component-card__image-item:nth-child(3) img,
#hongkong-macau .market-component-card__image-item:nth-child(3) img,
#pacific-islands .market-component-card__image-item:nth-child(3) img,
#cambodia .market-component-card__image-item:nth-child(3) img,
#fuel-products .market-component-card__image-item:nth-child(3) img,
#convenience-store .market-component-card__image-item:nth-child(3) img,
#food-and-beverage .market-component-card__image-item:nth-child(3) img {
  height: 19.875rem !important; /* 318px */
}

/* Column 2 - Top (Tall) */
#philippines .market-component-card__image-item:nth-child(2) img,
#hongkong-macau .market-component-card__image-item:nth-child(2) img,
#pacific-islands .market-component-card__image-item:nth-child(2) img,
#cambodia .market-component-card__image-item:nth-child(2) img,
#fuel-products .market-component-card__image-item:nth-child(2) img,
#convenience-store .market-component-card__image-item:nth-child(2) img,
#food-and-beverage .market-component-card__image-item:nth-child(2) img {
  height: 19.875rem !important; /* 318px */
}

/* Column 2 - Bottom (Short) */
#philippines .market-component-card__image-item:nth-child(4) img,
#hongkong-macau .market-component-card__image-item:nth-child(4) img,
#pacific-islands .market-component-card__image-item:nth-child(4) img,
#cambodia .market-component-card__image-item:nth-child(4) img,
#fuel-products .market-component-card__image-item:nth-child(4) img,
#convenience-store .market-component-card__image-item:nth-child(4) img,
#food-and-beverage .market-component-card__image-item:nth-child(4) img {
  height: 10rem !important; /* 160px */
}



@media (max-width: 600px) {
  #philippines .market-component-card__gallery,
  #hongkong-macau .market-component-card__gallery,
  #pacific-islands .market-component-card__gallery,
  #cambodia .market-component-card__gallery,
  #fuel-products .market-component-card__gallery,
  #convenience-store .market-component-card__gallery,
  #food-and-beverage .market-component-card__gallery {
    flex-direction: row !important;
    height: auto !important;
    width: 100% !important;
  }

  #philippines .market-component-card__image-item,
  #hongkong-macau .market-component-card__image-item,
  #pacific-islands .market-component-card__image-item,
  #cambodia .market-component-card__image-item,
  #fuel-products .market-component-card__image-item,
  #convenience-store .market-component-card__image-item,
  #food-and-beverage .market-component-card__image-item {
    width: 100% !important;
  }

  #philippines .market-component-card__image-item img,
  #hongkong-macau .market-component-card__image-item img,
  #pacific-islands .market-component-card__image-item img,
  #cambodia .market-component-card__image-item img,
  #fuel-products .market-component-card__image-item img,
  #convenience-store .market-component-card__image-item img,
  #food-and-beverage .market-component-card__image-item img {
    width: 100% !important;
    height: 12.5rem !important; /* 200px */
  }
}

#cambodia .market-component-card__image-item:nth-child(4) img {
    object-position: 50% 22%  !important;
}

#pacific-islands .market-component-card__image-item:nth-child(4) img {
    object-position: 50% 22% !important;
}

/* ==========================================================================
   Cambodia Staggered Gallery
   ========================================================================== */

/* #cambodia .market-component-card__gallery {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  height: 40.75rem !important;
  gap: 1rem !important;
  width: 34.125rem !important;
}

#cambodia .market-component-card__image-item {
  width: 16.5625rem !important;
  margin: 0 !important;
}

#cambodia .market-component-card__image-item img {
  width: 16.5625rem !important;
  object-fit: cover !important;
  border-radius: 2.625rem !important;
  display: block !important;
}

#cambodia .market-component-card__image-item:nth-child(1) img {
  height: 10rem !important;
}

#cambodia .market-component-card__image-item:nth-child(3) img {
  height: 19.875rem !important;
}

#cambodia .market-component-card__image-item:nth-child(2) img {
  height: 19.875rem !important;
}



@media (max-width: 600px) {
  #cambodia .market-component-card__gallery {
    flex-direction: row !important;
    height: auto !important;
    width: 100% !important;
  }

  #cambodia .market-component-card__image-item {
    width: 100% !important;
  }

  #cambodia .market-component-card__image-item img {
    width: 100% !important;
    height: 12.5rem !important;
  }
} */

.page-node-17 .market-tabs-wrapper {
    margin: 42px auto 4rem auto;
}

html {
  scroll-behavior: auto !important;
}

.market-panel {
  scroll-margin-top: 100vh;
}