/* =========================================================
   Media page interactive widgets: News / Gallery / Case Studies / Collab
   ========================================================= */

/* ---- Shared tab row ---- */
.tab-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 10px; }
.tab-btn{
  padding:10px 20px;
  border-radius:50px;
  border:1px solid rgba(15,81,50,.18);
  background:#fff;
  font-family:var(--font-label);
  font-size:13px;
  font-weight:600;
  color:var(--dark-800);
  transition:background .2s, color .2s, border-color .2s;
  white-space:nowrap;
}
.tab-btn:hover{ border-color:var(--green-800); }
.tab-btn.is-active, .tab-btn.itn-tab-active, .tab-btn.eg-tab-active, .tab-btn.cs-tab-active, .tab-btn.csc-tab-active{ background:var(--green-800); border-color:var(--green-800); color:#fff; }
.sec-dark .tab-btn, .sec-darker .tab-btn{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.75); }
.sec-dark .tab-btn.is-active, .sec-darker .tab-btn.is-active, .sec-dark .tab-btn.itn-tab-active, .sec-darker .tab-btn.itn-tab-active, .sec-dark .tab-btn.eg-tab-active, .sec-darker .tab-btn.eg-tab-active, .sec-dark .tab-btn.cs-tab-active, .sec-darker .tab-btn.cs-tab-active, .sec-dark .tab-btn.csc-tab-active, .sec-darker .tab-btn.csc-tab-active{ background:var(--mint); border-color:var(--mint); color:#04140d; }

.tab-row-secondary{ margin-top:-2px; }
.tab-row-secondary .tab-btn{
  padding:8px 16px;
  font-size:12px;
  border-radius:10px;
}

.scroll-nav-row{ display:flex; justify-content:flex-end; gap:8px; margin-bottom:18px; }
.scroll-nav-btn{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(15,81,50,.2);
  background:#fff;
  color:var(--green-800);
  font-size:16px;
  transition:background .2s, color .2s;
}
.scroll-nav-btn:hover{ background:var(--green-800); color:#fff; }

/* ================= IN THE NEWS ================= */
.itn-news{ margin-top:8px; }
.itn-scroll-row{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding-bottom:8px;
  scrollbar-width:thin;
}
.itn-card{
  flex:0 0 320px;
  background:#fff;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease);
}
.itn-card:hover{ transform:translateY(-6px); }
.itn-card-media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.itn-card-media img{ width:100%; height:100%; object-fit:cover; }
.itn-badge{
  position:absolute; left:14px; bottom:14px;
  background:rgba(13,26,20,.75);
  color:#fff;
  font-family:var(--font-label);
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  padding:6px 12px;
  border-radius:6px;
  backdrop-filter:blur(4px);
}
.itn-card-body{ padding:22px; }
.itn-card-title{ font-size:16px; font-weight:700; line-height:1.4; margin:0 0 10px; color:var(--ink); }
.itn-card-excerpt{ font-size:13.5px; color:var(--text-body); line-height:1.65; margin:0 0 16px; }
.itn-read-more{ font-family:var(--font-label); font-size:13px; font-weight:700; color:var(--green-800); }
.itn-empty-filtered{ text-align:center; color:var(--text-body); padding:30px; }

/* ================= FIELD ENGAGEMENTS GALLERY ================= */
.eg-widget{ margin-top:8px; }
.eg-gallery{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-top:22px;
}
@media (max-width:900px){ .eg-gallery{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .eg-gallery{ grid-template-columns:repeat(2,1fr); } }

.eg-photo{
  position:relative;
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden;
  border:none;
  padding:0;
  cursor:pointer;
  background:#eee;
}
.eg-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.eg-photo:hover img{ transform:scale(1.08); }
.eg-photo-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 10px;
  background:linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color:#fff;
  font-size:11px;
  text-align:left;
  opacity:0;
  transition:opacity .25s;
}
.eg-photo:hover .eg-photo-caption{ opacity:1; }
.eg-empty{ text-align:center; color:var(--text-body); padding:30px; grid-column:1/-1; }

.eg-show-more-wrap{ display:flex; justify-content:center; margin-top:26px; }
.eg-show-more{
  padding:13px 30px;
  border-radius:14px;
  border:1px solid rgba(15,81,50,.25);
  background:#fff;
  color:var(--green-800);
  font-family:var(--font-label);
  font-weight:700;
  font-size:13px;
  transition:background .2s, color .2s;
}
.eg-show-more:hover{ background:var(--green-800); color:#fff; }

.eg-highlights-heading{
  margin:46px 0 20px;
  font-family:var(--font-heading);
  font-size:20px;
  font-weight:700;
  color:var(--ink);
}
.eg-highlights{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:820px){ .eg-highlights{ grid-template-columns:1fr; } }
.eg-highlight-card{
  background:#fff;
  border-radius:var(--radius-md);
  padding:24px;
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-soft);
}
.eg-highlight-label{
  display:inline-block;
  font-family:var(--font-label);
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--green-600);
  margin-bottom:10px;
}
.eg-highlight-card h3{ font-size:15px; font-weight:700; margin-bottom:8px; }
.eg-highlight-card p{ font-size:13px; color:var(--text-body); line-height:1.6; margin:0; }

/* Lightbox */
.eg-lightbox-overlay{
  position:fixed; inset:0;
  background:rgba(5,10,8,.9);
  z-index:2000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s;
  flex-direction:column;
  padding:40px 20px;
}
.eg-lightbox-overlay.eg-open{ opacity:1; pointer-events:auto; }
.eg-lightbox-overlay img{ max-width:min(90vw, 900px); max-height:75vh; border-radius:12px; object-fit:contain; }
.eg-lightbox-caption{ color:#fff; margin-top:16px; font-size:14px; text-align:center; }
.eg-lightbox-close{
  position:absolute; top:24px; right:28px;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:22px;
  border:none;
}

/* ================= IMPLEMENTATION STORIES ================= */
.cs-collection{ margin-top:8px; }
.cs-scroll-row{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding-bottom:8px;
}
.cs-card{
  flex:0 0 340px;
  background:#fff;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease);
}
.cs-card:hover{ transform:translateY(-6px); }
.cs-card-media{ aspect-ratio:16/10; overflow:hidden; }
.cs-card-media img{ width:100%; height:100%; object-fit:cover; }
.cs-card-body{ padding:22px; }
.cs-card-tag{
  font-family:var(--font-label);
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--green-600);
  margin:0 0 10px;
}
.cs-card-meta{ font-size:12.5px; color:var(--text-body); margin:0 0 12px; line-height:1.8; }
.cs-card-meta strong{ color:var(--dark-800); }
.cs-card-title{ font-size:16px; font-weight:700; line-height:1.4; margin:0 0 10px; color:var(--ink); }
.cs-card-excerpt{ font-size:13.5px; color:var(--text-body); line-height:1.65; margin:0 0 12px; }
.cs-card-outcome{ font-size:12.5px; color:var(--green-800); background:var(--bg-mint-tint); border-radius:10px; padding:10px 12px; margin:0 0 16px; }
.cs-card-outcome strong{ font-weight:700; }
.cs-card-link{ font-family:var(--font-label); font-size:13px; font-weight:700; color:var(--green-800); }
.cs-empty-filtered{ text-align:center; color:var(--text-body); padding:30px; }

/* Modal */
.cs-modal-overlay{
  position:fixed; inset:0;
  background:rgba(5,10,8,.75);
  z-index:2000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s;
  padding:24px;
}
.cs-modal-overlay.cs-open{ opacity:1; pointer-events:auto; }
.cs-modal{
  background:#fff;
  border-radius:var(--radius-lg);
  max-width:800px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  position:relative;
  padding:40px;
}
.cs-modal-close{
  position:absolute; top:20px; right:20px;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--bg-cream);
  border:none;
  font-size:20px;
  color:var(--dark-800);
}
.cs-modal-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
@media (max-width:640px){ .cs-modal-two-col{ grid-template-columns:1fr; } }
.cs-modal-image-section h3{ font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--green-600); margin-bottom:12px; }
.cs-modal-image-grid{ display:grid; gap:12px; }
.cs-modal-image img{ width:100%; border-radius:12px; }
.cs-modal-title{ font-size:22px; font-weight:700; margin:0 0 16px; color:var(--ink); }
.cs-modal-text p{ font-size:14.5px; line-height:1.8; color:var(--text-body); }

/* ================= COLLABORATIONS LOGO TABS ================= */
.csc-collab{ margin-top:8px; }
.csc-scroll-row{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:8px 4px;
}
.csc-logo-tile{
  flex:0 0 200px;
  height:130px;
  background:#fff;
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease);
}
.csc-logo-tile:hover{ transform:translateY(-4px); }
.csc-logo-tile img{ max-width:100%; max-height:100%; object-fit:contain; }
.csc-empty{ text-align:center; color:var(--text-body); padding:30px; width:100%; }