/* ==========================================================================
   HOME PAGE EXCLUSIVE STYLES
   Handles specific CSS rules for layout blocks unique to index.html/home page.
   ========================================================================== */

/* --- Timeline Section Styles --- */
.timeline-item {
  position: relative;
  padding-left: 2.5rem;
}

/* Red indicator dot on the timeline */
.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-tertiary);
  flex-shrink: 0;
}

/* Connecting vertical line on the timeline */
.timeline-item::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 20px;
  bottom: -24px;
  width: 1px;
  background: #e5e7eb;
}

/* Hide the connecting line on the last timeline node */
.timeline-item:last-child::after {
  display: none;
}

/* --- Facility Cards --- */
.facility-card .fac-img {
  overflow: hidden;
}

/* Subtle image zoom on card hover */
.facility-card:hover .fac-img img {
  transform: scale(1.05);
}

/* Smooth zoom transition */
.fac-img img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Core Values Cards --- */
.value-card {
  border-top: 2px solid transparent;
  transition:
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Lift and highlight card on hover */
.value-card:hover {
  border-top-color: var(--color-tertiary);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* --- Numeric Stats Formatting --- */
.stat-num {
  font-variant-numeric: tabular-nums;
}

/* --- Brand Marquee (Logo Loop) Animations --- */
@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marqueeScrollReverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Forward marquee loop */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll var(--marquee-duration, 60s) linear infinite;
}

/* Reverse direction marquee loop */
.marquee-track-reverse {
  display: flex;
  width: max-content;
  animation: marqueeScrollReverse var(--marquee-duration, 60s) linear infinite;
}

/* Pause scroll animation when user hovers */
.marquee-container:hover .marquee-track,
.marquee-container:hover .marquee-track-reverse {
  animation-play-state: paused;
}

/* Gradient fade masks on left/right edges of the marquee container */
.marquee-container {
  position: relative;
  overflow: hidden;
}

.marquee-container::before,
.marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

.marquee-container::before {
  left: 0;
  background: linear-gradient(to right, #f7f7f7, transparent);
}

.marquee-container::after {
  right: 0;
  background: linear-gradient(to left, #f7f7f7, transparent);
}

/* --- Brand Logo Items inside Marquee --- */
.brand-logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 80px;
  padding: 0 1.25rem;
  transition:
    filter 0.4s ease,
    opacity 0.4s ease;
  filter: grayscale(100%);
  opacity: 0.5;
}

/* Highlight brand logo to color and opaque state on hover */
.brand-logo-item:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.brand-logo-item img {
  width: auto;
  max-width: 140px;
  max-height: 64px;
  height: auto;
  object-fit: contain;
}

/* Responsive sizes for brand logos */
@media (max-width: 640px) {
  .brand-logo-item {
    width: 120px;
    height: 64px;
    padding: 0 0.875rem;
  }
  .brand-logo-item img {
    max-width: 105px;
    max-height: 52px;
    height: auto;
  }
}

/* --- Static Fallback for reduced motion preferences --- */
.customer-grid-fallback {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-wrapper {
    display: none !important;
  }
  .customer-grid-fallback {
    display: grid !important;
  }
}

/* Grid layout for customer logos (reduced motion fallback) */
.customer-grid-item {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  height: 6.5rem;
  transition: background-color 0.3s var(--ease-smooth);
}

.customer-grid-item img {
  max-width: 100%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition:
    filter 0.3s var(--ease-smooth),
    opacity 0.3s var(--ease-smooth),
    transform 0.3s var(--ease-smooth);
}

.customer-grid-item:hover {
  background-color: #fafafa;
}

.customer-grid-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.06);
}

