/* LIGHTING PRODUCTS */

.section--lighting-products{
  background:#f3f8f5;
  padding-top:16px;
  padding-bottom:16px;
}

/* Space between product groups */
.lprod{ padding:10px 0; }
.lprod + .lprod{ margin-top:15px; }

.section--lighting-products figure{ margin:0; }

/* =========================
   Alternating layout (zig-zag)
   -> Image column ~15% wider vs before
   -> Stretch para pantay height ng image at content (desktop)
   ========================= */
.lprod .lp-grid{
  display:grid;
  gap:16px;
  /* OLD: 7fr 9fr (43.75% image). NEW: 8.4fr 8fr (~51% image, ~+15% width vs before) */
  grid-template-columns: 8.4fr 8fr;       /* odd: image wider */
  grid-template-areas: "left right";
  align-items: stretch;                    /* ❗pantay height */
}
.lprod .lp-hero { grid-area:left; }
.lprod .lp-right{ grid-area:right; }

.lprod:nth-of-type(even) .lp-grid{
  grid-template-columns: 8fr 8.4fr;       /* even: image side still wider */
  grid-template-areas: "right left";
}

/* Mobile: stack + natural height para hindi ma-stretch ang image */
@media (max-width: 980px){
  .lprod .lp-grid,
  .lprod:nth-of-type(even) .lp-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "left"
      "right";
    align-items: start;                    /* balik natural heights */
  }
}

/* =========================
   IMAGE (card + zoom on hover)
   - Height 100% on desktop para pantay sa content height
   - Keep natural aspect on mobile
   ========================= */
.lprod .lp-hero{
  overflow:hidden; border-radius:12px; padding:0; position:relative;
  background:#fff;
  box-shadow: 0 6px 14px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.05);
  height:100%;                            /* ❗match row height (desktop) */
}
.lprod .lp-hero img{
  display:block; width:100%; height:100%; /* ❗fill height */
  object-fit:cover;
  transform:scale(1);
  transition: transform .5s cubic-bezier(.22,.61,.36,1), filter .3s ease;
  will-change: transform;
}
.lprod .lp-hero:hover img{ transform:scale(1.10); }  /* +10% */
@media (prefers-reduced-motion:reduce){ .lprod .lp-hero img{ transition:none; } }

/* Mobile: balik natural aspect ratio */
@media (max-width:980px){
  .lprod .lp-hero{ height:auto; }
  .lprod .lp-hero img{
    height:auto;
    aspect-ratio:16/9;
  }
}

