/* FloraVerse editorial design system — "Editorial World + Functional UI"
   Layer di atas style.css/responsive.css. Khusus komposisi, hierarki, rhythm.
   Card tetap untuk objek (katalog/post/task); section informasi jadi editorial. */

:root{
  --ed-ink:#15281d;
  --ed-muted:#5d6b61;
  --ed-line:#e2e9e1;
  --ed-accent:#4e8a54;
  --ed-paper:#f4f9f2;
}

/* ===== TYPOGRAPHY ===== */
.ed-eyebrow{
  display:flex; align-items:center; gap:.65rem;
  font-size:.72rem; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ed-accent);
}
.ed-eyebrow::after{content:""; height:1px; width:2.4rem; background:var(--ed-accent); opacity:.5}
.ed-title{
  font-family:'Nunito','Outfit',sans-serif;
  font-weight:800; font-size:clamp(1.9rem,3.6vw,3rem);
  line-height:1.06; letter-spacing:-.032em; color:var(--ed-ink);
  margin:.75rem 0 0; text-wrap:balance;
}
.ed-title--sm{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.ed-lead{margin:.9rem 0 0; font-size:1.02rem; line-height:1.65; color:var(--ed-muted); max-width:36rem}
.ed-desc{font-size:.92rem; line-height:1.6; color:var(--ed-muted)}
.ed-meta{font-size:.8rem; font-weight:600; color:var(--ed-muted); letter-spacing:.02em}
.ed-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; font-size:.92rem; color:var(--ed-accent);
  text-decoration:none; transition:gap .2s ease;
}
.ed-link:hover{gap:.65rem; color:#3f7a4a}

/* ===== SECTION RHYTHM ===== */
.ed-section{padding:clamp(3rem,6vw,5.5rem) 0}
.ed-section--tight{padding:clamp(2rem,4vw,3.25rem) 0}
.ed-rule{border:0; border-top:1px solid var(--ed-line); margin:0}
.ed-head{max-width:44rem}
.ed-head .ed-title{margin-top:.7rem}

/* ===== SPLIT / ASYMMETRIC ===== */
.ed-split{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}
.ed-split > .ed-copy{grid-column:1 / span 5}
.ed-split > .ed-media{grid-column:6 / -1}
.ed-split--flip > .ed-copy{grid-column:8 / -1}
.ed-split--flip > .ed-media{grid-column:1 / span 6; grid-row:1}
.ed-media{
  position:relative; overflow:hidden; border-radius:18px;
  aspect-ratio:16/10; background:#dfe9dd;
}
.ed-media img,.ed-media video{width:100%; height:100%; object-fit:cover; display:block}
.ed-num{
  font-family:'Nunito',sans-serif; font-weight:800;
  font-size:clamp(2.6rem,5vw,4rem); line-height:1;
  color:var(--ed-ink); opacity:.1; letter-spacing:-.04em;
  margin-bottom:.5rem; user-select:none;
}

/* ===== EDITORIAL LIST ROWS (bukan kartu) ===== */
.ed-rows{list-style:none; margin:1.1rem 0 0; padding:0}
.ed-rows li{
  display:grid; grid-template-columns:2.2rem 1fr; gap:1rem;
  padding:.95rem 0; border-top:1px solid var(--ed-line);
  align-items:baseline;
}
.ed-rows li:last-child{border-bottom:1px solid var(--ed-line)}
.ed-rows .n{
  font-size:.78rem; font-weight:800; letter-spacing:.06em;
  color:var(--ed-accent);
}
.ed-rows .t{font-weight:700; color:var(--ed-ink); font-size:.98rem}
.ed-rows .d{grid-column:2; font-size:.86rem; color:var(--ed-muted); margin-top:.15rem}

/* ===== TOOLBAR (pengganti card filter) ===== */
.ed-toolbar{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.75rem 1rem; padding:1rem 0;
  border-top:1px solid var(--ed-line);
  border-bottom:1px solid var(--ed-line);
}
.ed-toolbar input[type="search"],.ed-toolbar input[type="text"]{
  min-width:14rem; flex:1 1 16rem;
}
.ed-toolbar .ed-count{margin-left:auto; font-size:.85rem; font-weight:700; color:var(--ed-muted); white-space:nowrap}

/* ===== HERO (inner page) — de-card, immersive ===== */
.ed-hero{border:none !important; box-shadow:none !important; border-radius:22px}
/* Flex heroes stretch the pill into a full-width bar; keep it hugging its label. */
.ed-hero .pill{align-self:flex-start; max-width:100%}
.ed-hero h1{
  font-size:clamp(2rem,4.2vw,3.35rem) !important;
  line-height:1.05 !important; letter-spacing:-.03em !important;
  font-weight:800 !important;
}
.ed-hero .ed-hero-meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.1rem;
  align-items:center; margin-top:1rem;
  font-size:.8rem; font-weight:700; color:rgba(255,255,255,.85);
}
.ed-widget{
  padding:1.15rem 0; border-top:1px solid var(--ed-line);
}
.ed-widget:first-child{border-top:0; padding-top:0}
.ed-widget h3,.ed-widget .h{
  font-family:'Nunito',sans-serif; font-weight:800;
  font-size:.95rem; color:var(--ed-ink); margin:0 0 .6rem;
}
/* Sidebar komunitas: tiap widget jadi kartu mandiri (sidebar sudah sticky) */
.community-sidebar .ed-widget{
  background:#fff;
  border:1px solid var(--ed-line);
  border-radius:16px;
  padding:1.15rem;
  box-shadow:0 4px 14px rgba(20,38,28,.05);
}
/* Tanpa scrollbar terlihat — isi sidebar hanya bergeser saat diinteraksi sendiri */
.community-sidebar{scrollbar-width:none}
.community-sidebar::-webkit-scrollbar{width:0; height:0; display:none}

