/* =========================================================
   Grove — shared by trees.html, tree.html and adopt.html
   Uses only design-system tokens from style.css.
   ========================================================= */

/* ---- Status colours, one definition reused by badges, cards, counts ---- */
:root{
  --st-available-bg:var(--leaf-soft);
  --st-available-fg:var(--olive-800);
  --st-withheld-bg:var(--mango-100);
  --st-withheld-fg:var(--mango-800);
  --st-adopted-bg:var(--cream-200);
  --st-adopted-fg:var(--ink-500);
}

/* =============== Counts strip =============== */
.grove-counts{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px;}
.grove-count{
  display:flex;align-items:baseline;gap:9px;
  padding:12px 20px;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.grove-count strong{font-family:var(--font-display);font-size:1.5rem;line-height:1;color:var(--olive-900);}
.grove-count span{font-size:.85rem;font-weight:600;color:var(--text-soft);}
.grove-count.is-available strong{color:var(--olive-600);}
.grove-count.is-withheld strong{color:var(--mango-700);}
.grove-count.is-adopted strong{color:var(--ink-300);}

/* =============== Filter bar =============== */
.grove-filters{
  display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:14px;align-items:end;
  background:var(--surface);padding:20px;border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);margin-bottom:32px;
}

/* These wrappers also carry .field, whose 18px bottom margin would lift the
   selects clear of the search input in an end-aligned grid. */
.grove-search,
.grove-field{margin-bottom:0;min-width:0;}

.grove-search label,
.grove-field label{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-soft);margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* One shared control height. A select's intrinsic height comes from the UA
   and does not match a text input's, so equal padding alone leaves them a
   few pixels apart — the explicit height is what actually lines them up. */
.grove-search input,
.grove-field select{
  width:100%;height:48px;padding:0 15px;
  border-radius:var(--r-sm);border:1.5px solid var(--cream-200);
  background:var(--cream-000);font-size:.95rem;color:var(--text);
}
.grove-search input:focus,
.grove-field select:focus{outline:none;border-color:var(--mango-500);box-shadow:var(--ring);}

/* The open dropdown list renders over the tree-card photos. Options
   inherit a transparent background by default, which left the text
   sitting unreadably on top of the imagery, so both the control and its
   options get an explicit opaque colour. */
.grove-field select{
  background-color:var(--cream-000);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234a5c22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:38px;
}
.grove-field select option{
  background-color:var(--white);
  color:var(--ink-900);
}

/* The bar itself sits above the grid so nothing shows through it. */
.grove-filters{position:relative;z-index:2;}
/* One fewer field when the status filter is locked (adopt.html). */
.grove-filters.is-compact{grid-template-columns:1.6fr repeat(2,1fr);}

@media (max-width:900px){
  .grove-filters,
  .grove-filters.is-compact{grid-template-columns:1fr 1fr;}
  .grove-search{grid-column:1 / -1;}
}
@media (max-width:520px){
  .grove-filters,
  .grove-filters.is-compact{grid-template-columns:1fr;}
}

/* =============== Grid =============== */
.grove-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:26px;
  min-height:200px;
}
.grove-loading,.grove-empty,.grove-error{
  grid-column:1 / -1;text-align:center;padding:56px 20px;color:var(--text-soft);
}
.grove-error{color:var(--clay);font-weight:600;}

/* =============== Tree card =============== */
.tree-card{
  background:var(--surface);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tree-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);}

/* Adopted trees stay readable but visibly recede from the available ones. */
.tree-card.is-adopted{opacity:.72;}
.tree-card.is-adopted:hover{opacity:1;}

.tree-card-media{position:relative;display:block;aspect-ratio:4 / 3;overflow:hidden;background:var(--cream-100);}
.tree-card-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease);}
.tree-card:hover .tree-card-media img{transform:scale(1.05);}
.tree-card.is-adopted .tree-card-media img{filter:grayscale(.45);}

.tree-badge{
  position:absolute;top:12px;left:12px;z-index:1;
  padding:7px 14px;border-radius:var(--r-pill);
  font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:var(--shadow-sm);
}
.tree-badge.is-available{background:var(--st-available-bg);color:var(--st-available-fg);}
.tree-badge.is-withheld{background:var(--st-withheld-bg);color:var(--st-withheld-fg);}
.tree-badge.is-adopted{background:var(--st-adopted-bg);color:var(--st-adopted-fg);}

.tree-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1;}
.tree-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.tree-card-head h3{font-size:1.18rem;line-height:1.2;}
.tree-code{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--ink-300);
  white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:4px;
}
.tree-named{
  background:var(--olive-100);color:var(--olive-700);
  padding:3px 9px;border-radius:var(--r-pill);letter-spacing:.04em;font-size:.66rem;
}

.tree-chips{display:flex;flex-wrap:wrap;gap:7px;}
.tree-chips .chip{
  background:var(--cream-100);color:var(--ink-700);
  padding:5px 12px;border-radius:var(--r-pill);font-size:.76rem;font-weight:600;
}
.tree-chips .chip.gold{background:var(--mango-100);color:var(--mango-800);}