.lprod .lp-hero.noimg{
  background:linear-gradient(135deg,#eaf2ee 0,#f7faf8 100%);
  min-height:220px;
}
.lprod .lp-hero figcaption{
  position:absolute; top:10px; right:10px;
  padding:6px 10px; border-radius:999px;
  background:rgba(12,47,27,.9); color:#e7f5ee; font-weight:900; font-size:11.5px;
  border:1px solid rgba(255,255,255,.18);
}

/* =========================
   RIGHT COLUMN headings
   ========================= */
.lprod .lp-right{ padding-right:6px; }
.lprod .lp-title{
  margin:0 0 6px; color:var(--green-700); font-weight:900;
  font-size: clamp(18px, 2vw + 10px, 24px);
}
.lprod .lp-sub{ margin:0 0 10px; color:#5b6b78; font-size:13.2px; }

/* =========================
   ROWS as cards
   ========================= */
.lprod .lp-row{
  background:#fff;
  border:1px solid #edf2f0;
  border-radius:12px;
  padding:12px;
  position:relative;
  overflow:hidden;
  box-shadow: 0 6px 14px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.05);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

/* two columns row */
.lprod .lp-row.two-cols{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px 24px;
}
@media (max-width: 720px){ .lprod .lp-row.two-cols{ grid-template-columns:1fr; } }

/* SAFEGUARD: if a heading slips into the right column, hide it */
.lprod .lp-row.two-cols .lp-col:nth-child(2) .lp-mini{ display:none; }

/* Right column in row 1 without heading — offset so bullets align with left list */
.lprod .lp-col.nohead{ padding-top:24px; }

/* BENEFITS GRID (heading only on left, two lists aligned) */
.lprod .lp-row.benefits-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap:24px; row-gap:6px;
  align-items:start;
}
.lprod .lp-row.benefits-grid .lp-mini{ grid-column:1 / 2; grid-row:1; margin:0; }
.lprod .lp-row.benefits-grid .left{ grid-column:1 / 2; grid-row:2; }
.lprod .lp-row.benefits-grid .right{ grid-column:2 / 3; grid-row:2; }

/* headings */
.lprod .lp-mini{ font-weight:900; color:#0f172a; font-size:13px; }

/* lists */
.lprod .lp-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; line-height:1.45; }
.lprod .lp-list li{ padding-left:14px; position:relative; color:#44515d; font-size:12.6px; }

/* bullets */
.lprod .lp-list.blk li:before{
  content:""; position:absolute; left:0; top:.48em;
  width:6px; height:6px; border-radius:999px; background:#2b343c;
}
.lprod .lp-list.grn li:before{
  content:""; position:absolute; left:0; top:.50em;
  width:6px; height:6px; border-radius:999px; background:#22a455;
}

/* =========================
   ACTION BUTTONS — grid, full width, compact
   ========================= */
.section--lighting-products .lp-actions{
  margin-top:12px;
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
}
.section--lighting-products .lp-actions .btn{
  width:100%; min-width:0; justify-content:center;
  text-decoration:none !important;           /* never underline */
}
.section--lighting-products .btn.btn-compact{
  font-size:12px; padding:7px 11px; border-radius:8px; line-height:1.1;
}
.section--lighting-products .lp-call{ display:inline-flex; align-items:center; gap:6px; }
.section--lighting-products .lp-call svg{ width:13px; height:13px; }

/* Shared button base */
.section--lighting-products .btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent; color:#fff;
  transition: transform .08s ease, box-shadow .18s ease;
}

/* Primary (green) */
.section--lighting-products .btn--primary{
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  border-color:#166534;
  box-shadow: 0 10px 18px rgba(22,163,74,.22), inset 0 -2px 0 rgba(0,0,0,.10);
}
.section--lighting-products .btn--primary:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 14px 28px rgba(22,163,74,.32), inset 0 -2px 0 rgba(0,0,0,.10);
}

/* Call (orange) — match fencing */
.section--lighting-products .btn--outline{
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
  border-color:#c2410c;
  box-shadow: 0 10px 18px rgba(234,88,12,.28), inset 0 -2px 0 rgba(0,0,0,.10);
}
.section--lighting-products .btn--outline:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);  /* stay orange, no white flip */
  box-shadow: 0 0 0 3px rgba(249,115,22,.18), 0 14px 28px rgba(234,88,12,.36), inset 0 -2px 0 rgba(0,0,0,.10);
}

/* Hover-only shine sweep for both buttons */
.section--lighting-products .btn::before{
  content:""; pointer-events:none; position:absolute; inset:-2px; transform: translateX(-120%);
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 70%);
  mix-blend-mode:screen; opacity:.95;
}
.section--lighting-products .btn:hover::before{ animation: lp-btn-shine 1.05s ease; }
@keyframes lp-btn-shine{ to { transform: translateX(120%); } }

/* =========================
   Global CARD shine + hover green (for .lp-hero and .lp-row)
   ========================= */
.lprod .card{
  position:relative;
  overflow:hidden;
  background-clip: padding-box;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}
.lprod .card::after{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  mix-blend-mode:screen;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,.7) 50%,
    rgba(255,255,255,0) 80%
  );
  transform: translateX(-160%);
  animation: lp-card-shine 3.6s linear infinite;  /* linear = continuous */
  opacity:.28;
}
@keyframes lp-card-shine{ to { transform: translateX(160%); } }

.lprod .card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 8% 22%, rgba(255,255,255,.22) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 38%, rgba(255,255,255,.18) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 78%, rgba(255,255,255,.14) 50%, transparent 51%);
  background-repeat:no-repeat;
  opacity:.25;
}

/* hover: slight green tint + tiny lift + stronger shadow */
.lprod .card:hover{
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 18px 42px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.07);
  background-color:#f6fbf8;         /* pale green */
  border-color:#cfe9dc;              /* if a border exists */
}