/* ===== CLOSING STRIP ===== */
.ed-closing{
  background:var(--ed-paper); border:1px solid var(--ed-line);
  border-radius:20px; padding:clamp(1.6rem,4vw,2.75rem);
}

/* ===== PLANT LAB sebagai aksi pada tanaman, bukan banner ===== */
/* Pill "Eksperimen" di kartu katalog — muncul saat hover, tidak menambah tombol statis. */
.card-lab{
  position:absolute; right:12px; bottom:12px;
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:999px;
  background:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:11px; font-weight:800; color:#252525; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.card-lab svg{width:13px; height:13px}
@media (hover:hover){
  #plantsGrid .fv-card:hover .card-lab,
  #plantsGrid .card-lab:focus-visible{opacity:1; visibility:visible; transform:none}
}
#plantsGrid .card-lab:hover{background:#FFD45C; border-color:#FFD45C}

/* Baris undangan di detail tanaman — datar, menempel pada kartu data kondisi. */
.lab-inline{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .75rem;
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--ed-line);
  font-size:.9rem; line-height:1.55; color:var(--ed-muted);
}
.lab-inline > svg{width:16px; height:16px; flex:0 0 auto; color:var(--ed-accent); transform:translateY(2px)}
.lab-inline span{flex:1 1 18rem}
.lab-inline b{color:var(--ed-ink)}
.lab-inline-cta{
  display:inline-flex; align-items:center; gap:.3rem; cursor:pointer;
  font-weight:800; font-size:.87rem; color:#252525;
  background:#FFD45C; border-radius:999px; padding:.5rem .95rem; min-height:44px;
}
.lab-inline-cta svg{width:14px; height:14px}
.lab-inline-cta:hover{filter:brightness(.96)}

/* ===== FEED (community) — subtle container ===== */
#feedList .fv-card{
  box-shadow:none !important;
  border:1px solid var(--ed-line) !important;
  border-radius:14px !important;
  background:#fff;
}
#feedList .fv-card:hover{box-shadow:none !important; transform:none !important}

/* ===== SECTION-LABEL di atas grid katalog ===== */
.ed-gridlabel{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin:2.25rem 0 .9rem;
}
.ed-gridlabel h2{
  font-family:'Nunito',sans-serif; font-weight:800;
  font-size:1.15rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ed-ink); margin:0;
}

