/* =============================================================================
   TANI RISE GALLERY — Divi 4 Plugin CSS  v1.0.0
   Prefix: .trg- (TaniRiseGallery)
   ============================================================================= */

/* ── CSS Variables ── */
.trg-section {
  --trg-accent:       #2d6a4f;
  --trg-accent-light: #40916c;
  --trg-accent-pale:  #74c69d;
  --trg-bg:           #f8f4ec;
  --trg-brown:        #8b6245;
  --trg-text-dark:    #1a2e1e;
  --trg-text-mid:     #3d5a45;
  --trg-text-muted:   #7a9a82;
  --trg-white:        #ffffff;
  --trg-green-deep:   #1a3c2b;
  --trg-green-pale:   #d8f3dc;
  --trg-shadow-soft:  0 4px 24px rgba(26,60,43,0.10);
  --trg-shadow-card:  0 8px 32px rgba(26,60,43,0.13);
  --trg-shadow-lift:  0 16px 48px rgba(26,60,43,0.20);
  --trg-radius-lg:    22px;
  --trg-ease:         cubic-bezier(0.23, 1, 0.32, 1);
  --trg-transition:   all 0.36s var(--trg-ease);
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Section ── */
.trg-section { position:relative; padding:80px 0 90px; overflow:hidden; background:var(--trg-bg); font-family:'DM Sans',-apple-system,sans-serif; color:var(--trg-text-dark); }
.trg-bg-decor { position:absolute; inset:0; pointer-events:none; z-index:0; }
.trg-decor-leaf { position:absolute; font-size:6rem; opacity:.045; line-height:1; user-select:none; }
.trg-decor-leaf--1 { top:5%;  left:-2%;  transform:rotate(-20deg); }
.trg-decor-leaf--2 { top:40%; right:-1%; transform:rotate(15deg); font-size:8rem; }
.trg-decor-leaf--3 { bottom:8%; left:3%; transform:rotate(10deg); font-size:5rem; }
.trg-container { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 24px; }

/* ── Header ── */
.trg-header { text-align:center; margin-bottom:52px; }
.trg-label { display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--trg-accent-light); background:rgba(64,145,108,.10); border:1px solid rgba(64,145,108,.25); padding:5px 14px; border-radius:100px; margin-bottom:18px; }
.trg-title { font-family:'Playfair Display',Georgia,serif; font-size:clamp(2rem,4.5vw,3.2rem); font-weight:700; color:var(--trg-green-deep); line-height:1.2; margin-bottom:16px; }
.trg-title em { font-style:italic; color:var(--trg-accent-light); }
.trg-desc { max-width:580px; margin:0 auto; font-size:1rem; color:var(--trg-text-mid); line-height:1.7; font-weight:300; }