/* --- QA / Sustainability Section Cards --- */
.qa-feature-card {
  background: #fff;
  padding: 2rem;
  border-top: 2px solid transparent;
  transition:
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.qa-feature-card:hover {
  border-top-color: var(--color-tertiary);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Small square wrapper for QA icons */
.qa-icon-box {
  width: 48px;
  height: 48px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.qa-icon-box svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-tertiary);
}

/* Dark stat blocks underneath the QA intro */
.qa-stat-block {
  padding: 2.5rem 2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease;
}

.qa-stat-block:last-child {
  border-right: none;
}

.qa-stat-block:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Responsive layout adjustments for dark stat blocks */
@media (max-width: 1023px) {
  .qa-stat-block {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .qa-stat-block:last-child {
    border-bottom: none;
  }
}

/* Detailed QA specification card */
.qa-detail-card {
  background: #fff;
  padding: 2.5rem;
  border-top: 2px solid var(--color-tertiary);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.qa-detail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Icon box inside detailed specification card */
.qa-detail-icon {
  width: 40px;
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.qa-detail-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-tertiary);
}

/* Grid of quality control tests */
.qa-test-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #e5e7eb;
  border: 1px solid #e5e7eb;
  margin-top: 1.5rem;
}

.qa-test-grid-item {
  background: #f9fafb;
  padding: 0.875rem 1rem;
}

/* Custom bullet styling for list items */
.qa-bullet-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.875rem;
}

.qa-bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d97706;
}

/* --- Product Showcase Grid Layout (Asymmetrical grid) --- */
.product-showcase-grid {
  grid-template-rows: 480px 300px;
}

.product-card-tall {
  grid-column: 1/2;
  grid-row: 1/3;
}

.product-card-top-mid {
  grid-column: 2/3;
  grid-row: 1/2;
}

.product-card-top-right {
  grid-column: 3/4;
  grid-row: 1/2;
}

.product-card-bot-mid {
  grid-column: 2/3;
  grid-row: 2/3;
}

.product-card-bot-right {
  grid-column: 3/4;
  grid-row: 2/3;
}

/* Responsive grids for Product Showcase on mobile and tablet devices */
@media (max-width: 767px) {
  .product-showcase-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 260px 220px 220px;
  }
  .product-card-tall {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .product-card-top-mid {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .product-card-top-right {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .product-card-bot-mid {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  .product-card-bot-right {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  .product-showcase-grid > div > div.absolute.bottom-0 {
    padding: 1rem;
  }

  .product-showcase-grid > div > img {
    object-fit: cover;
  }
}

/* Zoom transition for showcase images */
.product-showcase-grid > div > img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-showcase-grid > div:hover > img {
  transform: scale(1.06);
}

/* Semi-transparent dark overlay gradient on card text elements */
.product-card-overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.08) 58%,
    transparent 100%
  );
}

/* Utility class to hide default browser scrollbar */
.no-scrollbar {
  scrollbar-width: none;
}

@supports not (scrollbar-width: none) {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
}

/* ==========================================================================
   PRODUCTION NETWORK — interactive map points + popup
   The Java map is a flat raster with pins baked in. Each .map-point is an
   absolutely-positioned anchor (percentage coords --x / --y) holding a .map-dot
   that overlays the baked-in pin. Hover OR the .is-active state (set via JS from
   the legend cards or on click) triggers the identical zoom/glow effect; an
   active click also reveals a single reusable .map-popup card.
   ========================================================================== */
.map-wrap {
  position: relative;
}



/* Coordinate anchor — its center is the pin location. */
.map-point {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  z-index: 2;
}

.map-point.is-active {
  z-index: 6;
}

.map-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 9999px;
  background: var(--c, #1a3a5c);
  /* translate centers the dot on the anchor; scale is layered on top */
  transform: translate(-50%, -50%) scale(1);
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    opacity 0.3s ease;
  cursor: pointer;
}

/* Shared zoom/glow — hover the dot OR .is-active set on the parent point */
.map-dot:hover,
.map-dot:focus-visible,
.map-point.is-active .map-dot {
  transform: translate(-50%, -50%) scale(2.3);
  box-shadow:
    0 0 0 6px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.25);
  outline: none;
}