/* ===== GARDEN: journey = fokus, sidebar = flat ===== */
.garden-side .fv-card{box-shadow:none !important; border-color:var(--ed-line) !important}
.garden-main.fv-card,.garden-main .fv-card{border-color:var(--ed-line) !important; box-shadow:0 10px 34px rgba(21,40,29,.07) !important}

/* ===== RESPONSIVE ===== */
@media (max-width:1023px){
  .ed-split{grid-template-columns:1fr; gap:1.4rem}
  .ed-split > .ed-copy,.ed-split > .ed-media,
  .ed-split--flip > .ed-copy,.ed-split--flip > .ed-media{grid-column:1 / -1; grid-row:auto}
}
@media (max-width:767px){

  /* Hero: same content, less chrome before the page body. */
  .ed-hero > div.relative.z-10{padding:18px 16px}
  .ed-hero h1{font-size:clamp(1.65rem,7.2vw,2.15rem) !important; line-height:1.08 !important}
  .ed-hero h1 + p{
    font-size:.9rem; line-height:1.5; margin-top:.6rem; max-width:none;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .ed-hero .ed-hero-meta{margin-top:.7rem; gap:.45rem .9rem; font-size:.76rem}
  .ed-hero .btn{padding:9px 14px; font-size:.85rem}
  /* CTA stays, decorative meta rows drop out (pill already carries the count). */
  .ed-hero .ed-hero-meta > span{display:none}
  .ed-hero .ed-hero-meta:not(:has(> *:not(span))){display:none}

  /* Toolbar: search owns its row, filters share one tight row, count drops below. */
  .ed-toolbar{padding:.55rem 0; gap:.45rem .5rem}
  .ed-toolbar > input[type="search"],
  .ed-toolbar > div:has(> input[type="search"]){flex:1 1 100%; min-width:0; max-width:100%}
  .ed-toolbar select{min-width:0; padding:.4rem .45rem; font-size:.78rem !important; flex:0 1 auto}
  .ed-toolbar .fv-select{flex:0 1 auto; padding:0 !important; border:0 !important}
  .ed-toolbar .fv-select-btn{padding:.35rem .55rem; font-size:.76rem; gap:.3rem; border-radius:999px}
  .ed-toolbar .fv-select-chevron svg{width:14px; height:14px}
  .ed-toolbar > div:not(:has(> input)):not(.fv-select){flex:1 1 auto; justify-content:flex-end; gap:.4rem}
  .ed-toolbar .ed-count{flex:1 1 100%; margin-left:0; font-size:.7rem; line-height:1.3; white-space:normal}

  /* Section rhythm: same order, tighter breath on a short screen. */
  .ed-title{margin-top:.6rem}
  .ed-lead{font-size:.93rem; line-height:1.55; margin-top:.7rem}
  .ed-section{padding:2.5rem 0}
  .ed-section--tight{padding:1.5rem 0}
  .ed-gridlabel{margin:.9rem 0 .5rem; gap:.5rem}
  .ed-gridlabel h2{font-size:.95rem}
  .ed-split{gap:1.15rem}
  .ed-media{aspect-ratio:16/9}
  .ed-closing{padding:1.25rem}
  .ed-rows li{padding:.8rem 0; gap:.8rem}
  .ed-rows .t{font-size:.94rem}
  .ed-rows .d{font-size:.82rem}
  .ed-widget{padding:.9rem 0}
  .ed-link{min-height:40px}

  /* Section heads: title + two lines, then straight to the content. */
  .ed-head .ed-eyebrow{display:none}
  .ed-head .ed-title{margin-top:0}
  .ed-head .ed-lead{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    font-size:.9rem; line-height:1.5; margin-top:.55rem;
  }

  /* Community: composer tighter so the first post lands inside the fold. */
  .community-main > div > .fv-card{padding:10px 12px}
  .community-main #feedList{margin-top:12px}

  /* Plant Lab: baris undangan di modal tetap ringkas. */
  .lab-inline{font-size:.82rem; gap:.4rem .6rem; margin-top:.8rem; padding-top:.7rem}
  .lab-inline-cta{font-size:.8rem; padding:.5rem .8rem; min-height:44px}
}