/* ==========================================================================
   Showcase gallery — filterable bento grid for the Our Product page.
   Self-contained and namespaced (.showcase*) so it cannot collide with the
   theme selectors in main.css / responsive.css.
   Palette and type are inherited from the existing brand: green #2c724f,
   Libre Baskerville for display, Work Sans for body.
   ========================================================================== */

.showcase {
  --sc-green: #2c724f;
  --sc-green-dark: #1f5439;
  --sc-green-soft: #eef4f1;
  --sc-ink: #17211c;
  --sc-muted: #67766e;
  --sc-line: #e2e8e5;
  --sc-radius: 6px;
  --sc-gap: 14px;
  --sc-row: 130px;

  padding: 90px 0 100px;
  background: #fff;
}

/* ---------- section head ---------- */

.showcase__head {
  max-width: 720px;
  margin-bottom: 34px;
}

.showcase__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: "Work Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-green);
}

.showcase__eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--sc-green);
}

.showcase__title {
  margin: 0 0 16px;
  font-family: "Libre Baskerville", serif;
  font-size: 40px;
  line-height: 1.24;
  color: var(--sc-ink);
}

.showcase__lead {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-size: 17px;
  line-height: 1.72;
  color: var(--sc-muted);
}

/* ---------- filter chips ---------- */

.showcase__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.showcase__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  background: #fff;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--sc-ink);
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.showcase__chip:hover {
  border-color: var(--sc-green);
  color: var(--sc-green);
}

.showcase__chip:focus-visible {
  outline: 2px solid var(--sc-green);
  outline-offset: 2px;
}

.showcase__chip.is-active {
  background: var(--sc-green);
  border-color: var(--sc-green);
  color: #fff;
}

.showcase__count {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sc-muted);
}

.showcase__chip:hover .showcase__count {
  color: var(--sc-green);
}

.showcase__chip.is-active .showcase__count {
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- spec strip for the active category ---------- */

/* Two columns while every line's spec is on screen ("Semua"), one column once
   the gallery is narrowed to a single category. */
.showcase__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}

.showcase__specs.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.showcase__spec {
  padding: 18px 22px;
  border-radius: var(--sc-radius);
  background: var(--sc-green-soft);
  font-family: "Work Sans", sans-serif;
}

.showcase__spec h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--sc-green-dark);
}

.showcase__spec dl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.showcase__spec dt {
  color: var(--sc-muted);
  font-weight: 500;
}

.showcase__spec dd {
  margin: 0 0 0 6px;
  color: var(--sc-ink);
}

.showcase__spec dt,
.showcase__spec dd {
  display: inline;
}

.showcase__spec-pair {
  white-space: nowrap;
}

.showcase__spec-use {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(44, 114, 79, 0.16);
  white-space: normal;
}

/* Process categories (Produksi, Gudang & Kirim, Ragam Warna) carry a sentence
   with no spec pairs above it, so the separator would hang under the heading
   with nothing to separate. */
.showcase__spec dl > .showcase__spec-use:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- bento grid ---------- */

/* Reused on the homepage preview, where the surrounding section owns the
   vertical rhythm instead. */
.showcase--bare {
  padding: 0;
}

.showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--sc-row);
  gap: var(--sc-gap);
  /* Mixed column/row spans leave holes under normal auto-placement; dense
     backfills them so the bento reads as a solid block at every breakpoint. */
  grid-auto-flow: dense;
}

.showcase__item {
  position: relative;
  grid-row: span 2;
  margin: 0;
  overflow: hidden;
  border-radius: var(--sc-radius);
  background: #eef1f0;
  opacity: 0;
  transform: translateY(14px);
  animation: showcase-in 0.5s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--sc-i, 0) * 45ms);
}

.showcase__item--tall {
  grid-row: span 3;
}

.showcase__item--wide {
  grid-column: span 2;
}

.showcase__item--hero {
  grid-column: span 2;
  grid-row: span 4;
}

.showcase__item[hidden] {
  display: none;
}

@keyframes showcase-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.showcase__link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.showcase__link:focus-visible {
  outline: 3px solid var(--sc-green);
  outline-offset: -3px;
}

.showcase__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.showcase__item:hover img,
.showcase__link:focus-visible img {
  transform: scale(1.07);
}