/* ── Tabs ── */
.trg-tabs { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.trg-tab-btn { display:flex; align-items:center; gap:7px; padding:10px 20px; border:1.5px solid rgba(45,106,79,.22); border-radius:100px; background:var(--trg-white); color:var(--trg-text-mid); font-family:inherit; font-size:.88rem; font-weight:500; cursor:pointer; transition:var(--trg-transition); box-shadow:0 2px 8px rgba(26,60,43,.06); }
.trg-tab-btn:hover { background:var(--trg-green-pale); border-color:var(--trg-accent-light); color:var(--trg-green-deep); transform:translateY(-1px); box-shadow:var(--trg-shadow-soft); }
.trg-tab-btn--active { background:var(--trg-accent); border-color:var(--trg-accent); color:var(--trg-white); box-shadow:0 6px 20px rgba(45,106,79,.35); transform:translateY(-2px); }
.trg-tab-icon { font-size:1rem; line-height:1; }
.trg-tab-count { font-size:.72rem; font-weight:700; background:rgba(255,255,255,.22); padding:1px 7px; border-radius:100px; min-width:22px; text-align:center; }
.trg-tab-btn:not(.trg-tab-btn--active) .trg-tab-count { background:rgba(45,106,79,.10); color:var(--trg-accent); }

/* ── Animations ── */
@keyframes trgFadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes trgLbIn   { from{opacity:0;transform:scale(.93)}         to{opacity:1;transform:scale(1)} }

/* ── All View / Process Section ── */
.trg-all-view { display:flex; flex-direction:column; gap:0; }
.trg-process-section { display:flex; flex-direction:column; gap:0; animation:trgFadeUp .5s var(--trg-ease) both; }
.trg-process-section:nth-child(1) { animation-delay:0ms; }
.trg-process-section:nth-child(2) { animation-delay:80ms; }
.trg-process-section:nth-child(3) { animation-delay:160ms; }

/* ── Process Divider ── */
.trg-proc-divider { display:flex; align-items:center; gap:16px; padding:4px 0 20px; }
.trg-proc-line { flex:1; height:1.5px; border-radius:2px; }
.trg-proc-divider--budidaya    .trg-proc-line { background:linear-gradient(90deg,transparent,rgba(64,145,108,.30)); }
.trg-proc-divider--budidaya    .trg-proc-line:first-child { background:linear-gradient(270deg,transparent,rgba(64,145,108,.30)); }
.trg-proc-divider--tanam_panen .trg-proc-line { background:linear-gradient(90deg,transparent,rgba(116,198,157,.38)); }
.trg-proc-divider--tanam_panen .trg-proc-line:first-child { background:linear-gradient(270deg,transparent,rgba(116,198,157,.38)); }
.trg-proc-divider--pasca_panen .trg-proc-line { background:linear-gradient(90deg,transparent,rgba(139,98,69,.30)); }
.trg-proc-divider--pasca_panen .trg-proc-line:first-child { background:linear-gradient(270deg,transparent,rgba(139,98,69,.30)); }

.trg-proc-pill { display:flex; align-items:center; gap:12px; padding:12px 22px; border-radius:100px; border:1.5px solid; background:var(--trg-white); box-shadow:0 3px 14px rgba(26,60,43,.09); white-space:nowrap; flex-shrink:0; }
.trg-proc-divider--budidaya    .trg-proc-pill { border-color:rgba(64,145,108,.28); }
.trg-proc-divider--tanam_panen .trg-proc-pill { border-color:rgba(116,198,157,.35); }
.trg-proc-divider--pasca_panen .trg-proc-pill { border-color:rgba(139,98,69,.28); }

.trg-proc-step { font-family:'Playfair Display',serif; font-size:.7rem; font-weight:700; letter-spacing:.12em; padding:2px 9px; border-radius:100px; }
.trg-proc-divider--budidaya    .trg-proc-step { background:rgba(64,145,108,.13);  color:var(--trg-accent); }
.trg-proc-divider--tanam_panen .trg-proc-step { background:rgba(116,198,157,.18); color:var(--trg-green-deep); }
.trg-proc-divider--pasca_panen .trg-proc-step { background:rgba(139,98,69,.12);   color:var(--trg-brown); }

.trg-proc-icon { font-size:1.2rem; line-height:1; }
.trg-proc-label { display:flex; flex-direction:column; gap:1px; }
.trg-proc-label strong { font-size:.92rem; font-weight:700; color:var(--trg-text-dark); }
.trg-proc-label span   { font-size:.72rem; color:var(--trg-text-muted); font-weight:400; }

/* ── Grids ── */
.trg-process-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:270px; gap:16px; }
.trg-gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:280px; gap:18px; }

/* ── Connector ── */
.trg-connector { display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 0; }
.trg-conn-line-wrap { display:flex; flex-direction:column; align-items:center; }
.trg-conn-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.trg-conn-dot--top { margin-bottom:-1px; }
.trg-conn-dot--btm { margin-top:-1px; }
.trg-dot--budidaya { background:var(--trg-accent); box-shadow:0 0 0 3px rgba(45,106,79,.18); }
.trg-dot--tanam    { background:var(--trg-accent-pale); box-shadow:0 0 0 3px rgba(116,198,157,.22); }
.trg-dot--pasca    { background:var(--trg-brown); box-shadow:0 0 0 3px rgba(139,98,69,.18); }
.trg-conn-line { width:1.5px; height:48px; background:linear-gradient(to bottom,rgba(45,106,79,.25),rgba(116,198,157,.25)); }
.trg-conn-text { font-size:.76rem; color:var(--trg-text-muted); font-weight:400; }
.trg-conn-text em { font-style:normal; color:var(--trg-accent-light); font-weight:600; }