/* The reserved explainer — the reason a visitor cannot adopt this one. */
.tree-note{
  font-size:.8rem;line-height:1.5;color:var(--mango-800);
  background:var(--mango-50);border-left:3px solid var(--mango-500);
  padding:10px 12px;border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.tree-card.is-adopted .tree-note{
  color:var(--ink-500);background:var(--cream-100);border-left-color:var(--ink-300);
}

.tree-card-foot{
  margin-top:auto;padding-top:6px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.tree-price{font-family:var(--font-display);font-weight:600;font-size:1.12rem;color:var(--olive-900);}
.tree-price small{font-size:.7rem;font-weight:600;color:var(--text-soft);margin-left:2px;}
.tree-unavailable{font-size:.82rem;font-weight:700;color:var(--text-soft);}

/* =============== Pager =============== */
.grove-pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:40px;flex-wrap:wrap;}
.grove-page-label{font-size:.9rem;font-weight:600;color:var(--text-soft);}
.grove-page-label small{color:var(--ink-300);font-weight:500;}

/* =========================================================
   Tree detail page
   ========================================================= */
.tree-detail{display:grid;grid-template-columns:1.15fr 1fr;gap:52px;align-items:start;}
@media (max-width:940px){.tree-detail{grid-template-columns:1fr;gap:34px;}}

.tree-gallery-main{
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);
  aspect-ratio:4 / 3;background:var(--cream-100);
}
.tree-gallery-main img{width:100%;height:100%;object-fit:cover;}
.tree-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;}
.tree-thumb{
  border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1;cursor:pointer;
  border:2.5px solid transparent;background:var(--cream-100);
  transition:border-color var(--dur-fast) var(--ease);
}
.tree-thumb img{width:100%;height:100%;object-fit:cover;}
.tree-thumb[aria-current="true"]{border-color:var(--mango-600);}

.tree-headline{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.tree-headline h1{font-size:clamp(2rem,3.4vw,2.9rem);margin-bottom:6px;}
.tree-ref{font-size:.85rem;font-weight:700;letter-spacing:.1em;color:var(--ink-300);text-transform:uppercase;}

.tree-status-panel{
  margin:24px 0;padding:22px 24px;border-radius:var(--r-md);
  border-left:5px solid var(--olive-500);background:var(--cream-100);
}
.tree-status-panel.is-available{border-left-color:var(--olive-600);background:var(--leaf-soft);}
.tree-status-panel.is-withheld{border-left-color:var(--mango-600);background:var(--mango-50);}
.tree-status-panel.is-adopted{border-left-color:var(--ink-300);background:var(--cream-100);}
.tree-status-panel h2{font-size:1.15rem;margin-bottom:8px;}
.tree-status-panel p{font-size:.94rem;color:var(--ink-700);}
.tree-status-panel .btn-row{margin-top:18px;}

.tree-specs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--cream-200);border-radius:var(--r-md);overflow:hidden;margin-top:8px;
}
.tree-spec{background:var(--surface);padding:16px 18px;}
.tree-spec dt{font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-soft);margin-bottom:5px;}
.tree-spec dd{font-size:1.02rem;font-weight:600;color:var(--olive-900);}
@media (max-width:520px){.tree-specs{grid-template-columns:1fr;}}

.tree-timeline{margin-top:16px;}
.tree-timeline .t-item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--hairline);}
.tree-timeline .t-item:last-child{border-bottom:none;}
.tree-timeline .t-when{font-size:.78rem;font-weight:700;color:var(--mango-700);white-space:nowrap;min-width:88px;}
.tree-timeline h4{font-size:1rem;margin-bottom:3px;}
.tree-timeline p{font-size:.9rem;color:var(--text-soft);}

/* =========================================================
   Adoption wizard
   ========================================================= */
.wizard-steps{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px;}
.wizard-step{
  display:flex;align-items:center;gap:10px;
  padding:11px 20px;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--shadow-sm);
  font-size:.88rem;font-weight:700;color:var(--text-soft);
}
.wizard-step span{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:var(--cream-200);color:var(--ink-500);
  display:flex;align-items:center;justify-content:center;font-size:.78rem;
}
.wizard-step[aria-current="step"]{background:var(--olive-800);color:var(--white);}
.wizard-step[aria-current="step"] span{background:var(--mango-500);color:var(--olive-900);}
.wizard-step.done{color:var(--olive-700);}
.wizard-step.done span{background:var(--olive-600);color:var(--white);}

.wizard-panel[hidden]{display:none;}

.chosen-tree{
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  background:var(--surface);border-radius:var(--r-md);padding:18px 20px;
  box-shadow:var(--shadow-sm);margin-bottom:28px;
}
.chosen-tree img{width:96px;height:96px;border-radius:var(--r-sm);object-fit:cover;flex-shrink:0;}
.chosen-tree-body{flex:1;min-width:200px;}
.chosen-tree-body h3{font-size:1.2rem;margin-bottom:4px;}
.chosen-tree-body p{font-size:.88rem;color:var(--text-soft);}

/* The optional-naming field: the hint carries as much weight as the label. */
.name-hint{
  font-size:.86rem;color:var(--text-soft);margin-top:7px;
  display:flex;align-items:flex-start;gap:7px;
}
.name-hint svg{flex-shrink:0;margin-top:2px;color:var(--olive-500);}

.adopt-summary{
  background:var(--cream-100);border-radius:var(--r-md);padding:22px 24px;margin-bottom:24px;
}
.adopt-summary dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:.92rem;}
.adopt-summary dt{font-weight:700;color:var(--text-soft);}
.adopt-summary dd{color:var(--olive-900);}
.adopt-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--cream-200);
}
.adopt-total strong{font-family:var(--font-display);font-size:1.6rem;color:var(--olive-900);}

/* .form-error and .field-error live in style.css — account.html needs
   them too and does not load this file. */

.adopt-done{text-align:center;padding:20px 0 10px;}
.adopt-done .icon-circle{margin:0 auto 20px;width:66px;height:66px;background:var(--leaf-soft);color:var(--olive-700);
  display:flex;align-items:center;justify-content:center;border-radius:50%;}
.adopt-done h2{margin-bottom:12px;}
.adopt-done .lead{margin:0 auto 26px;}