/* caption + scrim */

.showcase__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 26, 19, 0.82) 0%,
    rgba(11, 26, 19, 0.34) 38%,
    rgba(11, 26, 19, 0) 66%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.showcase__item:hover .showcase__scrim,
.showcase__link:focus-visible .showcase__scrim,
.showcase__item--video .showcase__scrim {
  opacity: 1;
}

.showcase__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px;
  font-family: "Work Sans", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.showcase__item:hover .showcase__cap,
.showcase__link:focus-visible .showcase__cap {
  opacity: 1;
  transform: none;
}

.showcase__cap b {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9fd9bd;
}

/* zoom affordance */

.showcase__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sc-green);
  color: #fff;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.showcase__item:hover .showcase__zoom,
.showcase__link:focus-visible .showcase__zoom {
  opacity: 1;
  transform: none;
}

.showcase__zoom svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* video tile */

.showcase__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--sc-green);
  transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.2, 1), background-color 0.35s ease;
}

.showcase__item--video:hover .showcase__play,
.showcase__item--video .showcase__link:focus-visible .showcase__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #fff;
}

.showcase__play svg {
  width: 20px;
  height: 20px;
  margin-left: 3px;
  fill: currentColor;
}

.showcase__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(11, 26, 19, 0.66);
  backdrop-filter: blur(6px);
  font-family: "Work Sans", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

/* empty state */

.showcase__empty {
  padding: 56px 0;
  text-align: center;
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  color: var(--sc-muted);
}

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
  .showcase {
    --sc-row: 112px;
  }
  .showcase__title {
    font-size: 34px;
  }
}

@media (max-width: 991px) {
  .showcase {
    --sc-row: 118px;
    --sc-gap: 12px;
    padding: 70px 0 78px;
  }
  .showcase__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .showcase {
    --sc-row: 118px;
    padding: 56px 0 64px;
  }
  .showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .showcase__specs {
    grid-template-columns: minmax(0, 1fr);
  }
  .showcase__title {
    font-size: 27px;
  }
  .showcase__lead {
    font-size: 15px;
  }
  .showcase__item--hero {
    grid-row: span 3;
  }

  /* Touch has no hover, so captions cannot be revealed on demand. Show them
     permanently on the wide tiles, which are wide enough to read, and drop them
     on the narrow tiles where three lines of text would cover half the photo.
     The full caption is still there in the lightbox and in each img alt. */
  .showcase__item--hero .showcase__scrim,
  .showcase__item--hero .showcase__cap,
  .showcase__item--wide .showcase__scrim,
  .showcase__item--wide .showcase__cap {
    opacity: 1;
    transform: none;
  }

  .showcase__item:not(.showcase__item--hero):not(.showcase__item--wide) .showcase__cap {
    display: none;
  }

  .showcase__zoom {
    display: none;
  }

  /* One horizontally scrollable row beats five stacked rows of chips eating
     the whole screen before the first photo. */
  .showcase__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .showcase__filters::-webkit-scrollbar {
    display: none;
  }

  .showcase__chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

@media (max-width: 575px) {
  .showcase {
    --sc-row: 96px;
    --sc-gap: 10px;
  }
  .showcase__cap {
    padding: 11px 12px;
    font-size: 12px;
  }
  .showcase__play {
    width: 50px;
    height: 50px;
  }
  .showcase__spec dl {
    gap: 4px 16px;
  }
}

/* ---------- lightbox backdrop ----------
   fancybox ships a 0.87 backdrop. The theme header is position:fixed with
   z-index 9999, so at that opacity it bleeds visibly through the overlay.
   Nothing else on the site used fancybox's stylesheet before this page linked
   it, so darkening the backdrop here is safe and isolates the photo properly. */

.fancybox-bg {
  background: #101613;
}

.fancybox-is-open .fancybox-bg {
  opacity: 0.985;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .showcase__item {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .showcase__item img,
  .showcase__scrim,
  .showcase__cap,
  .showcase__zoom,
  .showcase__play,
  .showcase__chip {
    transition: none;
  }
  .showcase__item:hover img,
  .showcase__link:focus-visible img {
    transform: none;
  }
}