/* Contextual dimming: when one point is active, fade the others for focus. */
.map-wrap.map-dimmed .map-point:not(.is-active) .map-dot:not(:hover) {
  opacity: 0.35;
}

/* --- Popup card — minimal: location name + Google Maps CTA only ---------- */
.map-popup {
  position: absolute;
  z-index: 20;
  width: 220px;
  max-width: 80vw;
  background: #fff;
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.12);
  /* JS sets left/top (in px) to the active anchor, then nudges `left` to keep
     the card inside the viewport (auto-pan). The tail compensates via --tail. */
  transform: translate(-50%, calc(-100% - 18px));
  transform-origin: 50% 100%;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    left 0.2s ease;
}

.map-popup.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, calc(-100% - 24px));
}

/* Pointer tail — stays pinned under the dot even after the card is nudged
   sideways (auto-pan), via --tail (the inverse of the margin shift, set by JS). */
.map-popup::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: #fff;
  transform: translateX(-50%) translateX(var(--tail, 0px)) rotate(45deg);
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
}

/* Flip below the dot when there isn't room above (top-edge points). */
.map-popup--below {
  transform: translate(-50%, 18px);
}
.map-popup--below.is-open {
  transform: translate(-50%, 24px);
}
.map-popup--below::after {
  bottom: auto;
  top: -8px;
  box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.06);
}

.map-popup__close {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 20px;
  line-height: 1;
  color: #9ca3af;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.map-popup__close:hover {
  color: #374151;
}

.map-popup__name {
  font-family: "Oswald", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
  margin: 0 22px 6px 0; /* right gap clears the close button */
}

/* Address — secondary/decorative: small, muted, disabled-like. It's a hint
   under the name, not a focal point; the Google Maps CTA carries the action. */
.map-popup__address {
  font-family: "Barlow", sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.45;
  color: #9ca3af; /* muted grey, reads as a faint caption */
  margin: 0 0 12px 0;
}