/* ── End Badge ── */
.trg-proc-end { display:flex; align-items:center; gap:14px; justify-content:center; margin-top:28px; padding:16px 28px; background:linear-gradient(135deg,rgba(64,145,108,.08),rgba(116,198,157,.06)); border:1.5px solid rgba(64,145,108,.20); border-radius:var(--trg-radius-lg); animation:trgFadeUp .5s var(--trg-ease) .3s both; }
.trg-proc-end-icon { width:36px; height:36px; border-radius:50%; background:var(--trg-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; flex-shrink:0; }
.trg-proc-end-text { display:flex; flex-direction:column; gap:2px; }
.trg-proc-end-text strong { font-size:.92rem; color:var(--trg-green-deep); font-weight:700; }
.trg-proc-end-text span   { font-size:.75rem; color:var(--trg-text-muted); }

/* ── Cards ── */
.trg-card { position:relative; border-radius:var(--trg-radius-lg); overflow:hidden; background:var(--trg-white); box-shadow:var(--trg-shadow-card); cursor:pointer; transition:var(--trg-transition); animation:trgFadeUp .45s var(--trg-ease) both; }
.trg-card:hover { transform:translateY(-5px) scale(1.01); box-shadow:var(--trg-shadow-lift); }
.trg-card-img-wrap { position:absolute; inset:0; overflow:hidden; }
.trg-card-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--trg-ease); display:block; }
.trg-card:hover .trg-card-img-wrap img { transform:scale(1.06); }
.trg-card-img-wrap::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top,rgba(10,28,16,.80) 0%,rgba(10,28,16,.15) 50%,transparent 100%); }
.trg-card-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:3rem; background:var(--trg-green-pale); color:var(--trg-accent); opacity:.5; }
.trg-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,30,18,.88) 0%,rgba(10,30,18,.35) 50%,rgba(10,30,18,.04) 100%); display:flex; align-items:flex-start; justify-content:flex-end; padding:14px; opacity:0; transition:var(--trg-transition); }
.trg-card:hover .trg-card-overlay,.trg-card:focus-within .trg-card-overlay { opacity:1; }
.trg-card-zoom-btn { width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); background:rgba(255,255,255,.15); backdrop-filter:blur(8px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--trg-transition); }
.trg-card-zoom-btn:hover { background:var(--trg-white); color:var(--trg-green-deep); }
.trg-card-badge { position:absolute; top:14px; left:14px; z-index:2; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:100px; backdrop-filter:blur(10px); }
.trg-card-badge--budidaya    { background:rgba(64,145,108,.85);  color:#fff; }
.trg-card-badge--tanam-panen { background:rgba(116,198,157,.90); color:var(--trg-green-deep); }
.trg-card-badge--pasca-panen { background:rgba(139,98,69,.85);   color:#fff; }
.trg-card-info { position:absolute; bottom:0; left:0; right:0; z-index:2; padding:20px 18px 18px; color:#fff; transform:translateY(6px); transition:var(--trg-transition); }
.trg-card:hover .trg-card-info { transform:translateY(0); }
.trg-card-title { font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:600; margin-bottom:5px; line-height:1.3; }
.trg-card-desc { font-size:.78rem; color:rgba(255,255,255,.82); line-height:1.5; margin-bottom:8px; max-height:0; overflow:hidden; opacity:0; transition:max-height .4s ease,opacity .35s ease; }
.trg-card:hover .trg-card-desc { max-height:60px; opacity:1; }
.trg-card-meta { display:flex; gap:12px; font-size:.70rem; color:rgba(255,255,255,.65); opacity:0; transform:translateY(4px); transition:opacity .3s ease .05s,transform .3s ease .05s; }
.trg-card:hover .trg-card-meta { opacity:1; transform:translateY(0); }

/* ── Empty ── */
.trg-empty { text-align:center; padding:60px 24px; color:var(--trg-text-muted); }
.trg-empty-icon { font-size:2.5rem; display:block; margin-bottom:12px; }

/* ── Stats ── */
.trg-stats { display:flex; justify-content:center; align-items:center; margin-top:52px; background:var(--trg-white); border-radius:var(--trg-radius-lg); box-shadow:var(--trg-shadow-soft); padding:28px 32px; flex-wrap:wrap; }
.trg-stat-item { display:flex; flex-direction:column; align-items:center; padding:0 32px; min-width:120px; }
.trg-stat-num   { font-family:'Playfair Display',serif; font-size:2.1rem; font-weight:700; color:var(--trg-accent); line-height:1.1; }
.trg-stat-label { font-size:.76rem; color:var(--trg-text-muted); margin-top:4px; text-align:center; font-weight:500; }
.trg-stat-divider { width:1px; height:42px; background:var(--trg-green-pale); }

/* ── Lightbox ── */
.trg-lightbox-backdrop { display:none; position:fixed; inset:0; background:rgba(8,20,12,.88); backdrop-filter:blur(6px); z-index:99900; }
.trg-lightbox-backdrop--active { display:block; }
.trg-lightbox { display:none; position:fixed; inset:0; z-index:99901; align-items:center; justify-content:center; padding:20px; }
.trg-lightbox--active { display:flex; }
.trg-lightbox-inner { background:var(--trg-white); border-radius:var(--trg-radius-lg); overflow:hidden; max-width:820px; width:100%; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 32px 80px rgba(0,0,0,.45); animation:trgLbIn .3s var(--trg-ease); }
.trg-lightbox-img-wrap { flex:1; min-height:0; overflow:hidden; max-height:60vh; }
.trg-lightbox-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.trg-lightbox-caption { padding:22px 28px 24px; }
.trg-lightbox-badge { font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border-radius:100px; display:inline-block; margin-bottom:10px; }
.trg-lightbox-badge--budidaya    { background:rgba(64,145,108,.13);  color:var(--trg-accent); }
.trg-lightbox-badge--tanam-panen { background:rgba(116,198,157,.18); color:var(--trg-green-deep); }
.trg-lightbox-badge--pasca-panen { background:rgba(139,98,69,.12);   color:var(--trg-brown); }
.trg-lightbox-caption h3 { font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--trg-green-deep); margin-bottom:7px; }
.trg-lightbox-caption p  { font-size:.88rem; color:var(--trg-text-mid); line-height:1.6; margin-bottom:10px; }
.trg-lightbox-meta { font-size:.76rem; color:var(--trg-text-muted); display:flex; gap:16px; }
.trg-lightbox-close { position:fixed; top:20px; right:24px; z-index:99902; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.25); color:#fff; font-size:1.2rem; width:40px; height:40px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--trg-transition); backdrop-filter:blur(8px); }
.trg-lightbox-close:hover { background:rgba(255,255,255,.25); }
.trg-lightbox-nav { position:fixed; top:50%; transform:translateY(-50%); z-index:99902; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.2); color:#fff; font-size:2rem; width:48px; height:48px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--trg-transition); backdrop-filter:blur(8px); }
.trg-lightbox-nav:hover { background:rgba(255,255,255,.25); }
.trg-lightbox-nav--prev { left:16px; }
.trg-lightbox-nav--next { right:16px; }
.trg-lightbox-counter { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.65); font-size:.8rem; letter-spacing:.1em; z-index:99902; }

/* ── Responsive ── */
@media (max-width:900px) {
  .trg-process-grid,.trg-gallery-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:240px; }
  .trg-stat-item { padding:0 18px; }
  .trg-stat-num  { font-size:1.7rem; }
}
@media (max-width:640px) {
  .trg-section  { padding:48px 0 56px; }
  .trg-header   { margin-bottom:32px; }
  .trg-tabs     { gap:8px; }
  .trg-tab-btn  { padding:8px 14px; font-size:.82rem; }
  .trg-process-grid,.trg-gallery-grid { grid-template-columns:1fr; grid-auto-rows:210px; gap:12px; }
  .trg-proc-label span { display:none; }
  .trg-proc-pill { padding:10px 16px; gap:9px; }
  .trg-proc-label strong { font-size:.84rem; }
  .trg-card-desc  { max-height:60px; opacity:1; }
  .trg-card-meta  { opacity:1; transform:translateY(0); }
  .trg-card-overlay { opacity:1; }
  .trg-card:hover { transform:none; }
  .trg-stats { padding:20px 16px; flex-wrap:wrap; gap:16px 0; }
  .trg-stat-item { min-width:40%; padding:8px 16px; }
  .trg-stat-divider { display:none; }
  .trg-lightbox-nav { display:none; }
  .trg-lightbox-img-wrap { max-height:42vh; }
  .trg-lightbox-caption  { padding:16px 18px 20px; }
  .trg-lightbox-caption h3 { font-size:1.05rem; }
  .trg-conn-line  { height:32px; }
  .trg-proc-end   { padding:13px 18px; }
}
@media (max-width:380px) {
  .trg-tab-count { display:none; }
  .trg-tab-text  { font-size:.78rem; }
}

/* ── Z-Index Fix for Divi Header ── */
header .et_builder_inner_content {
  z-index: 2;
}
body.trg-lb-open header .et_builder_inner_content {
  z-index: 1 !important;
}