.map-popup__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 9999px;
  background: var(--c, #1a3a5c);
  color: #fff;
  font-family: "Barlow", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    filter 0.15s ease,
    transform 0.15s ease;
}
.map-popup__cta:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* Reverse direction: when a point is hovered/active, highlight its legend card */
.map-card {
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.map-card.is-active {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  .map-dot,
  .map-card,
  .map-popup {
    transition: none;
  }
}

/* --- Horizontal scroll container (tablet/mobile, <1024px) -----------------
   Below lg, .map-wrap is pinned to 1000px (see the w-[1000px] lg:w-full
   utility classes on the element) so cards/text never shrink to illegible
   sizes. This outer wrapper is the ONLY thing that scrolls horizontally —
   the page's own vertical scroll is untouched. */
.map-scroll-outer {
  -webkit-overflow-scrolling: touch;
}

/* --- Floating Infographic Cards — small, absolutely positioned over the map,
   one per facility, spaced out so none touch each other, each wired to its
   pin by an elbow-bent SVG path (see below). Percentage left/top/width keep
   them aligned to the raster pins as the map scales. --- */
.map-infographic-card {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    z-index 0s;
}

.map-infographic-card.is-active,
.map-infographic-card:hover {
  transform: translateY(-4px) scale(1.03);
  z-index: 15;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.card-loc-daanmogot {
  left: 1.5%;
  top: -35%;
  width: 19%;
}
.card-loc-rangkasbitung {
  left: 1%;
  top: 55%;
  width: 19%;
}
.card-loc-kalisabi {
  left: 24%;
  top: 62%;
  width: 19%;
}
.card-loc-majalengka {
  left: 46.5%;
  top: 65%;
  width: 19%;
}
.card-loc-batang {
  left: 69.5%;
  top: 58%;
  width: 19%;
}

/* --- SVG Connector Lines — elbow-bent dashed path (vertical then horizontal,
   never a raw diagonal) + a dot at each card's anchor corner. Highlighted/
   dimmed in tandem with the pin and card via [data-active-loc] on .map-wrap
   (set by home.js). --- */
.map-connector-lines .svg-line {
  stroke-width: 2px;
  stroke-dasharray: 5 4;
  fill: none;
  stroke-linejoin: round;
  transition:
    stroke-width 0.3s ease,
    filter 0.3s ease,
    opacity 0.3s ease;
}

.map-connector-lines .svg-dot {
  transition: opacity 0.3s ease;
}

.svg-line-daanmogot,
.svg-dot-daanmogot {
  stroke: #d01e25;
  fill: #d01e25;
}
.svg-line-rangkasbitung,
.svg-dot-rangkasbitung {
  stroke: #1e6b3c;
  fill: #1e6b3c;
}
.svg-line-kalisabi,
.svg-dot-kalisabi {
  stroke: #6b3fa0;
  fill: #6b3fa0;
}
.svg-line-majalengka,
.svg-dot-majalengka {
  stroke: #053255;
  fill: #053255;
}
.svg-line-batang,
.svg-dot-batang {
  stroke: #e07b2a;
  fill: #e07b2a;
}

/* Dim every line except the active one; the active line loses its dashes,
   thickens slightly and gains a soft glow. */
.map-wrap[data-active-loc="daanmogot"] .svg-line:not(.svg-line-daanmogot),
.map-wrap[data-active-loc="daanmogot"] .svg-dot:not(.svg-dot-daanmogot),
.map-wrap[data-active-loc="rangkasbitung"] .svg-line:not(.svg-line-rangkasbitung),
.map-wrap[data-active-loc="rangkasbitung"] .svg-dot:not(.svg-dot-rangkasbitung),
.map-wrap[data-active-loc="kalisabi"] .svg-line:not(.svg-line-kalisabi),
.map-wrap[data-active-loc="kalisabi"] .svg-dot:not(.svg-dot-kalisabi),
.map-wrap[data-active-loc="majalengka"] .svg-line:not(.svg-line-majalengka),
.map-wrap[data-active-loc="majalengka"] .svg-dot:not(.svg-dot-majalengka),
.map-wrap[data-active-loc="batang"] .svg-line:not(.svg-line-batang),
.map-wrap[data-active-loc="batang"] .svg-dot:not(.svg-dot-batang) {
  opacity: 0.25;
}

.map-wrap[data-active-loc="daanmogot"] .svg-line-daanmogot,
.map-wrap[data-active-loc="rangkasbitung"] .svg-line-rangkasbitung,
.map-wrap[data-active-loc="kalisabi"] .svg-line-kalisabi,
.map-wrap[data-active-loc="majalengka"] .svg-line-majalengka,
.map-wrap[data-active-loc="batang"] .svg-line-batang {
  stroke-dasharray: none;
  stroke-width: 2.5px;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25));
}

/* --- Info Panel — plain text sitting above the map, transparent on purpose
   so it reads as a caption rather than another card. --- */
.map-info-panel {
  background: transparent;
}

/* --- Mobile (<=768px): smaller markers, no hover, tap-to-open --------------
   Markers shrink to stay proportional on small screens. We don't set
   touch-action here, so native two-finger pinch-zoom on the map image keeps
   working. Hover styling is gated behind a (hover: hover) device so phones
   never get a stuck :hover state after a tap. */
@media (max-width: 768px) {
  .map-dot {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
  }
  /* On tap-to-open, the active marker still zooms (driven by .is-active). */
  .map-point.is-active .map-dot {
    transform: translate(-50%, -50%) scale(2.6);
  }
  .map-popup {
    width: 200px;
  }
}

/* Only enable :hover zoom on devices that actually have a hover pointer.
   This disables hover behaviour on touch screens (mobile requirement). */
@media (hover: none) {
  .map-dot:hover {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: none;
  }
}